MoreCSS Library Review

add to

MoreCSS is a fantastic Design oriented JavaScript library made by YellowGreen which offers a CSS coder lots of new possibilities inside the CSS file itself like creating popups, various effects and better properties control. And also, when you get used it ti, a real time saver!

There's no new syntax to learn and no programming skills needed, file is really small - 6 KB core script (GZIP compressed, 12 KB uncompressed), cross-browser compatible for Internet Explorer 6+, Firefox 2+, Opera 9+, Safari 2+, valid W3C CSS...

You can download latest version directly here or you can go to the download page for changelog and more resources. MoreCSS is very well documented with good descriptions and working examples.

How to install

MoreCSS runs automatically on page load and applies the properties written in external stylesheets to the specified elements. You do not need to configure the code or anything. Just include MoreCSS.js and the external stylesheet(s) in your page header. Be sure that you include the stylesheet(s) at first, then MoreCSS.js and at least all plugin scripts.

What can you do with it?

• add-class - Add the specified CSS class to an element, very good example is zebra-style table, it can be used for script generated lists for example in WordPress (list of archives, posts...)
• content - Adds dynamic content before / after static content. Enhanced cross-browser solution for CSS property.
• default-value - Adds a default value with typical on focus behaviour to the specified input field.
• include-content - Includes the content of a file (via AJAX).
• target - Opens the link target in a new window, popup or layer.
• tooltip - Adds a styleable tooltip to the cursor position.
• fade - Opacity fade effect.
• and much more ...

How to use

Syntax Elements
The syntax in MoreCSS is very similar to real CSS, but with some limitations because of performance reasons. But MoreCSS has also some special syntax elements for advanced functions.

Properties
Once you have installed MoreCSS you can use the properties in the same way as regular CSS properties. In the left menu you will find all currently built in properties and working code examples for each property. With plugins you can include special properties for visual effects and more.

Write your own plugins
MoreCSS allows you to write your own plugins using the Library Functions and using the Core Properties

Example code

 
 
/* HTML */
<table id="example_1">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
 
/* CSS */
 
tr.blue td {
	background-color:#D0E3FF;
	color:#FFFFFF;
}
 
/* MoreCSS */
#example_1 tr:every-second-child {
	add-class: blue;
}
 

Have some feedback? Leave a comment

What Now?

Digg this
Save to Del.ico.us
Stumble This
Subscribe
Leave a Comment

Further Reading

• Five commonly neglected parts of a website that deserve detail
• Latest Design News, Daily
• Use Google Code to Speed Up Development
• Don’t forget about :active
• Improve your art direction abilities on 3.7CREA.TV

More?

Posted on 15. 09. 2008
Filed as CSS, Javascript
By Dejan Cancarevic