Custom Download Grid Size not setting? #1778

peterwiggin · 2012-02-06T20:24:41Z

When I change the @gridColumns value to 10 here: http://twitter.github.com/bootstrap/download.html and download, it seems to keep the 12 column setting?

Thanks!

Walgermo · 2012-02-07T08:30:35Z

Same here, I have tried to set it to 16 but still 12 columns.

jenswaern · 2012-02-08T10:56:16Z

Yup, having this problem too (altough I'm using .less), guess I'll set columnwidths manually until this is resolved.

mikaelik · 2012-02-09T11:04:24Z

Me too! Please solve this...Bootstrap is awesome but it´s kind of dissappointing that something so basic doesn´t work.

jarod2d · 2012-02-09T21:59:33Z

In my experience, the values of .spanN, .offsetN etc. get updated when you set custom values. However, if you set the number of columns to, say, 16, classes for .span13 to .span16 do not get created and must be defined manually.

francoischay · 2012-02-10T00:08:00Z

Was planning on testing Bootstrap too but if this is not fixed fast I'll have to go for another solution :'(

brutuscat · 2012-02-10T10:53:04Z

I've seen the code here https://github.com/twitter/bootstrap/blob/master/less/mixins.less and it seems that the grid generation is hardcoded. That's ok because less doesn't support loops. But changing from a default of 16 grids to 12 and not allowing to change it back is not cool :(

brutuscat · 2012-02-10T11:54:48Z

Ok so I have this working now. Kind of hackish but I think it's simple enough.

After checking out https://github.com/twitter/bootstrap/blob/master/less/mixins.less and https://github.com/twitter/bootstrap/blob/master/less/tables.less I have added (and somehow overrided) the functions that add the grids. This is how I have it working in my project where I'm using twitter-bootstrap-rails and rails 3.2

My application.css

css
/*

This is a manifest file that'll automatically include all the stylesheets available in this directory
and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/


Then the overriding takes place here: `bootstrap.css.less` Where I have setup a 16 grid system.

``` less```
@import "twitter/bootstrap";

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

#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); }
}

And it's working for me ;)

jarod2d · 2012-02-10T16:34:13Z

Since LESS doesn't support loops, I wonder if it's possible for the customized download feature to run the stylesheet through a templating system (say, ERB) to generate the appropriate number of columns. Something like this:

<% column_count.times do |column| %>
.span<%= column %> { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, <%= column %>); }
<% end %>

If that's not possible, I think it would be reasonable to include 24 hard-coded column classes by default. I doubt most people will be using over 24 columns anyways.

spyderman4g63 · 2012-02-12T03:22:48Z

I think an issue I am seeing with color properties could be related to this. Issue #1914

Merg1255 · 2012-02-13T13:13:02Z

also, isse #1791

inmarelibero · 2012-02-17T08:56:58Z

experiencing the same problem here.

a possible workaround to avoid using loops in any way could be guarantee a column layout UP-TO 24 columns.

it could be achieved in this way:

in mixins.less:

#gridSystem {
  [...]
  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
    .span1     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
    .span2     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
    .span3     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
    .span4     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
    .span5     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
    .span6     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
    .span7     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
    .span8     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
    .span9     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
    .span10    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
    .span11    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
    .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    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); }
    .span17    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 17); }
    .span18    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 18); }
    .span19    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 19); }
    .span20    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 20); }
    .span21    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 21); }
    .span22    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 22); }
    .span23    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 23); }
    .span24    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 24); }

    // container will always be right
    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @gridColumns); }

    .offset1   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
    .offset2   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
    .offset3   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
    .offset4   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
    .offset5   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
    .offset6   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
    .offset7   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
    .offset8   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
    .offset9   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
    .offset10  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
    .offset11  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
    .offset12  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 12); }
    .offset13  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 13); }
    .offset14  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 14); }
    .offset15  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 15); }
    .offset16  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 16); }
    .offset17  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 17); }
    .offset18  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 18); }
    .offset19  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 19); }
    .offset20  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 20); }
    .offset21  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 21); }
    .offset22  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 22); }
    .offset23  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 23); }
    .offset24  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 24); }

  }
}

/**
 * also #fluidGridSystem .generate() 
 * and #inputGridSystem .generate()
 * must arrive to 24
 */

if I use a 24 columns layout this is right.

if I specify eg. 16 columns layout in variables.less:

...
// GRID
// --------------------------------------------------

// Default 940px grid
@gridColumns:             16;
...

the classes span17-span24 and offset17-offset24 and generated but not used (not bad), and .container is always right

mdo · 2012-02-18T05:26:08Z

Might do the latter, but I'll talk to Jacob to see if we can cook something up for more than 12 columns.

inmarelibero · 2012-02-18T12:11:33Z

I tried this and seems working, do you want me to do a PR to evaluate this better?

mdo · 2012-02-20T22:04:36Z

@inmarelibero Yeah, let's do that for now. Can you submit a pull request against 2.0.2-wip adding the 13-24 columns for all our grid system mixins (there are three)? I'll close this out when that comes through.

It behooves me to say that we don't actually need the last .span or .offset classes as if you need something that's 100% width or 100% offset, you don't actually need the grid markup. However, for now we should leave those in.

inmarelibero · 2012-02-21T08:14:37Z

cool, I'll do it as soon as possible

srhise · 2012-02-21T17:18:43Z

please please do this as soon as possible customizing up to 24 columns was one of the biggest reasons why I loved 1.4

inmarelibero · 2012-02-21T18:24:20Z

@markdotto @srhise you find PR at #2143

mdo · 2012-02-21T21:44:15Z

Closing to punt to the pull request. #2143.

dop3 · 2012-02-24T18:59:42Z

maybe i'm missing some... but...
would it be be enough to change ".navbar-fixed-bottom .container { .span(12); }" to .navbar-fixed-bottom .container { .span(@gridColumns); } in mixins.less at line 508????

that worked for me....
thanks to L

ghost · 2012-07-01T13:39:15Z

@brutuscat or anybody, how do you calculate 4.25531915 for 16collumns and 6.382978723% for 12? thank you all.

brutuscat mentioned this issue Feb 10, 2012

Converting from 12 to 24 column grid with same container width #1834

Closed

spyderman4g63 mentioned this issue Feb 12, 2012

CSS customization doesn't produce expected output #1914

Closed

jamiequint mentioned this issue Feb 14, 2012

bootstrap can`t be customized over 12 columns. #1791

Closed

mdo closed this as completed Feb 21, 2012

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Download Grid Size not setting? #1778

Custom Download Grid Size not setting? #1778

peterwiggin commented Feb 6, 2012

Walgermo commented Feb 7, 2012

jenswaern commented Feb 8, 2012

mikaelik commented Feb 9, 2012

jarod2d commented Feb 9, 2012

francoischay commented Feb 10, 2012

brutuscat commented Feb 10, 2012

brutuscat commented Feb 10, 2012

jarod2d commented Feb 10, 2012

spyderman4g63 commented Feb 12, 2012

Merg1255 commented Feb 13, 2012

inmarelibero commented Feb 17, 2012

mdo commented Feb 18, 2012

inmarelibero commented Feb 18, 2012

mdo commented Feb 20, 2012

inmarelibero commented Feb 21, 2012

srhise commented Feb 21, 2012

inmarelibero commented Feb 21, 2012

mdo commented Feb 21, 2012

dop3 commented Feb 24, 2012

ghost commented Jul 1, 2012

Custom Download Grid Size not setting? #1778

Custom Download Grid Size not setting? #1778

Comments

peterwiggin commented Feb 6, 2012

Walgermo commented Feb 7, 2012

jenswaern commented Feb 8, 2012

mikaelik commented Feb 9, 2012

jarod2d commented Feb 9, 2012

francoischay commented Feb 10, 2012

brutuscat commented Feb 10, 2012

brutuscat commented Feb 10, 2012

jarod2d commented Feb 10, 2012

spyderman4g63 commented Feb 12, 2012

Merg1255 commented Feb 13, 2012

inmarelibero commented Feb 17, 2012

mdo commented Feb 18, 2012

inmarelibero commented Feb 18, 2012

mdo commented Feb 20, 2012

inmarelibero commented Feb 21, 2012

srhise commented Feb 21, 2012

inmarelibero commented Feb 21, 2012

mdo commented Feb 21, 2012

dop3 commented Feb 24, 2012

ghost commented Jul 1, 2012