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, );
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.
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> ...