Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

22 Extremely Useful And Powerful CSS Tools

We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little apps to the public. Last year we prepared and published some of them in a series of smashing posts about CSS. Now again is the time to give these tools the attention they deserve. Big thanks to all designers and developers who contributed to the design community over the last months and years. We — our community and the design community — truly appreciate your efforts.

Below, we present 50 extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug1 or the Web Developer extension2, but tried to focus on rather unknown tools that are definitely worth a look. Some tools are new and some are old, but hopefully everybody will find a couple of new useful or at least inspiring tools. [Content Care Nov/02/2016 – 22 tools left from originally 50]

Please take a look at the following related posts:

CSS and Typography Link

  • Hyphenator5
    Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French.
  • CSS Type Set6
    CSS Type Set is a hands-on typography tool that allows designers and developers to interactively test and learn how to style their Web content.CSS Type Set7
  • CSS-Typoset Matrix and code generator8
    A matrix table that presents font sizes and (symmetrical and asymmetrical) margins for various base font sizes — in pixel and em units. It also generates the source code on the fly. Created by Jan Quickels.

CSS Online Tools Link

  • PSD2CSS Online9
    A free online service that generates Web pages from Photoshop designs. By following the guidelines and naming conventions10, you can precisely choose how the transformation from PSD to (X)HTML and CSS is done.
  • Conditional-CSS11
    Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements for both individual browsers and groups of browsers.
    Conditional-CSS12
  • px to em13
    This tool is what its developers call “px to em conversion made simple”. Type a base font size in pixels, and the tool will produce a complete pixel to em conversion table, making elastic Web design much easier to produce.
  • CSS Frame Generator14
    This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure – each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better.CSS Frame Generator15
  • Postable16
    “I absolutely hate having to switch all the ‘< ‘ and ‘>’ signs in my code to ‘<’ and ‘>,’ respectively. I also hate having to write “&” any time I want to include an ampersand. It makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” This handy tool is a little app that will do all that for you. Created by Elliot Swan.WordOff17
  • Kotatsu18
    Kotatsu is a simple HTML table generator. The tool lets you attach classes to cells in the same column easily.
    Kotatsu19
  • htmldevelopertools20
    This tool allows you to update your CSS files on the server in a browser window. Currently works only under IIS + .NET 3.5. An interesting idea. Could someone create a similar script for Apache? Let us know, and we’ll support your both financially and with the broad coverage of our magazine.
    htmldevelopertools21
  • Lorem 222
    This tool provides you with an “all around better Lorem experience.” It contains short paragraphs, long paragraphs, short list items and long list items to use in your wireframes.
  • JS Bin23
    A Web app specifically designed to help JavaScript and CSS folk test snippets of code in a particular context and debug the code collaboratively. It allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code: new tabs don’t). Once you’re happy, you can save and send the URL to a peer for review or help. They can then make further changes, saving anew if required. Alternative: CodePaste24 or EtherPad25.
  • CSS Text Wrapper26
    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.
    Screenshot27
  • Writing Tests Against CSS28
    CSS is hard to test automatically. Do font sizes meet expectations? Does the layout width correspond to the initial mockup? This tool helps you spot changes in unexpected areas of a website’s layout and design. It can also extract rendered DOM values, such as text size, from a given Web page and compare them against expected values. This could be useful for both regression testing and assertion-based, test-driven development. Written in Python by Gareth Rushgrove.
  • CSS Sprite Generator29
    With this tool, you can upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and generate the CSS for you.
  • Sky CSS Tool30
    An online CSS authoring tool, Sky CSS allows you to create CSS classes almost without using handwritten code. A JavaScript-compatible browser is needed for proper functioning.
  • Web-Based Tools for Optimizing, Formatting and Checking CSS31
    A huge compilation of some of the best free Web-based CSS optimizers/compressors, code formatters and validation services. By Jacob Gube.
  • Grid Designer 2.432
    This tool enables you to create a grid by specifying the number of columns and the widths of the columns, gutters and margins. You can also specify typography in the same tool and export the final CSS and (X)HTML markup. You can also bookmark your grid and typography settings and create designs with spanning columns. Created by Rasmus Schultz.
    Grid Designer 2.433
  • Yahoo’s Secret Text-Sprite Generator34
    Basically this is a URL you can hit that creates a perfect sprite-ready PNG graphic of text you add to the URL.
  • Replace CSS Colors – Editor35
    This tool enables you to change the entire color scheme of your website without going through the CSS code. You choose your local CSS file, replace colors and then download the new CSS file.
  • MinifyMe36
    A small AIR application that can compress multiple CSS and JavaScript files into one and runs on your desktop.MinifyMe37
  • CSS Menu Generator38
    This tool generates vertical, horizontal and drop-down menus online. Various color schemes are available, and you can also customize the menus online.

