Solved

Are there advantages to avoiding the Twitter Bootstrap grid system?

Posted on 2016-10-20
7
105 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 58

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 58

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 58

Expert Comment

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

Featured Post

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

623 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