SuperCSS2000 : Free html CSS Templates
The Super CSS 2000 framework - I know the name is stupid but a friend proposed it to me and that made me laugh... well - is a very small css which enable you to build very easily any complex layout for your web page. This is compatible until our good (and soon dead hopefully) ie6 until mobile devices. In some minutes you get it all.
All this site is done with the basic colors and style, you can change all this of course. This is well specified in the CSS file.
Overview
The idea is to have an Aspect Oriented CSS instead of usual kindof ID description CSS. (for french : The principle is kindeof close the DAISY idea)
To use this CSS include the CSS files in your page (see the section of download & use)
Then, when you code you have for instance
<div>This is a div</div>
if you want for instance this div on the left, big text and half the width of its container you will add for each aspect a class, which make you do the code :
<div class="left w12 tBig">This is a div</div>
In the previous example we saw the position, size and text aspect. In total, the different aspect you can use are
- Element Size (fixed and fluid width, height)
- Element position (inline or block, float left & right, absolute ...)
- List types (inlineList, verticalList, hoverList, fakeHoverList ...)
- Element styles (curved borders, borders, background : white dark medium, darker & lighter ...)
- Text styles (different text align, weight, size, links...)
Element position
Click on a link bellow to see its effects in the visualisation box and the associated code example at the right.
Visualisation Box of the effect
code
- inline
- center : the parent has to be tCenter
- left, right : float the element to left / right
- relative : this element is relative
- absolute : absolute coordinates
- hidden : not displayed
- invisible : displayed but invisible
- noOverflow : no scrollBars
- scroll : scrollBars
- clear, clearRight, clearLeft
- clearfix, clearfixRight (ie6=clearfix), clearfixLeft (ie6=clearfix)
- push : give me space around me
- pushUp, pushRight, pushDown, pushLeft
- pullUp, pullRight, pullDown, pullLeft the opposite
- padding : give me some padding
- paddingTop, paddingRight, paddingBottom, paddingLeft
- noPadding
- margin : give me some margin
- marginTop, marginRight, marginBottom, marginLeft
- noMargin
Element sizes
Click on a link bellow to see its effects in the visualisation box and the associated code example at the right.
Visualisation Box of the effect
code
- siteWidth : standard 980px
- aux, edit : standard rightcol + edit content
List types
Click on a link bellow to see its effects in the visualisation box and the associated code example at the right.
Visualisation Box of the effect
code
- verticalList : the lis of the list will be displayed vertically
- horizontalList : the lis of the list will be displayed horizontally
- inlineList : the lis of the list will be displayed inline
- arrows : associated with verticalList in general, arrow before each li
- pagination : associated with horizontalList display a pagination style list
- message : a li inside a verticalList which display a message
- hoverList : associated with verticalList, one <a> inside the <li>
- fakeHoverList : like a hoverList but with as many links desired in a li (and only one clickable)
- timeList : associated with verticalList, kindeof hoverList with a time space in each li
Element styles
Click on a link bellow to see its effects in the visualisation box and the associated code example at the right.
Visualisation Box (added some padding & margin to see better)
code
- curved : the corners are curved
- curvedN, curvedE, curvedS, curvedW : the corners are curved in respective direction
- borderS : small border
- borderL : large border
- borderGrey : the border is grey
- borderLight : the border has light grey color
Text styles
Click on a link bellow to see its effects in the visualisation box and the associated code example at the right.
Visualisation Box of the effect
code
- tReset : reset the text style
- tLeft : align text to left
- tRight : align text to right
- tCenter : align text to center
- tQuiet : lightgrey color text
- tLoud : loud text (font-weight:bold)
- tLight : light text (font-weight:normal)
- tIndent : indent text
- tSmall : small text
- tXSmall : extra small text
- tMedium : medium size text