CSS Friendly Stacked Bar Graphs
CSS Friendly Stacked Bar Graphs
|
|
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.
Similar Posts
- Fluid Layout Using A Grid
- Adaptive Content
- Images In A Fluid Layout
- jQuery Masonry
- Smart Columns with jQuery & CSS
- Text Zooming
- AJAX application that allows visitors to enter their own responses, and generates a graph that shows where the respondent is in relation to others
- Quick summary that shows the highest and lowest result per question
- AJAX application that allows visitors to filter, sort, and sift through the data
- Side-by-side comparison of 2008 and 2007 data
- It allows you to write fast, maintainable, standards-based front end code.
- It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.
- Separate structure and skin
- Separate container and content
- 16px default main text size
- Partial 26px baseline grid
- Serif for Heading, sans-serif for the paragraphs
- Lower color text contrast
- Intensified paragraph division (new line + indent)
- Bigger leading (line-height) 1.625
- We maintain the book standards (12pt) for font size on the web (12px). But the distance from the monitor is triple. Just put your newspaper to your monitor and try to read. Hell! Is hard!
- Additionally the paper reflects the light and monitor emits the light. If you have old “cathode” monitor it’s like looking directly in a light bulb.
- You also have distraction noise: strong colors, links, flash animation, banners , not defined site architecture, click here, digg me, follow me on twitter, by my products… it’s fucking jungle out there.
- Typography
- Absinthes to Go Mad Over – NY Times
- An American Prayer – The Doors
- Critique of Pure Reason – Immanuel Kant
- Excerpt from No Way To Paradise – Charles Bukowski
- How To Sniff Out A Liar – Forbes
- Hubble – Ars Technica
- One Day in Spring – Rabindranath Tagore
- Shaman’s Blues – The Doors
- Tarantino – NY Times
- The Alchemist – Paulo Coelho
- The Last Question – Isaac Asimov
- The Raven – Edgar Allan Poe
- Viva Las Vegas – Elvis Presley
Those familiar with fluid / elastic layouts know that they can be a little more challenging to implement compared to fixed-width layouts. With the advent of wide-screen monitors, one of the biggest advantages of fluid-width layouts is the ability to maximize available space.
It was only a year ago when 1024×768 was still the dominant screen size. However, as of January 2009, 57% of the population are on desktops higher than 1024×768. The number of users still on 1024×768 has declined sharply from 48% of the previous year to a mere 36%. On the other than, the users on widescreen desktop are rapidly growing, thanks in part to marketing by HDTV makers.
Kayla Knight has written a very good article on the topic of building good websites with fluid layout.
She comes up with 6 techniques to do this, which can be summed up as follows:
She also provides helpful examples and links to all the necessary tools needed to achieve the perfect fluid / elastic layout. With this, designers are armed and ready for the next evolution in layout design.
Survey For People Who Make Websites 2008 Results Out
Back in 2007, the staff of A List Apart and An Event Apart conducted a survey and presented 37 questions to 33,000 web professionals, providing “the first data ever collected on the business of web design and development as practiced in the U.S. and worldwide” (ALA 2007 results). The results were compiled into a downloadable PDF file.
In 2008 they did it again, the results of the 2008 Survey For People Who Make Websites are now out for public consumption. The survey had less respondents compared to the one held in 2007 down to 30,055. Data analysis is provided by Alan Brickman and Larry Yu. The results speak can be overwhelming for some. Thankfully the findings are presented in a friendly, easy to read article with clear and beautiful CSS Charts.
ALA has generously shared the raw data with the community, which is available as tabbed text, CSV, and Excel spreadsheet. RAW data is a powerful thing, and I just have a couple of suggestions how it can be used:
All in all, big props to the ALA team for the tremendous effort spent on this endeavor. It is a great contribution to the web community. Looking forward to the 2009 survey!
Best CSS Zen Garden Theme Ever
So there I was skimming through my usual list of websites on another boring day when this headline caught my eye:
Best CSS zen garden file ever?
My head spun furiously. Could it be possible? You be the judge! Let me warn you though, that a sense of humor is required to appreciate the screenshot below.
Hungry for more? View the site in its full, animated glory!
Of course, there had to be an explanation for this madness, right? Apparently the design, entitled “Geocities 1996″, is by Bruce Lawson. He did it back in 2004 out of nostalgia. He writes:
The CSS Zen Garden has been highly useful to me in demonstrating the value of standards when attempting to convince my reluctant colleagues to abandon tables. Thanks Mr. Shea!
However, it’s also been a major pain in the arse, as Nongyaw, friends and family now expect every site I make for them to look as good as the zen garden submissions. As a design-challenged individual, I’ve found myself almost nostalgic for the multi-coloured, multi-typefaced gif-ridden designs I used to see in 1996 when I moved to Thailand and first used the web, back in the days when Netscape 3.0 was the coolest browser out.
I hope that made your day. It surely did for me!
CSS Magic with Fixed Background-attachment
I’m sure many of you are familiar with Eric Meyer’s Complexspiral demo, which was created to demonstrate the power of CSS and the background-attachment attribute. There are many other sites that use this concept to achieve a similar effect, providing added visual interest to the viewer. This can be seen in sites such as We Bleed Design, Westciv, Econsultancy, and even CSS Zen Garden. It has been used for years by Timpelen.
Ask the CSS Guy has come up with a short, easy to understand tutorial to help you achieve this effect. He also provides three nice examples using this same technique:
In the above examples no JavaScript was used at all, only CSS, that’s MAGIC! 
Happy New Year!
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!
Take Your CSS to the Desktop with Adobe AIR!
Here is an article that you may find useful.
Designers would find it surprising that to know that you can now take your HTML and CSS skills and use it to create desktop applications. This now very much possible for anyone who is willing to explore the power of Adobe AIR. Andrew Tetlaw has a nice little article over at SitePoint entitled Take Your CSS to the Desktop with Adobe AIR!. It provides a good, short introduction to Adobe AIR and how easy it is to use your web development skills to create rich cross-platform desktop applications.
For further reading, you may wish to check out Akash Mehta’s winning article, Walk on AIR: Create a To-do List in Five Minutes.
Object Oriented CSS
“How do you scale CSS for millions of visitors or thousands of pages?” This is the question that Nicole Sullivan tried to answer in her presentation at Web Directions North in Denver. Entitled Object Oriented CSS (OOCSS), the concept has since then garnered overwhelming response from the community.
OOCSS is more than just a tool, it is a way of thinking. There are many advantages to adapting this concept. Primarily:
OOCSS is governed by two main principles:
Take time to check out the Object Oriented CSS presentation. There are 64 slides, but it is definitely worth going through. If the text is hard to read, try viewing in Full Screen mode.
3D perspective drawings – with CSS?!
What ’til you see this thing. Craziness, I tell you! James at Brothercake has created a 3D dungeon model through clever manipulation of CSS and the DOM. It even has correct shading – done on the fly! – to effectively convey perspective. How did he do it? The solution builds off of Tantek Çelik’s Study of Regular Polygons (which is fascinating in its own right), adding some Javascript to accomplish the shading. Check out the examples at Brothercake and appreciate CSS borders in a way you never thought possible. (You can even navigate through the CSS-based underworld!)Read | Permalink | Email this | Linking Blogs | Comments
Featured CSS Library: Better Web Readability Project
The Better Web Readability Project aims to promote screen-friendly and more readable fonts. The result is a CSS library that redefines, among others, the standard font size as well as leading (the amount of space between text). Other features of this library are:
The original idea came from Vladimir Carrer, who also came up with the library. In his post entitled How we read on web and how can we improve that he reveals that most of us who use computers to read news, blogs, and various sites end up scanning rather than reading. He then compares reading a book to reading on the monitor, and provides three reasons why it is harder to read on a computer screen:
He then comes up with a set of standards and rules that would allow for better and easier on-screen reading, and packages it as a CSS library. The resulting text is beautiful and pleasing to the eyes. One such example can be seen in the screen shot below. You should notice how your eyes would easily glide through the text:
You can head over to the project homepage, or click on the links below to view the library in action:
You can also head over and download the full library here.
Pure CSS + HTML Calendar 2009
As self-proclaimed CSS experts, we must live, eat and breathe CSS – 25 hours a day. What better way to do this than by using a CSS + HTML calendar! Lovingly hand-crafted(tm) by Vladimir Carrer, the Grid Calendar is inspired by the Best of Calendar Design, and can be downloaded for free (can you believe it?)
This reminds me a lot of the designs posted on the 2007 elzr Infodesign challenge, as well as Adam Sporka’s Thumb Calendar which I am personally very fond of.
Perhaps there’s a designer out there with uber talent a lot of spare time who could take the Grid Calendar to the next level. It certainly could use a little more color, and those white spaces between the grids are making the nerve endings of my eyes do the polka dance. While we’re at it, let’s throw in a bunch of AJAX to turn our simple calendar into a leet app. Or maybe not.