The Grid
Kraken uses a fluid, mobile-first 6-column grid system. It includes offsets, grid nesting, and special classes for content choreography and image galleries.
The Grid lives at /scss/lib/_grid.scss
All the settings for the Grid are in /scss/lib/_config.scss
The Base Grid using .classes in html
.grid-1
.grid-1
.grid-1
.grid-1
.grid-1
.grid-1
.grid-2
.grid-2
.grid-2
.grid-third
.grid-two-thirds
.grid-3
.grid-3
.grid-half
.grid-half
.grid-1
.grid-4
.grid-1
.grid-6
The Base Grid using @include grid() in Scss
grid(1)
grid(1)
grid(1)
grid(1)
grid(1)
grid(1)
grid(2)
grid(2)
grid(2)
grid(2)
grid(4)
grid(4)
grid(2)
grid(1)
grid(4)
grid(1)
grid(2)
grid(4)
grid(1)
grid(5)
grid(1)
grid(1)
grid(4)
grid(2)
grid(1)
grid(3)
grid(3)
grid(1)
grid(2)
grid(4)
grid(1)
grid(1)
grid(5)
grid(1)
grid(full)
Offsets
Push grids to the right by adding an .offset-* class.
Note: The grids and offsets cannot add up to more than 6.
.grid-4 .offset-2
.grid-1
.grid-3 .offset-1
Offsets using @extend in Scss
Here is how to use offsets for the above example with @extend with @include offset() mixin.
Content Choreography
Flip the order of a grid on bigger screens by adding the .grid-flip class.
First in HTML
Second in HTML
Grid Flip with @extend %grid-flip;
Image Gallery
Display images in a responsive gallery by using the .grid-img class.
Note: You can add any number of image grids to a .row. They'll automatically adjust themselves.
Image Gallery using @extend %grid-img;
Nesting
Because Kraken uses a fluid layout, you can nest grids - useful if you need more complex layouts.
Note: Because the margins between columns are percentage based, nested grid spacing won't be a pixel-to-pixel match to unnested grids.
.grid-3
.grid-2
.grid-2
.grid-2
.grid-3
.grid-3
.grid-3
Nesting using @include grid();
Changing the Page Width
Kraken has a page width of 80em (approximately 1280px) by default.
for this demo the width is set to 60em
You can adjust this by changing the $containerMaxWidth in the _config file for Kraken in /lib