Free web tools: quick links
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.
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.
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.
Shoelace is an easy-to-use Bootstrap 3 visual grid builder. Amongst its features are responsive media query views and a fully functional preview.
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…
