10 best new web design tools for October 2016

HTML email templates, accessible color schemes, FramerJS inspiration and much more.

These days many of us are working on sites that involve a complex tangle of dependencies; if that’s you, this month there are a few tools that might help you out – whether that’s in the form of a dependency manager to keep everything organized or resources that help you avoid them altogether.

There’s also a tiny Flexbox-based grid system that’s only 93 bytes minified, a website downloader, SVG patterns and a new font family from Google.

01. You Might Not Need JavaScript

Why create an additional dependency for yourself when you don’t need it? This site shows you how to make things that you might be tempted to build with JavaScript using HTML, CSS or Sass. Examples include an image slider, view switcher, color picker, forms, file upload and more.

02. HTML Email

If you’ve ever tried to build HTML emails you’ll know how hard it is to get everything displaying correctly in every client. Bring mobile into the picture, which is where half of your emails will be opened these days, and it’s a horrible job. These email templates have been tested across all major email clients to save you the hassle of doing it yourself. If you’d like to try a free alternative, try the Litmus Community templates.

03. Yarn

The yarn is a fast, reliable and secure dependency manager. It caches packages so they’re only downloaded once; verifies each one before executing any code, and installs dependencies in a deterministic manner, so if in an install works on one system it will work on another.

04. Open Color

Open Color is a color scheme that’s been tested for two types of color blindness and found to be suitable for use in UIs. There are twelve colors and one gray, and it’s provided as CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette.

05. FramerJS Club

Take a look at what everyone’s been doing with FramerJS at FramerJS Club, a showcase of prototypes. Many of them link through to blog posts by the creators explaining what they did and why.

06. Hugo

Hugo is a fast and modern static website engine. But why would you use this instead of Jekyll? One advantage is that there’s just a single binary, so you don’t have to maintain a full Ruby stack. It’s also said to be much faster than Jekyll at generating your site so that alone may be a reason to switch. Here’s a blog post about one user’s experience.

07. Fukol

This impressively tiny Flexbox-based grid system is just 93 bytes minified! It degrades to a single column layout in places where Flexbox isn’t supported, and instead of using breakpoints it uses an element query technique so those items grow to fill the available space.

08. Website Downloader

This browser-based site ripper grabs every asset and all the source code from the target site and recreates the folder structure on your hard drive. All the links are converted so they point at the relevant local files instead of the online versions.

09. Hero Patterns

As the popularity of SVG increases we’re starting to see a few more resources emerge. These repeatable, customisable SVG background patterns look handy to us, and they’re completely free.

10. Google Noto Fonts

When a device doesn’t have the font to display certain characters, they appear as squiggly boxes known as tofu. Noto means “no more tofu”, and is a font family designed to support all languages and hopefully bring an end to tofu.

Originally by : Tanya Combrinck from Creative Blog


Recommended Posts

Leave a Comment