icon-search
grid based layout development

Grid-based layout development I: Grids and Bootstrap

Luis Belmonte Diaz 04.10.2016

This is the first article of a series about grid-based layout development.

In this very first part of the series we will start by discussing what grids are, the benefits of grid-based development and last but not least, the most popular resource for building a layout based on a grid: Bootstrap.

What is a grid

Grids in nature - Honeycomb

First things first. Grids are not something that web designers came up with. Grids as visual patterns have been used from ancient times and were born as the abstraction of natural patterns.

So, yep, we can say that visual patterns are not a human invention but a product of mother nature. Natural patterns can be observed in bee combs, snail shells or even the human body.

From being exposed to those patterns in nature, the human eye tends to perceive in a similar patterned way. What means that patterned visual stimuli will conceive a sense of harmony, equilibrium and proportion that are not just easily read but are also received as more aesthetical.

Systematizing grids - Golden Section

The first methodological abstraction humans made out of these natural patterns was the golden ratio. Something you may be familiar with and that has been used in all forms of human creation.

Grids are actually a design approach that provides a modular tool to create patterned designs. Even though grids were not academically systematized until XX century they have been used since ancient times in architecture and design.

Grids in arts from old times - Temple of Athena

Please, note that from the creative perspective grids are absolutely not the only available approach.

As I’m not a designer myself and this is just a short theoretical foreword about the basis of grids I will wrap up by recommending to those interested in design and the theoretical basis of the grid Josef Müller-Brockmann’s Grid Systems in Graphic Design: A Visual Communication Manual for Graphic Designers, Typographers and Three Dimensional Designers.

Grids in web development

Grid layout - New York Times landing page

Now that we know some history about grids let’s see what do they mean for us web developers.

Often we talk/write about grids but we actually mean grid system or grid framework. That is, the tool or set of tools ready to use to get our layout up and running. Bootstrap/Foundation/Sussy anyone?

There are lots of ready-to-use tools available to help us build our layout. But, whatever is our choice it is going to provide us with a system based in modular units: columns in rows which can be more or less explicit but it will always be there.

When using a system or framework – as Bootstrap or Foundation – we expect from it basic responsive layout foundations. Those should help us by saving us the time devoted to building up those foundations by ourselves.

So, time to check how we can put these tools into use. We will implement a very basic design using different tools and check what do their use imply and what are their advantages and disadvantages both in terms of code and performance.

Bootstrap

Bootstrap is with more than 10 million installations the most used front-end framework today and a thriving community that warranties support and it being a reliable and tested solution. This is the reason I chose Bootstrap to represent the front-end frameworks in this series of articles.

Bootstrap provides you with much more than a grid but  for what concerns this article I’ll be just focusing on it. By default, Bootstrap offers a 12 columns responsive grid system with predefined classes for the elements needed to implement it.

Grid basic elements in Bootstrap are: containers, rows and columns. And these is how their corresponding classes look like:

.container .container-fluid .row .col-xs-* .col-sm-* .col-md-* .col-lg-*

Let’s see how they work.

Bootstrap grid containers

The parent/root element of a Bootstrap grid is always a container element. This is the element in charge of controlling the width of the layout we are implementing.

When used the class .container it provides the grid with a horizontally centered fixed-width container to sit on. This width varies with the viewport size and below a given size will match the viewport width.

The second type of container, put into use with the class  .container-fluid,  implements a full-size responsive width container which uses the whole viewport width.

Responsive vs non-responsive container

Maybe you noticed I use for the fluid container the term responsive. Well, I meant it. There is a fundamental difference in behaviour between both types of containers.

The fluid container shrinks and grows along with the viewport size – that is what being responsive means- while the non-fluid container doesn’t scale along it. This last one changes but does so jumping from one width to the next one based on the viewport size. It will eventually start behaving as the fluid container in smaller viewport sizes.

<768px ≥768px ≥992px ≥1200px
Container width same as container 750px 970px 1170px

*These breakpoints are valid for Bootstrap v.3. In v.4 there is going to be one more breakpoint.

Rows

Rows are the second element of the Bootstrap grid if we read it top-down. They are used to group horizontally column elements and the class to be given to any block element to act as a row is  .row.

