Grid
Create a fully responsive, fluid and nestable grid layout.
The grid system of FatKit follows the mobile-first approach. It uses units with predefined classes inside each grid, which define the column width. It is also possible to combine the grid with classes from the Flex component.
Container
Add the .f-container
class to a block element to give it a max-width and wrap the main content of your website. For large screens it applies a different max-width.
Centering
To center the container, use the .f-container-center
class. For any other block element, you additionally need to apply a width.
Example
Markup
<div class="f-width-medium-1-2 f-container-center">
<div class="f-panel f-panel-box f-panel-box-primary">Centered block element</div>
</div>
The Grid
To create the grid container, add the .f-grid
class to a parent element. Add one of the .f-width-*
classes to child elements to determine, how the units shall be sized. Out of the box, The fatkit grid supports 1, 2, 3 and 4 unit divisions. But this can be changed easily by customising the grid. This table gives you an overview of the f-width-*
classes that can be applied to units. For multiple grid rows, where you require spacing between each row, you can add f-grid-auto
to the f-grid
element.
Class | Description |
---|---|
.f-width-1-1 |
Fills 100% of the available width. |
.f-width-1-2 |
Divides the grid into halves. |
.f-width-1-3 to .f-width-2-3 |
Divides the grid into thirds. |
.f-width-1-4 to .f-width-3-4 |
Divides the grid into fourths. |
We built an intentional redundancy into each set of unit classes, so that using something like .f-width-2-4
class will work just as well as .f-width-1-2
.
Example
Take a closer look at the following grid example, which gives you a great overwiew of all basic .f-width-*
classes.
.f-width-1-2
.f-width-1-2
.f-width-1-3
.f-width-1-3
.f-width-1-3
.f-width-1-4
.f-width-1-4
.f-width-1-4
.f-width-1-4
NOTE The grid has no style related CSS. In our example we used panels from the Panel component.
Markup
Here is a simple code example of how the default grid with 2 columns would look like:
<div class="f-grid">
<div class="f-width-1-2">
<div class="f-panel f-panel-box"></div>
</div>
<div class="f-width-1-2">
<div class="f-panel f-panel-box"></div>
</div>
</div>
Responsive width
FatKit provides a number of very useful responsive widths classes. Basicall they work just like the usual width classes, except they are prefixed, so that they only come to effect at certain breakpoints. These classes can be combined with the visibility classes from the Utility component. This is great to adjust your layout and content for different device sizes.
Class | Description |
---|---|
.f-width-* |
Affects all device widths, grid columns stay side by side. |
.f-width-small-* |
Affects device widths of 480px and higher. Grid columns will stack on smaller sizes. |
.f-width-medium-* |
Affects device widths of 768px and higher. Grid columns will stack on smaller sizes. |
.f-width-large-* |
Affects device widths of 960px and higher. Grid columns will stack on smaller sizes. |
.f-width-xlarge-* |
Affects device widths of 1220px and higher. Grid columns will stack on smaller sizes. |
IMPORTANT To create a margin between stacking grid columns, just add the data-f-grid-margin
attribute.
Example
.f-width-medium-1-2
.f-width-large-1-3
.f-hidden-medium
.f-width-large-1-3
.f-width-medium-1-2
.f-width-large-1-3
.f-width-1-2
.f-width-medium-1-3
.f-hidden-small
.f-width-medium-1-3
.f-width-1-2
.f-width-medium-1-3
.f-width-1-1 .f-visible-small
.f-width-medium-1-1 .f-visible-medium
.f-width-large-1-1 .f-visible-large
Grid gutter
Grids automatically create a horizontal gutter between columns and a vertical one between two succeeding grids. By default, the grid gutter is wider on large screens.
Example
Medium gutter
To apply a medium sized gutter between grid columns, just add the .f-grid-medium
class.
Example
Small gutter
To apply a smaller gutter between grid columns, just add the .f-grid-small
class.
Example
Collapse gutter
To remove the gutter entirely, just add the .f-grid-collapse
class.
Example
Nested grid
You can easily extend your grid layout with nested grids.
Example
.f-width-1-2
.f-width-1-2
.f-width-1-2
Markup
<div class="f-grid">
<div class="f-width-1-2">
<div class="f-panel f-panel-box"></div>
</div>
<div class="f-width-1-2">
<div class="f-grid">
<div class="f-width-1-2">
<div class="f-panel f-panel-box f-panel-box-primary"></div>
</div>
<div class="f-width-1-2">
<div class="f-panel f-panel-box f-panel-box-primary"></div>
</div>
</div>
</div>
</div>
Center grid
Add the .f-container-center
class from the Utility component to center a grid column.
Example
.f-container-center
Grid divider
Add the .f-grid-divider
class to separate grid columns with lines. To separate grids with a horizontal line, just add the class to a <hr>
or <div>
element.
Example
.f-width-medium-1-3
.f-width-medium-1-3
.f-width-medium-1-3
.f-width-medium-1-3
.f-width-medium-1-3
.f-width-medium-1-3
Markup
<div class="f-grid f-grid-divider">
<div class="f-width-1-2">
<div class="f-panel f-panel-box"></div>
</div>
<div class="f-width-1-2">
<div class="f-panel f-panel-box"></div>
</div>
</div>
<hr class="f-grid-divider">
<div class="f-grid f-grid-divider">
<div class="f-width-1-2">
<div class="f-panel f-panel-box"></div>
</div>
<div class="f-width-1-2">
<div class="f-panel f-panel-box"></div>
</div>
</div>
NOTE The horizontal divider can not be applied to grids with any of the f-push-*
or f-pull-*
classes.
Custom grid
Fatkit supplies four different grid sizes out of the box (1,2,3,4). They can be added to by editing the include in
/assets/styles/sass/layout/_grid.scss
// set this for when you want to ALWAYS have all fractions available for a grid size
// e.g $forceFullGrid: 5,8,12. Can be single value or list of items. Useful for umbraco forms, or for when
// the cms requires all possible sizes for nested content.
// Note: this value also needs to be in the Grid mixin to create the equivalent css
$forceFullGrid: false;
// Make sure that you put the sizes in the correct size order
// i.e NOT "medium", "large", "small"
@include Grid((1,2,3,4), 'small', 'medium', 'large', 'xlarge');
The grid sizes, (small, medium...etc) are defined in /assets/styles/sass/base/_variables.scss
$breakpointMap: (
'small': $breakpoint-small,
'medium': $breakpoint-medium,
'large' : $breakpoint-large,
'xlarge': $breakpoint-xlarge
);
Source ordering
You can change the display order of the columns to keep a specific column order in the source code. Add one of the .f-push-*
classes to move the column to the right and add one of the .f-pull-*
classes to move a column to the left. This allows you for example to flip the columns' display order for wider viewports. The classes can also be used to offset columns, creating additional space between them.
Source ordering is useful for SEO and responsive design, because in narrow viewports the grid will be displayed according to the source order of the markup.
NOTE This feature only works in combination with one of the .f-width-medium-*
classes.
Example
.f-width-medium-1-2 .f-push-1-2
.f-width-medium-1-2 .f-pull-1-2
.f-width-medium-2-5 .f-push-3-5
.f-width-medium-2-5 .f-pull-2-5
Markup
<div class="f-grid">
<div class="f-width-medium-1-2 f-push-1-2">
<div class="f-panel f-panel-box"></div>
</div>
<div class="f-width-medium-1-2 f-pull-1-2">
<div class="f-panel f-panel-box"></div>
</div>
</div>
Custom source ordering
Fatkit supplies four different pull sizes out of the box (1,2,3,4). They can be added to by editing the include in
/assets/styles/sass/layout/_grid.scss
@include PushPull((1,2,3,4));
Match column heights
The Grid component uses Flexbox, so the height of grid columns is matched automatically. To achieve the same effect in older browsers that don't support Flexbox, just add the data-f-grid-match
attribute to your grid. If your grid wraps into multiple rows, only grid columns within the same row are matched. To match grid columns accross all rows just use data-f-grid-match="{row: false}"
.
Example
Markup
<div class="f-grid" data-f-grid-match>
<div class="f-width-1-2">
<div class="f-panel f-panel-box"></div>
</div>
<div class="f-width-1-2">
<div class="f-panel f-panel-box"></div>
</div>
</div>
NOTE If grid columns extend to a width of 100%, their heights will no longer be matched. This makes sense, for example, if they stack vertically in narrower viewports.
Match height of panels
If you want to match the heights of panels in a grid, just add the .f-grid-match
class. When using the data attribute, you need to add the {target:'.f-panel'}
selector.
Example
Markup
<div class="f-grid f-grid-match" data-f-grid-match="{target:'.f-panel'}">
<div class="f-width-medium-1-3">
<div class="f-panel f-panel-box"></div>
</div>
<div class="f-width-medium-1-3">
<div class="f-panel f-panel-box"></div>
</div>
<div class="f-width-medium-1-3">
<div class="f-panel f-panel-box"></div>
</div>
</div>
Wrap multiple rows
You can also create a grid with as many columns as you want, which automatically break into the next line. Just add the data-f-grid-margin
attribute to create a margin between the grid rows. Typically this layout is built using a <ul>
element.
Example
- Box
- Box
- Box
- Box
- Box
- Box
NOTE You can also apply a custom width to your grid columns. Just add the .f-width
class and use an inline style to define the width. This example uses fixed pixel values for the widths as you would do with images.
- Box
- Box
- Box
- Box
- Box
- Box
- Box
- Box
Markup
<ul class="f-grid" data-f-grid-margin>
<!-- These elements have a width in percent -->
<li class="f-width-medium-1-5">...</li>
<li class="f-width-medium-3-10">...</li>
<!-- These elements have a width in pixel -->
<li class="f-width" style="width: 100px;">...</li>
<li class="f-width" style="width: 150px;">...</li>
</ul>
JavaScript options
<div data-f-grid-margin="{row:true}">...
Option | Possible value | Default | Description |
---|---|---|---|
target |
boolean|string | false | Target. If not set, targets grid items |
row |
boolean | true | True to only match if items are on the same row |
ignorestacked |
boolean | false | True to match target heights regardless of if they're stacked (ie in a single column, not side-by-side). Useful if you need to ALWAYS match height regardless of viewport |
observe |
boolean | false | Watch the elements using mutationobserver, and only match heights if they're visible |
Even grid columns
To create a grid whose child elements' widths are evenly split, you don't have to apply the same class to each list item within the grid. Just add one of the .f-grid-width-*
classes to the grid itself.
Class | Description |
---|---|
.f-grid-width-1-2 |
Divides the grid into halves. |
.f-grid-width-1-3 |
Divides the grid into thirds. |
.f-grid-width-1-4 |
Divides the grid into fourths. |
.f-grid-width-1-5 |
Divides the grid into fifths. |
.f-grid-width-1-6 |
Divides the grid into sixths. |
.f-grid-width-1-10 |
Divides the grid into tenths. |
Example
- Box
- Box
- Box
- Box
- Box
Markup
<ul class="f-grid f-grid-width-1-5">
<li>
<div class="f-panel f-panel-box"></div>
</li>
<li>
<div class="f-panel f-panel-box"></div>
</li>
<li>
<div class="f-panel f-panel-box"></div>
</li>
<li>
<div class="f-panel f-panel-box"></div>
</li>
<li>
<div class="f-panel f-panel-box"></div>
</li>
</ul>
Responsive width
FatKit also provides responsive grid width classes. You can apply these to maintain evenly sized grid columns, regardless of the device width.
Class | Description |
---|---|
.f-grid-width-* |
Affects all device widths. |
.f-grid-width-small-* |
Affects device widths of 480px and higher. |
.f-grid-width-medium-* |
Affects device widths of 768px and higher. |
.f-grid-width-large-* |
Affects device widths of 960px and higher. |
.f-grid-width-xlarge-* |
Affects device widths of 1220px and higher. |
Example
- Box
- Box
- Box
- Box
- Box
Markup
<ul class="f-grid f-grid-width-1-2 f-grid-width-medium-1-3 f-grid-width-large-1-5">
<li>
<div class="f-panel f-panel-box"></div>
</li>
<li>
<div class="f-panel f-panel-box"></div>
</li>
<li>
<div class="f-panel f-panel-box"></div>
</li>
<li>
<div class="f-panel f-panel-box"></div>
</li>
<li>
<div class="f-panel f-panel-box"></div>
</li>
</ul>