Collective #47

View All

HTML & CSS Resources * Performance * Free Font * Off-Canvas Navigation * The Accessibility Project

Collective 47

Inspirational Website of the Week

Collective47_01

Libertine Libertine is a very minimal and clean online store with a super-easy navigation. It makes shopping a real breeze; only the necessary information is shown.

Get inspired

Implementing Off-Canvas Navigation For A Responsive Website

Collective47_07

An in-depth tutorial by David Bushell on how to create a off-canvas navigation for a responsive website.

Check it out

An Advanced Guide to HTML & CSS

Collective47_12

Shay Howe started to create a very useful and practical guide to advanced HTML and CSS covering various important topic. You also might want to check out A Beginner's Guide to HTML & CSS.

Check it out

Browser Awareness Day

Collective47_21

Browser Awareness Day is a social campaign by teamgeek that aims to educate people about the importance of updated browsers for techies and non-techies alike. They also offer a JS snippet that you can use to add to your site for alerting users if they have an outdated browser.

Check it out
Advertisement

Live Tools

Collective47_06

A brilliant collection of generators that allow you to easily create your own UI elements with little coding knowledge. You can also download your creations for use in your websites and online applications.

Check it out

The Accessibility Project

Collective47_03

The Accessibility Project is a community-driven effort to make web accessibility easier. You will find helpful articles, a web accessibility checklist and some great resources that will help you maximize the accessibility of a website.

Check it out

The jQuery Plugin Registry

Collective47_08

The new jQuery plugin site that will make finding, downloading and registering plugins easier and better.

Check it out

xy.css – Responsive Grid Design

Collective47_23

xy.css is a lightweight CSS template for building responsive liquid-grid designs. It brings together the best CSS techniques from around the Web and integrates them into a single, powerful style sheet template.

Check it out

The Absolute Beginner's Guide to Sass

Collective47_09

If you'd like to start out with Sass, you'll definitely find this introduction by Andrew Chalkley helpful.

Read it

Testing jQuery Plugins Cross-Version With Grunt

Collective47_10

In the light of the recent news that jQuery will be dropping support for IE8 and below in the new version, Mark Dalgleish shows how to test the cross-version capabilities of a jQuery plugin with Grunt.

Read it

HTML5 Drag and Drop Avatar Changer with Resizing and Cropping

Collective47_04

Learn how to create a drag and drop avatar uploader and resizer in this in-depth tutorial by Chris Coyier.

Read it

What No One Told You About Z-Index

Collective47_11

Philip Walton explains how the z-index is often not fully understood and gives some examples that will teach you some things that you probably did not know.

Read it

Source Maps 101

Collective47_13

Learn about source maps in this introduction by Sayanee Basu. In the tutorial you'll take a very simple bit of JavaScript and SASS code, run them through various compilers, and then view the original files in the browser with the help of source maps.

Read it

Voice Driven Web Apps: Introduction to the Web Speech API

Collective47_05

Glen Shires shows us how the new JavaScript Web Speech API can be used to easily add speech recognition to a website.

Read it

Twitter Button Concept

Collective47_14

Bennett Feely shares his pen of the beautiful Twitter button concept by Erik Deiner.

Check it out

Using Unprefixed CSS3 Gradients in Modern Browsers

Collective47_02

Jennifer Yu from the Internet Explorer team gives us an overview of the changes for the unprefixed CSS3 gradients syntax in this WebAppers article.

Read it

Free Font: V.GER Grotesque

Collective47_15

A beautiful font that came out of a students project.

Get it

Sharp Pixel-Icons

Collective47_16

For his debut, Natko Hasić shares these tiny pixel gems with us. The set contains 20 sharp pixel icons.

Get it

flowtime.js

Collective47_24

Marco Lago created flowtime.js, an HTML5/CSS3/JS presentation framework for easily building HTML presentations.

Check it out

Empty States

Collective47_18

For his brilliant article "Designing for the Empty States", Craig Dennis created this collection of empty states in apps. You can submit your screenshots and get inspired for how to design the empty states of your app.

Check it out

Maxmertkit

Collective47_19

Maxmertkit is a CSS framework that is based on a widget-modifier coding style. Combining widgets with a status, size and modifier you can get your ready-to-use code.

Check it out

voxel.js

Collective47_20

voxel.js is a collection of projects that make it easy to create 3D voxel games like Minecraft in the browser based on WebGL. It is written by James Halliday and Max Odgen and you can contribute on GitHub.

Check it out

Mini Keyboard Game

Collective47_17

Tastatour is a very minimal but fun keyboard game to train your reaction with some rad sound. It was created by Jan Oelze and Dominik Johann.

Check it out

Front-end performance for web designers and front-end developers

An excellent in-depth article on performance of websites and apps by Harry Roberts that aims to give first-hand performance techniques that will help you understand front-end performance and help you make your apps faster.

Read it

Flat UI is not the only way forward

Max Rudberg writes about the latest discussion around the "flat look" and why he believes that it is just a stylistic choice and not the only way to design apps in the future.

Read it

Do you want to share some interesting news here?

The Collective features the latest news and resources from the web design & web development community. If you have spotted something that you'd like to appear in the next issue, just submit it here