Grid System or Twitter Bootstrap

Question

I’m starting now to search for these "css layout setters", and the ones I hear most about is: 960 Grid System (http://960.gs/) and twitter bootstrap (http://getbootstrap.com/css/). I would like to know, in which situation is more appropriate than the other?

I came to use the Grid System in project I did.

Answer 1

Come on, first of all what would be a Grid?

A grid is a grid composed essentially of guide rows, columns, and margins. This network serves to define the relations of alignment, proportion and positioning of the elements of a layout. The intention of the grid is to facilitate the diagramming of large amounts of information and guide the reader’s gaze.

Why use a Grid?

There are many advantages in creating based on grids. Organizing information is the main function, but we can cite orientation of the reader’s attention through visual focuses, simplification of the creation process, hierarchy structuring and production agility as other benefits. Grids increase the accuracy of a layout and are great tools to create dynamism.

Reference: http://blog.popupdesign.com.br/perguntas-frequentes-sobre-grids/

About the 960 Grid System:

Several people use and approve the system but it is outdated since it was developed in a period where the most popular resolution was 1024x768px.

Another point is that it is limited to just 960 pixels, that is, if you are going to work with larger widths you will have to practically redo the grid, because it is not so simple to adjust the widths of columns and margins.

The biggest problem (in my view) is semantics. If you are concerned with semantics and web patterns, insert classes like container_12 or grid_7 prefix_1 in your code is something that pollutes you and is nothing semantic.

Example taken from the site itself (http://960.gs/):

<div class="container_12">
  <div class="grid_7 prefix_1">
    <div class="grid_2 alpha">
      ...
    </div>
    <div class="grid_3">
      ...
    </div>

    <div class="grid_2 omega">
      ...
    </div>
  </div>
  <div class="grid_3 suffix_1">
  ...
  </div>
</div>

And as you may notice when entering the site the warning:

If you want a Responsive grid framework, check out Unsemantic.com

That is, it is not a fluid or responsive grid. 960gs recommends Unsemantic but it is another grid system that loads the same problems as 960gs.

About the bootstrap:

It is an amazing GRID system that allows you to work with the most current resolutions.

It does not have the same limitation of 960gs and you can work with larger widths using your classes XS SM MD LG, it is fluid and thought for mobile first.

But it has the same problem as the previous one. It is completely based on classes and many of them are not semantic, which can happen to be like this col-md-xs-lg-motherfucker.

Another downside is that all applications that use bootstrap end up having the same identity, this makes you not stand out in the middle of multiple interfaces virtually equal.

Completion:

I think bootstrap is the most appropriate since the 960gs has much more limitations and bootstrap fits well to the start since it was created to be a boot framework. And he does this job very well, but he was not created to be the basis of customizable interfaces.

What I really recommend is that you follow the good practices (variables, modules and file structure) that these frameworks bring and build your own framework if necessary.

But what I think is that you should look for more semantic alternatives since it is not necessary to use classes and it will not be necessary to "dirty" your code, and the semantic Grids do it very well because they use pre-processors SASS, LESS, Stylus which mathematically calculate the value of columns in pixels and transform these values into percentages. That is, through mixins and variables they define through the CSS itself the width of the elements.

An example would be the Semantic GS where you define the column width, the margin and the number of columns and the preprocessor generates the code with the proper widths, without the need to use classes.

An alternative is the Jeet GS which is the best grid in my opinion because, you can work with measures like 1/3 (1 third) or 2/3 (2 thirds) of the site width and has many utilities that facilitate development and both Jeet and Semantic are fluid and responsive.

Now just choose the one that best suits your need.