MoreCSS is a small JavaScript library for everyday things, like creating popups, tab menus (for example like the one above), tables and lists with “zebra”-style … etc. But the really special thing is: you can do these things like in regular CSS.

See it In Action

Click Here - http://yellowgreen.de/morecss

Installation

Just include MoreCSS.js and an external stylesheet file in your page header like this (of course without the spaces).

< link rel="MoreCSS" href="path/to/the/MoreCSS/stylesheet.css" />
< script type="text/javascript" src="MoreCSS.js">
< /script >

Be sure to include the stylesheet before the script, because the stylesheet must be loaded already when the script starts. If possible include both files before all other included files. Because MoreCSS will try to hide some special elements on startup until the processes completed to avoid loading effects.

After that you can use all MoreCSS properties in the external stylesheet.

Using properties

In most instances you can use MoreCSS properties like normal CSS properties. Maybe sometimes you will miss some CSS featues and sometimes you will find out some special features that you maybe miss in CSS. For a complete overview of all features click “Supported CSS Syntax” in the menu above.

Optimal performance

To optimize MoreCSS searching for elements in page structure (DOM) use unique selectors like ID’s instead of global selectors like classes. The rule of thumb: ID are better than tags, tags are better than tags with ID’s, tags with ID’s are better than tags with classes, tags with classes are better than classes. In an example order:

#id div div#id div.class .class { property:value; }

Downloads

Unpacked version

Download this unpacked version for development and learning.

MoreCSS.source.js

GZIP version

GZIP compression will reduce the size of MoreCSS.js to > 50 %. There are several ways to GZIP JavaScript files. We recommend server side compression by redirecting JavaScript files to a PHP script, because you don’t need to change your JavaScript files neather the paths. In this package you will find all necessary files to GZIP MoreCSS and of course other JavaScript files.

GZIP JavaScript files via PHP and Apache

Logo

This is the official logo of MoreCSS. Transparent PNG, 500 × 125 px.

MoreCSS Logo