17 MAY 2016

Issue 42

CSS Grid Layout, forms, flexbox and masking.



News

Issue 42

I'm mid conference travels having come from CSSConf Budapest, and I'm writing this intro sat in day two of An Event Apart in Boston.

As I headed out to Budapest I got the news that I had been invited onto the CSS Working Group as an Invited Expert. I hope that I can continue to contribute to CSS, and bring my experience as a web developer and the things I learn when talking to Perch customers and developers at conferences, to the discussions.

Rachel Andrew, CSS Layout News


Last week the CSS Working Group voted to move all spec issues and discussion to GitHub. I think this is a fantastic move. In this post I talk about how new CSS gets into browsers, the change from vendor prefixes to browser flags and why it is important that we as web developers and designers contribute to open web standards.


Yesterday I presented on CSS Grid Layout at An Event Apart in Boston. The slides were updated to include the new subgrid proposal - and all of the code examples on CodePen are linked up so you can play around with them.

There is a Storify here with tweets from all of the layout fun at An Event Apart.

Learn

A lengthy article on how really designing forms - rather than just treating the conversion of a form from paper to digital as a 1:1 conversion - we can make the process of completing them, something that often happens in a state of stress, much easier.


A quick tip for creating truncated text when using flexbox.


An article about the CSS mask property and the SVG <mask> element.

Interesting

A nice roundup of different user interface techniques using Flexbox.


Another style guide case study, I'm enjoying reading these at the moment as it ties into work I'm doing.

Our Sponsor

In this workshop I pass on everything I know about CSS Layout. My aim is to explain how the existing methods we have been using work, why they are limited and what they really are useful for. Then give you all of my knowledge about new layout methods - Shapes, Flexbox, Grid and more. You'll know when and how to use these methods now and in the future.

Enjoyed this article?

Join our free newsletter and never miss an update.


Related Articles