Collective #126
Inspirational Website of the Week: Garden
![Collective126_garden](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_garden.png?x86293)
Garden is a beautifully designed website with some smart line drawing effects and a lovely color scheme. Our pick this week.
Get inspiredTen CSS One-Liners to Replace Native Apps
![Collective126_cssoneliners](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_cssoneliners.png?x86293)
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 itDomFlags
![Collective126_DOMFlags](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_DOMFlags.png?x86293)
With DomFlags you can create keyboard shortcuts to DOM elements for a faster inspection when developing. By Philip LaPier.
Check it outPatternBolt
![Collective126_patternbolt](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_patternbolt.png?x86293)
Patternbolt is a great selection of SVG pattern background, packed in a single CSS or SCSS file.
Check it outThe Principles of Adaptive Design
![Collective126_adaptivedesign](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_adaptivedesign.png?x86293)
Brad Frost re-analyzes responsive design and summarizes the essential ingredients for an adaptive website.
Read itResponsive Images: Use Cases and Documented Code Snippets to Get You Started
![Collective126_responsiveimages](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_responsiveimages.png?x86293)
A fantastic summery by Andreas Bovens on how to use the new true responsive image solution with the <picture> element.
Read it3D Items Quick View
![Collective126_3ditems](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_3ditems.png?x86293)
A great tutorial on how to add a lovely 3D animation for gallery items. By Sebastiano Guerriero from Codyhouse.
Check it outNo JS Mini Demos
![Collective126_nojsdemos](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_nojsdemos.png?x86293)
Some examples of CSS only methods to display messages when filling out forms. By Scott O'Hara.
Check it outResponsive Logos
![Collective126_responsivelogos](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_responsivelogos.png?x86293)
Joe Harrison's awesome experiment for resonsive logo design. Resize your window to see it in action.
Check it outA Compendium of SVG Information
![Collective126_svginfo](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_svginfo.png?x86293)
A thorough collection of useful resources for everything related to SVG.
Read itAwesome Awesomeness
![Collective126_listofresources](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_listofresources.png?x86293)
A curated list of awesome lists of great resources for various programming languages. Collected by Alexander Bayandin.
Check it out65 free icons (PSD, AI, EPS)
![Collective126_65iconset](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_65iconset.png?x86293)
A lovely icon set by Pavel Kozlov.
Get itImage comparison slider with pure CSS
![Collective126_imageslider](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_imageslider.png?x86293)
Lea Verou's elegant CSS only solution for an image comparison slider utilizing the resize property.
Check it outMagic Tools
![Collective126_magictools](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_magictools.png?x86293)
A list of game development resources to make magic happen. By Ellison Leão.
Check it outFree Font: Skip Leg Day
![Collective126_skiplegday](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_skiplegday.png?x86293)
Dilem Akiner designed this beautiful and playful font.
Get itCritical
![Collective126_critical](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_critical.png?x86293)
With Critical by Addy Osmani you can extract and inline critical-path CSS from HTML.
Check it outHow To Create an Origami Style Logomark in Illustrator
![Collective126_origami](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_origami.png?x86293)
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
![Collective126_Dialog](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_Dialog.png?x86293)
Chrome Beta has landed its native support for <dialog> element without needing the "Enable experimental Web Platform features" flag turned on.
Check it outHow Do You Design Interaction?
![Collective126_designinteraction](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_designinteraction1.png?x86293)
Luca Leone gives some insight on how he approaches designing interaction without drawing first.
Read itAwesome Node.js
![Collective126_awesomenodejs](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_awesomenodejs.png?x86293)
A curated list of delightful Node.js packages and resources by Sindre Sorhus.
Check it outGitHub's CSS
![Collective126_githubscss](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_githubscss.png?x86293)
Mark Otto gives us some interesting insight into GitHub's CSS.
Read itResources for HTML5 game developers
![Collective126_html5games](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/07/Collective126_html5games.png?x86293)
A collection of resources for HTML5 game development on Mozilla Hacks.
Read it