Grid layout - why should I use it, and should I use a framework like Bootstrap or Foundation?

Question

I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated.

So I read about the prospect of a grid layout. All of the articles I found are oriented toward an 'artistic' explanation (golden ratio ect). I am a coder at heart, I need a clear & logical reason to use a grid layout (for example: 'columns can be easily stacked on top of each other on mobile screen, and expand horizontally on larger screens'). Can someone give me the pros and cons of applying a grid system to my website? Personally do you think using a grid system is good?

If the answer is yes, should I use a premade grid system like from Twitter Bootstrap/Foundation or just make one for my own? All of the other features are unnecessary for me an irrelevant to my problem.

Thanks! :D

Answer 1

I agree with @kunalbhat that this might not be the best area to ask this but since you did I will try to answer it.

The grids are designed allow for speed and adaptability. Speed in multiple senses. The first part of the speed is the speed of writing the code. You can easily get the layout you want when you are using the grid system and everything aligns correctly. You don't have to remember your tables and columns and col-spans, etc.

The second speed is modifying your code. Inevitably you will need to go back and make changes, with a grid this is easily to do. Changing a col-md-7 to a col-md-6 easily makes a little tweak in the layout of your page that can easily be tracked and performed.

You mentioned responsive design, both Bootstrap and Foundation have responsive grids. The grids will snap to different sizes based on the viewport size. However you have control as well. For example if you want something to take 1/12th the screen in desktop, 1/4th on a tablet, and 100% on a phone that is easily done with Bootstrap and Foundation, both have grid classes that target specific viewports.

The also provide visibility classes based on those viewports.

For the "bloated" part that is easily solved. Using SCSS you can easily only import portions of a library. For example for one project I was on I only imported the Grid and it was considerably smaller.

Answer 2

I happen to think that this is a SO question, simply because of one of the main cons of CSS grid systems: semantic.

I think semantic is important for a web developer and having a class named col-md-7 is not the most semantic thing to do.

But I like grids, because they are easy and quick to use, so I started to use LESS. Because it allows me to use variables and functions(mixins) in CSS, I can build my own grid system on my CSS rather then on my HTLM.

You can start on Frameless and customize your own 'classes'.