Home / News & Technology / CSS Tools – Extremely Useful And Powerful – 01
css tools

CSS Tools – Extremely Useful And Powerful – 01

Here I’m sharing some extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug or the Web Developer extension, 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.

We strongly encourage you to develop these tools further, build on the ideas presented here, release new tools for the public and let us know about them. We would love to feature your handy tool in our next review.

CSS and Typography

  1. Hyphenator

    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. Here is the server-side script that does the hyphenation.

  2. CSS Type Set

    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 Set

  3. Typechart

    Typechart lets you flip through, preview and compare Web typography while retrieving the CSS.TypeChart

  4. CSS-Typoset Matrix and code generator

    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.

  5. Em Calculator

    Em Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.Em Calculator

  6. Facelift Image Replacement (FLIR)

    Facelift Image Replacement (or FLIR, pronounced “fleer”) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that might otherwise not be visible to your visitors. Written by Cory Mawhorter. How To Use Any Font With FLIR: Tutorial.

  7. Vertical rhythm calculator

    This tool converts pixel values to em values depending on the font size of the text. You can also set margins and paddings automatically, depending on the line height you’ve defined. Very useful.Screenshot

  8. typeface.js

    Instead of just creating images or using Flash to show your website’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

CSS Online Tools

  1. PSD2CSS Online

    A free online service that generates Web pages from Photoshop designs. By following the guidelines and naming conventions, you can precisely choose howthe transformation from PSD to (X)HTML and CSS is done.

  2. Conditional-CSS

    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-CSS

  3. MoreCSS

    MoreCSS is a design-oriented JavaScript library that allows you to write code for applying automatic hyphenation and creating pop-ups, tool tips, tab menus, zebra tables, advanced list styling and cross-browser opacity style. But the really special thing is that you can do these things as you would with regular CSS.

  4. px to em

    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.

  5. CSS Frame Generator

    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 Generator

  6. CSS Redundancy Checker

    You can use this tool to find CSS selectors that aren’t used by any of your HTML files and that may be redundant.

  7. CleverCSS

    CleverCSS is a small markup language for CSS, and inspired by Python, that can be used to build a style sheet in a clean and structured way. In many ways, it’s cleaner and more powerful than CSS2. You can also work with variables.

  8. WordOff

    WordOff applies some rules to strip the cruft that is pasted into WYSIWYG editors from Word. For example, attributes are removed for all elements except <a>, <span> and <div>, empty elements are removed and consecutive line breaks are reduced to two. It also contains an API.WordOff

  9. Postable

    “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.WordOff

  10. Kotatsu

    Kotatsu is a simple HTML table generator. The tool lets you attach classes to cells in the same column easily.Kotatsu

  11. htmldevelopertools

    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.htmldevelopertools

  12. DeployDeploy is a free open-source Web application that allows you to choose the name of a project, the Doctype, whether you want a CSS reset or jQuery integration, and it creates a zipped, ready-to-use package with all specified files and folders. The tool has been optimized for Fluid, the Mac application that creates SSBs (site-specific browsers) for websites.Deploy*
  13. CSS Evolve

    CSSEvolve lets you play with many properties of a website, including the website’s color scheme, fonts, borders and more. CSSEvolve works through a process of simulated evolution in which you select website features that you like and refine them through multiple generations.”It uses a traditional blind watchmaker, user-driven genetic algorithm to drive CSS changes on a website of the user’s choosing. Basically, a set of mutated CSS variants are produced, the user selects changes that he or she likes, the algorithm randomly combines those changes through crossover and mutation and the process continues.” [ via ]

  14. Lorem 2

    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.

  15. SelectORacle

    A small script that explains CSS selectors in plain English or Spanish. Particularly useful for CSS3 selectors.

  16. JS Bin

    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: CodePaste or EtherPad.

  17. 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.Screenshot

  18. Writing Tests Against CSS

    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.

  19. CSS Sprite Generator

    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.

  20. Sky CSS Tool

    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.

  21. CSS Tidy Online

    An online version of CSS Tidy, a tool that allows you to keep your code clean by compressing the code.

  22. Web-Based Tools for Optimizing, Formatting and Checking CSS

    A huge compilation of some of the best free Web-based CSS optimizers/compressors, code formatters and validation services. By Jacob Gube.

  23. Grid Designer 2.4

    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.4

  24. Yahoo’s Secret Text-Sprite Generator

    Basically this is a URL you can hit that creates a perfect sprite-ready PNG graphic of text you add to the URL.

  25. Replace CSS Colors – Editor

    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.

  26. The Box Office

    The Box Office lets you wrap, float or contour text around free-form images using CSS for (X)HTML pages.

  27. MinifyMe

    A small AIR application that can compress multiple CSS and JavaScript files into one and runs on your desktop.MinifyMe

  28. cssdoc

    CSSDOC is a convention for commenting in CSS to help individuals and teams to improve writing, coding, styling and managing CSS files. It is an adoption of the well known JavaDoc/DocBlock-based way of commenting in source code by putting style, DocBlocks and tags together.

  29. CSS Menu Generator

    This tool generates vertical, horizontal and drop-down menus online. Various color schemes are available, and you can also customize the menus online.

  30. sheetUp – DOM Stylesheet Library

    Simplify the tedious task of manipulating style sheets contained in document.styleSheets. You can use the sheetup bookmarklet to integrate a built-in CSS/HTML-editor in your browser.

  31. CSS SuperScrub

    This tool claims to significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls and intelligently grouping the remaining element names.

  32. DrawAble Markup Language

    Drawter Beta 2 gives you the possibility of literally drawing your website’s code. It runs on every single Web browser, which makes it really useful and helpful. Each tag is presented as a layer you have drawn.Screenshot

  33. Handy Kits For Designing With CSS Link

  34. Regex Patterns for Single Line CSS

    If you are formatting your CSS style sheets single-line, you may find Dan Rubin’s Textmate macro useful and helpful. “This macro retains a single blank line where your original contained two or more blank lines (helpful if you group your rules) and adds white space that matches my standard formatting preferences (which I find makes it easier to scan quickly).” And if you don’t use Textmate, you can use a regular expression instead; it is also provided in the post.Regular Expressions

  35. 21 Excellent Dreamweaver Extensions for CSS Productivity and Standards

    An extensive overview of various Dreamweaver extensions, such as CSS Sculptor, CSS Menu Writer, Link Fader, CSS Layouts, Format Table, Style Switcher, etc.

  36. Graph Paper

    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.

  37. Starter Kit For Developers

    This starter kit is a free Photoshop template that includes forms, grids, ad placeholders, dummy copy and other design elements (13 MB).

  38. CSSHttpRequest

    CSSHttpRequest (CHR) is a method for cross-domain AJAX, using CSS for transport. Similar to JavaScript, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. Like JSONP, CSSHttpRequest is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.

