CODEWITHSUNDEEP
csstwitter-bootstraplessmixins
Adam Gordon Bell
Adam Gordon Bell

Reputation: 3093

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 the fluid grid though:

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

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

I have tried:

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

and some variations on it from some related stackoverflow posts but its not getting responsive.

Upvotes: 3

Views: 5504

Answers (3)

Ryan
Ryan

Reputation: 2807

I found your question looking for a way to use .makeColumn() for responsive grids (1200px, 768px, etc). The .makeColumn() mixin that is including with Bootstrap 2 accounts for only the 940px grid.

To fix it, I just extended the .makeColumn() mixin in a LESS file that loads 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));
  }
}

Upvotes: 1

Ella Ryan
Ella Ryan

Reputation: 1155

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

Mixins for semantic fluid grid:

.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 just like the non-fluid mixins:

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

Upvotes: 3

Adam Gordon Bell
Adam Gordon Bell

Reputation: 3093

Ok, I think I have 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);
  }
}

Upvotes: 1

Related Questions