// out: ../css/style.css, compress: true // // IMPORTING STYLES // // import normalize @import "_normalize.less"; // import mixins @import "_mixins.less"; /* BASE (MOBILE) SIZE This are the mobile styles. It's what people see on their phones. If you set a great foundation, you won't need to add too many styles in the other stylesheets. Remember, keep it light: Speed is Important. */ // styles in base.less @import "_base.less"; /* LARGER MOBILE DEVICES This is for devices like the Galaxy Note or something that's larger than an iPhone but smaller than a tablet. Let's call them tweeners. */ @media only screen and (min-width: 480px) { // styles in 481up.less @import "_481up.less"; } // end of media query /* TABLET & SMALLER LAPTOPS This is the average viewing window. So Desktops, Laptops, and in general anyone not viewing on a mobile device. Here's where you can add resource intensive styles. */ @media only screen and (min-width: 768px) { // styles in 768up.less @import "_768up.less"; } // end of media query /* MOBILE MENU */ @media only screen and (max-width: 1023px) { @import "_mobilemenu1024.less"; } @media only screen and (max-width: 767px) and screen and (max-height: 31.125em) { @import "_mobilemenu768.less"; } /* DESKTOP This is the average viewing window. So Desktops, Laptops, and in general anyone not viewing on a mobile device. Here's where you can add resource intensive styles. */ @media only screen and (min-width: 1024px) { // import grid @import "_grid.less"; // styles in 1030up.less @import "_1030up.less"; } // end of media query /* LARGE VIEWING SIZE This is for the larger monitors and possibly full screen viewers. */ @media only screen and (min-width: 1240px) { // styles in 1240up.less @import "_1240up.less"; } // end of media query /* RETINA (2x RESOLUTION DEVICES) This applies to the retina iPhone (4s) and iPad (2,3) along with other displays with a 2x resolution. You can also create a media query for retina AND a certain size if you want. Go Nuts. */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { // styles in 2x.less @import "_2x.less"; } // end of media query /* iPHONE 5 MEDIA QUERY Want to get fancy for no good reason? Knock yourself out. */ @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { // iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want) } /* PRINT STYLESHEET Feel free to customize this. Remember to add things that won't make sense to print at the bottom. Things like nav, ads, and forms should be set to display none. */ @media print { @import "_print.less"; } // end of media query