...
Clever Geek Handbook

How to make a Responsive (Row Fluid) Mixin for Bootstrap

I can replace this code with

 <div class="row">
      <div class="span10">...</div>
      <div class="span2">...</div>
    </div>

With this to make it more semantic

<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

<!-- Less stylesheet -->
.article {
  .makeRow(); 
  .main-section {
    .makeColumn(10);
  }
  .aside {
    .makeColumn(2);
  }
}

How can I do this with a fluid grid:

 <div class="row-fluid">
      <div class="span10">...</div>
      <div class="span2">...</div>
    </div>

<!-- Less stylesheet -->
.article {
  ???
  .main-section {
    .makeColumn(10);
  }
  .aside {
    .makeColumn(2);
  }
}

I tried:

.article { #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);}

and some variations on it from the linked StackOverflow question but don't respond to them

+3


source to share


3 answers


This worked for me .. posting in case it helps anyone else.

Semantic fluid grid mixins:

.makeFluidRow(){
    width: 100%;
    .clearfix();
}

.makeFluidCol(@span:1,@offset:0){
    float: left;
    #grid > .fluid .span(@span);
    #grid > .fluid .offset(@offset);
    &:first-child {
        margin-left: 0;
        .offsetFirstChild(@offset);
    }
}


Use them in the same way as non-liquid mixins:

.article {
    .makeFluidRow();
    .main-section {
        .makeFluidCol(10); //Spans 10 cols
    }
    .aside {
        .makeFluidCol(1,1); //offset by one, spans 1
    }
}
+3


source


Ok, I think I got it. I am updating the question to add offsets with the fluid layout, as this is where I ran into the most trouble.



<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

<!-- Less stylesheet -->
.article {

  .main-section {
     #grid > .fluid > .offset(2);
     #grid > .fluid > .span(8);
  }
  .aside {
    #grid > .fluid > .span(2);
  }
}
+1


source


I found your question looking for a way to use .makeColumn () for flexible grids (1200px, 768px, etc.). The .makeColumn () component that Bootstrap 2 includes, only takes into account the 940px grid.

To fix this, I just extended the mixing .makeColumn () in the LESS file that is loaded after the Boostrap files.

// Improve .makeColumn to work with 1200px responsive grid
.makeColumn(@columns: 1, @offset: 0) {
  @media (min-width: 1200px) {
    margin-left: (@gridColumnWidth1200 * @offset) + (@gridGutterWidth1200 * (@offset - 1)) + (@gridGutterWidth1200 * 2);
    width: (@gridColumnWidth1200 * @columns) + (@gridGutterWidth1200 * (@columns - 1));
  }
}
+1


source






More articles:


All Articles