Handy Kits For Designing With CSS Link

  • 21 Excellent Dreamweaver Extensions for CSS Productivity and Standards39
    An extensive overview of various Dreamweaver extensions, such as CSS Sculptor, CSS Menu Writer, Link Fader, CSS Layouts, Format Table, Style Switcher, etc.
  • Graph Paper40
    This graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up.

In-Browser CSS Tools: Firefox Extensions Link

  • Dust-Me Selectors41
    A Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all of the selectors from all of the style sheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.
  • Aardvark Firefox Extension42
    With Aardvark, you can: clean up unwanted banners and surrounding “fluff,” especially prior to printing a page; see how a page is created, block by block; and view the source code of one or more elements.
  • CSSViewer43
    A CSS property viewer that displays all information about a design element.
  • Dummy Lipsum44
    This Firefox extension dynamically fills a selected field with Lorem ipsum text; the function is called via the context menu.
  • GridFox45
    GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize and allows you to create the exact grid you based your layout on.
    Screenshot46
  • Yet another overview of useful Firefox add-ons that can help developers create websites more efficiently. Among them are Codetch47, Pixel Perfect48, Link Checker49 and ColorZilla50.

Coding and Programming With CSS Link

    • Simple CSS51
      Simple CSS is a free CSS editor that runs on Mac, Windows and Linux. It allows you to create CSS from scratch and modify existing sheets, using a familiar point-and-click interface. Freeware.
    • AWK52
      AWK is a very powerful programming language that you can use on the command line for advanced text processing.
  • RESTful CSS53
    A new method for organizing CSS that better maps on to the way that popular Web application frameworks are built. The examples are based on Ruby on Rails, but the concepts should be easily transferrable to other MVC frameworks. By Steve Heffernan.RESTful CSS54

New CSS Frameworks Link

  • CSS Drop-Down Menu Framework55
    A cross-browser, modular framework that contains 14 customizable templates for designing drop-down-menus.
  • Hartija – CSS Print Framework56
    Hartija is a CSS print framework that attempts to unite the best CSS printing practices into one single CSS file.
  • Introducing SenCSS57
    A clean, minimal CSS template for new projects.
  • formy-css-framework58
    A CSS Framework for better form management.
  • emastic59
    Emastic is a CSS Framework. Its continuing mission: “to explore a strange new world, to seek out new life and new Web spaces, to boldly go where no CSS framework has gone before.”

CSS Bookmarklets Link

  • Design Bookmarklet60
    Design is a suite of Web design and development tools that can be used on any Web page. Encompassing utilities for grid layout, measurement (rule) and alignment (unit, crosshair), Design is a powerful and useful JavaScript bookmarklet.
  • XRAY61
    A bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to see the box model of any element on any Web page.
  • MRI62
    MRI is a bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to debug and test selectors.
  • CSSFly63
    A tool for editing websites easily, directly and in real-time in your browser.
  • 15 Must-Have Bookmarklets For Web Designers And Developers64
    An extensive list of 15 handy Web designer and developer bookmarklets. The whole pack can be downloaded and imported into Firefox.

