Building the Grid

Now that the project is properly set up, we can finally start styling our page.

Neat, as you already know, is a grid framework. Let's look at the grid layout that our designer used when creating the list view:

Adhering to such a grid has become a standard in modern webdesign. Without it, using a helpful grid framework like Neat wouldn't make much sense.

Out of the box, Neat already defines a default grid:

$neat-grid: (
  columns: 12,
  gutter: 20px,
);

Of course, you can easily define a sass map with a custom grid. Let's add our own grid with a little more gutter space in base/_variables.scss:

$neat-grid--page: (
  columns: 12,
  gutter: 44px,
);
Note

Enclosing Gutters

As you probably know, "gutters" are the spaces between columns. However, unlike in version 1.x, grids in Neat 2.x now also have a gutter on the left of the leftmost column and on the right of the rightmost column.

Wrapping Containers

According to our design, the background color of each row should stretch the window's full width. Therefore, let's quickly add some wrapping containers that take care of this:

<div class="row-wrapper">
  <div class="grid-container">
    <header>
      <img id="logo" src="img/logo.svg" />
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>
  </div>
</div>

<div class="row-wrapper">
  <div class="grid-container">
    <article class="teaser--top">
        <div class="meta">Mar 10, 2015 by Ralph Grando</div>
        ...

Giveaways. Cheat Sheets. eBooks. Discounts.
And great content from our blog!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.