Collective #158
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
Harnessing Flexbox For Today's Web Apps
Karen Menezes shows how to use flexbox for solving a variety of modern layout problems.
Read it
Side Effects in CSS
Philip Walton shows how using BEM eliminates the three main forms of side effects in CSS.
Read it
Circulus.svg
Create your circular SVG menu with this useful tool by Sara Soueidan.
Check it out
SVG devices (PSD, AI, SVG)
These devices in SVG by DtailStudio will make mockup creation super-easy.
Get it
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
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
The Web's Grain
An inspiring essay by Frank Chimero that will make you love the web even more.
Read it
Quantity Queries for CSS
Heydon Pickering shows how to use CSS selectors for "quantity queries" that help make elements responsive.
Read it
Apple Watch
Generate a pure CSS Apple Watch for your mockups. Made by Luke James Taylor.
Check it out
stepkit
A cool web audio step sequencer by Brent Jackson.
Check it out
Flexbox in 5 minutes
Sn interactive tour of all the major features of flexbox. By Devin Bryce.
Check it out
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
Caching SVG Sprite in localStorage
Osvaldas Valutis shows how to cache SVG sprites in localStorage.
Read it
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
localFont
With localFont you can easily implement localStorage web font caching. Made by Jaime Caballero.
Check it out
Free Font: Kanji
A beautiful free font designed by Pedro Azedo.
Get it
Sapo.js
An interesting interactive procedural texture generator made by Asier Illarramendi.
Check it out
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
Free Font: Diaria Pro (Medium & Medium Italic)
A beautiful and clear typeface designed by Andriy Konstantynov with two free styles.
Get it