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