Hopiu/bootstrap
1
0
Fork 0
mirror of https://github.com/Hopiu/bootstrap.git synced 2026-03-27 01:30:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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 12 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
dist/css/bootstrap.css.map vendored
View file

Binary file not shown.

BIN
docs/dist/css/bootstrap.css.map vendored
View file

Binary file not shown.

4
less/grid.less
View file

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

102
less/mixins/grid.less
View file

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