Ink provides a layout grid system that is flexible, responsive and uses a human readable syntax.
Our layout grid was built to allow precise control on how horizontal space is divided and on targeting several screen sizes. To accomplish this, we use percentages as our base units and CSS @media queries to allow you to decide what width should an element take when viewed in a specific screen size.
Our default layout breakpoints are:
tinyfor screens widths up to 320px.
smallfor screen widths between 321 and 640 pixels.
mediumfor screen widths between 641 and 960 pixels.
largefor screen widths between 961 and 1260 pixels.
xlargefor screen widths above 1261 pixels.
||The grid root class.|
||Groups layout columns.|
||Add space between layout columns.|
||Sets x% element width for all breakpoints.|
||Sets x% element width for the 'tiny' breakpoint.|
||Sets x% element width for the 'small' breakpoint.|
||Sets x% element width for the 'medium' breakpoint.|
||Sets x% element width for the 'large' breakpoint.|
||Sets element x% width for the 'xlarge' breakpoint.|
We have 22 width units, that we'll call columns, ranging from 5% to 100% in 5% increments as well as 33% and 66% for one and two thirds respectively.
All column elements must be inside a
The example above creates a 50/50 two column layout for all screens.
Grid elements can be nested to create more intricate layouts:
The example above further divides each of the 50% columns in to 3 thirds and 4 fourths.
Gutters are the space between columns of printed text.
In ink we use the term to describe the space between layout columns.
Horizontal spacing is created by adding padding to the left of the columns and using the border-box box model. Vertical spacing is created with a bottom margin. So, if you want to add a background to a column, you'll need to add an additional element inside it.
To add space between a group of columns in your layout add the
gutters class to the parent
column-group element. You can also choose the amount of gutter space by using
quarter-gutters classes to halve or quarter your column gutters.
Gutters are applied only to the
column-group direct children. Nested elements are left untouched.
In the example above half sized gutters are added on the large breakpoint only.
Handling layout changes for multiple screen sizes is as simple as adding a few more classes to your markup.
To set the width of a grid column just add the desired width percentage class for the targeted breakpoint:
large-50 small-100 ....
If you need your layout to work on multiple screens, you'll have to declare the width for all available breakpoints.
You can also set a width for all breakpoints by using the
Try resizing your browser window to see it working.