Collective #126

View All

CSS Figures * DomFlags * PatternBolt * Responsive Images * Responsive Logos * Critical * Dialog Element in Chrome * GitHub's CSS


Inspirational Website of the Week: Garden


Garden is a beautifully designed website with some smart line drawing effects and a lovely color scheme. Our pick this week.

Get inspired

Ten CSS One-Liners to Replace Native Apps


Learn about how CSS Figures will help create complex page layouts with ease. An article by Håkon Wium Lie on A List Apart.

Read it



With DomFlags you can create keyboard shortcuts to DOM elements for a faster inspection when developing. By Philip LaPier.

Check it out



Patternbolt is a great selection of SVG pattern background, packed in a single CSS or SCSS file.

Check it out

The Principles of Adaptive Design


Brad Frost re-analyzes responsive design and summarizes the essential ingredients for an adaptive website.

Read it

Responsive Images: Use Cases and Documented Code Snippets to Get You Started


A fantastic summery by Andreas Bovens on how to use the new true responsive image solution with the <picture> element.

Read it

3D Items Quick View


A great tutorial on how to add a lovely 3D animation for gallery items. By Sebastiano Guerriero from Codyhouse.

Check it out

No JS Mini Demos


Some examples of CSS only methods to display messages when filling out forms. By Scott O'Hara.

Check it out

Responsive Logos


Joe Harrison's awesome experiment for resonsive logo design. Resize your window to see it in action.

Check it out

A Compendium of SVG Information


A thorough collection of useful resources for everything related to SVG.

Read it

Awesome Awesomeness


A curated list of awesome lists of great resources for various programming languages. Collected by Alexander Bayandin.

Check it out

65 free icons (PSD, AI, EPS)


A lovely icon set by Pavel Kozlov.

Get it

Image comparison slider with pure CSS


Lea Verou's elegant CSS only solution for an image comparison slider utilizing the resize property.

Check it out

Magic Tools


A list of game development resources to make magic happen. By Ellison Leão.

Check it out

Free Font: Skip Leg Day


Dilem Akiner designed this beautiful and playful font.

Get it



With Critical by Addy Osmani you can extract and inline critical-path CSS from HTML.

Check it out

How To Create an Origami Style Logomark in Illustrator


An Illustrator tutorial by Chris Spooner on how to create a lovely origami-style logo.

Check it out

<dialog> element: shipped in Chrome 37 Beta


Chrome Beta has landed its native support for <dialog> element without needing the "Enable experimental Web Platform features" flag turned on.

Check it out

How Do You Design Interaction?


Luca Leone gives some insight on how he approaches designing interaction without drawing first.

Read it

Awesome Node.js


A curated list of delightful Node.js packages and resources by Sindre Sorhus.

Check it out

GitHub's CSS


Mark Otto gives us some interesting insight into GitHub's CSS.

Read it

Resources for HTML5 game developers


A collection of resources for HTML5 game development on Mozilla Hacks.

Read it

Would you like to become a Collective sponsor?

You can sponsor a Collective issue with your own news item. Find out more.

Would you like to send us some news?

The Collective features the latest news and resources from the web design & web development community. If you have spotted or created something that you'd like see published in the next issue, just submit the resource or article here.