Fresh Resources for Web Designers and Developers (April 2014)

Alright, we’ve gone through the first quarter of 2014, let’s head on to the fourth month of the year. This round, April 2014, we have a framework for building WordPress theme, and one for building mobile app. We will take a look at a new code editor from Github here briefly, and a very cool font icon.

As usual, if nothing here strikes your fancy, feel free to look through earlier compilations of fresh resources for designers and developers we’ve published in the past year or so.

Runway Framework

Runway Framework is beyond just a framework that you can use as a starting point to develop a WordPress theme. With it, you can set plugin dependencies that are required for your theme, manage child themes, and create an Option/Setting page in drag-n-drop fashion.


This font-icon really caught my attention. We typically can only assign a single color to a font-icon, but StackIcons is sophisticated in the sense that each part within the icon is adjustable. Moreover, the icons also come in multiple shapes; circle, square, rounded, and icon-only. A really great collection of font icons that is worth bookmarking. Save it, in case you need it later.


TagTree provides a collection of screencasts that could help take your JavaScript skills to the next level. To name a few, you can now learn to build an app using AngularJS and Yeoman, create data visualization with D3.js, and draw vector graphics with Paper.js. And there are likely more screencasts to come in the future.


Atom is a new code editor from Github. The idea behind it is to make a “fully customizable, hackable, and deeply extensible” code editor. Similar to Sublime Text, Atom can also be powered with packages. At the time of writing, Atom is still in Beta. It will be free (while in Beta) but only available by invitation. If you are interested you can request an invitation at


Couldn’t attend web development conference? No worries, you can watch the screencast. SassConf, for instance, uploaded their recorded keynotes on a Vimeo channel. There are currently 15 videos that you can watch, covering all about Sass, tips, and tricks on building a better website.


Ratchet is the new mobile app framework on the block that allows you to build an app using HTML, CSS, and JavaScript. Since it is built by the same team behind Bootstrap, Ratchet also inherited similar code conventions. Ratchet also comes with a number of reusable components to build the app interface such as Title bar, Buttons, Forms, and Sliders.

WP Job Manager

Build a job board on your website? If it is built of WordPress you can install WP Job Manager. WP Job Manager adds a new menu on the Dashboard. You can add a new job listing with some of its required detail like job location, job expired data, and employer/company name as well as company logo.

Crowe Wireframe

Crowe Wireframe is no longer in service.

Crowe Wireframe is a collection of common design patterns such as image, text block, navigation, and buttons that you can use for rapid prototyping. But unlike a conventional prototype that only visualize its components with a boring outline and boxes which makes it hard to differentiate an icon from a logo, Crowe Wireframe is more visual-rich and detailed.


Today, more and more people are checking emails through their mobile devices. So, it is important to make sure that your email displays nicely, and is readable in that situation. Cerberus is a good starting point to build your email. It is light, responsive, and compatible in most email clients including Gmail, Outlook, and Yahoo.


Typebase.css is a collection of styles to reset web typography, very much like Normalize.css. It is available in CSS, LESS and Sass format, so that you can integrate it in your project easily regardless of what framework you are using.