Skip to content

Instantly share code, notes, and snippets.

@smeranda
Last active September 29, 2015 09:58
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smeranda/1584041 to your computer and use it in GitHub Desktop.
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.
/*
*
* !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();
}
@smeranda
Copy link
Author

smeranda commented Jan 9, 2012

Base for the LESS files in the UNL WDN Templates project.

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