In many occupations, solving problems and finding ways to be more productive are top priorities. This is especially true for web designers and frontend developers who perform many micro-tasks many times over. The fact we work with open web technologies that are often used to build free and open source software means we have a plethora of web design tools (opens in new tab) at our disposal.
That also means there are mountains of tools to choose from, from scripts and plugins to WordPress themes (opens in new tab), browser extensions, native apps, web hosting services, libraries, frameworks, website templates (opens in new tab), graphic packs, website builder tools and so much more. Want something different? Try our guide to cloud storage.
We've sifted through the hundreds of options available to find the best tools to try – and the best part is, all of these are free. Use the boxout on the right (or the drop-down menu above) to jump to a specific area.
HTML and CSS tools
01. ai2html (opens in new tab)
02. Autoprefixer (opens in new tab)
You're not still writing CSS vendor prefixes by hand, are you? Keep your development files clean and let Autoprefixer (now a PostCSS plugin) do the hard work for you as part of your build process.
03. Susy (opens in new tab)
A Sass-based layout toolkit that has been steadily gaining steam since its launch. It has a strong community and offers lots of customisable features to suit the needs of just about any project.
04. Critical (opens in new tab)
Inline CSS is a requirement for good performance. Addy Osmani's Critical is available as a Grunt plugin, and along with Filament Group’s loadCSS script (opens in new tab), it is a great option for extracting and loading your above-the-fold styles.
05. Shoelace (opens in new tab)
Shoelace is an easy-to-use Bootstrap 3 visual grid builder. Amongst its features are responsive media query views and a fully functional preview.
06. DomFlags (opens in new tab)
A Chrome extension that enables you to flag elements in the DOM using a domflags attribute. When the DevTools are opened, the first flagged element will be auto-inspected, and keyboard shortcuts can be used to navigate through the flags. This tool is handy for tackling a messy DOM that’s hard to navigate.
07. Sass Lint (opens in new tab)
Sass Lint is a node-based code quality tool for Sass/SCSS code, available as a Grunt or gulp plugin. Sass Lint is especially great for beginners who aren't too familiar with Sass best practice.
08. SMACSS (opens in new tab)
SMACSS is a scalable and modular architecture for CSS. There is nothing to download or install here, just a whole host of ideas for structuring projects both large and small. The website includes a free ebook for you to download, read and study.
09. BEM (opens in new tab)
BEM is a CSS methodology that is widely used throughout the industry. The simplicity of its naming convention helps to tackle specificity problems in CSS – enabling elements to be scoped to a block name using a double underscore and modified using a double dash.
10. Object Oriented CSS (opens in new tab)
OOCSS was born out of the backend development methodology. The core principle is around the reuse of code and Don’t Repeat Yourself (DRY) programming, the results of which are easier to maintain, with smaller CSS in your project.