Pure CSS Icons for App Views
Karen Menezes on May 1, 2013We’re working on an open-source web application for a library project in the city of Mumbai for CAMP. What began as a hackathon a couple of months ago has now developed into a labour of love. The project, currently in beta, allows lenders to list the books that they have, using the Open Library API on our web application's server.
How the app works
Logged-in users can send an email to borrow these books or browse through their collections of occasionally rare and quirky books. Borrowing a book here implies actually visiting the space and reading or borrowing the book - if it is allowed. This is more of a personal relationship between the lender and the user, which is handled by email.
Currently, seven organisations have signed up as lenders, including several art galleries. I worked on the design and front end for the project. It’s a simple, clean layout, but I requested to include a front-end feature for multiple views for the book lists that show up.
UI Indicators for multiple views
Multiple views are a useful UI feature to allow users to choose how they wish to browse content on a web application. The most common views are thumbnail, detail and list views. This can be quite useful for long lists of content in general.
The icons for the same are pretty straightforward. Of course, in the spirit of resolution independence, I was dead against using raster graphics, so PNG and JPG file formats went out of the window. You can see a demo here of the final results.
Vector graphics are the best solution, since they scale beautifully. Creating and using SVGs was the most obvious option, but that’s not the point of this article.
Even though they should be used, there are some drawbacks with using SVGs (depending on the manner of use in the HTML or CSS). These include extra HTTP requests, the general maintenance issues with background sprites, using them inline in the HTML and littering the markup, legacy browser support, the different ways different browsers render them (e.g., IE9 needs a viewBox to be specified), and complex SVGs crashing browsers.
Do note that there are workarounds for all of the above, and SVGs should definitely be used, especially for logos. It's just good to do some reading and experiment with them if you can, especially on manipulating them using CSS.
So I went ahead and created the icons using divs, spans and good ol’ CSS.
My first attempt at creating the icons was successful, albeit with some struggle. Since I was using floats for layout, I had to deal with clearing the floats using the nth-of-type selector.
At some point, I re-evaluated and decided to use inline-block layouting for several of the elements. This had the advantage of naturally creating white space between the elements and not having to clear them. This resulted in less markup and CSS.
ADVANTAGES
Resolution independent icons that don’t pixelate on zoom.
Works across all browsers – touch and desktop: Compatibility with Internet Explorer is IE8 onwards. (Since pseudo-classes like last-of-type are not support pre IE8; you can get a polyfill for this, if you care.)
You can add gradients, shadows, border-radius and all the CSS3 goodies you can think of.
DISADVANTAGES
Manipulating the size of the icons: If you need to make these icons bigger or smaller, of course, you will have to tinker with the CSS and change paddings, widths, heights, line-heights and margins. At that point, you’d probably wish you’d created them as SVGs (or used font-icons), so you could scale them at will.
Extra empty elements: I've added aria-hidden attributes on the extra HTML elments. Feedback is welcome to improve accessibility.