In-Browser CSS Tools Link

  1. Collection of Web Developer Tools, by Browser
    Sometimes it is not easy to keep track which tools are at a developer’s disposal (and which ones are actually useful). This article lists the best tools available and quickly describes how to activate, install and use them.Screenshot

In-Browser CSS Tools: Firefox Extensions

  1. Dust-Me Selectors

    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.

  2. Aardvark Firefox Extension

    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.

  3. CSSViewer

    A CSS property viewer that displays all information about a design element.

  4. Dummy Lipsum

    This Firefox extension dynamically fills a selected field with Lorem ipsum text; the function is called via the context menu.

  5. Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin

  6. GridFox

    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.Screenshot

  7. 20 Firefox Add-Ons To Enhance Your Web-Development

    Yet another overview of useful Firefox add-ons that can help developers create websites more efficiently. Among them are Codetch, Pixel Perfect, Link Checkerand ColorZilla.

About cmadmin

Web Developer & Designer | Android App Developer

Check Also

Top Useful CSS Snippets – Every Designer Should Know

With so many new trends advancing every year it can be difficult keeping up with …


Media Queries for Standard Devices

A major component of responsive design is creating the right experience for the right device. …


Create an Account!
Forgot Password? (close)

Sign Up

Confirm Password
Want to Login? (close)

Forget Password?

Username or Email
To get latest new / tutorial / technology / development information subscribe with us.
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !