Using 960 Grid System as a base, Sazerac lightly modifies the code to create a Grid of 16 columns, with the widest column measuring 40 pixels y and each previous column adding 60 more pixels.
So the column widths are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 y 940.
To create your grid, you need a parent container of the class .container.
A basic Layout can be created with two columns. Sazerac recommends using the .row to be able to adjust the number of lines in your design. Each column has the name .grid-*. And the asterick can be replaced by the number of columns you want to assign to your container.
Prefix is the interior left-side space of your container. It is applied to each column in your grid.
Play around with the prefix and number of columns to complete the spacing of a .row.
Suffix is the interior right-side space of your container. It is applied to each column in your grid..
Play around with the suffix and number of columns to complete the spacing of a .row.
There are two special spaces in this grid that allow you to reposition the elements within. Pushing or pulling horizontally on your page.
Look at this example with four columns. In the first case, the elements appear as they do in a column with no Pushing or Pulling.
Now, using .push-* and .pull-* you can move your columns any way you want. In this example we have changed the positions of columns 1 and 2
Nesting allows you to apply new columns within columns, but to do that without problems, Sazerac recommends..
In the grid are the classes .alpha and .omega. This classes must be applied to the first and last nesting columns.
Don't like our Sazerac grids? No problem, you can create your own grid using the following variables.
| Variable | Description |
|---|---|
@columnNumber |
Number of Columns |
@columnWidthLarge |
Column Width |
@gutterWidthLarge |
Spacing between Columns |
The grid has two ways of adapting to small resolutions such as those on a tablet or smartphone. The first is automatic, the grid adapts to the size of the device and uses a smaller resolution while the columns collapse and disappear. The second method is to use a set of classes to apply a predefined set of four columns to the grid. Simply use the classes mobile-grid-1, mobile-grid-2, mobile-grid-3, mobile-grid-4.
When you are creating a layout, you have the option to add classes to your grid, such as the Mobile Grid that is defined as four columns. You can change the number of these columns but changing the value of the variable @mobileColumnNumber in the file variable.less
You can continue using the classes push and pull in your mobile design using the classes .mobile-push-* and .mobile-pull-*.