Issue 81
Lots of flexbox plus a11y, basic shapes and path and SVG
News
Issue 81
I am currently working on two projects that involve a lot of writing about layout - more on those in coming weeks - and enjoying an unusual few weeks of being in the office before conference season starts again.
Everyone is getting excited about the impending release of CSS Grid Layout in browsers, today someone who has the iOS 10.3 Beta installed sent me a tweet with an image of one of my grid examples in Safari on the iPhone. A reminder that if you have grid questions, rather than email or tweet them at me, post them to my Grid AMA on GitHub. That way I can answer and also other people can read the answer, helping everyone.
Rachel Andrew, CSS Layout News
Learn
CSS and progressive enhancement | justmarkup
A concise article detailing some of the ways modern CSS makes progressive enhancement much more straightforward than in the past.
Exercises in Flexbox: Simple Web Components
A nice tutorial walkthrough of using flexbox to build UI components.
Flexbox Tutorial | HTML & CSS Is Hard
A flexbox tutorial from the series HTML and CSS is Hard. I love the little diagrams.
Basic Shapes & Path... Never the Twain Shall Meet? | CSS-Tricks
A look at basic shapes and path, what works where and how you use them.
Maintaining Accessibility in a Responsive World | Filament Group, Inc., Boston, MA
An excellent article on how to ensure accessibility in responsive designs. Lots of useful examples and tips.
How Designers Should Think About SVG – Design + Sketch – Medium
A useful article about SVG, explaining some basic concepts. It also deals with how Sketch exports SVG, something I've been battling with a bit recently.
A note: this article promotes an upcoming course by the author. In the past I have had nasty email when linking to an article that promotes a paid course, a book etc. I make no apologies for doing so. In fact I'd like to encourage everyone who shares content freely to also think about how they make that sustainable. More on that here.
Interesting
The Rules for Modern Navigation | UX Booth
Navigation can be hard to design. This article gives some excellent advice and shows examples of different navigation styles.
Our Sponsor
Powerful developer tools - simplicity for your clients
Content management systems so often get in the way of great design and experiences. They force your site into a certain structure. They make you store content in ways that make no sense in terms of the content - or to the people managing it. They sometimes even dictate the HTML or the front-end tools and techniques you can use.
Perch Runway is different.
Perch Runway takes a toolkit approach to content management. You remain in control. Create the site that meets your requirements and also an administration experience that will ensure that content editors can maintain and improve on the site after handover.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.