Fresh Resources for Web Designers and Developers (May 2013)

It’s May. Happy Labour Day. And it’s time for another round of fresh resources for my fellow designers and developers.

This month’s compilation includes some fun plugins and tools, like one for constructing a responsive website with GUI, one for creating disposable avatars, and one that allows you to write CSS in British English. And if you like Bootstrap, check out the Bootstrap Expo for new ideas and inspiration.

SuperheroJS

There are countless documentation, articles, and tutorials about JavaScript on the Internet. Finding one that is the best fit for your skill level could be really time-consuming. Don’t worry, SuperHeroJS is here. It’s a collection of JavaScript resources, from articles, JS troubleshooting, best practices, and videos — for beginners and for seasoned developers.

Adobe Edge Reflow

If you find coding a responsive website through a code editor annoying, I think Adobe Edge Reflow could help you out. Adobe Edge Reflow might be similar to other Web editors, but it is also packed with several special components to build responsive websites in a new way by using GUI.

Bootstrap Expo

Web designers rely on inspiration to keep working. And the “inspiration” can be found anywhere, including on other’s people websites. If you build a website on top of Bootstrap, then Bootstrap Expo is one of the sites to visit. The list is curated by Bootstrap’s author, and lists only the best implementations of the framework.

My Styles

We technically can change webpage styles without affecting the actual stylesheet through a developer tool like Firebug. But, once we refresh the webpage, the style reverts to the original. In the case when you want to make your changes permanent on that webpage, you can install this extension, called My Styles, in your Chrome.

Sassaparilla

Sassaparilla, to me it sounds like pasta, but it is actually reusable style rules for building (responsive) websites, built on top of Sass and Compass functions. If you have been using Sass or Compass, I think you would be familiar with it fairly quickly. With a focus on typography, Sassaparilla includes a set of style rules that make your website paragraphs, font size, line height, as well as spacing and kerning in the right size.

LESS Hat

LESS Hat is collection of reusable LESS mixins. LESS Hat takes the library further by including a set of Mixins that are not included in similar resources. It includes some cutting-edge CSS3 features in the libraries, such as Keyframes, Animation, Backface Visibility, and Background Origin so that we can write (the syntax) less.

In practice, we need vendor prefixes for some experimental CSS features. Using LESS that you can specify whether it should include or exclude a particular prefix by using this variable.

 @w3c: true; // Unprefixed W3C syntax 
 @webkit: true; // Chrome 7+, Safari 5+, iOS5, Android 
 @moz: true; // Firefox 4+ 
 @opera: true; // Opera 10.5+ 
 @ms: true; // IE 10+ 
 @oldWebkit: true; // iOS4, Safari 4, Chrome < 6.
 

Responsive Nav

Responsive Nav is a lightweight JavaScript library that turns your web navigation into a toggle navigation in a small viewport size, a popular practice today. This plugin works independently and does not require a third-party JS library like jQuery.

Spiffing CSS

CSS language is built using US English vocabulary. Spiffing CSS is an entertaining tool to turn the way you write CSS, as it allows you to write your CSS in British English.

For example:

 p {
	 text-align: centre;
	 text-transform: capitalise;
 }
 .class {
	 colour: grey;
	 background-photograph: url('img/photograph.jpg') !please;
	 transparency: .5;
 }