CODEWITHSUNDEEP
csstwitter-bootstrapless
pguardiario
pguardiario

Reputation: 54984

Why is bootstrap less ignoring my variables?

When I do:

@textColor: green;

It works. My text turns green. But when I do:

@gridColumnWidth:   10px;
@gridGutterWidth:   0px;
@fluidGridColumnWidth:  1%;
@fluidGridGutterWidth: 0%;

There is no change to my layout. Can someone explain what's happening?

update I notice that the css that gets generated seems correct but then at the bottom there is a @media (min-width: 1200px) and other similar sections which re-generate the grid with the default values.

Upvotes: 2

Views: 1330

Answers (3)

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

I have struggled with this myself for some time. But I finally figured it out, and it is incredibly simple. Take a look at the question I posted where I have also updated a walk-through solution.

How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

If you have any questions, please let me know. I hope this helps!

For a quick answer, the only variables you should be changing with respect to the grid system are the following:

@gridColumns:             12;    //number of columns
@gridColumnWidth:         60px;  //column width
@gridGutterWidth:         20px;  //gutter width
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth *         (@gridColumns - 1));

You should only be changing the @gridColumnWidth and the @gridGutterWidth variables. The percentage variables are calculated from there. If you want to change the column and gutter width for each media query breakpoint, you need to do this for each breakpoint variable:

@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth *         (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     70px;
@gridGutterWidth1200:     30px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 *     (@gridColumns - 1));

So, to change the entire responsive grid system, you change six variables. This is NOT hard coded as Farhan states.

The easiet way to change these variables (and equally effective as changing them yourself) is through their website:

http://twitter.github.com/bootstrap/customize.html

I hope this has helped someone!

Upvotes: 0

Andri
Andri

Reputation: 153

Twitter Bootstrap is not very well crafted. Its actually annoying and bloated. In the responsive.less file, the grid is regenerated for each responsive step, so you have to go in there and configure it to your liking.

Upvotes: 1

Farhan Ahmad
Farhan Ahmad

Reputation: 5198

The grid generation is hardcoded. You can override like this:

@import "twitter/bootstrap";

// Your custom stylesheets goes here (override Less here)
@gridColumnWidth: 10px;
@gridColumns: 16;
@fluidGridColumnWidth: 1%;

#gridSystem {
  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
    // Default columns
    .span12 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
    .span13 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); }
    .span14 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); }
    .span15 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); }
    .span16,
    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); }
    // Offset column options
    .offset12 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 12); }    
    .offset13 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 13); }    
    .offset14 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 14); }    
    .offset15 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 15); }    
  }
}

// Fluid grid system
// -------------------------
#fluidGridSystem {
  // Take these values and mixins, and make 'em do their thang
  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
    // Row surrounds the columns
    .row-fluid {
      // Default columns
      .span13 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 13); }
      .span14 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 14); }
      .span15 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 15); }
      .span16 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 16); }
    }
  }
}



// Input grid system
// -------------------------
#inputGridSystem {
  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
    input,
    textarea,
    .uneditable-input {
      &.span13 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); }
      &.span14 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); }
      &.span15 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); }
      &.span16 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); }
    }
  }
}

table {
  .span13 { .tableColumns(13); }
  .span14 { .tableColumns(14); }
  .span15 { .tableColumns(15); }
  .span16 { .tableColumns(16); }
}

Upvotes: 0

Related Questions