Web Design Weekly #129


A Detailed Introduction To Custom Elements

Peter Gasston gives a great overview on what Custom Elements are for, why they’re so transformative and how to use them. (smashingmagazine.com)

Supernett Family: 6 Hand-Drawn, Sans-Serif Fonts

Featuring 6 different styles, the Supernett font family includes 4,700 different glyphs for each style! There’s also a slew of OpenType options to add even more creativity to the mix including contextual alternates, rotating letters, baseline shifts, and more. See it here. (mightydeals.com)


Architecture for a Sass Project

One of the main benefits of using a CSS preprocessor is having the ability to split your code into several files without impacting performance. With several files it’s easy for things to get messy. In this post Hugo Giraudel explores ways to structure your files. (sitepoint.com)

Getting into Sass Control Directives

Sass makes it very easy to use mixins and extends to write leaner CSS. But perhaps you’re not familiar with how Sass’s Control Directives can help you write leaner Sass. (flippinawesome.org)

CSS Gradients

An up to date version of Chris Coyier’s super hand gradients post. (css-tricks.com)

BBC News website – responsive design in beta (bbc.co.uk)

Tools / Resources

Code Guide by Mark Otto

Code Guide is a project for documenting standards for developing flexible, durable and sustainable HTML and CSS. (github.com)

Performance Audit Workflow

Paul Lewis shares his process on how he does performance audits. He also touches on what he typically suggests for certain use cases. (aerotwist.com)

How Soon Will Visitors See Your Content?

Louis Lazaris dives into WebPageTest’s Filmstrip view. Super handy post for testing! (sitepoint.com)

Grunt And Gulp Tasks For Performance Optimization

A great list of Grunt and Gulp tasks that focus on performance optimisation. (yeoman.io)


The first and only icon system created for the modern web plus all the tools to make them your own. (useiconic.com)


A web-based font editor geared toward font design hobbyists. (glyphrstudio.com)

A Toolkit for RWD and Progressive Enhancement with Compass (github.com)

5 Javascript debugging tips you’ll start using today (berzniz.com)

An overview of almost all ECMAScript 6 features (github.com)

CodeKit 2 released (incident57.com)

Stripe Checkout (stripe.com)


Lessons learnt building ViziCities

Robin Hawkes talks to you about the lessons learnt during the development of ViziCities. From application architecture to fine-detailed WebGL rendering improvements. (mozilla.org)

How Medium Took Calculated Design Risks And Won (fastcolabs.com)

Trent Walton’s take on Frank Chimero’s new site (trentwalton.com)


Trello Front End Developer

On the Trello team, we pride ourselves on building a fast, responsive app using modern frameworks and technologies. We’re looking for a talented front end developer to help us push the limits of what a web app can do. The perfect person for this position will be an experienced developer who takes design and user experience as seriously as we do. (fogcreek.com)

Post a Job in Web Design Weekly →

Last But Not Least…


A nice short and sweet post by Remy Sharp which reminds us that sometimes simple is good enough. (the-pastry-box-project.net)

CSShake – some CSS classes to move your DOM! (github.io)

Chrome will make text visible after 3 seconds (chromium.org)