CSS Resources for Developers and Designers

Here is a list of CSS tools and resources that you may find useful in your web development and design work. We all know that us web developers and designers are very busy and often overworked! Therefore, it is important to use tools and resources to help us work that much better and more efficiently. These tools not only make our work easier, but they have the ability to improve the quality of our work as well. Please help us make this directory functional and all-encompassing by sharing your own helpful tools and resources in the comments to this post. Enjoy!


There are many CSS Resets available, including everything from very basic resets to comprehensive resets consisting of many styles. There isn’t a “best” CSS Reset for all designs, only a best CSS Reset for your design. To help you find the perfect CSS-reset styles, CSSresetr lets you try all the best CSS Resets on a variety of web pages – even your own.


We’ve all been there. You are nearly done with a beautiful site design, only to arrive at the task we all dread – form styling. Depending on the operating system and browser, default form elements can look okay or horribly disfigured.


CSS framewokr using the latest Web standards, also known as HTML5 and CSS3. Also, it contains a number of preloaded basic styles, mixins, helpers, transparent textures and a @font-face driven icon set.


Same as JSLint but for CSS.

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.


ProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.

OS X Lion Icons With CSS

Collection of CSS styled buttons inspired by Mac for use in your UI.

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 below and then copy the generated code to your website.

Layout Gala

Collection of CSS layout/templates.

SlickMap CSS

SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

Fixed Width CSS Layouts

Collection of Fixed Width CSS layouts.

Font Dragr

Font dragr allows you to easily test custom fonts, through the @font-face at-rule, without the need for any CSS coding or knowledge of CSS coding. All you need to do is drag and drop.


With Patternizer, it’s easy to make something amazing in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity and play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing. And you can access them from any device* worldwide.

Teylor Feliz
Teylor Feliz

Teylor is a seasoned generalist that enjoys learning new things. He has over 20 years of experience wearing different hats that include software engineer, UX designer, full-stack developer, web designer, data analyst, database administrator, and others. He is the founder of Haketi, a small firm that provides services in design, development, and consulting.

Over the last ten years, he has taught hundreds of students at an undergraduate and graduate levels. He loves teaching and mentoring new designers and developers to navigate the rapid changing field of UX design and engineering.

Articles: 183