Looking for a good, CSS friendly Stacked Bar Graph implementation? Look no further as Stephen of The Wojo Group has published their implementation, which is being used in Backbone, a CMS that runs on Ruby on Rails. It is based off Alen Grakalic’s Pure CSS Data Chart, and the awesome thing is that it is semantically correct, so it will definitely look good in screen readers.
Read the full article.
View the demo.
We had a great run this 2008. Thanks to all our loyal CSS Vault visitors and readers. Here’s to an exciting and better 2009!
jQuery.popeye transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state.
The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage).
This behaviour can be overriden in the plugin options.
Also available is a demo page which best shows the behavior of jQuery.popeye.
The nice thing about jQuery.popeye is that it degrades gracefully into a scrollable list of thumbnails which link to an enlarged version.
For more details, head over to the jQuery.popeye homepage. You can also go directly to the download page.
Hartija is a CSS framework which aims to unite all the best CSS printing practices into one.
The project site does not provide much information about what it does, but looking it is not that hard to figure out if you look at the code. It works similar to a CSS reset stylesheet by standardizing almost all relevant tags. It also tries to utilize 100% page width to maximize available space. Finally, it provides a section to hide all blocks that need not appear in the print-out (header, footer, navigation, etc).
Let’s take a look at how it affects the CSS Vault Blog.
Screen:
Print using Hartija, with no modifications:
The package also comes with a sample page that can be used to preview how Hartija renders all the important HTML tags.
What is CSS Framework?
“A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage.” - Wikipedia
How to use this Framework?
Just use it like normal CSS:
<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print”>
Important: media set to “print”
When you print the browser will use the stylesheet defined for printing.
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
The script will basically transform this:
Into this:
How does it work?
The idea is simple: since normal input fields (including radio buttons, checkboxes, textareas, etc) can only be styled to a small degree, they have to be hidden and their visual appearance replaced with similar working, new, fully customizable constructs. In theory, that doesn’t sound really complicated. But from theory to practice there is a long way.
Starting with the basic XHTML code for a web form, Niceforms parses the DOM tree, gets all the input fields, hides them, and positions their new graphical appearance in place. All this is done while preserving the date transfer and selection features of the regular form. Everything is done via javascript.
Take a look at the demo and see for yourself.
For more details, head over to the Niceforms homepage. You can also go directly to the download page.
Jonathan Snook, Steve Smith, Jina Bolton, Cameron Adams, and David Johnson, five of the biggest names in CSS design have joined forces to bring you The Art & Science Of CSS
Presented in full color, this new book will help you master advanced techniques, unleash your creative talents and design inspirational web sites with CSS.
Among its many treasures, this book will show you how to:
All designs in this book are visually appealing and inspiring. The CSS code used to create each of the components is provided and is guaranteed to be simple, efficient and cross-browser compatible.
The great news is that for the next 14-days you can download the entire book free (worth $29,95). Visit http://twitaway.com to snag your free copy.
emastic is a CSS Framework developed by Vladimir Carrer that features an em-based grid system. Its aim is to
.. resolve the problem of the elastic layout also the problem of default width of the container of the page and to ad one fluid column. Also if its possible to reduce the CSS size to minimum.
The entire library is composed of five CSS files:
The project is still at its infancy, and documentation is very sparse. It has potential to be a good library though. Kudos to Vladimir!
Happy halloween from the CSS Vault Team!
James Donaghue has just released Peppy, a very fast CSS3 compliant JavaScript selector engine. The author claims that it is …
… faster1 than all other major JavaScript libraries with DOM querying capabilities (Prototype 1.6.0.3, JQuery 1.2.6, MooTools 1.2.1, EXT 2.2, DoJo 1.2.0, YUI 2.6.0). It is faster2 than Sizzle by John Resig and it also is cross browser (IE included). Take a look for yourselves, I have a profiling page set up here.
The compressed library only goes up to 10K, which makes it an ideal replacement for bulkier libraries if only for its DOM capabilities. Sizzle author John Resig has however identified three potential issues in Ajaxian’s news entry:
Three big problems that I see:
- He indiscriminately caches in all browsers - including IE - but *never* invalidates the cache. Since the DOM mutation events don’t fire in Internet Explorer all queries will forever be cached and not update on a requery. This is very, very, bad and will break lots of applications.
- He copied parts of Sizzle and integrated them into his code without including the original copyright notice (in fact, it appears to have no license information, at all).
- Where’s the test suite? How do you know that it “works in IE”? Sizzle is currently being run against the MochiKit and jQuery test suites so you can be sure in knowing that the code quality will stand up.
The future of Peppy looks bright, but will it will stand up to Sizzle and other tested libraries in terms of reliability? I sure hope so.
1 (MajorLibraries - excluding Sizzle) : 4x faster in FF3, 6x faster in FF2,
8x faster in IE7, 3x faster in IE6, 3x faster in Opera 9, 4x faster in Safari 3
2 (results compared to Sizzle): 1.2x faster in FF3, 1.3x faster in FF2,
11.1x faster in IE7, 4.5x faster in IE6, 0x faster in Opera 9, 4x faster in Safari 3
Until majority of the web population starts using browsers capable of displaying CSS2.1, the best way to do broken numbered lists would be to resort to manual numbering. Opera has recently come up with a very good article on how to do automatic numbering, for those of you who wish to adopt early.
