Last active
December 11, 2015 07:08
-
-
Save mattics/4563625 to your computer and use it in GitHub Desktop.
A quick bit of LESS to overcome the lack of ability to use makeColumn and makeRow responsively in Twitter Bootstrap. This isn't a true alternative to makeColumn and makeRow but is a workaround so we can use semantic class names and responsive column sizes with only minimal disruption to LESS. Can be used separately or together with Bootstraps re…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Can and should use the variables set in variables.less for different media sizes. i.e. @gridColumnWidth and @gridColumnWidth768 etc | |
@media (min-width: 1200px) { | |
.makeResponsiveGrid(60px, 10px, 16) | |
} | |
@media (max-width: 1199px) { | |
.makeResponsiveGrid(48px, 12px, 16) | |
} | |
// Can be extended infinitely | |
.makeResponsiveGrid(@gridColumnWidth, @gridGutterWidth, @columns) { | |
.makeResponsiveRow() { | |
margin-left: @gridGutterWidth * -1; | |
.clearfix(); | |
} | |
.makeResponsiveColumn(@columns: 1, @offset: 0) { | |
float: left; | |
margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); | |
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); | |
} | |
.makeColumnWidth(@columns) { | |
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); | |
} | |
// These do not need to be included if using responsive.less/css as this is done by #grid > .core in mixins.less for each responsive size. | |
.container, | |
.navbar-static-top .container, | |
.navbar-fixed-top .container, | |
.navbar-fixed-bottom .container { .makeColumnWidth(@gridColumns) } | |
// Create your gridwork here. | |
.myRowDiv { .makeResponsiveRow() } | |
.myFirstColumn { .makeResponsiveColumn(16) } | |
.myDivWithJustWidth { .makeColumnWidth(12) } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment