Restore grid mixins

[mdo]

Gotta bring back those grid mixins so folks can generate any number of columns easily—screw this no mixin business we have right now.

[DaRosenberg]

Yes please. And please, we need to have mixins both for creating rows and for creating columns. It sucks to have to add non-semantic .row and .span-x classes to elements.

[cvrebert]

(Removed tangential discussion thread due to lack of relevance)

[elithrar]

Note that this appears to fix the issues introduced in e4bb388 — thanks.

[mdo]

Hey @jonschlinkert, is there a way of generating a comma-separated list of classes in Less 1.4 (or one slated for Less 1.5? I'd like to replace the static lists at https://github.com/twbs/bootstrap/blob/3.0.0-wip/less/grid.less#L16 with one that can be generated based on some Less variables (e.g., set the # of cols and get the appropriate classes).

[mdo]

As a heads up, this is being punted until at least 3.1. Sorry folks! <3

[soreng]

@mdo you could do a loop like this

.grid(@cols) { 
    .col(@index) when (@index = @cols) { 
        @name: ~".col-@{index}";
        .col(@index - 1, @name); 
    }
    .col(@index, @names) when (@index > 0) {
        @name: ~".col-@{index}";
        .col(@index - 1, ~"@{names}, @{name}"); 
    }
    .col(@index, @names) when (@index = 0) {
        @{names}{
            float:left;
        }
    }
    .col(@cols);
}

.grid(15);
.grid(12);
.grid(9);

Wich yields:

.col-15, .col-14, .col-13, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
  float: left;
}
.col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
  float: left;
}
.col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
  float: left;
}

[jonschlinkert]

@mdo is @soreng's example what you're looking for?

[cvrebert]

I am currently taking a crack at this.

[brunoamaral]

I tried it out and it seems to work for 16 columns. Only problem I found so far is that the @screen-lg variable isn't setting the width of the container properly (imo).

Tried it with a width of 940px and got the following result in bootstrap.css:

@media (min-width: 940px) {
.container {
max-width: 960px;
}

Here's the code I am using for tests: brunoamaral/adp@f8dcbf7

nevermind, I was looking at the wrong variable in variables.less. sorry.

[yogeshxit]

Generating 16 grid from customizer is not available?

[zlatanvasovic]

@codebountycharlie Are you spammer?

[goto-bus-stop]

@zdroid http://www.codebounty.co/

[zlatanvasovic]

But why is he promoting it here?

2013/9/11 René Kooi [email protected]

@zdroid https://github.com/ZDroid http://www.codebounty.co/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/9436#issuecomment-24224197
.

Zlatan Vasović - ZDroid

[goto-bus-stop]

Because @jperl put a $5 bounty on this issue... the @codebountycharlie bot appears to want to notify the world of that bounty's existence

[jonschlinkert]

IMO it would be good to understand exactly what this grid should do, so let's summarize the goals of the grid first. then we can address the points one by one and get this done for 3.1.

I'm just going to start with @mdo's comment:

• Use LESS vars to define number of columns and generate the related classes (per

I can update this list based on feedback. What are the goals related to: fluid, responsive, customizing class names, gutters, etc?

[brunoamaral]

From what I have been following in the thread, at the moment the grid system is hardcoded.

The goal is to be able to define how many columns are available in the final css, like @cvrebert did on his alternative (#9970).

The resulting css is a bit redundant, as he pointed out, but I have been using it and it works like it is supposed to.

[jonschlinkert]

@brunoamaral thanks. @mdo what are your thoughts on @cvrebert's code? I don't have an opinion, I just want to help if I can.

[mayankbatra]

Not sure i should be creating a new issue for this. But is related to responsive grid so posting here.

Responsive Gutters seems like a must. For eg. while nesting the size of gutter does not change. Aligning detailed and highly nested columns is a pain, because then the gutter value becomes too big for the size of the actual column.

I have a nested scenario in which the width of column left is only col-md-3 column is 15px while the i have gutter of 15px on each side.

I dont have a clear solution but maybe sometthing to think about