Collective #158
![Collective158_stupidstudios](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_stupidstudios.png?x97002)
Inspirational Website of the Week: Stupid Studios
Nice diagonal lines and elegant effects are the characteristics of our website pick of the week.
Get inspired![Collective158_harnessingflexbox](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_harnessingflexbox.png?x97002)
Harnessing Flexbox For Today's Web Apps
Karen Menezes shows how to use flexbox for solving a variety of modern layout problems.
Read it![Collective158_sideeffects](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_sideeffects.png?x97002)
Side Effects in CSS
Philip Walton shows how using BEM eliminates the three main forms of side effects in CSS.
Read it![Collective158_circulus](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_circulus.png?x97002)
Circulus.svg
Create your circular SVG menu with this useful tool by Sara Soueidan.
Check it out![Collective158_svgdevices](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_svgdevices.png?x97002)
SVG devices (PSD, AI, SVG)
These devices in SVG by DtailStudio will make mockup creation super-easy.
Get it![Collective158_flipside](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_flipside.jpg?x97002)
Flipside
A cool button effect where the button transitions from action to confirmation in a 3D rotation. Made by Hakim El Hattab.
Check it out![Collective158_100lineicons](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_100lineicons.png?x97002)
100 Responsive Line Icons (AI, EPS, SVG, PSD)
A set of gorgeous responsive line icons that come in 3 different sizes and style variations. Made by Zlatko Najdenovski for Pixel Buddha.
Get it![Collective158_websgrain](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_websgrain.jpg?x97002)
The Web's Grain
An inspiring essay by Frank Chimero that will make you love the web even more.
Read it![Collective158_quantityqueries](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_quantityqueries.png?x97002)
Quantity Queries for CSS
Heydon Pickering shows how to use CSS selectors for "quantity queries" that help make elements responsive.
Read it![Collective158_cssapplewatch](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_cssapplewatch.png?x97002)
Apple Watch
Generate a pure CSS Apple Watch for your mockups. Made by Luke James Taylor.
Check it out![Collective158_stepkit](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_stepkit.png?x97002)
stepkit
A cool web audio step sequencer by Brent Jackson.
Check it out![Collective158_flexbox5minutes](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_flexbox5minutes.png?x97002)
Flexbox in 5 minutes
Sn interactive tour of all the major features of flexbox. By Devin Bryce.
Check it out![Collective158_smartsvg](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_smartsvg.png?x97002)
Transform your illustration into smart SVG
Benedikte Vanderweeën explains the process of converting a sketch into a smart illustration using a platform called illustrio.
Read it![Collective158_cachingsvg](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_cachingsvg.png?x97002)
Caching SVG Sprite in localStorage
Osvaldas Valutis shows how to cache SVG sprites in localStorage.
Read it![Collective158_DreamIcons](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_DreamIcons.png?x97002)
Dream Icons
Dream Icons is a unique project that will donate all profit from selling beautiful icons to the Fundacja Mam Marzenie that will help children fulfill their dreams.
Support it![Collective158_localfont](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_localfont.png?x97002)
localFont
With localFont you can easily implement localStorage web font caching. Made by Jaime Caballero.
Check it out![Collective158_kanji](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_kanji.png?x97002)
Free Font: Kanji
A beautiful free font designed by Pedro Azedo.
Get it![Collective158_sapojs](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_sapojs.png?x97002)
Sapo.js
An interesting interactive procedural texture generator made by Asier Illarramendi.
Check it out![Collective158_webtype](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_webtype.png?x97002)
The State of Web Type
Bram Stein dives into the state of web type and shows what's currently possible and what lies ahead.
Read it![Collective158_diaria](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2015/03/Collective158_diaria.png?x97002)
Free Font: Diaria Pro (Medium & Medium Italic)
A beautiful and clear typeface designed by Andriy Konstantynov with two free styles.
Get it