Spyd r

A fluid, adaptable Sass(.scss) grid-system

Simple Structure

Implementing the grid is very straightforward and requires just three components.

1) .grid – Serves as the parent container for the entire grid.

2) .grid__row – Helps set the vertical rhythym of layouts. This layer should always be placed within the .grid element.

3) .grid__col – Use columns to build and control the horizontal flow of layouts. Columns should always be placed within the .grid__row element, and all of the content you wish to align to the grid should be placed within columns.

								
									<div class="grid">

										<div class="grid__row">

											<div class="grid__col">

												...Your content goes here

											</div>

										</div>

									</div>

Fluid & Customizable

To offer a truly responsive grid system that can adapt to any device, layout, or individual settings(zoom), spyder is built using REMs(default base = 16px) instead of pixels. This, combined with css flex properties and percentage widths, allows for fluid resizing of the grid and the content it contains.

The entire grid is abstracted down to just a handfull of variables, all of which can be customized to suit your project's needs. To do so, simply dive into the _config.scss file located in the root spyder project folder.

Variable Default Value Description
$grid-width 100% Controls the grid's width
$grid-max-width 90rem (1440) Sets a maximum width for the grid. The grid will not expand past this point if set.
$grid-gutter .75rem (12) Sets the gutter for each column through padding. Keep in mind that gutters are present on both sides of columns, and when columns are placed next to each other the true grid gutter equals double this variable's value, which by default = 1.5rem (24).
$sm--max 48rem (768) Breakpoint value that caps off the sm grid-range. **Not necessary when using mobile-first development**
$md--min 48.0625rem (769) Breakpoint value that marks the beginning of the md grid-range.
$md--max 68.75rem (1100) Breakpoint value that marks the ending of the md grid-range.
$lg--min 68.8125rem (1101) Breakpoint value that marks the beginning of the lg grid-range.

Columns & Responsive Modifiers

Auto-columns .grid__col

Auto Columns are the most basic form of columns. Add the desired number of columns to a row, and the grid does the math for you.

NOTE: Auto Columns are fluid in width, but the only responsive behavior they exhibit is the ability to morph into vertically stacked, full-width columns at small device sizes. For the most layouts and designs, the use of responsive modifiers in conjunction with auto-columns is recommended.

You can explore the behavior of Auto Columns by adding/removing columns below.

.grid__col
.grid__col 
									
										<div class="grid__row">

											<div class="grid__col"></div>

											<div class="grid__col"></div>

											
										</div>

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.

.grid__col .md:col--1 .lg:col--1
.grid__col .md:col--1 .lg:col--1
.grid__col .md:col--1 .lg:col--1
.grid__col .md:col--1 .lg:col--1
.md:col--1 .lg:col--1
.md:col--1 .lg:col--1
.md:col--1 .lg:col--1
.md:col--1 .lg:col--1
.lg:col--1
.lg:col--1
.lg:col--1
.lg:col--1
.grid__col .md:col--2 .lg:col--2
.md:col--2 .lg:col--2
.md:col--2 .lg:col--2
.md:col--2 .lg:col--2
.lg:col--2
.lg:col--2
.grid__col .md:col--4 .lg:col--3
.md:col--4 .lg:col--3
.lg:col--3
.lg:col--3
.grid__col .md-col--8 .lg:col--4
.lg:col--4
.md:col--8 .lg:col--4
.lg:col--6
.lg:col--6
.lg:col--12
.grid__col .md:col--1 .lg:col--1
.md:col--7 .lg:col--11
.md:col--2 .lg:col--2
.md:col--6 .lg:col--10
.md:col--3 .lg:col--3
.md:col--5 .lg:col--9
.md:col--4 .lg:col--4
.md:col--4 .lg:col--8
.lg:col--5
.lg:col--7
.lg:col--6
.lg:col--6


To sync breakpoints and subsequent styles across your project, you can use spyder's grid-range mixin, given that you've imported spyder before any of your styles start referencing it. A simple example using this mixin in a mobile-first manner would look something like this:

									
										.my-element { 

											*styles*
											

											

											@include grid(md) {
											

											*styles*
											

											}

											

											@include grid(lg) {
											

											*styles*
											

											}

										}

If you're project is not mobile first, or you need to include specific styles at the sm grid-range, you can do so by using @include grid(sm).

Offsetting Columns

Another commonly used modifier for columns are 'offsets'. Offsetting columns can be useful when you need extra white-space between content, or when you want a column to start inward from the beginning of a row.

The modifier syntax for offsets is the same as columns, except for the change in modifier from 'col' to 'offset':[$range]:offset--[$val]. The value of an offset is equal to its column counterpart, so lg:offset--2 would move a column to the right by the width of 2 columns at the lg grid-range.

NOTE: There are no 'offset' modifiers for the grid(sm) grid-range due to .grid__col elements adapting to 100% full-width columns.

