Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A way to mixin fluid bootstrap grids
.fluid-row {
div, section, article, li { /* Needs testing on li's */
&:first-child { /* using first child and margin-left for IE support */
margin-left: 0;
}
}
}
.fluid-column(@columns: 1, @offset: 0, @reset: default) {
.input-block-level();
float: left;
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
margin-left: (@fluidGridGutterWidth * @offset) + (@fluidGridGutterWidth * (@offset - 1)) + (@fluidGridGutterWidth * 2);
*margin-left: @fluidGridGutterWidth - (.5 / @fluidGridGutterWidth * 100 * 1%);
.fluid-column-reset(@reset);
}
.fluid-column-reset(default) {
@media (max-width: 1024px) {
float: none;
width: 100%;
*width: 100%;
margin-left: 0;
*margin-left: 0;
}
}
.fluid-column-reset(none) {
}
.fluid-column-reset(@_) {
@media (max-width: @_) {
float: none;
width: 100%;
*width: 100%;
margin-left: 0;
*margin-left: 0;
}
}
.component-row {
.fluid-row();
.clearfix();
}
.one-component {
.fluid-column(8);
}
.two-component {
.fluid-column(4);
}
.three-component {
.fluid-column(7);
}
.four-component {
.fluid-column(4, 2);
}
#main-content {
.fluid-row();
.clearfix();
}
.main-content-sidebar {
.fluid-column(3, 0, 700px);
}
.main-content {
.fluid-column(9, 0, 700px);
}
@dustinsmith1024
Copy link
Author

dustinsmith1024 commented Feb 12, 2013

Looks like you might be able to use the namespaced grid. Check out http://stackoverflow.com/questions/14695502/how-to-make-a-responsive-row-fluid-mixin-for-bootstrap

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