Layout modules are more complex than utilities and are tied to markup structure. They are designed to be highly reusable and to inter-operate with other styles.
The utility-based grid allows a lot of flexibility in creating complex layouts.
Start by using a .clearfix
container.
Optionally use a .container
to set a max-width.
Adjust the container width with the --container-width
variable.
Add columns using the .col
and grid width .col-N
classes.
.col
floats elements left and sets box-sizing to border-box.
.col-N
sets width according to a 12 column grid.
The total number of columns in a row should add up to 12.
Use breakpoint-prefixed column utilities to change the grid at different screen widths. Each breakpoint applies to that screen width and up. Unprefixed styles apply to all screen widths.
Use padding and negative margin utilities to create gutters based on the white space scale. When using negative margin, be sure to compensate for the extra width created with a padded parent element or by using overflow hidden. Otherwise, horizontal scrolling may occur.
Nest whole grid structures within columns to created nested grids.
To reverse the order of columns, use the .col-right
class to float right
Use the .mx-auto
class to center columns within their containers.
The grid is also available as a standalone NPM module.
npm install basscss-grid
Use the table object to vertically center content.
These styles can be combined with grid width and white-space utilities for a wide range of layout options.
Apply padding to .table-cell
elements to contol spacing.
The flag object
can be emulated by adding .full-width
to one of the cells.
To add padding to the body, nest another div within the full-width cell.
Use the .table-fixed
extension to create equal-width cells.
Use breakpoint prefixes to keep table objects stacked at smaller screen sizes. This is useful for things like navigation.
The table object can be combined with grid width utilities to create vertically centered columns.
The table object is also available as a standalone NPM module.
npm install basscss-table-object