Neat - A semantic approach to Grid

2 Nov 2016 Development, Design

Rita D'Aprano

8 mins
Neat grid system

As a result of a Responsive approach in Web Design and therefore to the need to create adaptable layouts suitable from different devices, has become usual, I would say almost fundamental, to use a good Grid System.

A Grid System is nothing but a system of columns separated by gutters according to which our layout's contents are distributed.

Grid-System

This system helps us not only to handle layout's elements proportions and positioning in a more concrete way, but it helps us especially in the task of rearranging our contents according to the size of the screen, making them accessible from any device.

A Grid System can be Fluid or Fixed, depending on how columns' size is computed (if px or %), but the common trend is to use Fluid Grid, that allow us to manage dimensions according to a proportional system and so it's more easily adaptive.

Resources about grids available online are so many and have been conceived many frameworks, each with its advantages and faults, but anyway a lot to choose from.

Choose a Grid System or D.I.Y.?

Many not being satisfied with 'limits' that the choice of a system can reach, decided to create a Grid System themselves. Surely it's not a choice to blame, we know that many developers are more at ease using their own resources, however creating, optimizing and improving a framework requires a lot of time and effort.

Then an important point to keep in mind is related to teamwork: in a team often happens that you have to make changes on an existing project, therefore it's very important to have a well detailed documentation, that a custom resource doesn't have.

We should also consider all the benefits we would have choosing an open-source project, in fact its being collaborative and open to improvements by many users, makes it a real great choice.

Popular Grid Systems overview

