rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Overhaul semantic grid mixins

Browse Source 
- Drops all the `.make-**-column` mixins for a single set to be used
within (or outside) media queries.
- Renames `.container-fixed` to `.make-container` for consistency.
- Updates built-in grid system to use new setup.

See http://jsbin.com/qiqet/2/ for an example of it in action.
This commit is contained in:
Mark Otto 2014-07-08 03:38:23 -07:00
parent 9f53f9aea1
commit c3b0870ec0
4 changed files with 14 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

4
less/grid.less
View File

@ -8,7 +8,7 @@
// Set the container width, and override it for fixed navbars in media queries. // Set the container width, and override it for fixed navbars in media queries.
.container { .container {
.container-fixed(); .make-container();
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
width: @container-sm; width: @container-sm;
@ -28,7 +28,7 @@
// width for fluid, full width layouts. // width for fluid, full width layouts.
.container-fluid { .container-fluid {
.container-fixed(); .make-container();
} }

96
less/mixins/grid.less
View File

@ -1,9 +1,9 @@
// Grid system /// Grid system
// //
// Generate semantic grid columns with these mixins. // Generate semantic grid columns with these mixins.
// Centered container element // Centered container element
.container-fixed(@gutter: @grid-gutter-width) { .make-container(@gutter: @grid-gutter-width) {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding-left: (@gutter / 2); padding-left: (@gutter / 2);
@ -18,105 +18,23 @@
&:extend(.clearfix all); &:extend(.clearfix all);
} }
// Generate the extra small columns .make-col(@gutter: @grid-gutter-width) {
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative; position: relative;
float: left; float: left;
width: percentage((@columns / @grid-columns));
min-height: 1px; min-height: 1px;
padding-left: (@gutter / 2); padding-left: (@gutter / 2);
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
} }
.make-xs-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
.make-xs-column-push(@columns) {
left: percentage((@columns / @grid-columns));
}
.make-xs-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
// Generate the small columns .make-col-span(@columns) {
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
} .make-col-offset(@columns) {
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} .make-col-push(@columns) {
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} .make-col-pull(@columns) {
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}