In Articles, Tips Nov 6, 200923

13 Really Useful Online CSS Tools to Streamline Development

CSS is nearly used on every modern website design. However, having to write and structure CSS code from scratch every time you have a project is extremely time consuming. Below, we present you with 13 amazingly useful CSS tools for hacking on writing time consuming code. We tried to place emphasis on unknown tools that every developer should have a looksy at, however don’t be surprised if we included a few known sources.

We encourage you to find use of these tools and find ways to improve your development process. After all, developing websites shouldn’t be a task, it should be fun and rewarding. If there are any new tools, please feel free to share with us in your comments.

CSS Cheat Sheets

As simple tool as this may seem, the CSS Cheat Sheet can be very useful. As developers we don’t always know every tag and piece of code in the book by heart, this is where this one-page reference sheet that lists all selectors and properties comes in handy. The cheat sheet also includes an effective visual example of the box mode and unit reference for CSS units.

Telerik Visual Style Builder

Telerik Visual Style Builder is an online CSS customization tool that allows you to easily, point-and-click customization of skins for the RadControls for ASP.NET AJAX. This visual style builder eliminates any need to have working knowledge of the front-end HTML and CSS structure of the RadControls to create custom skins.You’ll have complete control over the elements of the RadControls’ skin and allows you to develop a custom built skin in very short time.

This tool is ideal for ASP.NET developers. Probably one of the easiest ways to create a RadControls skin. This tool also satisfies your need for ready made menus and images for calendars and such.

CSS Type Set

CSS Type Set, a hands-on typography tool which allows the every day designer and developer fully test and learn how to style Web content. You’ll be able to test different font-styles throughout a piece of text and also allows you to select a font-style and easily copy/paste into your stylesheet.

CSS Frame Generator

This tools lets you input your XHTML code in a box displayed on the front page, the code will be sent back to them and they will return your code with a corresponding CSS frame. This service is completely free This is great for the developer that’s big on multi-tasking.

Grid Designer

Grid Designer is a simple and basic tool that will help you create solid layouts. This tool will enable you to set columns, typography and export the HTML and CSS code. You even have the option of bookmarking every design in order to come back and edit it at a later time.

MoreCSS

MoreCSS is like a designer placing a JavaScript library in paradise. It allows you to effectively write code for applying automatic hyphenation and creating pop-ups, tool tips, tab menus, zebra tables, advanced list styling and cross-browser opacity style. The only requirement this tool has is the use of regular and simple CSS.

YAML Builder

This builder is designed for quick and effective development of CSS layouts, that are based on YAML. Yet Another Multicolumn Layout is a highly versatile (X)HTML/CSS framework, produced under the Creative Commons Attribution 2.0 License. Creating neat layouts is easier then you think with YAML Builder. This truly is one tool worth your time.

Drawter

Drawter Beta 2 written in JavaScript and based on the jQuery library enables you with the possibility to literally draw your website’s code. It can run on every single web-browser which makes it really useful and versatile. Every tag is presented as a layer you have drawn.

Working knowledge of HTML and CSS is required in order to utilize Drawter, however developing code is easier then writting by hand. Drawter anticipates a version where you will not need much knowledge of CSS and HTML, this is foreseen in the near future.

Deploy

Deploy is a free open-source Web application that allows designers to select 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. With current versions you can utilize this tool for Fluid, the Mac application that creates SSBs (site-specific browsers) for websites. Deploy saves time and organizes your codes parent folders and more.

Blueprint Grid CSS Generator

Blueprint Grid CSS Generator will help you generate various flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Doesn’t matter if you prefer 8, 10,16 or 24 columns in your design, this tool now enables you that flexibility with Blueprint. This generator allows you to cut down on your development time and build your site on an easy to utilize grid.

Format CSS

With Format CSS, you’re able to upload your CSS code and select from the options available to achieve code formatting the way you want. You can easily convert a compact CSS code into readable form with proper line-breaks and indentation or vice-versa. Use this tool for quick code organizing and the production of clean code.

Firdamatic

Firdmatic is an online tableless layout generator that lets you create and customize layouts easily only by completing forms, making creating skins for your Firdamatic-based layout is fast and easy.

JS Bin

JS Bin is a Web application that’s specially designed to aid JavaScript and CSS developers to test snippets of code in a specific context and debug the code collaboratively. In other words, it’s collaborative JavaScript debugging at your fingertips. You can also edit and test JavaScript and HTML as well. To finalize, you can save and send the URL to a colleague for review or help. They may make any needed changes if you allow them to.