{% set title = 'Layout' %} {% set isdocs = true %} {% extends '../../layouts/default.html' %} {% block content %} {% include '../../partials/_docs-nav.html' %}

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.

Grid

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.

{% include '../../partials/_example.html' with { file: 'grid-floats.html' } %}

Responsive Grid

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.

{% include '../../partials/_example.html' with { file: 'grid-breakpoints.html' } %}

Gutters

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.

{% include '../../partials/_example.html' with { file: 'grid-gutters.html' } %}

Nesting

Nest whole grid structures within columns to created nested grids.

{% include '../../partials/_example.html' with { file: 'grid-nesting.html' } %}

Reversed

To reverse the order of columns, use the .col-right class to float right

{% include '../../partials/_example.html' with { file: 'grid-reversed.html' } %}

Centering Columns

Use the .mx-auto class to center columns within their containers.

{% include '../../partials/_example.html' with { file: 'grid-centered.html' } %}

NPM

The grid is also available as a standalone NPM module.

npm install basscss-grid

Table Object

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.

{% include '../../partials/_example.html' with { file: 'table-object.html' } %}

Flag Object

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.

{% include '../../partials/_example.html' with { file: 'table-object-flag.html' } %}

Equal width cells

Use the .table-fixed extension to create equal-width cells.

{% include '../../partials/_example.html' with { file: 'table-object-fixed.html' } %}

Responsive Table Object

Use breakpoint prefixes to keep table objects stacked at smaller screen sizes. This is useful for things like navigation.

{% include '../../partials/_example.html' with { file: 'table-object-responsive.html' } %}

Table Grid

The table object can be combined with grid width utilities to create vertically centered columns.

{% include '../../partials/_example.html' with { file: 'table-object-grid.html' } %}

NPM

The table object is also available as a standalone NPM module.

npm install basscss-table-object

Grid Table Object
{% endblock %}