Unlike most other grid systems Singularity supports non-uniform column widths. Because of this the location of the initial column is just as important as how many columns an element spans. There is a built in counter to help keep track of this for you but location of columns is something to keep in mind.
SETTING UP COLUMNS
There are two ways to set up columns, with a single value that creates equal column widths or a list that creates asymmetric grids.
12 equal columns:
$columns: 12;6 columns where the second column is twice the first, the third column is three times the first, and so on:
$columns: 1, 2, 3, 1, 2, 3;As long as the values are consistent, you can use any value here like pixels, ems and percents. Note that gutters are subtracted from columns so regardless of the gutter width so $column: 100px, 100px; will always be a context of 200px.
Compound grids are two uniform column grids that overlap and create more complex non-uniform grids. Using the function compound() you can list different uniform grids (up to 6) to compound. note compounding more than two grids may be buggy at the moment.
A compound of a 3 and 4 column grid:
$columns: compound(3, 4);If a portion of your grid repeats, you can use the repeat function to easily create patterns. Below the pattern 3, 2, 1 will repeat three times.
$columns: repeat(3, (3, 2, 1));GUTTERS
Gutters are the space between columns and always a percent.
2% gutters:
$gutter: 2%;PADDING
You may have a column with text that you don’t want touching the edge. You can pad the contents of your column by adding padding. This can be written in any unit of measurement.
padding of 1em:
$padding: 1em;Padding, like columns, can change depending on location. You can set padding overrides within the $column list.
3 equal columns with 12px of padding on the center column:
$columns: 1, 1 12px, 1;Functions and mixins
GRID FUNCTION
The grid function can be used anywhere like borders, padding, margins, or anywhere you might need a grid-based value.
grid-span($span, $location, $columns, $gutter)GRID MIXIN
Like the grid function only this writes preset styles to any element. It writes the width, float, margin, and padding.
@include grid-span($span, $location, $columns, $gutter, $padding);If no location is set this mixin will count through the columns for you. So if you have a 9 column grid and three mixins spanning 3 columns, the mixin will know what columns you are as well as know you reached the end of a row.
GUTTER CONTEXT
If you are nesting grids you may want a consistent gutter width. You can easily calculate gutters for the context by writing the gutter width you want followed by its context, like a context of grid-span(3, 3).
gutter-context($gutter, $context)WRITING GRID OBJECTS
You may prefer using extends or working with classes. You can write every location on the grid using this mixin:
@include grid-objects($prefix, $columns, $gutter, $padding, $selector);By default, this writes placeholder selectors that do not show up in your CSS file. You can always write $selector: “.” in the mixin to write classes instead.
The prefix is a name or letter associated with the grid. You can write the mixin within a media query and name the prefix after your breakpoint.
VISUALIZING YOUR GRID
Visualizing grids can be one of the more difficult parts of using grid systems. Singularity has two mixins built in to help you with this.
The quickest way to visualize your grid is to write it to the background of your element. Add this to any element and guide lines will be drawn to the background.
@include background-grid($columns, $gutter, $color);However, gradients might not be the most accurate. They do not show the padding or use real elements. The test-grid mixin is a standalone mixin that writes styles that are applied to a set chunk of HTML.
HTML:
<div class="test-grid">
<div class="test a1"><div class="inner"></div></div>
<div class="test a2"><div class="inner"></div></div>
<div class="test a3"><div class="inner"></div></div>
<div class="test a4"><div class="inner"></div></div>
<div class="test a5"><div class="inner"></div></div>
<div class="test a6"><div class="inner"></div></div>
<div class="test a7"><div class="inner"></div></div>
<div class="test a8"><div class="inner"></div></div>
<div class="test a9"><div class="inner"></div></div>
<div class="test a10"><div class="inner"></div></div>
<div class="test a11"><div class="inner"></div></div>
<div class="test a12"><div class="inner"></div></div>
<div class="test a13"><div class="inner"></div></div>
<div class="test a14"><div class="inner"></div></div>
<div class="test a15"><div class="inner"></div></div>
<div class="test a16"><div class="inner"></div></div>
<div class="test a17"><div class="inner"></div></div>
<div class="test a18"><div class="inner"></div></div>
<div class="test a19"><div class="inner"></div></div>
<div class="test a20"><div class="inner"></div></div>
<div class="test a21"><div class="inner"></div></div>
<div class="test a22"><div class="inner"></div></div>
<div class="test a23"><div class="inner"></div></div>
<div class="test a24"><div class="inner"></div></div>
<div class="test a25"><div class="inner"></div></div>
<div class="test a26"><div class="inner"></div></div>
<div class="test a27"><div class="inner"></div></div>
<div class="test a28"><div class="inner"></div></div>
<div class="test a29"><div class="inner"></div></div>
<div class="test a30"><div class="inner"></div></div>
<div class="test a31"><div class="inner"></div></div>
<div class="test a32"><div class="inner"></div></div>
</div>SCSS:
@include test-grid($columns, $gutter, $padding, $prefix, $color);