Basscss / Docs / Guides

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

Hamburgers

Artisinal ground chuck creations

Pancake
<header class="center px3 py4 white bg-mid-gray bg-cover bg-center"
  style="background-image: url(/docs/src/svg/hero.svg)">
  <h1 class="h1 h0-responsive caps mt4 mb0 regular">Hamburgers</h1>
  <p class="h3">Artisinal ground chuck creations</p>
  <a href="#" class="h3 button mb4 button-blue">Pancake</a>
</header>

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.

Hamburgers

Artisinal ground chuck creations

Pancake
<header class="white bg-mid-gray bg-cover bg-center"
  style="background-image: url(/docs/src/svg/hero.svg)">
  <nav class="clearfix white">
    <div class="sm-col">
      <a href="/" class="button py2 button-nav-dark">Home</a>
      <a href="/" class="button py2 button-nav-dark">Burgers</a>
      <a href="/" class="button py2 button-nav-dark">Fries</a>
    </div>
    <div class="sm-col-right">
      <a href="/" class="button py2 button-nav-dark">About</a>
    </div>
  </nav>
  <div class="center px2 py4">
    <h1 class="h1 h0-responsive caps mt4 mb0 regular">Hamburgers</h1>
    <p class="h3">Artisinal ground chuck creations</p>
    <a href="#" class="h3 button mb4 button-blue">Pancake</a>
  </div>
</header>

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.

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

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.

Andouille

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>

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.

Blog

Blog Post Title

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.

Read more

Blog Post Title

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.

Read more
<section class="container px2 py3">
  <h1 class="mt0">
    <a href="#" class="dark-gray">
      Blog
    </a>
  </h1>
  <div class="clearfix mxn2">
    <div class="sm-col sm-col-8 md-col-9 px2">
      <div>
        <h2 class="h3">
          <a href="#" class="dark-gray">
            Blog Post Title
          </a>
        </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>
        <a href="#">Read more</a>
      </div>
      <div>
        <h2 class="h3">
          <a href="#" class="dark-gray">
            Blog Post Title
          </a>
        </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>
        <a href="#">Read more</a>
      </div>
    </div>
    <div class="sm-col sm-col-4 md-col-3 px2 sm-show">
      <h3 class="h4">Categories</h3>
      <ul class="list-reset">
        <li><a href="#" class="">Bacon</a></li>
        <li><a href="#" class="">Bratwurst</a></li>
        <li><a href="#" class="">Andouille</a></li>
        <li><a href="#" class="">Pork Loin</a></li>
        <li><a href="#" class="">Corned Beef</a></li>
        <li><a href="#" class="">Pastrami</a></li>
      </ul>
    </div>
  </div>
</section>

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.

Other Guides

Global Navigation Hero Banner Three-Up Blog Teaser Gallery Footer