10 Top CSS Design Resources

Tara Hornor

Cascading Style Sheets (CSS) gives you unprecedented control of the layout and design of any web document. As browser support only improves, we will see CSS becoming the primary styling system. This is partly because CSS is so light when compared to most JavaScript, AJAX, or image-based design systems. And as the support for more transitional features like sliders and gradients find their way into CSS, there may not be a need for anything but CSS in the near future.

The following collection is a one-stop-shop for CSS. From the official home page of W3C to gradients and button generators — each of these resources has been carefully reviewed and tested. With these tools, you can accomplish any CSS design task that you want using CSS as the primary, if not only, system for implementing the look and feel.

Let us know what you think and if there are resources available that should be on this list!


World Wide Web Consortium (W3C)

This is home base for CSS. The official CSS headquarters, World Wide Web Consortium W3C establishes web standards, and CSS is one of the standards they manage. While some browsers support CSS outside of the W3 standards, this site is where you go for authoritative information on CSS. They have excellent CSS training and a host of resources.


Google Webfonts

Web fonts are the way of the future for adding typography elements to your website. Google allows font designers to upload their fonts and they are completely free to use for commercial or personal use. Just add an @import sting to your CSS document and you can implement these quality fonts.


Ultimate CSS Gradient Generator

Finally, CSS-based gradients that work on ALL major browsers. Colorzilla put together this gem and it uses a combination of CSS3 and HTML5 to get consistent results across browsers. It even has support IE9, believe it or not. Just click the “IE” button to see how the gradient will look in IE to be sure it’s what you want. The gradient editor is fantastic and the code is easy to implement.


CSS3Gen

An excellent resource for generating quick snippets of CSS code for rounded corners, drop-shadows, and text shadows. These are great for call out boxes, forms, and side bars where you want to set information off from the rest of the content. The on-page tools are very simple and can easily be integrated into other features. Better yet, each tool has detailed explanations for how the CSS functions work in each browser. So this doubles as an easy-to-use tool and an excellent tool for troubleshooting why a browser may not be responding as expected.


Not Just a Grid

Not all grids function the same way. Some are fluid while others are fixed. Not Just a Grid came up with a system for serving the grid up based upon the available resolution of the screen, making it a hybrid. The system is fluid in that it works with the screen resolution, but once the page loads, the grid is fixed. The result is a clean layout every time.


960 Grid System

The 960 grid system is a fixed width approach with a simple premise: quit wasting time and just design. They only have a few grids, but they are easy to implement. Their customer list — which includes Sony Music, Drupal, Fedora, and many others — speaks for itself. Included in the free download are Photoshop, Fireworks, Gimp and other action/template files to create compliant designs. Then just splice and go!


Fluid 960 Grid System

Looking for a grid system that functions smoothly on all kinds of display widths? The Fluid 960 Grid System by Design Influences is a slick system for making sure your content is always in view. This is not ideal if you want a grid with a lot of graphics as the fluid nature of this system will push images around in an awkward manner. The site has a number of powerful tools available, such as image previews, accordians, and multiple grid sizes of 12 and 16 column designs. Fixed width systems are also available.


CSS Menu Maker

Cross-browser compatible, CSS-based drop-down menus are now possible. No JavaScript is required. The site offers fully customizeable menus of various types: drop-down, horizontal, and vertical. With tons of resources, this is a really great one-stop-shop for many other CSS development tools as well.


CSS Button Maker

Looking for an image-free button solution? CSS Button Maker by CSS-Tricks lets you quickly generate CSS only buttons that are cross-browser compatible. You can tweak the code later or use the stock code they provide. It doesn’t get any easier and the gradient tools are easy to use. Hover is supported so you can give users visual feedback. There is a WordPress drag and drop feature available as well.


Formee

Forms can be a real pain to code and get just right. If you’ve ever had a field go floating on you or had problems lining up text elements, you understand. Formee has a simple set of template forms that are compatible with the above 960 grid systems, so it will pop right into place. The code is well-documented and changes are easy to make.