Often our needs change depending on time and the project we're working on, then in the course of our job we focused on several frameworks, even so we tried many before getting to a satisfying choice for us: lately in fact we're using [Neat] (http://neat.bourbon.io/) for our projects, in addition to [Bourbon] (http://bourbon.io/), a useful and powerful Mixin Library on which it has been developed.

But before we talk about Neat, let's see some Grid System we used:

Bootstrap

[Bootstrap] (http://getbootstrap.com/) it's surely the most popular and one of the first frameworks designed. In addition to a Responsive Grid System it has a wide infrastructure full of utilities such as CSS components, global styles for HTML elements and a series of jQuery plugins that may be included individually or all together. So a very rich base to start.

Talking about its own Grid System, it has a structure like this:

<div class="container">
  <div class="row">
    <div class="col-sm-6">...</div>
    <div class="col-sm-6">...</div>
  </div>
</div>

Columns should be positioned inside a .row and this one inside a .container. Classes for columns follow this convention:

<div class="col–{xs/sm/md/lg}–{numberOfColumns}">

Where {xs/sm/md/lg} respond to devices:

  xs = phones
  sm = tablets
  md = desktops
  lg = large desktops

So in the example above we have two div by 6 columns starting from tablet devices (sm = tablet), instead in mobile these will cover the entire row.

Skeleton

[Skeleton] (http://getskeleton.com/) compared to Bootstrap is less provided, but not for this less helpful: besides the Responsive Grid, it provides a set of predefined classes for our tables, forms, buttons and lists.

<div class="container">
  <div class="row">
    <div class="one column">...</div>
    <div class="eleven columns">...</div>
  </div>
</div>

The grid follows a standard similar to Bootstrap with a .container and a .row and this rule for columns classes:

<div class="LiteralNumberOfColumns column/s">

So it has a different way for naming classes, non-numeric but literal this time: maybe it's more intuitive and immediate compared to Bootstrap but it has not the same potential so they are not to compare (in fact there's no definition through classes between devices).

Foundation

Also [Foundation] (http://foundation.zurb.com/) can be a useful tool, it provides us also Components and Plugins and going on with versions have increased and become many.

Let's talk about Grid:

<div class="row">
  <div class="small-6 large-5 columns">...</div>
  <div class="small-6 large-7 columns">...</div>
</div>

Also here there's a .row that contains columns and to define the width of a column we do:

<div class="small/medium/large - numberOfColumns columns">

Here small/medium/large refers to the device we are working on, and the number, for example 6, to the amount of columns that it must cover.

Bourbon Neat

Nothing to say about these frameworks, but one of the first things that concerned us about [Neat] (http://neat.bourbon.io/) is the different approach used to define the Grid:

“ Neat is a semantic grid framework „

Neat in fact, is built entirely with Sass, so it allows us to separate the markup from the grid definition, which occurs in stylesheets, making a more clean and simple code, but above all, more maintainable: in fact we could completely upset the style without changing each class in the html page. It also helps us in the aim to create a semantic markup because we won't have to put additional classes to declare grid.

html:
<article>...</article>
<article>...</article>
scss:
article {
  @include span-columns(6);
}

It's a helpful approach even if we consider methodologies for code structure and organization like [OOCSS] (https://github.com/stubbornella/oocss/wiki), [SMACSS] (https://smacss.com/) or [BEM] (https://en.bem.info/);

This kind of system in fact, enables us more easily to:

  • separate structure from presentation
  • assign clear and meaningful classes names, much possible descriptive of their content
  • built an architecture made from potentially "reusable" blocks

Also since the modular approach will bring us to have extended class names, sometimes also formed by compound words (for example header__logo, and in the case of SMACSS also of additional state-rules like tab is-collapsed), to put other classes for grid won't surely ease the understanding and the readability of our code.

We have to point out that lately also in the latest versions of Bootstrap, Foundation and others there's an option for using this approach, but it seems like an adjustment rather than the primary trend, in fact the complete documentation is focused on predefined classes to be included directly in the html.

The semantic approach is used also in the naming of mixin and variables that it provides us, which are in my opinion intuitive and well defined.

Let's see basic mixins to build our Responsive Layout:

Mixins

Outer-container
@mixin outer-container($local-max-width: $max-width) { ... }

The mixin outer-container is used to define the main container in which other elements will be placed;

html:
<section class=”main-articles”>
  <article>...</article>
  <article>...</article>
</section>
scss:
.main-articles {
  @include outer-container(1280px);
}

If we look at generated css we see that its purpose is to center the content with margin-left and margin-right, set a max-width and "clean" any float with another mixin (@include clearfix, a Bourbon mixin). The max-width is a value that can be defined in a variable, as we'll see later.

Css Output:
.main-articles {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.main-articles:after {
  clear: both;
}
Span-columns
@mixin span-columns($span, $display: block) { ... }

With Span-columns we can decide the number of columns that a single element must cover and optionally its display property.

html:
<section class=”main-articles”>
  <article>...</article>
  <article>...</article>
</section>
scss:
.main-articles {
  @include outer-container;

  article {
    @include span-columns(6);
  }
}

Span columns

Shift
@mixin shift($n-columns: 1) { ... }

Shift allows us to move an item by columns, then assuming that we want only an <article> positioned in the middle:

html:
<section class=”main-articles”>
  <article>...</article>
</section>
scss:
.main-articles {
  @include outer-container;

  article {
    @include span-columns(6);
    @include shift(3);
  }
}

Shift

Variables

Also we could change grid properties by setting some variables:

$grid-columns: 12 !default;

Grid-columns specifies the number of columns in the grid: by default is 12 but this value can be changed overwriting this variable or, as we'll see later, inside a mixin where we could also choose a different number of these in each breakpoint.

$max-width: 1280px;

Max-width sets the maximum size of the grid; by default it's set in em but we can insert it also in px; so every outer-container will take this maximum size, even if you can change it separately for each container through the outer-container() mixin.

$visual-grid: true;

A nice feature then, is related to the visual-grid variable, that set to true, shows a real grid on the background of our layout, something very useful in development.

Later it's possibile to change its color, arrangement (below or above our contents) and opacity:

$visual-grid-color: #eee !default;
$visual-grid-index: back !default;
$visual-grid-opacity: 0.4 !default;

Finally we mast talk about Media queries, that are fundamentals for Responsive Design; as you can see we can define them inside a variable and also specify the number of columns we want to create for each of these (in the ex.: 12 12 4):

$desktop: new-breakpoint(min-width 960px 12);
$tablet: new-breakpoint(max-width 959px 12);
$mobile: new-breakpoint(max-width 767px 4);

We can recall these variables inside the media() mixin whenever we want to make a change depending on a breakpoint:

.main-articles {
  @include outer-container;

  article {
    @include span-columns(6);

    @include media($mobile) {
      @include fill-parent;
    }
  }
}

In the last example we used fill-parent mixin, that makes an element fits the entire size of its container div. If we set a shift before to this element, in addition to fill-parent we have to reset it with shift(0).

@include shift(3);

@include media($mobile) {
  @include fill-parent;
  @include shift(0);
}

Therefore in mobile we'll have a 4 columns grid and each <article> will fill its container:

Mobile

As you can see Neat gives us very useful tools to simplify and help our workflow: with few lines of code and by intuitive keywords that are easy to remember, we have a strong foundation to develop our Responsive Layout, creating a clean and readable code.

Here we talked about just a part of its structure, if you're interested and you want a more detailed view you can look at its [Documentation] (http://thoughtbot.github.io/neat-docs/latest/), in our opinion also this very simple and well explained, and furthermore here is a [Codepen] (http://codepen.io/ritaD86/pen/XXzzVB) with the example in action.

You may also like

Let’s redefine
eCommerce together.