Doing semantic with Bootstrap

I use Bootstrap for most of the responsive design work I do nowadays.  It’s not ideal in everything but it gets the job done and it’s so prevalent in the industry that your client will always be able to find somebody to do the maintenance of it after your contract is over.

There are issues with Bootstrap though.  The main issue I have with it is how the documentation promotes the mixing of display logic with content.  This brings you back to pre-CSS times, where the HTML pages were loaded with font weights, font colors, margins, padding, etc.  It makes the content less maintainable for designers, less bandwidth efficient to load and less parseable for computers.  Furthermore, there is absolutely no reuse to be done with the layout logic you define in it.

Here’s an example of what I mean.

The following is one way you could define a page with two rows of data.  The right hand side is dominant (size wise).  An example of this would be a main display area (more dominant) and an “ad” section (less dominant).  The HTML page looks like:


<page>
<div class="row">
<div class="less_important hidden-xs col-sm-4 col-md-4 col-lg-3">
Some less important code</div>
<div class="more_important col-xs-12 col-sm-8 col-md-8 col-lg-9">
Some dominant code</div>
</div>
</page>

I consider this HTML bad practice because it mixes layout information with content information.

There is an alternative though.  Since Bootstrap is designed with SASS, you have access to the SASS mixins that were used to create these classes.  So you can express something similar with the following

In the SCSS file,


class .page {

@include make-row();

}

class .less_important {

@extend .hidden-xs;
@include make-sm-column(4);
@include make-md-column(4);
@include make-lg-column(3);

}

class .more_important {

@include make-xs-column(12);
@include make-sm-column(8);
@include make-md-column(8);
@include make-lg-column(3);

}

In the HTML file,


<page>
<div class="less_important">
Some less important code</div>
<div class="more_important">
Some dominant code</div>
</page>

So you now have something expressed semantically, which is clean and there is even some reuse that can be made… which you didn’t have before.

Addendum:  The approach described here is not supported out of the box.  Take a look here to the best way to do this with Bootstrap 4.0.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s