Rows must be direct children of the grid container, or a column element if implementing nested grids. The reason for this is the way in which grid gutters are implemented in Bootstrap.

Gutters in Bootstrap are generated by using a 15px padding in each column, resulting in a 30px gutter in between two side-by-side columns. Then, for the first and last column of the row to align with the left and right side of the browser a negative margin (-15px) is used in the row, which is the same amount of pixels used in the container and columns padding.

All this playing around with padding and negative margins allows for the content which is not inside columns to align with that inside as both will be 15px away from the browser border due to the padding.

Columns

Columns width is set as a percentage of its parent, always a row, so their behaviour will always be fluid. Their predefined classes syntax is very intuitive:

.col-{viewport size}-{number of columns}

The default column count in a row in Bootstrap grid is 12. To place an element in a row we need to use a class specifying the number of columns it should span at a given viewport category.

Breakpoints

As we have already seen in the container behaviour, it changes in relation with the viewport size. The points at which its behaviour change are the default breakpoints for the Bootstrap grid:

<768px ≥768px ≥992px ≥1200px
Class base .col-xs-* .col-sm-* .col-md-* .col-lg-*

Do you want an element to span 1 column at the smaller viewport sizes (actually starting from the smaller sizes and up to the biggest one)? Then your code will look like this:

<div class=”container”>
  <div class=”row”>
    <div class=”col-xs-1”></div>
  </div>
</div>

Do you want another element to span 3 columns in smaller viewports 5 columns from middle viewports and up? This is your code:

<div class=”container”>
  <div class=”row”>
    <div class=”col-xs-3 col-md-5”></div>
  </div>
</div>

Mobile first

Did you see what happened in that last piece of code?

<div class=”col-xs-3 col-md-5”>

Bootstrap is designed under the mobile first approach. For this reason, its grid classes work starting from a breakpoint and wider screen sizes.

This means, that if you want an element to span 3 columns starting from the smaller devices up to the middle-sized screens, you just use .col-xs-3 and there is no need to use .col-sm-3 class.

What is more, if you want an element to have 12 columns from the smaller displays sizes and then 6 for larger displays and up, your code will be something like this:

<div class=”container”>
  <div class=”row”>
    <div class=”col-lg-6”></div>
  </div>
</div>

Yes, that’s all. By the fault, if you don’t specify otherwise, any block element inside a row will use the 100% of its width. In this example. This behaviour changes at 1200px, when .col-lg-6 comes into play setting the element width to 6 columns of the available space.

Utility classes

In order not to make it too complicated, we will consider just one: offset. Offset increments left margin of a given element as many columns as set in its class at a given viewport size. Or what is the same, adds a left margin as width as the number of columns specified in the class. Its syntax is:

.col-{breakpoint}-offset-{number of columns}

1 col 11 cols

Note: The grey 1 col represents a one column width empty space.

Let’s say that we want to achieve a layout similar to the one above where an element spans 11 columns and starts 1 column to the right for small devices. The code to achieve something like this will be:

<div class=”container”>
  <div class=”row”>
    <div class=”col-sm-11 col-sm-offset-1”></div>
  </div>
</div>

And what would happen if now we want to the set the layout of the above element to span 6 columns starting from the left -with no left margin- for larger displays? Did you guess? Actually, we need to reset that margin. Remember that Bootstrap implementation approach is mobile first. That means that what works for a given display port width works also for wider ones unless it is overwritten.

To overwrite the 1 col offset for small devices we need to use the .col-lg-offset-0 which will reset that margin, and our new line of code will be:

<div class=”col-sm-11 col-sm-offset-1 col-lg-offset-0 col-lg-6”></div>

What we learned in this tutorial:

  • What is a grid and the difference between it and the tools to implement grid layouts.
  • Bootstrap grid three basic components: container, row, column.
  • How to implement a fixed-width or a fluid grid in Bootstrap.
  • How to set the width of an element in grid columns in Bootstrap.
  • How to set different widths for an element based on the viewport size in which is displayed.
  • How to give an element positioned in the grid a left margin and how to reset it.

comments: 0

Notice: Theme without comments.php is deprecated since version 3.0.0 with no alternative available. Please include a comments.php template in your theme. in /var/www/html/wp-includes/functions.php on line 4597

Leave a Reply

Your email address will not be published. Required fields are marked *