silc-grid v0.6.1
silc grid
The grid module is a lightweight, flexbox-based grid system for the silc framework. The grid uses responsive classes, that can be generated from any number of custom breakpoints.
HTML
<div class="silc-grid">
<div class="silc-grid__col silc-grid__col--6-large">6</div>
<div class="silc-grid__col silc-grid__col--6-large">6</div>
</div>
<div class="silc-grid">
<div class="silc-grid__col silc-grid__col--4-large">4</div>
<div class="silc-grid__col silc-grid__col--4-large">4</div>
<div class="silc-grid__col silc-grid__col--4-large">4</div>
</div>
<div class="silc-grid">
<div class="silc-grid__col silc-grid__col--6-medium silc-grid__col--3-large">3</div>
<div class="silc-grid__col silc-grid__col--6-medium silc-grid__col--3-large">3</div>
<div class="silc-grid__col silc-grid__col--6-medium silc-grid__col--3-large">3</div>
<div class="silc-grid__col silc-grid__col--6-medium silc-grid__col--3-large">3</div>
</div>
Class modifiers
Column widths
Column widths can be changed on a per-breakpoint basis using the silc-grid__col--{columns}-{breakpoint}
modifier class.
<div class="silc-grid">
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
...
</div>
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
...
</div>
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
...
</div>
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
...
</div>
</div>
Auto column width
A column width can also be set to "auto", where it's width is not explicitly set. Auto widths can be applied across all breakpoints using silc-grid__col--auto
or at specific breakpoints using silc-grid__col--auto-{breakpoint}
.
No gutters
By default, silc grids have gutters, which are specified using the $silc-grid--gutter
variable. However, using the silc-grid--no-gutters
modifier class, you can specify individual grids to have no gutters.
<div class="silc-grid silc-grid--no-gutters">
...
</div>
Collapse
It is also possible to remove the bottom margin from grid columns using the silc-grid--collapse
modifier.
<div class="silc-grid silc-grid--collapse">
...
</div>
Note: To set all grids to have no gutters by default, simply set the $silc-grid--gutter
variable to 0
.
Justify content
Justify the alignment of grid columns using the silc-grid--justify-{alignment}
modifier class. This can be specified globally (for all breakpoints), or on a per-breakpoint case using silc-grid--justify-{alignment}-{breakpoint}
.
Justify left (default)
<div class="silc-grid silc-grid--justify-left">
...
</div>
<div class="silc-grid silc-grid--justify-left-large">
...
</div>
Justify right
<div class="silc-grid silc-grid--justify-right">
...
</div>
<div class="silc-grid silc-grid--justify-right-medium">
...
</div>
Justify center
<div class="silc-grid silc-grid--justify-center">
...
</div>
<div class="silc-grid silc-grid--justify-center-small">
...
</div>
Justify between
Uses flexbox space-between
to justify content. Great for two column rows where one row is flush left, and the other is flush right.
<div class="silc-grid silc-grid--justify-between">
...
</div>
<div class="silc-grid silc-grid--justify-between-small">
...
</div>
Align content
Vertically align columns in the grid using the silc-grid--align-{alignment}
modifier class. This can be specified globally (for all breakpoints), or on a per-breakpoint case using silc-grid--align-{alignment}-{breakpoint}
.
Align top (default)
<div class="silc-grid silc-grid--align-top">
...
</div>
<div class="silc-grid silc-grid--align-top-large">
...
</div>
Align bottom
<div class="silc-grid silc-grid--align-bottom">
...
</div>
<div class="silc-grid silc-grid--align-bottom-medium">
...
</div>
Align center
<div class="silc-grid silc-grid--align-center">
...
</div>
<div class="silc-grid silc-grid--align-center-small">
...
</div>
Reverse columns
Reverse the order of columns using the silc-grid--reverse
modifier class. This can be specified globally (for all breakpoints), or on a per-breakpoint case using silc-grid--reverse-{breakpoint}
.
<div class="silc-grid silc-grid--reverse">
...
</div>
<div class="silc-grid silc-grid--reverse-small">
...
</div>
Variables
A number of variables are available for modifiying the default structure of the grid. View full list of variables. Override the default variables by declaring them in your own SASS import file, which should be included after the silc-grid import.