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
This tool allows you to input some text and visually modify it to your requirements. It will then give you the CSS styling.
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.
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.
The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages. See the images below that show the three easy steps.
This tool will generate both CSS and HTML for customized list-based navigation.
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.
Spritebox is a WYSIWYG tool to help web designers create CSS classes and IDs from a single sprite image.
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.
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.
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.
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.
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).
This online tool will convert font sizes in px to em and vice versa based on your body font size.
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.
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.
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.
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.
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.
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.
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.
Here you will find original, practical CSS codes and examples such as CSS menus to give your site a visual boost.
Here you can find CSS snippets as well as uploading your own to share.
A blog dedicated to providing snippets of CSS code that can be copied and used in websites as required.
A snippet library including CSS, jQuery and WordPress.
DZone Snippets is a public source code repository to help you build your personal collection of code snippets.
Snipplr is a library of user-donated code snippets, including CSS, HTML, PHP, MySQL, jQuery and more.
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.