Fresh Resources for Web Designers and Developers (May 2014)

It’s time for us again to share several great resources with our fellow designers and developers. Let’s cut to the chase.

In this round, we have got a free book to learn basic CSS, a collection of LESS and Sass functions for unit conversion, animated SVGs for displaying loading bars, and a bunch more. If you are new to our fresh resources, do check out the full series in the link below.

For More: Fresh Resources For Designers And Developers

Mapstylr

Mapstylr is a nice free web app that allows you to customize Google Maps. You can create your own map styles easily with a very nice UI. With an account, you can save your customized map styles as a private collection or a public one. Also you might like to check out our previous tutorial on how to style Google Maps.

Loading

Are you sick of GIF animation to display your loading progress bar (which does not present well in Hi-DPI screen)?. Well, you can try using this Loading collection. Loading is a collection of progress bars made with SVG. They will look sharp and crisp in any screen resolution. At the time for the writing it has 8 loading bar styles.

Remixins

Remixins is a collection of LESS mixins to convert px into rem, yet it keeps the px as a fallback for browsers that do not support rem. rem is a measuring unit relative to the body or the document font-size, similar to em except, rem does not inherit the coumpounding bug, where the measuring is also calculated up against the parent element’s font-size.

Check out our previous article, CSS Units: Pixels, EM, and Percentage for more in-depth explanation on this.

Unitize

If you are working with Sass, Unitize can be a great alternative of Remixins. Unitize is a collection of Sass functions to easily apply em and rem unit. It comprises of three functions unitize(), rem(), and em() which can be used with any property that requires a measuring unit.

Slick

Slick is fantastic simple jQuery slider plugin that caters everything you need to present your content in a slider. Fully responsive, swipe-able, drag-able (with the mouse), with CSS3 animation and JavaScript fallback what else do we need? It’s all there.

iHover

iHover is a collection of hover effects made of CSS3 Transforms and Transitions. iHover could be your reference to learn how animations are built. Comparably, CSS3 performs faster than animation made from JavaScript scripting. Using CSS3 is a better way to build websites for the future.

ShareDrop

ShareDrop is a free web app that allows you to directly share files between devices. ShareDrop is powered by WebRTC, an open project that enables web browsers to communicate with one another. It works (and looks) similar to Mac’s AirDrop. You can share files by simple drag and drop and it works across multiple mobile or desktop devices, within the same network IP (though this may not work in iOS due to some restrictions that Apple made).

Magic of CSS

Magic of CSS is a free online book for web designers to learn CSS fundamentals. The book currently contains 6 chapters: The Box, Layout, Tables, Color, Typography, and Transition. The book will be updated with more chapters over time.

Brick.im

Brick.im is an open project that brings font to the Web. Unlike Google Web Font, Brick.im brings the fonts without any modification or sub-setting. So, the font is displayed originally as it is. Though the font collection in it is currently limited, it is still a good alternative to Google Web Font.