Fresh Resources For Designers And Developers – May 2013

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

SuperheroJS

There are countless of documentations, 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 troublehoot, best practices, and videos — for beginners and for seasoned developers.

Adobe Edge Reflow

If you find coding 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 other’s people website. If you build a website on top of Bootstrap, then Bootstrap Expois 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 are able to change webpage styles without affecting the actual stylesheet through a developer tool like Firebug. But, once we refresh the webpage, the styles 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. That said, 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.

WP Fill

When building a WordPress theme, we have to ensure that the elements within our posts and pages are displayed correctly. For this reason, we need some dummy text to fill in the post. If you prefer, you can write it on your own. Or you can use WP Fill to generate the whole content or only the particular elements that you only need.

LESS Hat

LESS Hat is collection of resuable 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 into the libraries such as Keyframes, Animation, Backface Visibility, and Background Origin so that we can write (the syntax) less.

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

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

UI Faces

Nowadays, it is common practice to display a user picture or avatar on our sites and apps. UI Faces is a handy tool to generate avatar pictures in your design mockup. You can set the border radius of the avatar, and the size. Then, download the ones that you need.

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.

FESS.Me

FESS or Fat Expanded Style Sheet is a tool to expand your CSS shorthand property into an individual property. So, border property will be translated into border-left, border-right, border-top, and border-bottom. This is a nifty tool if you, somehow, charge your client in per line of code. The more code lines, the more you will get paid.