Tools For Generating CSS Layouts Link

  • Construct Your CSS65
    A visual layout editor based on Blueprint and jQuery. A video tutorial66 is available as well. You can use the keyboard to create layouts on the fly. By Christian Montoya.
  • XHTML/CSS Markup Generator67
    Markup Generator is a simple tool created for XHTML and CSS coders who are tired of writing boring frame code as they just begin slicing work. Its main purpose is to speed up your work by generating (X)HTML markup and a CSS frame out of very intuitive, shortened syntax, so that you can jump directly to the styling of elements.
  • Markup Generator68
  • Dynamic Layout Generator69
    This tool generates cross-browser multi-column liquid designs and enables you to visually change the width and colors. You can drag the sliders to choose the width you want in your layout and preview the layout online. The CSS code is generated automatically.

CSS Layouts Link

  • 100 Free High-Quality XHTML/CSS Templates70
    In this post, we showcase 100 free high-quality templates. Hopefully, some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines.

(al)

Footnotes Link

  1. 1 http://getfirebug.com/
  2. 2 http://chrispederick.com/work/web-developer/
  3. 3 https://www.smashingmagazine.com/2008/02/powerful-css-techniques-for-effective-coding/
  4. 4 https://www.smashingmagazine.com/2007/01/53-css-techniques-you-couldnt-live-without/
  5. 5 http://code.google.com/p/hyphenator/
  6. 6 http://csstypeset.com/
  7. 7 http://csstypeset.com/
  8. 8 http://www.jan-quickels.de/tools-web-typography/
  9. 9 http://psd2cssonline.com
  10. 10 http://psd2cssonline.com/node/128
  11. 11 http://www.conditional-css.com/
  12. 12 http://www.conditional-css.com/
  13. 13 http://pxtoem.com/
  14. 14 http://lab.xms.pl/css-generator/
  15. 15 http://lab.xms.pl/css-generator/
  16. 16 http://www.elliotswan.com/postable/
  17. 17 http://www.elliotswan.com/postable/
  18. 18 http://www.askthecssguy.com/kotatsu/index.html
  19. 19 http://www.askthecssguy.com/kotatsu/index.html
  20. 20 http://code.google.com/p/htmldevelopertools/
  21. 21 http://code.google.com/p/htmldevelopertools/
  22. 22 http://lorem2.com/
  23. 23 http://jsbin.com/
  24. 24 http://paste.bradleygill.com/
  25. 25 http://etherpad.com/
  26. 26 http://www.csstextwrap.com/
  27. 27 http://www.csstextwrap.com/
  28. 28 http://github.com/garethr/css-test/tree/master
  29. 29 http://spritegen.website-performance.org/
  30. 30 http://skycsstool.sourceforge.net/
  31. 31 http://sixrevisions.com/css/css_code_optimization_formatting_validation/
  32. 32 http://grid.mindplay.dk/
  33. 33 http://grid.mindplay.dk/
  34. 34 http://css-tricks.com/yahoos-secret-text-sprite-generator/
  35. 35 http://css-color-replace.orca-multimedia.de/
  36. 36 http://blog.base42.nl/2008/11/20/minifyme-a-minimizer-for-css-and-javascript/
  37. 37 http://blog.base42.nl/2008/11/20/minifyme-a-minimizer-for-css-and-javascript/
  38. 38 http://www.cssmenumaker.com/index.php
  39. 39 http://speckyboy.com/2008/10/07/21-excellent-dreamweaver-extensions-for-css-productivity-and-standards/
  40. 40 http://konigi.com/tools/graph-paper
  41. 41 http://www.sitepoint.com/dustmeselectors/
  42. 42 http://karmatics.com/aardvark/
  43. 43 https://addons.mozilla.org/en-US/firefox/addon/2104
  44. 44 https://addons.mozilla.org/de/firefox/addon/2064
  45. 45 http://www.puidokas.com/portfolio/gridfox/
  46. 46 http://www.puidokas.com/portfolio/gridfox/
  47. 47 https://addons.mozilla.org/en-US/firefox/addon/1002
  48. 48 https://addons.mozilla.org/en-US/firefox/addon/7943
  49. 49 https://addons.mozilla.org/en-US/firefox/addon/532
  50. 50 https://addons.mozilla.org/en-US/firefox/addon/271
  51. 51 http://www.hostm.com/css/
  52. 52 http://eriwen.com/tools/awk-is-a-beautiful-tool/
  53. 53 http://www.digital-web.com/articles/RESTful_CSS/
  54. 54 http://www.digital-web.com/articles/RESTful_CSS/
  55. 55 http://lwis.net/free-css-drop-down-menu/
  56. 56 http://code.google.com/p/hartija/
  57. 57 http://kilianvalkhof.com/2008/css-xhtml/introducing-sencss/
  58. 58 http://code.google.com/p/formy-css-framework/
  59. 59 http://code.google.com/p/emastic/
  60. 60 http://www.sprymedia.co.uk/article/Design
  61. 61 http://www.westciv.com/xray/
  62. 62 http://www.westciv.com/mri/
  63. 63 http://www.cssfly.net/
  64. 64 http://www.webresourcesdepot.com/15-must-have-bookmarklets-for-web-designers-and-developers
  65. 65 http://www.constructyourcss.com/
  66. 66 http://www.constructyourcss.com/tutorial.html
  67. 67 http://lab.xms.pl/markup-generator/
  68. 68 http://lab.xms.pl/markup-generator/
  69. 69 http://www.pagecolumn.com/
  70. 70 https://www.smashingmagazine.com/2008/12/01/100-free-high-quality-xhtmlcss-templates/

