mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-09 07:06:36 +02:00
Code Issues Releases Wiki Activity

rename and refactor a smidge to add medium grid mixins

Browse Source
This commit is contained in:
Mark Otto
2013-08-12 00:36:22 -07:00
parent f50aea30c4
commit efe62a7ef4
2 changed files with 128 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
css.html
View File

@@ -421,39 +421,104 @@ base_url: "../"
} }
} }
// Generate the column offsets
.make-column-offset(@columns) {
@media (min-width: @grid-float-breakpoint) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-column-push(@columns) {
@media (min-width: @grid-float-breakpoint) {
left: percentage((@columns / @grid-columns));
}
}
.make-column-pull(@columns) {
@media (min-width: @grid-float-breakpoint) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the small columns // Generate the small columns
.make-small-column(@columns; @gutter: @grid-gutter-width) { .make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative; position: relative;
float: left;
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
// Inner gutter via padding // Inner gutter via padding
padding-left: (@gutter / 2); padding-left: (@gutter / 2);
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
@max-width: (@grid-float-breakpoint - 1);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (max-width: @max-width) { @media (min-width: @screen-small) {
float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
} }
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-small) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-small) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-small) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-medium) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-medium) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-medium) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-medium) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-large) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
right: percentage((@columns / @grid-columns));
}
}
{% endhighlight %} {% endhighlight %}
<h4>Example usage</h4> <h4>Example usage</h4>

51
less/mixins.less
View File

@@ -488,7 +488,7 @@
} }
// Generate the small columns // Generate the small columns
.make-small-column(@columns; @gutter: @grid-gutter-width) { .make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative; position: relative;
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
@@ -504,24 +504,24 @@
} }
// Generate the small column offsets // Generate the small column offsets
.make-small-column-offset(@columns) { .make-sm-column-offset(@columns) {
@media (min-width: @screen-small) { @media (min-width: @screen-small) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-small-column-push(@columns) { .make-sm-column-push(@columns) {
@media (min-width: @screen-small) { @media (min-width: @screen-small) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-small-column-pull(@columns) { .make-sm-column-pull(@columns) {
@media (min-width: @screen-small) { @media (min-width: @screen-small) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
// Generate the large columns // Generate the medium columns
.make-large-column(@columns; @gutter: @grid-gutter-width) { .make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative; position: relative;
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
@@ -537,22 +537,55 @@
} }
// Generate the large column offsets // Generate the large column offsets
.make-large-column-offset(@columns) { .make-md-column-offset(@columns) {
@media (min-width: @screen-medium) { @media (min-width: @screen-medium) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-large-column-push(@columns) { .make-md-column-push(@columns) {
@media (min-width: @screen-medium) { @media (min-width: @screen-medium) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-large-column-pull(@columns) { .make-md-column-pull(@columns) {
@media (min-width: @screen-medium) { @media (min-width: @screen-medium) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-large) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
right: percentage((@columns / @grid-columns));
}
}
// Form validation states // Form validation states
// //