What did we miss?

Any other CSS-based tools we should put on here? What are you using to get the job done?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.css-101.org Thierry Koblentz

    This is a tiny CSS framework that is less than 1kb and compatible with all browsers out there, including IE5.5 and 6:

    http://www.ez-css.org

    [/shameless plug]

  • http://www.sevenfiv.com Irshad Ahamed

    Thanks for sharing, as a Front end designer & developer, it really helps and save time.
    Also i hope all the tricks in http://css-tricks.com/snippets/, is useful as well.

  • http://www.alabiansolutions.com Alabi Adebayo

    This is a great collection. It makes design more ease. Great job Tara.

  • http://owlbox.ru Ilya

    And how about Bootstrap?
    http://twitter.github.com/bootstrap/
    This is really elegant and astonishing css framework on less.

    Main features:
    Highly customizable
    * 960/940 and others flexible gris system
    * Beautiful forms, menus, bars, tabs and other well-designed interface elements.
    * Some usable inerface-oriented scripts included. (popovers, tooltips e.t.c)
    * Code highlighter
    * No additional graphics is needed. Only one css file compiled from less.

    The main drawback – good bye old browsers.

  • http://iamshawnrice.com shawn

    http://instacss.com/
    Has been a pinned browser window since I learned about it.

  • Raud

    Thank you for this article :-) It was useful.

  • http://mar bob marteal

    I really get a lot of use out of CSS3 Please “The Cross-Browser CSS3 Rule Generator”

    http://css3please.com/

  • Web Design Staffordshire

    Thanks for sharing these resources.

    Some of these are great time savers and can help move production along quicker.

    Thanks

  • http://stephenballnc.com Stephen Ball

    Subtle Patterns, gorgeous background textures:

    http://subtlepatterns.com

  • http://techgyo.com Sreejesh @techgyo

    Thanks Tara, great tools. Worth checking out.

  • http://khgraphics.com Ken

    For a collection of CSS3 dropdown menus checkout http://css3menu.com.

  • http://www.marketagent007.com MarketAgent 007

    These are excellent resources to bookmark, thank you for sharing! :)

    When is someone going to develop a full-blown, standards compliant WYSIWYG web design program?

    In early 2000, I learned how to design sites using Dreamweaver (WYSIWYG). Then, years later, I learned how to hand-code valid CSS and have been hand-coding ever since.

    Now, there are web-based apps that generate valid css for you – even css3 generators. It’s like we’ve gone full circle.

    • http://creativecontentexperts.com Tara Hornor

      Sounds like you were ahead of the game…impressive! Yes, full circle indeed. :)

  • Mike

    Thanks for listing these useful resources.

  • Jam

    I found the foundation framwork from ZURB an excellent starting point.

    http://foundation.zurb.com/

  • http://burningfiredesign.com Matt

    Great list and a great share. Thanks!

  • http://www.notjustagrid.com Al Redpath

    Thanks for including Not Just a Grid in your list Tara, I’ve got some updates and improvements to it coming very soon!

    • http://creativecontentexperts.com Tara Hornor

      You’re welcome, Al! I’ll have to check on your site to see your improvements. Thanks for commenting!

  • http://billy.scienceontheweb.net/ Billy Graydon

    One great set of tools I use is here:
    http://westciv.com/tools/

    It’s got some neat ways of testing selectors, too.

  • http://www.aclearweb.co.uk Jan Cooper

    A useful list to keep handy! Thanks

  • http://creativecontentexperts.com Tara Hornor

    Thanks all for sharing more awesome CSS design resources. These suggestions are all great! I encourage readers of this post to definitely check out these resources listed in the comments.

  • http://www.markdavis.co.uk Mark Davis

    Useful list, we used the 960 grid system to build this site for a client: http://www.darshdigital.co.uk they loved it!