• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 175
  • Last Modified:

Are there advantages to avoiding the Twitter Bootstrap grid system?

I implement websites using Bootstrap 3. Our front end developer is of the opinion that it is best to avoid using the grid system classes and control the positioning of elements from the css.

The reasons given are:

  • The grid system was originally meant for rapid prototyping and not for live sites
  • There is less clutter in the HTML
  • You can control the precise positioning from the style sheets

Please note that all other Bootstrap classes such as container, row etc are used. We simply avoid the grid related column classes.

I would appreciate feedback on this and whether there are any other advantages to not using the grid classes.
0
mike99c
Asked:
mike99c
  • 3
  • 3
1 Solution
 
Julian HansenCommented:
I implement websites using Bootstrap 3. Our front end developer is of the opinion that it is best to avoid using the grid system classes and control the positioning of elements from the css.
I don't understand this statement - Bootstrap is css. How much of it you use is up to you.
The grid system was originally meant for rapid prototyping and not for live sites
No the grid system is to facilitate a responsive layout - one that adapts dynamically to the screen size it is on.
There is less clutter in the HTML
This is pretty subjective - it is entirely dependent on the site in question.
You can control the precise positioning from the style sheets
What does precise positioning mean - to the pixel? Great when you want a pixel perfect render of a design but falls off the bus when you move to mobile.

We live in a mobile first world - mobile is the predominant point of access in many cases. Google is now optimising searches based on a sites mobile readiness.

Yes you can create a very nice render of a designed page with "positioning" but you can forget about responsiveness.

Responsiveness means a tradeoff - you go with a fluid design to accommodate the devices your clients will be using.

The comments above seem to indicate that a lack of understanding about what a responsive (mobile first) site is all about and why frameworks like Bootstrap and Foundation are important to achieving this.
0
 
mike99cAuthor Commented:
Thanks for your comments Julian. One of the main reasons for posting this is to decide whether to continue with our current approach or embrace the grid classes.

Regarding responsiveness, the sites we have created using Bootstrap without the grid classes are indeed responsive. We still use the Bootstrap screen sizes of xs, sm, md and lg. We make use of the media queries in the css to correctly position elements for all devices including mobile. We don't have a problem with this.

Just to clear up a one of your points:

"I don't understand this statement - Bootstrap is css. How much of it you use is up to you."

I simply meant that instead of referencing the column classes in the HTML, we would do the equivalent within the css.
0
 
Julian HansenCommented:
Regarding responsiveness, the sites we have created using Bootstrap without the grid classes are indeed responsive.
If it is working for you - great. Bootstrap is a tool that allows you to start building responsive sites out of the box - if you don't want to use it or it does not work for you then don't.

The grid classes are there to make the stacking and hiding of showing content easier - you don't have to do any additional styling. Again if that is not working for you - change it, modify it or toss it.

However, that does not change the fact that Bootstrap is a mainstream choice for responsive apps and is not a prototyping tool.

We customise bootstrap to be able to use N columns - we have a script that generates the styles for any column layout we want - which helps to reduce the "HTML Clutter" as we can do
<div class="row">
  <div class="col-md-7-3"></div>
  <div class="col-md-7-4"></div>
</div>

Open in new window

Or any combination we choose - we give the script N and it spits out the styles for that grid layout. You can mix and match grids to suit your needs use a 7 column layout in a 12 column cell etc.
(More here https://www.experts-exchange.com/articles/28663/Create-N-column-layout-for-Bootstrap.html)
Using the above we can produce pretty much any layout we want using custom grids.

It is not the beginning and end of responsive design - but there is a reason it is so prolifically used - in that it defines a springboard to get things going very quickly. It is also highly customisable so you can add to it and / or override any features you want.

I simply meant that instead of referencing the column classes in the HTML, we would do the equivalent within the css.
And my point was Bootstrap is already CSS so your comment does not really make sense. I think what you are saying is instead of using Bootstrap classes you define your own classes to layout your document - which is basically customising Bootstrap to use the bits you want and adding in the bits it does not provide.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
mike99cAuthor Commented:
Thanks Julian, I really value your feedback. I am starting to reconsider my position.

I'll hang on a little longer to receive further feedback.
0
 
mike99cAuthor Commented:
Thanks for this. I am satisfied that there is no reasonable case to avoid using the grid classes.
0
 
Julian HansenCommented:
You are welcome - good luck with it.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now