.grid__col .md:col--3 .md:offset--1 .lg:col--4
.grid__col .md:col--2 .md:offset--2 .lg:col--5 .lg:offset--2
.grid__col .md:col--2 .lg:col--3 lg:offset--2
.grid__col .md:col--3 .md:offset--3 .lg:col--2 .lg:offset--3 

									
										<div class="grid__row">

											<div class="grid__col md:col--3 md:offset--1 lg:col--4">

												content...

											</div>

											<div class="grid__col md:col--2 md:offset--2 lg:col--5 lg:offset--2">

												content...

											</div>

										</div> 

										<div class="grid__row">

											<div class="grid__col md:col--2 lg:col--3 lg:offset--2">

												content...

											</div>

											<div class="grid__col md:col--3 md:offset--3 lg:col--2 lg:offset--3">

												content...

											</div>

										</div>

Nested Grids

You can nest .grid__row elements inside columns to create a nested grid. If your layout requires nested grids, it is recommended to only nest 1 or 2 levels deep.

.grid__col .md:col--4 .lg:col--6
.grid__col (nested) .md:col--4 (nested) .lg:col--6 (nested)
.grid__col (nested) .md:col--4 (nested) .lg:col--6 (nested)
.grid__col .md:col--4 .lg:col--6 

									
										<div class="grid__row">

											<div class="grid__col md:col--4 lg:col--6">

												content...

												
													<div class="grid__row">

														<div class="grid__col md:col--4 lg:col--6">

															content...

														</div>

														<div class="grid__col md:col--4 lg:col--6">

															content...

														</div>

													</div>

												
											</div>

											<div class="grid__col md:col--4 lg:col--6">

												content...

											</div>

										</div>

Reordering

To reverse the order of entire rows, simply add the modifier [$range]:row-reverse to the desired .grid__row. The example below shows a row that has its order reversed at the grid(sm) and grid(lg) ranges while maintaining the original source order at the grid(md) range.

1st in source order
2nd in source order
3rd in source order
4th in source order 

									
										<div class="grid__row sm:row-reverse lg:row-reverse">

											<div class="grid__col md:col--2 lg:col--3">

												1st in source order

											</div>

											<div class="grid__col md:col--2 lg:col--3">

												2nd in source order

											</div>

											<div class="grid__col md:col--2 lg:col--3">

												3rd in source order

											</div>

											<div class="grid__col md:col--2 lg:col--3">

												4th in source order

											</div>

										</div>

Adjusting Alignment

There are two methods for adjusting the alignment of columns:

  • 1) Aligning all columns in a row
  • 2) Aligning indiviudal columns

Aligning Entire Rows [$range]:row-align--[$val]

To align an entire row of columns, use the align modifier on the desired .grid__row element. By default, columns are aligned to the top of a row.



Top: [$range]:row-align--top

A column with a little bit of content.
This column has quite a bit more content than the other columns.

In fact, this columns has multiple blocks of content, making for one long column.

One more sentence for good measure.
A column with a little bit of content.


Center: [$range]:row-align--center

A column with a little bit of content.
This column has quite a bit more content than the other columns.

In fact, this columns has multiple blocks of content, making for one long column.

One more sentence for good measure.
A column with a little bit of content.


Bottom: [$range]:row-align--bottom

A column with a little bit of content.
This column has quite a bit more content than the other columns.

In fact, this columns has multiple blocks of content, making for one long column.

One more sentence for good measure.
A column with a little bit of content. 

									
										<div class="grid__row md:row-align--top lg:row-align--top">

											<div class="grid__col md:col--2 lg:col--4">...</div>

											<div class="grid__col md:col--4 lg:col--4">...</div>

											<div class="grid__col md:col--2 lg:col--4">...</div>

										</div>


										<div class="grid__row md:row-align--center lg:row-align--center">

											<div class="grid__col md:col--2 lg:col--4">...</div>

											<div class="grid__col md:col--4 lg:col--4">...</div>

											<div class="grid__col md:col--2 lg:col--4">...</div>

										</div>


										<div class="grid__row md:row-align--bottom lg:row-align--bottom">

											<div class="grid__col md:col--2 lg:col--4">...</div>

											<div class="grid__col md:col--4 lg:col--4">...</div>

											<div class="grid__col md:col--2 lg:col--4">...</div>

										</div>

Aligning Individual Columns [$range]:col-align--[$val]

To adjust alignment of indiviudal columns, use the col-align modifier on the desired .grid__col element. By default, columns are aligned to the top of a row.

.md:col-align--top (Default) .lg:col-align--top (Default)
.md:col-align--center .lg:col-align--center
This column has quite a bit more content than the other columns.

In fact, this columns has multiple blocks of content, making for one long column.

One more sentence for good measure.
.md:col-align--bottom .lg:col-align--bottom 

									
										<div class="grid__row">

											<div class="grid__col md:col--2 md:col-align--top lg:col--3 lg:col-align--top">...</div>

											<div class="grid__col md:col--4 md:col-align--center lg:col--3 lg:col-align--center">...</div>

											<div class="grid__col md:col--4 lg:col--3">...</div>

											<div class="grid__col md:col--2 md:col-align--bottom lg:col--3 lg:col-align--bottom">...</div>

										</div>