Fresh Resources for Web Designers and Developers (March 2016)

In our last instalment we focused on the various Javascript and CSS libraries to help build better websites and web applications. This month, we have more libraries to recommend alongside a small focus on typography.

In this round of the series, you will be looking at a few JS libraries that you will find use for but also a collection of tips, a very long essay on typography, a color generator and lightweight frontend framework. Without further ado, let’s check them out.

JS Tips

JS Tips is a collection of JavaScript tips, some of them revolving around syntax, some about code efficiency and performance, and some others are specific to a framework like AngularJS. New tips are added daily and there are currently 50 tips issued. It is essentially a must-bookmark site for every web developer.

Vagrant Manager

Vagrant Manager is GUI application to control Vagrant. Similar MAMP, where you can stop or run Vagrant, and see which Vagrant is currently running. The app is available for OS X and for windows. If you are not sure what Vagrant is, check out our previous post on How to install WordPress locally with Vagrant.

Bulma

Bulma is a frontend framework. The package includes some common UI components of the web like navigation, dropdown, and (of course) the grid which is built entirely with Flexbox. The only feature missing (at least, for now) is the JavaScript components. Bulma components is much slimmer compare to Bootstrap, but it should sufficient to build a small but presentable website.

Read more: 10 Lightweight Alternatives To Bootstrap & Foundation

Gutenberg

Named after Johannes Gutenberg, the mass press inventor. Gutenberg is a collection of style rules for proper typographic setting on the web. The style rules set the base line, font size and scaling, and line-height. A great style library to make your website content look a lot better.

OkayNav

OkayNav is a jQuery to build a responsive navigation, but not just yet another one. The plugin has a slightly different take on responsive design: as the viewport is resized down to smaller, each menu will be gradually merged in an icon to tolerate the limited viewport size. Sounds cool, doesn’t it?

New Web Typography

The New Web Typography is an in-depth, eye opening essay on typography. It discusses the styles from the early days of books to the current way we build and consume on the web. Well-researched with multiple illustrations, and fully referenced, it is a lengthy article by Robin Rendle, but definitely worth reading to gain a better understanding of typography.

Read more: A Look Into: Better Typography For Modern Websites

Color Safe

Color Safe is a color generator palette for the web. Unlike tools that we have been previously mentioned in this series, ColorSafe will only generate color that comply with the WCAG standard for color accessibility.

Accessible Modal Dialog

This is a tiny (only ~0.5kb) JavaScript library to build a modal dialog window. Being accessible, users are able to easily open, close, and navigate through the dialog with a keyboard and a mouse. The package is simply bare JavaScript, no stylings, so you can freely shape the dialog modal in any way you like.

Mo.js

Mo.js is a complete package of JavaScript animation library. It comes with a couple of presets so you can set and run the animation quickly. It is modular, allowing you to remove unnecessary functionality, as well as fluid and smooth. Being a fresh new library, unfortunately, the documentation is not yet ready (for now).

Particles

This library adds floating particle networks on your website, simply to make your website look cooler instantly. The particles will react to the cursor movement. The reactions as well as other elements like colors, distance, and shape can be configured through the options.