Today I would like to talk about something I found when I was looking for some javascript integration with the project I’m working. It’s MoreCSS. A simple way to integrate the most common javascript elements in a web page.

“Imagine creating pop-ups, tab menus or tool-tips could be as easy and comfortable as writing some styles in CSS…” (Is what the project page says to catch your eyes)

That’s MoreCSS

Basically, you just need to use two files: the first one is ‘morecss.js’, which is the Design Oriented Javascript Library. The second one is your CSS file, with your special CSS code.

See how it works:

Creating Pop-ups:

a:active {

  target: popup;

  target-width: 640px;

  target-height: 480p;

  target-position: center middle;

}

Apply automatic hyphenation:

p.myClass {

  hyphenation: english;

  hyphenation-restrict: large-words;

}

Creating tool-tips:

a {

  tooltip: title;

  tooltip-class: MyTooltipStyles;

}

Advanced list styling:

ul li {

  list-type-color: #65C827;

  list-type-char: >>;

}

Cross-browser opacity style:

img#myImage:hover {

  opacity: 0.5;

}

img#myImage:leave {

  opacity: 1;

}

Something you should know about it:

• No new syntax to learn. No programming skills needed.
• Small 6 KB core script (GZIP compressed, 12 KB uncompressed)
• Cross-browser compatibility for Internet Explorer 6+, Firefox 2+, Opera 9+, Safari 2+ and more
• Valid W3C CSS
• Plug-in interface

Project page:

http://yellowgreen.de/morecss

Download page:

http://morecss.yellowgreen.de/documentation/information/downloads/

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.
With plug-ins you can include special properties for visual effects and more.

How it works (a little bit more)

MoreCSS runs automatically on page load and applies the properties written in external style sheets to the specified elements. You do not need to configure or code something.
Installation

Just include MoreCSS.js and the external style sheet(s) in your page header.
Be sure that you include the style sheet(s) at first, then MoreCSS.js and at least all plug-in scripts.

Have fun with MoreCSS.

See you!