10 hot Cascading Style Sheet Libraries (Collection 1)

Here’s our first collection of amazing CSS libraries that will take your web content to the next level.

cascading style sheet libraries 1
Mark Gibbs / Nikotaf

CSS3

Along with HTML5 and JavaScript, Cascading Style Sheets (particularly version 3) have evolved into a cornerstone of modern Web content design. CSS is used to not only set the visual style of a Web page and its contents, it also allows for sophisticated control of user interaction and animation, printing, and device detection. In this roundup, I’m highlighting some of the most powerful and novel pure CSS libraries (pure, as in they work their magic without the aid of JavaScript or anything else). If you have a favorite CSS3 library, pure or not, you think I should include in the next collection, let me know.

Comments? Thoughts? Drop me a line and then follow me on Twitter and Facebook. And sign up for my new newsletter!

cascading style sheet libraries 2
Bootstrap

Bootstrap, the leading content framework

Originally released in 2011 by two, now ex-Twitter employees, Bootstrap is an open source, “mobile first,” responsive framework based on a 121KB minified CSS library that’s become arguably the most widely used foundation for Web content in the world. Bootstrap also offers very elegant premium themes for building complete sites. If you want to have an even easier experience with Bootstrap, check out Bootstrap Studio, an IDE that makes creating great Web content a snap.

cascading style sheet libraries 3
CSSCO

CSSCO, photographic filters made with css

Developed by Lauren Waller, CSSCO filters for photographs are incredibly useful when you want to tweak images without actually editing them. Due to the (as always) complexities of browser implementations and vendors who seem to want to make our lives harder than they need be, these filters aren’t quite universal as Waller notes:

“Unfortunately, IE & Edge browsers, as well as Opera Mini do not support filters and blend modes. / Safari (desktop & IOS ) does not support the hue, saturation, color, and luminosity blend modes, but this should not affect the CSSCO filters much, if at all.”

Even so, CSSCO filters are incredibly useful particularly in intranet and browser-targeted Web applications. Given that CSSCO is only 4KB minified, for large photo collections the downsides of filtering via CSS are trivial compared to editing a gazillion images.

cascading style sheet libraries 4

Easy image hover effects

A little polish on your Web content goes a long way and image hover is a technique that pays off bigly despite its simplicity. Image hover effects replace or modify image content when the mouse hovers over the image and the imagehover.css library makes scalable effects really easy to use. Imagehover.css includes more than 40 hover effects and its minified version weighs in at a mere 19KB.

cascading style sheet libraries 5
Tootik

Tootik for total control of tooltips

One of the key techniques in helping users understand a user interface is tool tips, text bubbles that appear adjacent to Web page elements and display explanatory text, links, and or images and Tootik is a simple, elegant, and effective way to do this. One of the really nice things about this library is that its web site includes a playground (shown above) so you can test different placements, colors, and behaviors then simply copy the generated code to your own site. Tootik in its minified form is only 12KB.

cascading style sheet libraries 6
Gutenberg.css

Easy printing with Gutenberg.css

Printing Web content is something that most sites do very poorly. To do it right, you have to consider what the final output should look like, which elements to include, which to exclude, where page breaks should go, whether the Web page background should be printed, and so on. Gutenberg.css is a framework that makes it easy to make your content look great on the printed page without breaking a sweat (and it’s only 5.11KB in size).

cascading style sheet libraries 7
Font Awesome

Free, scalable, awesome icons with Font Awesome

Font Awesome, a free CSS library, is every bit as awesome as its name claims. Providing 675 scalable icons that you can size, color, shadow, and overlay, Font Awesome comes with a free content delivery network. Built originally for the Bootstrap framework and compatible with pretty much every other major framework, Font Awesome supports Retina displays, accessibility, and is pure CSS (i.e. all of this designer goodness doesn’t require JavaScript!). Minified, Font Awesome is only 31KB.

cascading style sheet libraries 8
Tobias Bjerrome Ahlin

Spinkit, what to watch while waiting

We’ve come a long way since the days of Web sites using simple animated hourglasses and beachballs tell us to hurry up and wait. And when it comes to online content, what you show people while they wait for content to load, services to connect, or whatever it is you can’t supply right away, becomes part of your branding and identity. Want something good-looking to show the waiting masses? Check out Spinkit, a collection of beautiful CSS-animated loading indicators that weighs in at 15KB.

cascading style sheet libraries 9
W3schools

W3schools color libraries

While it’s fairly easy to specify a color for an HTML element by explicitly defining its hex value (e.g. #0000FF) or its name (“Blue”), there are sets of commonly used colors that are related by their role in things like safety standards, highway colors, fashion colors, camouflage colors, and so on. w3schools has made it simple to use these color palettes through free CSS color libraries (they’re also tiny; the largest, when minified, is under 2KB).

cascading style sheet libraries 10

A CSS hamburger helper

When Web pages are rendered on small screens such as smartphones, the most common way to deal with shrinking a menu is to hide it under a “hamburger”, an icon usually consisting of three horizontal lines; click on the hamburger and the menu is revealed. But we all want our content to be compelling and exciting so animating the hamburger has become de rigeur. To this end, chef Jonathan Suh has served up a batch of CSS library goodness called, of course, hamburgers.css that provides 14 animations. It’s simple, easy, free, and tiny (minified, it’s just over 19KB).

cascading style sheet libraries 11

Shake it up with CSShake

In Web content there are many occasions where you want to catch the users’ eye or emphasize some element and that’s exactly what CSShake is for. The library provides 11 types of shakes that can be applied to any element. Behaviors include fast and slow, little, hard, fixed horizontal, vertical, and rotation, opacity, crazy, constant, and “chunk” shakes. Shakes can be started or stopped by mouse hovering, frozen after shaking, and shakes can be customized right down to details such as how many pixels the element moves.

Copyright © 2016 IDG Communications, Inc.