Grid System or Twitter Bootstrap

2

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

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

    
asked by anonymous 20.02.2015 / 12:18

1 answer

3

Come on, first what would be a Grid ?

A grid is a grid consisting essentially of rows, columns, and margins. This network serves to define the relationships of alignment, proportion and positioning of the elements of a layout. The intent of the grid is to facilitate the layout of large amounts of information and to guide the reader's eye.

Why use a Grid?

There are many advantages to grids based creation. Organizing information is the primary function, but we can cite 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 for building momentum.

Reference: link

About the 960 Grid System:

Many people use and approve of the system however 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 960 pixels, that is, if you are going to work with larger widths you will have to practically redo the grid, as it is not so simple to adjust the widths of the columns and margins.

The biggest problem (in my point of view) is semantics. If you're concerned with semantics and web standards, inserting classes like container_12 or grid_7 prefix_1 into your code is something that pollutes you and is nothing semantic.

Example taken from the site itself ( link ):

<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 can notice on entering the site the warning:

  

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

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

About the bootstrap:

It's an amazing GRID system that lets you work with the most current resolutions.

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

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

Another downside is that all applications that use bootstrap end up having the same identity, so you do not stand out in the middle of a lot of pretty much identical interfaces.

Conclusion:

I think the bootstrap is the most appropriate since 960gs has many more limitations and the bootstrap goes well at boot since it was created to be a bootstrap framework. And it does that job very well, but it 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 needed.

But what I think is that you should look for more semantic alternatives since you do not need to use classes and you do not need to "dirty" your code, and semantic Grids do it very well because they use pre- SASS, LESS, Stylus processors that mathematically calculate the value of the 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 Semantic GS where you define the column width, margin, and number of columns and the preprocessor generates the code with the necessary widths without the need to use classes.

An alternative is Jeet GS which is the best grid in my opinion since you can work with measures like 1/3 (1 third ) or% (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.

    
20.02.2015 / 17:13