With CSS3 adoption rising rapidly designing with a elaborate grid approach will be, thank god almighty, at last something which should be a no-brainer.
Back in the old days this is what I used to dynamically generate a flexilbe simple grid system. This served its purpose years ago and is not intended to be used now or in the future in a production environment.
header('Content-type: text/css'); define("COLUMNS", 32); define("MARGIN", 1); define("PADDING", 5);
My lazy man’s universal browser reset snippet.
* {margin: 0; padding: 0; border: 0}
And finally the PHP code to generate the grid.
for($i=1; $i<=COLUMNS; $i++) { echo ' .grid-'.$i.', .suffix-'.$i.', '; } echo ' .grid {float: left; display: inline; margin: 0 '.MARGIN.'% '.MARGIN.'% 0}'; for($i=1; $i<=COLUMNS; $i++) { $j = round(100 / $i - MARGIN, 2); $ie = $j - 0.1; echo ' .grid-'.$i.' {width: '.$j.'%; *width: '.$ie.'%;}'; } for($i=1; $i<=COLUMNS; $i++) { $j = round(10 * $i - MARGIN, 2); $ie = $j - 0.1; echo ' .suffix-'.$i.' { width: '.$j.'%; *width: '.$ie.'%;}'; } for($i=PADDING; $i<=PADDING*4; $i+=PADDING) { echo ' .inside-'.$i.' { padding: '.$i.'px; }'; }
The result is something like this.
* {margin: 0; padding: 0; border: 0} .grid-1, .suffix-1, .grid-2, .suffix-2, .grid-3, .suffix-3, .grid-4, .suffix-4, .grid-5, .suffix-5, .grid-6, .suffix-6, .grid-7, .suffix-7, .grid-8, .suffix-8, .grid-9, .suffix-9, .grid-10, .suffix-10, .grid-11, .suffix-11, .grid-12, .suffix-12, .grid-13, .suffix-13, .grid-14, .suffix-14, .grid-15, .suffix-15, .grid-16, .suffix-16, .grid-17, .suffix-17, .grid-18, .suffix-18, .grid-19, .suffix-19, .grid-20, .suffix-20, .grid-21, .suffix-21, .grid-22, .suffix-22, .grid-23, .suffix-23, .grid-24, .suffix-24, .grid-25, .suffix-25, .grid-26, .suffix-26, .grid-27, .suffix-27, .grid-28, .suffix-28, .grid-29, .suffix-29, .grid-30, .suffix-30, .grid-31, .suffix-31, .grid-32, .suffix-32, .grid {float: left; display: inline; margin: 0 1% 1% 0} .grid-1 {width: 99%; *width: 98.9%;} .grid-2 {width: 49%; *width: 48.9%;} .grid-3 {width: 32.33%; *width: 32.23%;} .grid-4 {width: 24%; *width: 23.9%;} .grid-5 {width: 19%; *width: 18.9%;} .grid-6 {width: 15.67%; *width: 15.57%;} .grid-7 {width: 13.29%; *width: 13.19%;} .grid-8 {width: 11.5%; *width: 11.4%;} .grid-9 {width: 10.11%; *width: 10.01%;} .grid-10 {width: 9%; *width: 8.9%;} .grid-11 {width: 8.09%; *width: 7.99%;} .grid-12 {width: 7.33%; *width: 7.23%;} .grid-13 {width: 6.69%; *width: 6.59%;} .grid-14 {width: 6.14%; *width: 6.04%;} .grid-15 {width: 5.67%; *width: 5.57%;} .grid-16 {width: 5.25%; *width: 5.15%;} .grid-17 {width: 4.88%; *width: 4.78%;} .grid-18 {width: 4.56%; *width: 4.46%;} .grid-19 {width: 4.26%; *width: 4.16%;} .grid-20 {width: 4%; *width: 3.9%;} .grid-21 {width: 3.76%; *width: 3.66%;} .grid-22 {width: 3.55%; *width: 3.45%;} .grid-23 {width: 3.35%; *width: 3.25%;} .grid-24 {width: 3.17%; *width: 3.07%;} .grid-25 {width: 3%; *width: 2.9%;} .grid-26 {width: 2.85%; *width: 2.75%;} .grid-27 {width: 2.7%; *width: 2.6%;} .grid-28 {width: 2.57%; *width: 2.47%;} .grid-29 {width: 2.45%; *width: 2.35%;} .grid-30 {width: 2.33%; *width: 2.23%;} .grid-31 {width: 2.23%; *width: 2.13%;} .grid-32 {width: 2.13%; *width: 2.03%;} .suffix-1 { width: 9%; *width: 8.9%;} .suffix-2 { width: 19%; *width: 18.9%;} .suffix-3 { width: 29%; *width: 28.9%;} .suffix-4 { width: 39%; *width: 38.9%;} .suffix-5 { width: 49%; *width: 48.9%;} .suffix-6 { width: 59%; *width: 58.9%;} .suffix-7 { width: 69%; *width: 68.9%;} .suffix-8 { width: 79%; *width: 78.9%;} .suffix-9 { width: 89%; *width: 88.9%;} .suffix-10 { width: 99%; *width: 98.9%;} .suffix-11 { width: 109%; *width: 108.9%;} .suffix-12 { width: 119%; *width: 118.9%;} .suffix-13 { width: 129%; *width: 128.9%;} .suffix-14 { width: 139%; *width: 138.9%;} .suffix-15 { width: 149%; *width: 148.9%;} .suffix-16 { width: 159%; *width: 158.9%;} .suffix-17 { width: 169%; *width: 168.9%;} .suffix-18 { width: 179%; *width: 178.9%;} .suffix-19 { width: 189%; *width: 188.9%;} .suffix-20 { width: 199%; *width: 198.9%;} .suffix-21 { width: 209%; *width: 208.9%;} .suffix-22 { width: 219%; *width: 218.9%;} .suffix-23 { width: 229%; *width: 228.9%;} .suffix-24 { width: 239%; *width: 238.9%;} .suffix-25 { width: 249%; *width: 248.9%;} .suffix-26 { width: 259%; *width: 258.9%;} .suffix-27 { width: 269%; *width: 268.9%;} .suffix-28 { width: 279%; *width: 278.9%;} .suffix-29 { width: 289%; *width: 288.9%;} .suffix-30 { width: 299%; *width: 298.9%;} .suffix-31 { width: 309%; *width: 308.9%;} .suffix-32 { width: 319%; *width: 318.9%;} .inside-5 { padding: 5px; } .inside-10 { padding: 10px; } .inside-15 { padding: 15px; } .inside-20 { padding: 20px; }
Tags: dynamic css, php, snippet