Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Are there advantages to avoiding the Twitter Bootstrap grid system?

Posted on 2016-10-20
7
Medium Priority
?
129 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 59

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 59

Accepted Solution

by:
Julian Hansen earned 2000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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 59

Expert Comment

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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

670 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