10 very useful and time-saving CSS tools for web designers and developers
Here is a selection of some extremely useful CSS tools which will save you some time while you are coding a website or an app. If you know a good tool that is also useful and saves time, you can leave
the link in the comment form below.
Another lovely tool that will make your life as a coder better. It generates CSS3 for all major browsers with a few clicks. You can generated the @fontface, border radius, box sizing, columns, box shadows, text shadows, transforms (perspectives, rotation, scale, skew and more), transitions and other. Create CSS is a great time-saving tool and you definitely should have a look.
Preboot – A collection of LESS mixins and variables
Preboot is a very useful collection of LESS utilities. Its original variables and mixins became the predecessor to Bootstrap. It reborn now and enhanced now and it is one of the lightest and most powerful tools when it comes to writing with CSS. What’s included in Preboot? There are variables for color, scaffolding, links and typography. You can generate semantic and mobile-first grid layouts with some variables and mixins. Vendor mixins include box-sizing, border radius, box shadows, transitions, transformations, opacity, columns, gradients etc… The utility mixins include clearfix, horizontal centering, text truncating, resizable text areas etc..
But be sure that you become familiar with LESS as it will be easier to use Preboot. Also consider using Normalize with it as it will give you more consistent rendering of the web components when it comes to browsers and devices.
This is a wonderful online tool for extracting ids, classes and inline styles from HTML documents and outputting them as a CSS stylesheet. What you need to do is to paste your HTML code and ExtractCSS will do the magic. Not bad at all!
Formoid – The easiest form generator
Formoid is a great tool for creating web forms. Pretty easy to use as well. It uses a drag and drop GUI (no coding here), trendy flat, metro, Bootstrap form templates, all in css, responsive, retina-ready form elements. The forms are validates as you type in and there is an anti-spam captcha. Worth trying!
CSS Table Generator
Sometimes, tables are needed but it is a very boring task. Honestly, I do not like doing tables. But CSS Table generator can help with that. You can setup the class of the table and then adjust the settings for the table itself, the background, colours and fonts. After you are done, just copy the CSS and HTML created and you are ready. Perfect!
Tridiv – a web-based editor for crating 3D shapes in CSS
Just imagine creating any shape with CSS. And we are not talking about simple shapes as squares, rectangles, cones or triangles. We are talking about complex shapes such as a smartphone, airplane or a laptop. Tridiv can handle these and you just need to unleash your imagination. Tridiv is very easy to use so if you need some 3D stuff for you web project you might want to give it a try.
Emmet LiveStyle is an extremely useful plugin for live bi-directions (editor <-> browser) CSS editing. When you use it you can see the changes immediately without the need of file saving or reloading. It also offers multi-view and multi-device update. You can open the same page in different tabs and get update right away. If you have a large monitor you can change responsive design styles very easily. And it is very easy to use. You need to open a CSS file in editor and associate it with the browser one in LiveStyle browser pane.
Topcoat – CSS for clean and fast web apps
Topcoat is an open source CSS library aiming to be useful for developers when they build a web app. It aims to be a very fast tool. Topcoat evolved from the Adobe design language developed for Brackets, Edge Reflow, and feedback from the PhoneGap app developer community.
- Our design research
- The resulting super customizable CSS build,
- Automatically generated style guides
- PSD and other design artifacts
- A collection of simple and clean SVG icons
- The beautiful Adobe Source Sans Pro font family
- Benchmarking tools
Using Topcoat is straightforward and very easy. It can be dropped into a web and used right away.
Typetester – Compare screen type
Typetester is an online app that helps designer and developers compare fonts on the screen which can be really useful and make your job easier. You can choose from the different fonts bundled into operating systems – Mac, Win, Google fonts and there is also a safe list. Choose three fonts you would like to see how they look, adjust the settings and you will be able to decide which one looks best.
CSSTrashman – Because your CSS is garbage
Well, after the time of writing CSS, there is always a time for cleaning up. When coding sometime there are mistakes and not so pleasant lines of code in the CSS. So CSSTrashman can be helpful. It examines you sites and find the bad lines, compacts styles, cleans it up and generates new CSS (or Sass) which is customized for your site and ready to be used.