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.
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);
}
}
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);
}
}
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:
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.