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.
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.
<section class="container px2 py3">
<div class="clearfix mxn2">
<div class="sm-col sm-col-4 px2">
<h2 class="h1 mb0">Bacon</h2>
<p>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p>
</div>
<div class="sm-col sm-col-4 px2">
<h2 class="h1 mb0">Bratwurst</h2>
<p>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p>
</div>
<div class="sm-col sm-col-4 px2">
<h2 class="h1 mb0">Andouille</h2>
<p>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p>
</div>
</div>
</section>
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.
<section class="container px2 py3">
<h1 class="mt0">
<a href="#" class="dark-gray">
Gallery
</a>
</h1>
<div class="clearfix mxn2">
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="sm-show md-hide clearfix"></div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="md-show lg-hide clearfix"></div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="sm-show md-hide clearfix"></div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="md-show lg-hide clearfix"></div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="sm-show md-hide clearfix"></div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
<div class="col col-6 sm-col-4 md-col-3 lg-col-2 px2 mb3">
<a href="#" class="block">
<img src="/docs/placeholder.svg" class="block" />
</a>
</div>
</div>
</section>
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.