Building off the single columnn list let's create a layout that could be used for a website or online report.

1. Establish the grid & columns

This report will contain a full width heading along with a content area and navigation to move between pages. The layout should establish a fixed width at a reasonable breakpoint so the containing divs are intially wrapped in a container with a class of grid. This grid class sets a max-width of 1200px and centers the layout on the page with auto margins.

The navigation needs a smaller width for its use case so its given a col3. The content area is positioned left, occupies the remainder of the content width and is given a margin1 for some spacing against the navigation. Note that the sum total of the margin and col for the sidebar and content area add up to 12 which is equal to the max column spacing our grid layout is designed for. Again, notice the use of the helper class clearfix. Because both of the containers inside this div are floated, this prevents these containers from the breaking outside of its arent.

Heading Content
Content area
<div class='grid'>
  <div class='col12'>
    Heading Content
  </div>
  <div class='col12 clearfix'>
    <nav class='col3'>
      Left Navigation
    </nav>
    <div class='col9'>
      Content area
    </div>
  </div>
</div>

2. Basic styling and content

There's not much to look at so let's add some content and base styles to give a visual distinction between sections. For a start fill rules are added for color and padding is applied to give text a nice balance from the edge of its container. base provides a number of color fills to match a consistent palette across sites. You can learn more about fills available here. To give text a good contrast against darker fills there is a dark class. You can see its use in the header.

Mars Travel

Welcome

We are a full service travel agency providing unique packages and plans for visitors to mars. Our space packages are tailored to your needs and all include:

  • Air packages
  • Sleeping chambers for the long flight
  • Luxurious space cuisine
  • Accomodations with 24hr 37minute room service

Here's what some of our guests have said about us:

Best bang for your buck!
I slept like a martian during the entire flight! The staff knew every fun thing to do in Mars. I couldn't recommend them enough!
We would love to serve you on your next galactic trip Request a quote
<div class='grid fill-light'>
  <div class='col12 pad4 center fill-denim dark'>
    Mars Travel
  </div>
  <div class='col12 clearfix'>
    <nav class='col3 pad2'>
      <a class='block' href='#'>Welcome</a>
      <a class='block' href='#'>Where to go</a>
      <a class='block' href='#'>Places to stay</a>
      <a class='block' href='#'>Mars only offers</a>
      <a class='block' href='#'>Book online today</a>
    </nav>
    <div class='col9 pad4 fill-white'>
      <h2>Welcome</h2>
      <p>We are a full service travel agency providing unique packages and plans for visitors to mars. Our space packages are tailored to your needs and all include:</p>
      <ul>
        <li>Air packages</li>
        <li>Sleeping chambers for the long flight</li>
        <li>Luxurious space cuisine</li>
        <li>Accomodations with 24hr 37minute room service</li>
      </ul>

      <p>Here's what some of our guests have said about us:</p>
      <blockquote>
        Best bang for your buck!
      </blockquote>
      <blockquote>
        I slept like a martian during the entire flight! The staff knew every fun
        thing to do in Mars. I couldn't recommend them enough!
      </blockquote>

      <strong>We would love to serve you on your next galactic trip</strong>
      <a href='#'>Request a quote</a>
    </div>
  </div>
</div>

3. Text and navigation styling

We haven't addressed the way text should be presented yet. By default, inline elements are largely unformatted. Base provides a prose class specifically for styling read content within a content area. Base also provides a vertical layout style to anchors within a nav element when a v class is provided.

Mars Travel

Welcome

We are a full service travel agency providing unique packages and plans for visitors to mars. Our space packages are tailored to your needs and all include:

  • Air packages
  • Sleeping chambers for the long flight
  • Luxurious space cuisine
  • Accomodations with 24hr 37minute room service

Here's what some of our guests have said about us:

Best bang for your buck!
I slept like a martian during the entire flight! The staff knew every fun thing to do in Mars. I couldn't recommend them enough!
We would love to serve you on your next galactic trip
<div class='grid fill-light'>
  <div class='col12 pad4 center fill-denim dark'>
    <h2>Mars Travel</h2>
  </div>
  <div class='col12 clearfix'>
    <nav class='col3 v'>
      <a href='#' class='block pad1y pad2x keyline-bottom active'>Welcome</a>
      <a href='#' class='block pad1y pad2x keyline-bottom'>Where to go</a>
      <a href='#' class='block pad1y pad2x keyline-bottom'>Places to stay</a>
      <a href='#' class='block pad1y pad2x keyline-bottom'>Mars only offers</a>
      <a href='#' class='block pad1y pad2x keyline-bottom'>Book online today</a>
    </nav>
    <div class='col9 pad4 fill-white prose'>
      <h2>Welcome</h2>
      <p>We are a full service travel agency providing unique packages and plans for visitors to mars. Our space packages are tailored to your needs and all include:</p>
      <ul>
        <li>Air packages</li>
        <li>Sleeping chambers for the long flight</li>
        <li>Luxurious space cuisine</li>
        <li>Accomodations with 24hr 37minute room service</li>
      </ul>

      <p>Here's what some of our guests have said about us:</p>
      <blockquote>
        Best bang for your buck!
      </blockquote>
      <blockquote>
        I slept like a martian during the entire flight! The staff knew every fun
        thing to do in Mars. I couldn't recommend them enough!
      </blockquote>

      <div class='center'>
        <strong>We would love to serve you on your next galactic trip</strong>
      </div>
      <div class='pad1y center'>
        <a href='#' class='icon check button'>Request a quote</a>
      </div>
    </div>
  </div>
</div>