Matt Reedman mattics
mattics
/ media-queries
Last active
December 11, 2015 12:28
A stripped down version of 4563625 which is non specific to bootstrap and easier to understand the concept due to lack of clutter.
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
| @media (min-width: 1200px) { | |
| .makeMyStyles(940px, 15px) | |
| } | |
| @media (max-width: 1199px) { | |
| .makeMyStyles(768px, 12px) | |
| } | |
| .makeMyStyles(@width, @padding) { | |
| .makeHalfWidthColumn() { // just an example mixin | |
| width: @width / 2l |
mattics
/ main.css
Last active
December 11, 2015 07:08
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) { |