_ css fw

by cuhuak

HTML

<link rel="stylesheet" href="http://necolas.github.com/normalize.css/normalize.css">
<div>
  <div class="_">6</div>
  <div>
    <div class="_1">1</div>
    <div class="_2">2</div>
    <div class="_3">3</div>
  </div>
  <div>
    <div class="_2">2</div>
    <div class="_2">2</div>
    <div class="_2">2</div>
  </div>
  <div>
    <div class="_3">3</div>
    <div class="_3">3</div>
  </div>
  <div>
    <div class="_4">4</div>
    <div class="_2">2</div>
  </div>
  <div>
    <div class="_5">5</div>
    <div class="_1">1</div>
  </div>
  <div class="_">6</div>
</div>

<br>

<h2>Form</h2>
<form class="_4">
    <label class="_1 R">input</label><input class="_3" type="text" />
    <br><br>
    <label class="_1 R">textarea</label>
    <div class="_5">
        <textarea class="_" type="text"></textarea>
        <small>Help to fill this out</small>
        <br><br>
    </div>
    <label class="_1 R">inline inputs</label>
    <div class="_5">
        <label><input type="checkbox"/> radio1</label> <label><input type="checkbox"/> radio2</label>
        <br>
        <label><input type="radio"/> checkbox</label>
    </div>
</form>
<b class="_1"></b>

CSS

/* _ css fw ? */
[class*="_"]{padding-right:2%;min-height:1em;float:left;box-sizing:border-box;-moz-box-sizing:border-box}
[class*="_"]:last-child { padding-right: 0;}

._, br{clear:both}
._1{width:16.666666666666668%}
._2{width:33.333333333333336%}
._3{width:50%}
._4{width:66.66666666666667%}
._5{width:83.33333333333334%}
._{width:100%}

/* your styles */
.L {text-align: left;}
.R {text-align: right;}
.C {text-align: center;}
body {margin: 10px; font: 15px/18px Arial, sans-serif }

JavaScript

function _grid(N, W, U) {
    N = N || 6; // number of columns
    U = U || '%'; // units
    W = W || 100; // total width
    W = W/N; // width of one col
    
    var result = '[class*="_"]{float:left;box-sizing:border-box;-moz-box-sizing:border-box;} hr,._{clear:both}';
    
    for (var i = 1; i<=N; i++) {
        result += "\n._" + (i%N ? i : "") + '{width:' + W*i + U + "}";
    }
    
    return result;
}

function appendStyle(str) {
    str = str || '';
    var head = document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        rules = document.createTextNode(str);

    style.type = 'text/css';
    if(style.styleSheet)
        style.styleSheet.cssText = rules.nodeValue;
    else style.appendChild(rules);
    head.appendChild(style);
}

//appendStyle(_grid());

//console.log(_grid());