Issue #270

June 20, 2017

Building Production-Ready CSS Grid Layouts Today

Morten Rand-Hendriksen explains which new layout opportunities and challenges the CSS Grid Layout brings us today, and what old problems it solves.

Nathan Rambeck shows a number of examples that will help you avoid some of the common mistakes made by most of us when first diving into BEM.

Learn from customers faster with NomNom

Get all your customer feedback and user research in one place.

Get Started Free

Articles & Tutorials

Design Systems, Style Guides, Pattern Libraries. What the Hell Is the Difference?

Jan Toman explains the difference between style guides and pattern libraries. (It doesn’t really matter what you call it, as long as the whole team speaks the same language.)

An Introduction to the `fr` CSS Unit

Robin Rendle explores how the `fr` CSS unit can be used in conjunction with CSS Grid to achieve more legible and maintainable code.

Accessible Modal Dialogs

Rob Dodson shows how to properly manage focus when adding a modal dialog to the page, and how to prevent a screen reader user from accidentally escaping behind the modal.

Watch video

CSS Shapes, Clipping and Masking – and How to Use Them

Belén Albeza gives a nice introduction to CSS clip-path property.

A Practical Guide to CSS Variables (Custom Properties)

Maria Antonietta Perna gives an excellent, hands-on introduction to CSS variables (custom properties).

Learn UX Design online, with an expert mentor. Build your portfolio.

Springboard’s self-paced course with 1-on-1 mentorship will help you understand users better & build products they love. Prices go up $100 in July, so enroll now to save.

Enroll Now

Tools

Sticky Sidebar

Sticky Sidebar is a jQuery plugin that lets you easily create a performant sticky sidebar.

Check it out

Bojler

Bojler is a guideline for writing HTML code that will render correctly across the most popular email clients.

Check it out

Inspiration

The Equilateral Triangle of a Perfect Paragraph

Matej Latin created a beautiful game that will teach you to set a typographically perfect paragraph by adjusting font-size, line-height, and line length.

Get inspired