Solved

Are there advantages to avoiding the Twitter Bootstrap grid system?

Posted on 2016-10-20
7
30 Views
Last Modified: 2016-11-03
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
Comment
Question by:mike99c
  • 3
  • 3
7 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41851561
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
 

Author Comment

by:mike99c
ID: 41851604
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41851661
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:mike99c
ID: 41851675
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
 

Author Closing Comment

by:mike99c
ID: 41872014
Thanks for this. I am satisfied that there is no reasonable case to avoid using the grid classes.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41872067
You are welcome - good luck with it.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now