Useful CSS Tools Showcase and Snippets Libraries for Web Developers

If you are fortunate enough (or talented enough) to be a very busy web developer, it can be extremely time saving to use CSS tools and snippets. Many tools are created to resolve a problem, bugbear, or repetitive action the creator has encountered and found a need for. This article is bringing to your attention some very useful CSS tools to enhance your work and save you time, as well as a list of CSS code snippets libraries for you to browse either for inspiration or to grab the code for your own projects.

CSS Tools Showcase and Snippets Libraries

CSS Typeset

This tool allows you to input some text and visually modify it to your requirements. It will then give you the CSS styling.

CSS Typeset

Typetester

With Typetester you can compare three fonts side by side that you are considering for your site or project. The font styles shown are: Regular; Bold; Italic; Bold Italic; Upper Case: Regular, Bold, Italic, Italic Bold; Small Caps: Regular, Bold, Italic, Bold Italic.

Typetester

CSS Text Wrapper

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges on the text window and then copy the generated code to your website.

CSS Text Wrapper

List-o-Matic

This tool will generate both CSS and HTML for customized list-based navigation.

List-o-Matic

YAML Builder

A modular CSS framework for flexible, accessible and responsive websites. YAML provides a complete set of matched building blocks to create complex websites. Grids, navigation, forms, typography module and all provided add-ons work seamlessly together.

YAML Builder

Spiffy Corners

Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or JavaScript.

Spiffy Corners

Spritebox

Spritebox is a WYSIWYG tool to help web designers create CSS classes and IDs from a single sprite image.

Spritebox

CSS3, Please!

This is a cross-browser CSS3 rule generator. You can edit the underlined values in the CSS file, but you don’t have to worry about making corresponding values match – that is done automatically.

CSS3, Please!

Code Beautifier

A CSS formatter and optimiser to clean up your CSS pages. Either copy and paste your CSS into the text box, or input the URL of the webpage you would like to optimise.

Code Beautifier

Clean CSS

Clean CSS is another formatter and optimiser. Either copy and paste your CSS into the text box, or input the URL of the webpage you would like to optimise.

Clean CSS

Typeface.js

Instead of creating images or using flash to show your site’s graphic text in the font you want to use, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. Currently there are 3 fonts in the typeface.js library, but you can convert your chosen fonts. You have the responsibility of ensuring the font license allows you to do this.

Typeface.js

Moo Color Finder

This little tool finds color information from CSS files from almost any website. You can even download the palette as a Photoshop Palette File (.aco).

Moo Color Finder

PX to EM

This online tool will convert font sizes in px to em and vice versa based on your body font size.

PX to EM

Variable Grid System

The Variable Grid System is a quick way to generate an underlying CSS grid for your site based on the 960 Grid System. The following image shows a preview of a 940 grid, 12 columns, column width 60, gutter width 20.

Variable Grid System

CSS Layout Generator

This generator will create either a fixed width or fluid width layout and can include a header, menu and footer. Once you have selected your options, click ‘Create Layout’ and you can preview and download your layout in a .zip file.

CSS Layout Generator

CSS Menumaker

Using the supplied library of menus, including drop-down, flyout, vertical, horizontal, tabbed and CSS3 styles, you can customize them to your own requirements, and the online tool supplies both the HTML and CSS for your requirements.

CSS Menumaker

Tabs Generator

A CSS navigation tab menu generator that allows you to set size, color, corners, background, styles, etc to generate your own design that can then be downloaded.

Tabs Generator

CSS Lint

CSS Lint points out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that loof for problematic patterns or signs of inefficiency.

CSS Lint

W3C CSS Validation Service

I would imagine most developers already have this website bookmarked! This is of course, the well known online application that will validate your CSS and point out what and where any errors are. You are then offered a Validation Stamp to include on your error-free page.

W3C CSS Validation Service

CSS Snippets Libraries

Here is a short list of libraries and repositories where you can find many useful snippets of CSS code to add to your personal library, or even upload your own coding snippets to share.

CSSPop

Here you can find CSS snippets as well as uploading your own to share.

CSSPop

CSS Snippets

A blog dedicated to providing snippets of CSS code that can be copied and used in websites as required.

CSS Snippets

Dev Snippets

A snippet library including CSS, jQuery and WordPress.

Dev Snippets

Snipplr

Snipplr is a library of user-donated code snippets, including CSS, HTML, PHP, MySQL, jQuery and more.

Snipplr

Conclusion

Hopefully you have found some helpful and useful tools in this list, and maybe even some libraries that you didn’t know were there.

What CSS tools do you use? Do you think tools and snippets are necessary, or are you happier to always create your own code and layout? Please share your thoughts with us in the comments section below.


Author:

Carol is a blogger and Photoshop enthusiast. She enjoys surfing the net in search of outstanding art, design and photography, and enjoys nothing better than sharing her discoveries through article writing.