Bi-Weekly Frontend News

Collective #50

Inspirational Website of the Week

Collective50_MinimalMonkey

The blog and playground of interactive developer Stephen Burgess is our pick this week. It's super-stylish and has some subtle and interesting animations.

Get inspired

Textillate.js: Plugin for CSS3 Text Animations

Collective50_textilate

Textillate.js by Jordan Schroter is an ease-to-use jQuery plugin for applying CSS3 animations to any text. It uses lettering.js and animate.css.

Check it out

Lazy Line Painter

Collective50_LazyLine

Lazy Line Painter is an awesome jQuery plugin by Cam O'Connell for SVG path animations. It uses the Raphaël library.

Check it out

Carousel Interaction Stats

Collective50_carouselstats

A very interesting study by Erik Runyon on real interaction statistics of carousels. A great discussion follows.

Read it

Squishy Toggle Buttons

Collective50_Buttons

Justin WIndle created some really awesome buttons that simulate squishy rubber (elastomer) buttons, inspired by designs on Dribbble.

Read it
Advertisement

Dig deep into CSS gradients

Collective50_Gradients

A color wheel with CSS gradients? Ana Tudor gives us some great insight into CSS gradients and what we can do with them.

Read it

Make a Web App with Instagram-like Filters

Collective50_InstagramFilters

An awesome tutorial by Martin Angelov on how to create a web app that allows you to drag a photo from your computer into the browser window, and apply Instagram-like filters to it.

Read it

Roole: A language that compiles to CSS

Collective50_Roole

Roole is inspired by other CSS preprocessing languages like Sass, LESS and Stylus and it is implemented in JavaScript, so it can be run both on the server side (via node.js) or in a browser (run unit tests to check if Roole works in your browser).

Check it out

REMux: An Experimental Approach to Responsive Web Design

Collective50_rem

An interesting take on responsive web design by Dirk Lüth for CSS-Tricks, involving fluid column widths being set in rem units.

Read it

iLightBox

Collective50_lightbox

iLightBox is a fresh and revolutionary jQuery lightbox plugin that is packed with features: it comes with fullscreen, retina-ready skins, supports for swipe events, Youtube and Vimeo integration for HTML5 video, and a powerful Javascript API.

Check it out

How To Create a Simple Collapsing Header Effect

Collective50_header

A tutorial by Chris Spooner on how to create a collapsing header effect, where the page header or banner gradually shortens and disappear upon page scroll.

Read it

Csswizardry-grids

Collective50_grid

Csswizardry-grids by Harry Roberts is a simple, fluid, nestable, flexible, Sass-based and responsive grid system.

Check it out

Where to Start

Collective50_GettingStarted

Trent Walton gives some great advice on one of the hardest parts of making the transition to building responsive websites: getting started.

Read it

Photoshop Etiquette

Collective50_PhotoshopEtiquette

A great article by Veerle Pieters on one of the lesser talked about, but very important parts of using and creating with Photoshop: organization.

Read it

Free Font: NIEWE

Collective50_Niewe

Niewe is a unique display font that comes with four styles by Zyan Graphics.

Get it

Polaris UI Kit + Linecons Icon Set (AI, PDF, PNG, PSD, SVG)

Collective50_Freeicons

A beautiful UI Kit and a stunning vector icon set created by the Designmodo team.

Get it

Social Fish Freebie (PSD)

Collective50_SocialFish

Meghan Robichaud offers these absolutely adorable social fish icons from her website for free.

Get them

Don’t Put Labels Inside Text Boxes (Unless You're Luke W)

Collective50_labels

Should you put labels into text boxes? Caroline Jarrett gives a great overview on why that might not be a good idea.

Read it

Cool Kitten

Collective50_coolkitten

Cool Kitten is a parallax scrolling responsive framework (beta) developed by Jalxob.

Check it out

Packery preview

Collective50_Packery

Packery is a promising new layout library which will resolve two of the biggest and oldest issues with Masonry or Isotope, the previous libraries by David DeSandro.

Read it

BLOKK: Free Mockup Font

Collective50_blokk

If your clients don't dig Lorem Ipsum or any other strange filler text, you can try BLOKK which is a free font for quick mock-ups and wireframing.

Try it

Kitchen Cooking Vector Set

Collective50_cookingvector

If you need to design something cooking-related you'll definitely find this free vector set by Jim Viola very useful.

Read it