liquid grid system CSS framework for lazy web-developperhere are two css files for you lazy web-developpers who don't want to have a web-designer working with you ;) one file for normal browsers, one file to fix with IE. tip : for faster load copy the images linked to your server of course. default.css ie.css
the principle is simple :this is a proportional % liquid grid based structure. Very powerfull (all http://www.cnetfrance.fr is made with that and soon http://www.zdnet.fr also if you want to see it massively used use go to cnetfrance.fr). I find it far more flexible that all the grid system I know. If you like, don't hesitate to give feedback.) HERE Description :
CLEARFIXapply to block elements (div typicaly, or any argument with width classes AND right/left class specified) clear : reset both clearRight: reset right
clearLeft: reset left CSS liquid grid widths The class names represents the 1 / N of the allowed width of the parent container. THIS MUST BE ASSOCIATED WITH A POSITION CLASS left or right
thus : w1 : full width
w12 : half of the allowed width
w13, w23 : thirds of the width w14, w34 : quarters
w15, w25, w35, w45 : fifths
w16, w56: sixths CSS BLOC POSITIONSinline : force inline hidden : hide center : center the element, the parent must be of class tCenter left : put to left right : put to right marginTop: give some space up the block CSS TEXT STYLE
tLeft : align text to the left
tRight : align text to the right
tCenter : align text to the center
tQuiet : text grey tLight : force no bold tLoud : force bold tIndent : indent the text tSmall : small text tBig : big text tRed : the text is red tHide hide the text tWhite force the text white CSS CURVED BORDERS
if you want to have curved borders easily : curved : all corners curved for only one corner curved : curvedNE , curvedSE , curvedSW, curveNW for two corners curved : curvedS, curvedN, curvedW, curvedE (tip : NSEW are for North South Eeast West of course ;) ) LISTS to add to the UL : inlineList : force the elements to be inline
verticalList : force the elements to be vertical horizontalList : the elements are horizontal butare kind of block which adapt to the text size, you can add more style to them for tabs for instance |