Basis v0.5



Demo page



Main CSS features


All elements have box-sizing: border-box (even on IE6+)


.quarter { width: 25%; height: auto; padding: 20px; margin: 0 }

Quarter
Quarter
Quarter
Quarter

Tables have a 100% width and their borders colapse


td { border: 1px solid green }

TD TD TD TD

Titles have consistent sizes across all browsers


H1 title

H2 title

H3 title

H4 title

H5 title
H6 title

Nested lists have correct ticks and display (even on IE)


  1. level 1
  2. item
  3. item
    1. level 2
    2. item
    3. item
      1. level 3
      2. item
      3. item
        1. level 4
        2. item
        3. item





JavaScript features (for IE)


HTML5 shim


Here are all the new HTML5 elements. You can use them as regular <div>s on IE < 9: (green = enabled)
Abbr
Article
Aside
Audio
Bdi
Canvas
Data
Datalist
Details
Figure
Figcaption
Footer
Header
Hgroup
Keygen
Main
Math
Mark
Meter
Nav
Output
Progress
Section
Summary
Svg
Time
Video

Conditional classes


You can use prefixes in your CSS to target old versions of IE:
.lt-ie11 .div2 { background: green; } /* IE < 11 */
.lt-ie10 .div3 { background: green; } /* IE < 10 */
.lt-ie9 .div4 { background: green; } /* IE < 9 */
.lt-ie8 .div5 { background: green; } /* IE < 8 */
.lt-ie7 .div6 { background: green; } /* IE < 7 */

I'm red
I'm green on IE < 11
I'm green on IE < 10
I'm green on IE < 9
I'm green on IE < 8
I'm green on IE < 7