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 at our disposal.
That also means there are mountains of tools to choose from, from scripts and plugins to WordPress themes, browser extensions, native apps, web hosting services, libraries, frameworks, website templates, 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.
Now you can design in Illustrator and create instant HTML and CSS
This is an open-source script that converts your Ilustrator documents to HTML and CSS, from the developers at the New York Times. It looks like a really powerful and useful tool for designers who work in Adobe Illustrator. The script is a JavaScript file that you download and drop into the scripts folder of your Illustrator install.
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.
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.
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, it is a great option for extracting and loading your above-the-fold styles.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
DomFlags makes it easier to navigate deeply-nested HTML elements in the DevTools
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.
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.
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.
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.
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.
Next page: Free JavaScript tools...
Thank you for reading 5 articles this month* Join now for unlimited access
Louis is an author, speaker and frontend developer who’s been involved in the web development industry since 2000. He curates the popular newsletter Web Tools Weekly and blogs about code at Impressive Webs.
