CODEWITHSUNDEEP
htmltwitter-bootstraplesstwitter-bootstrap-3grid-layout
toksing
toksing

Reputation: 347

Bootstrap 3 grid in less vs in html

What is the best practice for implementing the bootstrap 3 grid? There are two options, via classes in html and via less mixins.

Using bootstrap classes in html and bootstrap.css (which seems to be the standard):

<div class="container">
    <div class="row">
        <div class="column-md-6 column-xs-8">
            <p>test</p>
        </div>
        <div class="column-md-6 column-xs-4">
            <div class="row">
                <div class="column-md-8 column-xs-6">
                    <p>Another test</p>
                </div>
                <div class="column-md-4 column-xs-6">
                    <p>Yet another test</p>
                </div>
            </div>
        </div>
    </div>
</div>

Using LESS and bootstrap mixins and appropriate html structure:

<div id="maincontent">
    <div id="maincontentarea">
       <div id="blogarticles">
          <p>test</p>
       </div>
       <div id="whatsnew">
          <div id="whatsnewarea">
             <div id="whatsnewheading">
                <p>Another test</p>
             <div>
             <div id="whatsnewlist">
               <p>Yet another test</p></div>
             <div>
          </div>
       </div>
    </div> 
 <div>

and the corresponding LESS:

#maincontent{
   .container();
   #maincontentarea{
      .make-row();
      #blogarticles{
         .make-md-column(6);
         .make-xs-column(8);
      }
      #whatsnew{
         .make-md-column(6);
         .make-xs-column(4);
         #whatsnewarea{
            .make-row();
            #whatsnewheading{
              .make-md-column(8);
            }
            #whatsnewlist{
              .make-xs-column(6);
            }
         }
      }
   }
}

It sounds like a nice idea to have a .LESS file simply using the bootstrap mixins to define the structure, but is that not essentially duplicating the element structure in the less file which is already defined in LESS. Which one is more maintainable?

Upvotes: 2

Views: 2162

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

Personally i think using Bootstrap's class will give you a maintainable structure. Otherwise you could prefer a more semantic solution. Note your appropriate html structure don't have added value in my opinion and is not semantic.

Using and implementing Bootstrap in a more semantic way won't be always easy:

Example of problem with the grid to have to solve: How can I create multiple rows using semantic markup in Bootstrap 3?. Also Twitter's Bootstrap 3.x semantic mobile grid and especially pay attention to the answer of @Gravy (https://stackoverflow.com/a/18667955/1596547).

Also interesting : How to use sass to properly avoid embedding twitter bootstrap class names on HTML

Upvotes: 5

Related Questions