Bi-Weekly Frontend News

Collective #126

Inspirational Website of the Week: Garden

Collective126_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

Collective126_cssoneliners

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

DomFlags

Collective126_DOMFlags

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

Check it out
Advertisement

PatternBolt

Collective126_patternbolt

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

Collective126_adaptivedesign

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

Collective126_responsiveimages

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

Collective126_3ditems

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

Collective126_nojsdemos

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

Check it out

Responsive Logos

Collective126_responsivelogos

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

Collective126_svginfo

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

Read it

Awesome Awesomeness

Collective126_listofresources

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)

Collective126_65iconset

A lovely icon set by Pavel Kozlov.

Get it

Image comparison slider with pure CSS

Collective126_imageslider

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

Check it out

Magic Tools

Collective126_magictools

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

Check it out

Free Font: Skip Leg Day

Collective126_skiplegday

Dilem Akiner designed this beautiful and playful font.

Get it

Critical

Collective126_critical

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

Collective126_origami

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

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?

Collective126_designinteraction

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

Read it

Awesome Node.js

Collective126_awesomenodejs

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

Check it out

GitHub's CSS

Collective126_githubscss

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

Read it

Resources for HTML5 game developers

Collective126_html5games

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

Read it