Responsive Modifiers [$range]:[$modifier]--[$val]
The responsive power and control that spyder offers is achieved through the use responsive modifiers—most commonly used in conjunction with columns. The syntax is slightly more verbose and will always contain at least 2 values—$range:$modifier—with a potential 3rd value when necessary.
Syntax Component |
Description |
$range |
Specified grid range at which the modifier will be applied |
$modifier |
The component to be modified or applied |
$val |
Desired value for the modifiers that require a defined value |
NOTE: In the example below, you'll notice that the md:col and lg:col are written in two slightly different ways. You can append the '_$total' to the end of the modifier if you prefer. Spyder accepts either syntax—the longhand way just offers an easy reminder of how many total columns are allowed in each range.
<div class="grid__row">
<div class="grid__col md:col--2 lg:col--3_12">
...column 1 content
</div>
<div class="grid__col md:col--2_8 lg:col--3">
...column 2 content
</div>
</div>
Responsive modifiers work due to spyder's grid-range mixin, which generates basic media-query breakpoints. Combined breakpoints form 'grid-ranges', with each range allowing up to a certain amount of grid columns:
Grid-range |
Breakpoint |
Columns |
grid(sm) |
48rem (768) |
100% full-width columns |
grid(md) |
48.0625rem+ (769+) |
8 columns |
grid(lg) |
68.8125rem+ (1101+) |
12 columns |
NOTE: Columns will wrap to the next line if the sum of the columns in a row exceed that grid range's max column count.
Resize your browser window (if on desktop) to see the different grid ranges take effect below. If you're on a tablet or mobile device, you'll automatically see the corresponding grid range to your device's size.