{% 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.

Hero Banner

Next create a hero banner using utility styles. Note: This example uses the optional basscss-utility-headings and basscss-background-images utility modules for the large heading and background image.

{{ macros.example('hero.html') }}

A combination of utility styles is all that’s needed to create this banner. To fine tune the placement of a background image in a banner, consider adjusting the source image or placing page-specific styles directly in the head of the document. Since this image will only be used on this one page and it’s fairly small, an inline style has been used. This is to help reduce the size of the stylesheet by not including one-off styles.

After seeing the global navigation above the hero, try moving it into the banner and removing the background color for a different look. Move the padding for the banner content into a nested div to adjust the layout.

{{ macros.example('hero-navigation.html') }}

Three Up

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.

{{ macros.example('three-up.html') }}

Blog Teaser

To showcase the latest posts from the blog, create a new section. Use the grid system to create a wide left column and a narrow right column for direct links to blog post categories. The columns have two different widths defined for the small and medium breakpoints. This makes the right column relatively smaller for larger viewports. Use the .sm-show responsive utility to hide the sidebar when the viewport is narrower than the small breakpoint.

{{ macros.example('blog-teaser.html') }}

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.

{% include 'partials/guides-cta.html' %} {% endblock %}