{% set page = guides.layout %} {% set isdocs = true %} {% set isguide = true %} {% extends 'layouts/docs.html' %} {% block content %}
Creating page layouts in Basscss is incredibly fast and flexible. This guide will walk you through common layout patterns to create an entire page with a basic information hierarchy. To see what’s in this guide, check out the demo before you start, or just jump right in.
Next, use the grid system to create a three-up row of features.
Note the use of sm-
prefixed grid utility styles that only work from the small breakpoint up.
The row itself uses the .mxn2
utility to compensate for each column’s .px2
padding.
To control the spacing of typographic elements, each heading has its bottom margin removed.
Next, create a thumbnail gallery with 12 images. Twelve is divisible by 6, 4, 3, and 2 so no widows will appear when dividing up the thumbnails by those numbers in our grid.
{{ macros.example('gallery.html') }}
The display block utility is used on the links and images to control spacing,
and each thumbnail uses .mb3
to keep the vertical spacing equal to the gutters.
Although it’s unnecessary for images of the same dimension,
clearfix elements with responsive utilities are used to ensure each column wraps at the appropriate point.
At this point, you should have created a page resembling the demo. Be sure to check out the other guides to learn more about using Basscss.