New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[3.0rc1] .make-row()/.make-column() grid mixins should take gutter width as parameters #8935

Closed
talisto opened this Issue Jul 31, 2013 · 1 comment

Comments

Projects
None yet
2 participants
@talisto

talisto commented Jul 31, 2013

Bootstrap 2.x's fluid grid used percentage-based gutter margins for the rows/columns, which allowed for nice small nested grid layouts like so:

screenshot_84

Now that the grid gutters are fixed-width in 3.x, nesting rows/columns makes for rather ugly results within small columns, as the gutter widths end up being too large:

screenshot_83

I'm not going to start a debate over which grid system is better (spoiler: I like Bootstrap 2.x's system MUCH better ;) ), but here's my proposal to at least give some options to make this a little easier to customize:

The make-row() mixin currently uses the global @grid-gutter-width variable to set the margins on the row. Likewise, the .make-column() mixin works the same way. If the gutter width was a parameter to the mixins, I could (for example) make a custom condensed grid like so:

@condensed-gutter-width: 8px;
.row-condensed {
    .make-row(@condensed-gutter-width);
    .col-lg-1 {
        .make-column(1,@condensed-gutter-width);
    }
    ...
}

...then when I wanted to use the condensed grid, I could just use row-condensed instead of row in my CSS.

This would be even easier with an extra mixin such as .make-columns(@gutter-width) to batch out all the columns at once.

@mdo mdo closed this in 18a4082 Aug 7, 2013

@eratzlaff

This comment has been minimized.

Show comment
Hide comment
@eratzlaff

eratzlaff Aug 7, 2013

Contributor

I like the idea of row-condensed. 👍

Contributor

eratzlaff commented Aug 7, 2013

I like the idea of row-condensed. 👍

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment