-
Notifications
You must be signed in to change notification settings - Fork 13
Using the Grid
Creating grids in Base is crazy simple! You need your _layout.less file and two mixins.
Creates styles for a wrapping element that is centred (by default) and contains the columns within the grid. It is similar to .row in Bootstrap & other frameworks, and needed most of the time. The .column() mixin should be applied to HTML inside the element .container() is applied to.
.container() takes no variables.
Sets the column width for a particular element. It can be added to any CSS declaration.
-
@columns: the number of columns for this element to spread across (accepts decimals) -
@offset: (optional) the number of columns to offset this element from the left (accepts decimals)
Add these mixins the HTML elements you want to form the grid inside the _layout.less file. Try to keep this file as grid only otherwise your CSS will become unnecessarily repetitive.
Each compiled file has a few responsive variables at the top of the file that define how the grid is created at that size. It's best to play with these to see how they work, but as an overview:
The width of the container and total width of the grid. Can be a pixel value or percentage. Defaults to 960px
The number of columns to fit into the page. Can be anything from 1 up. Columns declared in _layout.less that are bigger than this count will go to 100% and stack.
The percentage of the single column width to set as a gutter between columns. In the standard 960 grid 25% creates a 20px gutter between columns. The formula used to calculate this is:
@columnWidth: (@containerWidth / @columnCount) * (1 - unit(@gutterRatio) / 100);
@gutterWidth: (@containerWidth / @columnCount) - @columnWidth;