15 tools every web designer needs in 2017

09. Bulma

Create custom layouts easily with Flexbox

Now that Flexbox has strong support in all modern browsers, more and more CSS frameworks are starting to incorporate it as a primary feature. Bulma is one of the latest to do this.

Bulma is a Sass-based framework and it’s modular, which allows you to use @import directives to include only the components you want in any given project. Alternatively, you can just drop the entire bulma.css file into your project and go nuts.

Out of the box, the grid features are Flexbox-based, so it’s easy to create custom layouts with an intuitive class-based system. Additionally, there are dozens of CSS-only elements (button, icon and so on) and components (media object, modal) that can be dropped into your projects using just HTML.

10. Yarn

Fast, secure and reliable, Yarn has it all

Developers at Facebook have built an alternative to npm, the popular JavaScript package manager. Yarn promises to be ultra-fast, mega-secure and super-reliable. It still allows access to the npm registry but has quicker package installation and a more consistent dependency management workflow across machines, including offline.

In its introductory post, the Facebook team has detailed many of the problems Yarn attempts to solve. One of the issues addressed is related to dependency directories differing across machines, which can cause bugs that are hard to track down.

You can download and install Yarn for Windows, Mac or Linux. The usage and workflow guides are great places to start to get Yarn up and running.

11. Bootstrap

Old favourite Bootstrap has some powerful new updates

Bootstrap is certainly not a new tool, so it might seem a little out of place in this list. But the fourth version of the world’s most popular frontend framework is tabbed as ‘a major rewrite of almost the entire project’ , so I think it warrants a mention. Some notable changes include the following:

  • Dropped support for IE8 and iOS6
  • CSS source files move from Less to Sass (‘.scss’)
  • Switched from px to rem for primary CSS units
  • Increased the global font size to 16px from 14px
  • Added support for Flexbox in the grid
  • A new, all-encompassing ‘cards’ component to replace older components
  • Nearly all components refactored to use classes without child selectors

Bootstrap has revolutionised development and there’s no doubt the ubiquitous framework will continue to shape how we build stuff on the web.

12. ally.js

Don't overlook accessibility - use ally.js

No list of web development tools would be complete without at least one accessibility tool. Accessibility is one of those often-neglected aspects of design and development, and ally.js can simplify it for you.

Now a stable product, ally.js is a JS library that gives you fine control over focusable and non-focusable elements. For example, using its API you can prevent elements outside a modal window from receiving focus until the modal is closed. You can also find out exactly which elements are focusable or tabbable, and identify focus changes within the shadow DOM.

Two other powerful features are the ability to determine in what manner focus has changed (keyboard, mouse, etc.) and when an element is focusable and physically visible on the screen (this can help to avoid page scroll).

13. Mobi.css

Mobi.css is an easy-to-use CSS framework

A neat little project from Chinese developer Xcat Liu, Mobi.css is a lightweight CSS framework that utilises Flexbox, with a special focus on mobile and mobile-first styles. This tool simplifies mobile-first layouts and provides easy-to-use styles for components, including a Flexbox-based grid system, typography, HTML tables, forms and utility classes.

Many of the styles for these features work straight out of the box – similar to something like Normalize.css – but the focus with Mobi.css is on making things simple and attractive on mobile devices. The docs offer a full overview and there’s also a full component reference.

14. Origami Studio

Facebook uses prototyping tool Origami Studio to build its own products

Origami Studio is a prototyping and design tool for Mac that is used by the Facebook team to build its own products. Origami allows you to work in layers (which you can also import from Sketch). It includes pre-built components from Material Design and iOS, and lets you build interactive components in its Patch Editor panel. Your interactive creations are live-updated in a preview window for fast testing.

Origami offers countless ways to create, test and customise your prototypes. For example, there are animation options, custom device settings, mobile interactions (double tap, long press, and so on), and the ability to add sophisticated logic and maths to your interactions.

15. Foundation for Emails 2

Create responsive HTML emails with Foundation for Emails 2

Foundation for Emails is a framework from ZURB formerly known as Ink. It is used for creating responsive HTML emails that work on just about every platform and service, bundling together email coding best practices. The latest iteration uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.

As well as the framework itself, ZURB has provided the ZURB Email Stack, an all-in-one workflow that includes:

  • Use of gulp
  • The Inky templating language for complex table layouts
  • A styles inliner as part of the build process
  • Automatic image compression

The Getting Started guide will help walk you through how to get the stack up and running should you choose to take advantage of all the features.

This article was originally published in net magazine issue 289. Buy it here.

Related articles: