Fresh Resources for Designers and Developers – May 2014

By . Filed in Web Design

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 resoures, do check out the full series in the link below.

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 desktopdevices, 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.

Pesticide

Let’s face it, debugging website layout is a rite of passage, no matter how proficient we are with CSS. It can get really frustrating. Pesticide is the tool that could reduce this common frustration for web developers. Pesticide will draw outline sof all the elements in the website so that you can figure out which element has gone wrong and requires fixing.

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.

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Advertisement

Comments are closed. Contact Us.