Grid
12 Column Grid
We use a 12 column grid for page-layout. It is currently
based on flexbox which creates a flexible foundation for handling
column-based layout. We use Susy as our
math engine for grid-calculations. The grid-definition can be found in
_conf_susy.scss.
Responsive
Modifier-classes for responsive behavior enables you to specify column sizes at different viewport widths. Please note that these modifiers correspond to the breakpoints we have defined.
Gutters
To handle gutters, we use the kx-row-element. By adding modifiers to this,
we can create grids with/without gutters, or even gutters only in one direction.
In addition to the base class kx-row, add modifiers for:
kx-row--gutters: standard gutters both horizontally an vertically.kx-row--gutters-v: standard gutters vertically.kx-row--gutters-h: standard gutters horizontally.
Gutters: none
kx-row
<div class="kx-row">
<div class="kx-col kx-col--12@all kx-col--4@tab-l">
<div class="box kx-p--small@all">Column</div>
</div>
...
..
</div>Gutters: horizontally + vertically
kx-row--gutters
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12@all kx-col--4@tab-l">
<div class="box kx-p--small@all">Column</div>
</div>
...
..
</div>Gutters: horizontally
kx-row--gutters-h
<div class="kx-row kx-row--gutters-h">
<div class="kx-col kx-col--12@all kx-col--4@tab-l">
<div class="box kx-p--small@all">Column</div>
</div>
...
..
</div>Gutters: vertically
kx-row--gutters-v
<div class="kx-row kx-row--gutters-v">
<div class="kx-col kx-col--12@all kx-col--4@tab-l">
<div class="box kx-p--small@all">Column</div>
</div>
...
..
</div>Syntax
The convention for grid classes can be a bit overwhelming at first, but you’ll see that in includes some syntactical sugar that makes it quite logical.
The convention is: [namespace]-col--[columns]@[scope].
Here is an example:
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12@all kx-col--6@mob-m kx-col--4@tab-m kx-col--3@ltp-s">
<div class="box kx-p--small@all">Responsive</div>
</div>
</div>and it looks like this (try resizing your browser):
The example above can be read like: “This column should be…”:
kx-col--12@all…12 of 12 columns wide (100%) at all screen sizes, but…kx-col--6@mob-m…6 of 12 columns wide (50%) at screens > medium mobile, but…kx-col--4@tab-m…4 of 12 columns wide (33%) at screens > medium tablet, but…kx-col--3@ltp-s…3 of 12 columns wide (25%) at screens > small laptop
Fluid
Grids uses precentage-based values to make fluid widths. Gutters are handled using static values for padding (gutters inside). This way we can mix fluid columns with static gutters. Each column uses split-gutters. This means the padding is equal to a half gutter.
Simple Syntax
Grids are built of three things: row, column, and content. This way the columns in a grid can be thought of as “buckets” for content, e.g. a component, widget or module.
<!-- ROW -->
<div class="kx-row kx-row--gutters">
<!-- COLUMN -->
<div class="kx-col kx-col--12@all">
<!-- YOUR CONTENT -->
<div class="box kx-p--small@all">Content</div>
</div>
</div>Auto Width
If you don’t include modifiers for width (using the -- notation), the
grid will auto-fit the width of the columns to fit a row. Here we just
have one column, but without modifiers for width. It default “grows” to
fill the available space.
<div class="kx-row kx-row--gutters">
<div class="kx-col">
<div class="box kx-p--small@all">I'm 100%</div>
</div>
</div>Here we have two columns, also without modifiers for width. They share the available space, each becoming 50% wide.
<div class="kx-row kx-row--gutters">
<div class="kx-col">
<div class="box kx-p--small@all">I'm 50%</div>
</div>
<div class="kx-col">
<div class="box kx-p--small@all">I'm 50%</div>
</div>
</div>Nested Grids
Yes! Grids can be nested. Just remember to use the modifier kx-row--gutters
together with the base class kx--row on the parent wrapping your inner columns kx-col.
Double gutters are removed due to the the negative margins applied with kx-row--gutters.
But really consider if you need nested grids. The HTML structure can quickly become cumbersome
and hard to manage.
Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.
Alignment
Add classes to rows to align it’s children to the start, center, end, top, middle or bottom. These classes are also responsive, so the alignment can change on different viewports.
Horizontal alignment
--start
<div class="kx-row kx-row--gutters-h kx-row--start@all">
<div class="kx-col kx-col--6@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
</div>--center
<div class="kx-row kx-row--gutters-h kx-row--center@all">
<div class="kx-col kx-col--6@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
</div>--end
<div class="kx-row kx-row--gutters-h kx-row--end@all">
<div class="kx-col kx-col--6@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
</div>Example: responsive horizontal alignment
Here is an example of achieving different alignments on different viewport sizes. All modifier classes corresponds to the defined breakpoints.
<div class="kx-row kx-row--gutters-h kx-row--gutters kx-row--left@all kx-row--end@tab-s kx-row--center@ltp-s">
<div class="kx-col kx-col--4@all">
<div class="box kx-p--small@all">
Responsive alignment
</div>
</div>
</div>Vertical alignment
--top
<div class="kx-row kx-row--gutters-h kx-row--top@all">
<div class="kx-col kx-col--6@all">
<div class="box kx-p--small@all">
Long text Long text...
</div>
</div>
<div class="kx-col kx-col--6@all">
<div class="box kx-p--small@all">
Short text
</div>
</div>
</div>--middle
<div class="kx-row kx-row--gutters-h kx-row--middle@all">
<div class="kx-col kx-col--6@all">
<div class="box kx-p--small@all">
Long text Long text...
</div>
</div>
<div class="kx-col kx-col--6@all">
<div class="box kx-p--small@all">
Short text
</div>
</div>
</div>--bottom
<div class="kx-row kx-row--gutters-h kx-row--bottom@all">
<div class="kx-col kx-col--6@all">
<div class="box kx-p--small@all">
Long text Long text...
</div>
</div>
<div class="kx-col kx-col--6@all">
<div class="box kx-p--small@all">
Short text
</div>
</div>
</div>Example: responsive vertical alignment
In this example, focus on the second box containing the short text. Try resizing your browser. You’ll notice that it changes position based on the viewport size;
- Middle alignment on mobile-sized viewport.
- Bottom alignment on tablet-sized viewport.
- Top alignment on laptop-sized viewport.
Distribution
Modifier classes for kx-row, that distributes content across the available
space.
--around
<div class="kx-row kx-row--gutters-h kx-row--around@all">
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
</div>--between
<div class="kx-row kx-row--gutters-h kx-row--between@all">
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
</div>--pushleft
If you’d like to “push” a column to the left, you can use the modifier
--pushleft. This will add the declaration margin-right: auto; to the element,
effectively pushing it towards the left. In a flexbox context, this enables
you to separate a single column from its siblings. The margin-right: auto;
pushed siblings away from the separate column.
<div class="kx-row kx-row--gutters-h">
<div class="kx-col kx-col--2@all kx-col--pushleft@all">
<div class="box kx-p--small@all">
Push left
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
</div>--pushright
Same as above, but opposite direction. If you’d like to “push” a column to the
right, you can use the modifier --pushright. This adds the declaration
margin-left: auto; to the element, effectively pushing it towards the right.
This also pushes siblings away from the separate column.
<div class="kx-row kx-row--gutters-h">
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--2@all kx-col--pushright@all">
<div class="box kx-p--small@all">
Push right
</div>
</div>
</div>Here is a more advanced example, where we combine the use of --pushleft and
--pushright.
<div class="kx-row kx-row--gutters-h">
<div class="kx-col kx-col--2@all kx-col--pushleft@all">
<div class="box kx-p--small@all">
Push left
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--2@all kx-col--pushright@all">
<div class="box kx-p--small@all">
Push right
</div>
</div>
</div>Offset
You can offset a column to either the left or right.
<div class="kx-row kx-row--gutters-h">
<div class="kx-col kx-col--1@all kx-col--pushright-11@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--2@all kx-col--pushright-10@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
<div class="kx-col kx-col--3@all kx-col--pushright-9@all">
<div class="box kx-p--small@all">
Box
</div>
</div>
...
..
.
</div>Here is another example:
<div class="kx-row kx-row--gutters-h">
<div class="kx-col kx-col--2@all kx-col--pushright-1@all">
<div class="box kx-p--small@all">
Short text pushed right by 1 column
</div>
</div>
<div class="kx-col kx-col--6@all">
<div class="box kx-p--small@all">
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
Long text Long text Long text Long text Long text
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
Short text
</div>
</div>
</div>Reversing
Add modifiers to reverse columns visually. Please note that columns are
automatically aligned to the visual end of the row (right). This is default
behavior with the flex-direction: reverse; declaration.
<div class="kx-row kx-row--gutters-h kx-row--reverse@all">
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
1
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
2
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
3
</div>
</div>
</div>To re-align the reverse-ordered columns to the visual start of the row (left),
please add the modifier --end to the row element as well. Since the row is
reversed, the --end becomes the visual start.
<div class="kx-row kx-row--gutters-h kx-row--reverse@all kx-row--end@all">
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
1
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
2
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
3
</div>
</div>
</div>Reordering
You can reorder columns with two utility classes: --first and --last. These
classes are responsive, so you can choose when (on which viewport-size) a column
shall be first or last.
<div class="kx-row kx-row--gutters-h">
<div class="kx-col kx-col--2@all kx-col--last@all">
<div class="box kx-p--small@all">
1
</div>
</div>
<div class="kx-col kx-col--2@all kx-col--first@all">
<div class="box kx-p--small@all">
2
</div>
</div>
<div class="kx-col kx-col--2@all">
<div class="box kx-p--small@all">
3
</div>
</div>
</div>Resources
- Susy: Web Layout Toolkit, Susy is a lightweight grid-layout engine for Sass