unl/wdntemplates — Issue #167: Build the Ultimate CSS parser
Author: smeranda
Created: 2012-01-22 21:22:09+00:00
State: open

With the new CSS file structure, we'll need a smart parser and compressor. Each of the CSS files follow the same pattern:

// Base CSS Rules

@media (min-width: 320px) {

}
@media (min-width: 480px) {

}
@media (min-width: 600px) {

}
@media (min-width: 768px) {

}
@media (min-width: 960px) {

}
@media (min-width: 1040px) {

}

The ```Base CSS rules``` need to be parsed to their own file (variations/base.css). Each of the other need to be parsed to their one file as well, ex: ```320px``` should be variations/320.css. Therefore, we should have the following CSS files:

variations/base.css
variations/320.css
variations/480.css
variations/768.css
variations/960.css
variations/1040.css

Finally, Internet Explorer 7 & 8 don't parse media queries (which will be used to load the individual files). While a JS polyfill ([respond.js](https://github.com/scottjehl/Respond)) is an option, it does provide for an poor user experience (site flashes as it reconfigures). Therefore, we need to create one large CSS file for these browsers. This is a file that combines all the above and strips the media queries. It will be variations/base_ie.css.