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.
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.
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.
The Box Office
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.
Define
Adjust
v
Result
List-o-Matic
This tool will generate both CSS and HTML for customized list-based navigation.
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.
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.
Spritebox
Spritebox is a WYSIWYG tool to help web designers create CSS classes and IDs from a single sprite image.
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.
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.
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.
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.
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).
PX to EM
This online tool will convert font sizes in px to em and vice versa based on your body font size.
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.
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 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.
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.
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.
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.
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.
Dynamic Drive CSS Library
Here you will find original, practical CSS codes and examples such as CSS menus to give your site a visual boost.
CSSPop
Here you can find CSS snippets as well as uploading your own to share.
CSS Snippets
A blog dedicated to providing snippets of CSS code that can be copied and used in websites as required.
Dev Snippets
A snippet library including CSS, jQuery and WordPress.
DZone Snippets
DZone Snippets is a public source code repository to help you build your personal collection of code snippets.
Snipplr
Snipplr is a library of user-donated code snippets, including CSS, HTML, PHP, MySQL, jQuery and more.
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.