↑ Back to top Tweet itShare on Facebook

Advertisement

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    uh…this list is kind of amazing. Thanks! Lots of useful stuff that I hadn’t ever heard of.

    1
  2. 2

    I’m speechless… didn’t know there were so many great tools to help with fiddly css… will take me ages to explore them all!

    1
  3. 3

    Very Good :D

    0
  4. 4

    What a great list of resources. It’ll take the rest of the week to check out every single one of them. Thanks S-mag.

    0
  5. 5

    Eric Wendelin

    December 9, 2008 2:35 pm

    Thank you for listing my article. You have quite the fantastic list here!

    0
  6. 6

    Robert Pasbani

    December 9, 2008 2:36 pm

    Absolutely amazing post. I found at least 5 new resources that I will be using daily. Smashing keeps kicking major ass! Thank you.

    0
  7. 7

    Great post, thank you for all the knowledge you share among us!

    0
  8. 8

    oooOOOOoooo…I’m like a kid in a candy store! So much useful CSS info to go through. I’m sure I’ll find something new.

    Thanks Smashing :D

    0
  9. 9

    Awesome post man!

    0
  10. 10

    too much links in one post…

    0
  11. 11

    You can never have too many links in one post in my opinion. Thanks for compiling this great list of CSS Tools.

    0
  12. 12

    I love this site.

    0
  13. 13

    Some lovely new bookmarks, thanks SM!

    0
  14. 14

    great post very helful

    0
  15. 15

    SM is back! Love this post! Wonderful resources here, lot’s I’ve never seen before.. thanks!!!

    0
  16. 16

    Josiah Jost | Siah Design

    December 9, 2008 4:09 pm

    Excellent! Great list! Thanks again.

    0
  17. 17

    Brilliant list… like you read my mind

    0
  18. 18

    Joao Oliveira

    December 9, 2008 4:37 pm

    ZOMG! Awesome!

    /me bows

    0
  19. 19

    podarok - _my.ukrweb.info

    December 9, 2008 5:04 pm

    So many tools have no support for Unicode 8(
    But very usefull articl as for me. Thanks

    0
  20. 20

    Glenn Haggard

    December 9, 2008 5:33 pm

    I’ve never seen such a comprehensive list. Thanks for this!!!

    0

↑ Back to top