Solved

Are there advantages to avoiding the Twitter Bootstrap grid system?

Posted on 2016-10-20
7
50 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 54

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 54

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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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 54

Expert Comment

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

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how to avoid redundand ajax calls 5 28
MouseOver help for Intranet website 2 22
Changing Two Areas of a Page 5 15
Under active page on navigation bar 8 11
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

785 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