# Page Layout

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.

Note: this guide makes use of the optional Background Images and Utility Heading modules that are not included in the default Basscss package. # Global Navigation To start off, make a global navigation using the grid system and other utilities. ```html ``` For the navigation links, use button styles to provide large hit targets and a consistent visual spacing. Use the margin and padding utilities to fine tune the spacing. The left side uses the `.sm-col` class to float left above the small breakpoint. The right side uses `.sm-col-right`. By not defining a column width, each side will be as wide as its contents. # Hero Banner Next create a hero banner using utility styles. Note: This example uses the optional `basscss-background-images` and `basscss-utility-headings` modules for the large heading. ```html

Hamburgers

Artisinal ground chuck creations

Pancake

``` 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. ```html

Hamburgers

Artisinal ground chuck creations

Pancake

``` # 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. ```html

Bacon

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.

Bratwurst

Andouille

``` # 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. ```html

Blog

Blog Post Title

Gallery

``` 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. # Footer Finally, create a footer with a dark background that fills the width of the viewport. Note the container is placed inside the footer element to control max-width. ```html ```

Bacon

Bratwurst

Andouille

Categories