Last active
September 29, 2015 09:58
-
-
Save smeranda/1584041 to your computer and use it in GitHub Desktop.
Use similar breakpoints to new WDN grid variables. Streamline so dependency is only on the set variable.
This file contains hidden or 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
/* | |
* | |
* !DO NOT EDIT THE CSS FILES, THEY ARE BUILT WITH THE LESS CSS! | |
* less/dir/file.less | |
* | |
* --------------------------- | |
* Styles associated with the XYZ | |
* --------------------------- | |
*/ | |
@import "../_mixins/all.less"; | |
// Breakpoint rules (follows WDN gridv3) | |
@bp1: ~"min-width: 480px"; | |
@bp2: ~"min-width: 768px"; | |
@bp3: ~"min-width: 960px"; | |
@bp4: ~"min-width: 1040px"; | |
// Add all base (screen width doesn't matter) here | |
// For all the media queries | |
// 480px wide | |
.bp1() { | |
} | |
// 768px wide | |
.bp2() { | |
} | |
// 960px wide | |
.bp3() { | |
} | |
// 1040px wide | |
.bp4() { | |
} | |
// This is what's outputed in the media queries | |
@media only screen and (@bp1) { | |
.bp1(); | |
} | |
@media only screen and (@bp2) { | |
.bp2(); | |
} | |
@media only screen and (@bp3) { | |
.bp3(); | |
} | |
@media only screen and (@bp4) { | |
.bp4(); | |
} | |
// Output the media queries without the media queries for IE7 & IE8 | |
ie7, .ie8 { | |
.bp1(); | |
.bp2(); | |
.bp3(); | |
.bp4(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Base for the LESS files in the UNL WDN Templates project.