Skip to content

Instantly share code, notes, and snippets.

@smeranda

smeranda/unl_mq.less

Last active Sep 29, 2015
Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner Author

@smeranda 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