TOOLKIT
BLOG
ABOUT
FOLLOW
SUGGEST SITE
all
CSS Generators
Utilities
Reference
Grids & Frameworks
Lorem Ipsum
Color Tools
Type Tools
Backgrounds
Images & Icons
JS & Jquery
NEW
ALPHABETICAL
POPULAR
HTML Kickstart
99Lime\'s ultra-lean and clean HTML framework. Great documentation.
framework
boilerplate
2012-02-15 08:53:14
-7749
HTML Kickstart
Screencast-O-Matic
Simple, online screen recorder for one-click recording from your browser on Windows or Mac with no install.
screencast
2012-02-15 08:51:51
-4543
Screencast-O-Matic
Font Face Generator
Font Squirrel\'s Font Face Generator. Use your fonts on the web.
fonts
typography
2012-02-15 08:50:48
-4760
Font Face Generator
Colrd
Resource for user submitted gradients, patterns, and color palettes.
color palettes
gradients
2012-02-03 14:22:44
-5495
Colrd
EM Chart
Interactive excel-like data table of em to pixel size relations.
reference
cheatsheet
2012-02-03 14:14:32
-4432
EM Chart
Layer Styles
Photoshop-esque interface to generator CSS elements.
generator
css
2012-01-31 23:35:39
-5210
Layer Styles
Modernizr
Javascript library for making websites work exactly right no matter the browser.
compatibility
cross-browser
2012-01-31 23:27:21
-4388
Modernizr
The Noun Project
Find tons of basic matching basic icons on a site with great UX
icons
2012-01-31 23:05:08
-6939
The Noun Project
Normalize.css
Normalize.css preserves useful defaults rather than unstyling everything.
stylesheet
reset
2012-01-31 22:58:12
-4642
Normalize.css
Push It
Pure CSS buttons that actually look and feel like buttons when pressed.
buttons
2012-01-31 22:51:54
-5971
Push It
Button Maker
Handy WYSIWYG button generator by CSS Tricks with sliders to adjust settings.
buttons
generator
2012-01-31 22:50:28
-5052
Button Maker
Primer CSS
Paste in your HTML, and Primer will pull out the IDs and classes in a fresh stylesheet.
css
code-cleaner
2012-01-30 10:04:57
-5645
Primer CSS
Gridulator
Quick grid maker. Input width and number of column and it gives you a PNG.
grid
2012-01-30 10:03:32
-4156
Gridulator
Stylus
Javascript plugin to write stylesheets dynamically with pythonic indentation. Like LESS, but better.
javascript
css
2012-01-29 23:44:50
-4262
Stylus
Fathom.js
Create sliding presentations easily with HTML, CSS & jQuery. Think Powerpoint in the browser.
presentation
javascript
2012-01-29 22:10:04
-4560
Fathom.js
Spin.js
Easily create highly customizable loading spinners using CSS and JS.
javascript
spinner
2012-01-29 21:35:54
-4505
Spin.js
Money.js
JavaScript currency conversion library, done right - with no dependencies, in just over 1 kb.
currency
javascript
2012-01-29 14:33:19
-5443
Money.js
Humane JS
A platform independent notification system that works on mobile.
javascript
notifications
2012-01-29 14:13:22
-4249
Humane JS
Foundation by ZURB
Excellent framework that packs in tons of easy to use features while still staying simple.
grid
framework
2012-01-29 13:52:13
-4328
Foundation by ZURB
HTML Ipsum
Useful Lipsum site that takes things a step further by adding in the html for you.
lorem ipsum
2012-01-28 17:17:07
-4413
HTML Ipsum
Screenfly
View your device on a variety of device screens and resolutions. Very clean.
compatibility
resolution
2012-01-28 16:50:46
-3545
Screenfly
Icon Finder
Excellent icon search engine that puts Google Images to shame.
icons
2012-01-28 16:46:19
-5551
Icon Finder
Dochub
Hands down the best language reference site, with live search capabilities.
reference
cheatsheet
2012-01-28 16:42:30
-3510
Dochub
CSS Refresh
Use a small js file to detect changes in your css and then automatically refresh.
live
css
2012-01-27 12:55:26
-4001
CSS Refresh
Prefix Free
Use only unprefixed CSS properties everywhere - adds browser prefixes as needed behind the scenes.
css
compatibility
2012-01-27 12:43:31
-3388
Prefix Free
CSS Pattern Gallery
A collection of patterns made and generated entirely in CSS.
patterns
backgrounds
2012-01-27 12:41:50
-5718
CSS Pattern Gallery
Dabblet
A in-page CSS editor that shows live results for your editing. Great for gradients.
live
css
gradient
2012-01-27 12:31:37
-4023
Dabblet
Cubic Bezier
An awesome WYSIWYG tool for making custom jQuery animate easings.
jquery
WYSIWYG
2012-01-27 11:57:45
-3718
Cubic Bezier
Handpicked JQ Repo
A simple repository of handpicked jQuery scripts with demos.
jquery
repository
2012-01-27 11:26:14
-4208
Handpicked JQ Repo
JS Hint
A tool to detect errors and potential problems in JavaScript code.
javascript
validator
2012-01-27 11:18:59
-3284
JS Hint
Blue Vertigo
A resource directory for free and premium resources for many different types of design.
resources
directory
2012-01-25 15:54:14
-4158
Blue Vertigo
Simple Git Guide
A very easy to understand introduction / guide to learning to use git.
git
guides
2012-01-25 11:13:44
-4428
Simple Git Guide
JS Beautifier
Take messy or minified JS or HTML code and automagically clean it up.
beautify
js
2012-01-25 00:52:58
-3737
JS Beautifier
Columnal
Combines parts of other great grids with additional features (debugging, sub-columns, etc)
grid
framework
2012-01-24 22:23:37
-3700
Columnal
TypeTester
See how the default fonts for different operating system appear on your screen.
fonts
2012-01-24 22:10:35
-3527
TypeTester
Leaflet
A modern, lightweight open-source javascript library for interactive maps by CloudMade
maps
js
2012-01-23 23:59:31
-3812
Leaflet
Hyperpolyglot
Side-by-side reference sheet for PHP, Python, Ruby, and more with colored syntax.
reference
cheatsheet
2012-01-23 23:50:17
-4766
Hyperpolyglot
Westciv Tools
Incredible set of WYSIWYG tools for CSS3 and HTML5
WYSIWYG
css3
html5
2012-01-23 22:23:20
-3710
Westciv Tools
BG Patterns
An easy to use, feature-rich background pattern generator.
patterns
backgrounds
2012-01-23 12:18:03
-5393
BG Patterns
HTML5 Please
Reference on what elements you should/shouldnt use according to browser support.
html5
compatibility
2012-01-23 12:07:17
-4024
HTML5 Please
Font Dragr
Drag and drop .ttf or .otf fonts into the browser and use them quickly.
fonts
2012-01-16 10:51:32
-3497
Font Dragr
Goldilocks Approach
A very methodical approach to web design, with emphasis on platform adaptability
css
framework
2012-01-09 22:04:02
-3939
Goldilocks Approach
Inuit CSS
An amazingly clean and well organized css framework with great annotation.
css
framework
2012-01-09 21:57:33
-4393
Inuit CSS
Prefixr
Nettuts tool that takes css and automatically makes it cross-browser friendly.
cross-browser
css
2012-01-09 21:52:01
-3388
Prefixr
Dev Cheat Sheet
A reference site similar in nature to this, but for software, languages, etc.
cheatsheet
reference
2012-01-09 21:20:28
-4009
Dev Cheat Sheet
Picol
An icon library and generator for basic icons.
icons
2012-01-09 21:18:48
-3935
Picol
SpriteMe
Bookmarklet that grabs background images used on a page and converts it into a sprite.
bookmarklet
sprites
2012-01-09 18:51:41
-3089
SpriteMe
Photoshop Etiquette
A well-designed guide on ways to improve the clarity of a PSD file.
photoshop
2012-01-06 09:54:53
-3871
Photoshop Etiquette
ProCSSor
A CSS prettifier with some advanced options to let you format it in a number of ways.
prettifier
css
2012-01-06 09:48:37
-3377
ProCSSor
Semantic Grid
Great new grid system that works with Less, SCSS, and Stylus.
grid
2012-01-06 00:58:01
-3625
Semantic Grid
Bootstrap by Twitter
Excellent framework that includes base HTML and CSS for forms, buttons, tables, typography.
framework
twitter
2012-01-06 00:54:24
-3440
Bootstrap by Twitter
Scale It
Find the golden ratio for pixels in height and width for certain aspect ratios.
aspect ratio
2012-01-06 00:52:50
-3760
Scale It
Hipster Ipsum
Lorem Ipsum generator spin-off that creates... hipsterisms.
lorem ipsum
2012-01-06 00:50:38
-5981
Hipster Ipsum
Cupcake Ipsum
Lorem Ipsum generator spin-off that lists types of delicious cupcakes. Don\'t use while hungry.
lorem ipsum
2012-01-05 16:39:58
-4075
Cupcake Ipsum
Font Squirrel
Excellent resource for commercial font that are free for use.
fonts
typography
2012-01-03 13:11:45
-3596
Font Squirrel
Lost Type
Beautifully designed Pay-What-You-Want type foundry.
fonts
typography
2012-01-03 13:09:36
-3830
Lost Type
Colour Lovers
Not a utility, but a community to share color inspirations.
color
inspiration
2012-01-03 02:24:41
-3574
Colour Lovers
Ultimate Gradient Gen.
A powerfull Photoshop-like CSS gradient generator.
color
gradients
2012-01-03 02:23:20
-4722
Ultimate Gradient Gen.
Lorem Pixel
Excellent placeholder image generator with width x height sliders.
placeholder
2012-01-03 01:50:25
-4088
Lorem Pixel
CSS Scrubber
Reduce the size of your css and clean it up in the process.
css
validate
2012-01-03 01:28:33
-2841
CSS Scrubber
CSS Sprite Generator
Zip up your images and automatically create a sprite and css.
css
sprite
2012-01-02 23:29:49
-3686
CSS Sprite Generator
Postable
Easily convert symbols like &, >, < to HTML-friendly markup.
markup
converter
2012-01-02 23:16:52
-3163
Postable
MoreCSS
Lightweight JavaScript toolkit / library with CSS syntax for common things.
syntax
library
2012-01-02 23:10:11
-3364
MoreCSS
CSS Type Set
A brilliant WYSIWYG text editor that spits out the css for you.
css
type
2012-01-02 23:02:07
-5339
CSS Type Set
Samuel L Ipsum
Samuel L Jackson quotes for Lorem Ipsum. (NSFW. Obviously.)
lorem ipsum
2012-01-02 22:46:21
-7569
Samuel L Ipsum
Pure CSS Menu
Create simple or complex CSS navigation menus easily.
css
navigation
generator
2012-01-02 22:39:16
-4659
Pure CSS Menu
Chosen
Use jQuery to make your forms more neat and organized.
jquery
forms
2012-01-02 22:05:19
-3567
Chosen
Compass
Very well organized open-source CSS3 authoring framework.
framework
css
2012-01-02 22:04:34
-3769
Compass
Sass
Ruby CSS3 extension that adds nested rules, variables, inheritance.
language
extension
2012-01-02 22:03:35
-3177
Sass
Color Blendy
Input HEX to determine the best blend (multiply, dodge, etc)
color
HEX
2012-01-02 16:28:36
-3226
Color Blendy
Live.js
Javascript that simulates live developing - page reloads on change.
javascript
live
2012-01-02 16:28:14
-4946
Live.js
WhatFont
Bookmarklet that detects and displays fonts used on a page.
fonts
detector
2012-01-02 16:27:45
-3132
WhatFont
Awesome Fonts
Easily create bundles of matching free webfonts with CSS code.
fonts
typography
2012-01-02 16:27:09
-3466
Awesome Fonts
CSS3 Generator NEW
CSS3 Box/DIV maker. WYSIWYG interface that is stunning.
css
WYSIWYG
2012-01-02 16:26:26
-4760
CSS3 Generator NEW
Sprite Cow
Helps get bg position, width and height of sprites within a spritesheet.
css
generator
sprite
2012-01-02 16:26:01
-3483
Sprite Cow
Skeleton
Boilerplate for lightweight, responsive mobile development.
framework
boilerplate
2012-01-02 16:25:39
-3776
Skeleton
978 Grid System
Rival and/or successer to 960. Just download the PSD template.
grid
2012-01-02 16:25:08
-3707
978 Grid System
1140 Grid System
Grid system for those catering to users on a 1280 or higher resolution.
grid
css
2012-01-02 16:24:35
-3254
1140 Grid System
ViewLikeUs
Compare how your website looks in several different resolutions.
resolution
2012-01-02 16:24:08
-3219
ViewLikeUs
JQ API
A clean, well organized, real-time-searchable jQuery API reference.
jquery
reference
2012-01-02 16:23:46
-3020
JQ API
Gridinator
Highly customizable grid maker with WYSIWYG interface.
grid
generator
2012-01-02 16:22:51
-3268
Gridinator
Fillerati
Class up your dummy text with passages of great literature.
lorem ipsum
2012-01-02 16:22:28
-3576
Fillerati
Gangsta Lorem
Snoopify your dummy text with fizzle, nizzles and shizzles.
lorem ipsum
2012-01-02 16:22:04
-3397
Gangsta Lorem
Stripe Generator
Create hundreds of different types of stripes to use as backgrounds.
patterns
backgrounds
2012-01-02 16:21:32
-4139
Stripe Generator
Subtle Patterns
A nice collection of subtle patterns (that tile on repeat) to use as backgrounds.
patterns
backgrounds
2012-01-02 16:21:12
-7582
Subtle Patterns
NoisePNG
Dead simple noise generator with HEX input to create backgrounds.
patterns
backgrounds
2012-01-02 16:20:26
-4080
NoisePNG
Button Generator
Quickly and easily create CSS3 styled buttons and links.
css
buttons
css
2012-01-02 16:20:00
-4571
Button Generator
Regex Pal
Simple javascript regular expression tester.
javascript
test
2012-01-02 16:19:35
-2992
Regex Pal
Nice Entity
Quick reference guide for common entities and characters.
type
characters
reference
2012-01-02 16:19:15
-3199
Nice Entity
Color Blender
Pick two colors (HEX input or chart) and blend them.
color
HEX
2012-01-02 16:18:51
-3059
Color Blender
CanIUse
Compatability tables for desktop and mobile browsers.
compatibility
cross-browser
2012-01-02 16:18:01
-2941
CanIUse
Placekitten
Simple service for using kitten pictures as placeholder images.
placeholder
2012-01-02 16:17:27
-3689
Placekitten
Google Web Fonts
Use Google\'s APIs to get free designer web fonts, all open source. An absolute must use.
fonts
google
2012-01-02 16:16:36
-3278
Google Web Fonts
Bacon Ipsum
A different spin on the traditional Lorem Ipsum dummy text.
lorem ipsum
bacon
2012-01-02 16:16:11
-3569
Bacon Ipsum
EM Calc
Converts pixels to em font sizes. Good for scalability.
fonts
converter
2012-01-02 16:13:43
-2993
EM Calc
TypeChart
Lets you flip through and compare web typography while retrieving the CSS.
fonts
typography
2012-01-02 16:13:11
-3111
TypeChart
ColorMatch Remix
Similar to Colormatch 5k, but with 9 colors generated, and HEX input.
color
HEX
2012-01-02 16:12:46
-3195
ColorMatch Remix
ColorMatch 5k
Similar to Adobe\'s color picker but simpler with RBG slider.
color
RGB
2012-01-02 16:12:20
-2929
ColorMatch 5k
0to255
Color picking helper that displays range of similar colors after inputting HEX
color
HEX
2012-01-02 16:10:35
-4023
0to255
Kuler
Adobe\'s web color designer. Presets available, chooses 5 colors of different schemes.
color
adobe
2012-01-02 16:10:11
-3487
Kuler
Color Scheme Designer
Color scheme designer with many options - mono, complement, triad, tetrad, etc.
color
designer
2012-01-02 16:09:21
-3896
Color Scheme Designer
Elements
Lightweight and organized framework . Very neat.
framework
2012-01-02 16:08:05
-3664
Elements
Blueprint
Another leading grid system aside 960, with a few different options.
framework
2012-01-02 16:07:22
-3227
Blueprint
Kotatsu
Dead simple HTML table generator, just and rows/columns and it spits out code.
tables
2012-01-02 16:06:44
-2956
Kotatsu
960 Grid System
Tried and true grid system - framework of commonly used dime
grid
2012-01-02 16:06:05
-3668
960 Grid System
GoldenRatio
Helps calculate the golden ratio (exact pixels) for layouts
css
layouts
2012-01-02 16:05:26
-3481
GoldenRatio
29D GridCalc
Simple Grid calculator that also shows recommended font size
grid
layout
2012-01-02 16:04:48
-2851
29D GridCalc
Less
Javascript plugin that enables you to write your stylesheets dynamically.
plugin
javascript
2012-01-02 16:02:46
-3016
Less
SpriteBox
WSYIWYG tool that creates CSS classes/IDs from single sprite
css
WYSIWYG
sprite
2012-01-02 16:01:43
-3184
SpriteBox
Sexy ToolTips
Create stylish mouseover tooltips using purely CSS.
mouseover
css
tooltips
2012-01-02 15:57:23
-3500
Sexy ToolTips
CSS Layout
Very simple CSS layout generator with options for most commo
css
layout
2012-01-02 15:33:52
-3333
CSS Layout
CSS3 Generator
CSS generator for multiple elements (gradients, border radius, etc)
css
generator
2012-01-02 15:28:46
-3487
CSS3 Generator
Border Radius
Quick and easy border radius tool. Input px and get a preview and the css.
css
generator
WYSIWYG
2012-01-02 15:27:44
-3207
Border Radius
HTML5 Boilerplate
Up to date HTML5 compatible boilerplate/framework - works wi
grid
boilerplate
html5
2012-01-02 15:21:58
-3121
HTML5 Boilerplate
Liquor Ipsum
Lorem Ipsum generator spin-off that lists various types of l
lorem ipsum
2012-01-02 14:59:48
-3094
Liquor Ipsum
Beer Ipsum
Lorem Ipsum generator spin-off with beer brands and varities
lorem ipsum
booze
2012-01-02 13:29:02
-3431
Beer Ipsum
JS Fiddle
CSS/HTML/JS playground - save and share code snippets, even embed them.
javascript
css
html5
2012-01-02 13:13:44
-2857
JS Fiddle
ScriptSrc
Easily find popular scripts and quickly copy their script tags to clipboard.
scripts
2012-01-02 13:11:48
-4528
ScriptSrc
CSS3 Playground
Awesome CSS3 playground that gives you controls to customize an element.
CSS3
WYSIWYG
2012-01-02 13:01:41
-3267
CSS3 Playground
Placehold.it
Quick and simple image placeholder service with a few additi
placeholder
2012-01-02 13:00:22
-3977
Placehold.it
ZURB Grid Builder
Create simple or complex grids on the fly with this awesome tool.
grid
2012-01-02 12:28:14
-3306
ZURB Grid Builder
CSS3, Please!
See live results of an element are you modify it\'s style.
css
WYSIWYG
2012-01-02 12:27:38
-3367
CSS3, Please!
Snipplr
Organize and share your code snippets, and view popular ones.
code sharing
2012-01-02 12:26:35
-4571
Snipplr
CopyPasteCharacter
Quickly copy some of the more difficult characters to your clipboard.
markup
type
2012-01-02 12:26:01
-3529
CopyPasteCharacter
Tabifier
Take some messy or even minified code and clean it up.
code cleaner
2012-01-02 12:25:17
-3516
Tabifier
Chop
Beautiful code-snippet sharing app with great inline comments.
code sharing
2012-01-02 12:21:32
-3449
Chop
Intensivstation CSS
Wide range of basic CSS templates that scale well.
css
layout
templates
2012-01-02 12:07:04
-3459
Intensivstation CSS
Color Pallete Generator
Use an image to generate a color scheme from it.
color
generator
2012-01-02 11:57:22
-3507
Color Pallete Generator
CSS3 Social Signins
Quickly add CSS3 social sign-in buttons to your site.
social
2012-01-02 11:54:36
-3590
CSS3 Social Signins
ResponsivePX
View your site in any resolution to find breakpoints.
resolution
2012-01-02 11:39:19
-3960
ResponsivePX
