{% set page = pages.layout %} {% set isdocs = true %} {% extends 'layouts/docs.html' %} {% block content %}
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.
{% highlight 'html' %}{% endhighlight %}
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.
{{ macros.example('grid-breakpoints.html') }}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.
{{ macros.example('grid-gutters.html') }}Nest whole grid structures within columns to created nested grids.
{{ macros.example('grid-nesting.html') }}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.
{{ macros.example('table-object-responsive.html') }}The table object can be combined with grid width utilities to create vertically centered columns.
{{ macros.example('table-object-grid.html') }}The table object is also available as a standalone NPM module.
npm install basscss-table-object