Issue 53
Some nice demos, an article on accessible data tables, thoughts on max-width and viewport units
News
Issue 53
I'm in Australia where I have presented on CSS Grid Layout at Web Directions Code in Sydney and Melbourne. On Wednesday I'm leading a full day CSS Layout workshop here in Melbourne before making my way back to the UK. You can find the slides, code demos and so on for this version of my Grid talk here.
A big thank you to sponsor this week CSS Dev Conf 2016, which I will be speaking at along with a whole line-up of fantastic speakers in San Antonio, Texas this October.
Rachel Andrew, CSS Layout News
Learn
Full Width Containers in Limited Width Parents | CSS-Tricks
Some suggestions for how to create full width elements inside limited width parents. Useful if you don't have full control of your templating and need content editors to be able to drop full width images into your content.
Neat uses for CSS’s awesome viewport units – Falkus.co
A few ideas for using Viewport Units. Worth noting that viewport units can pose an accessibility issue when used for text as they are not user scalable.
A Tale of `width` and `max-width` | CSS-Tricks
"You might want to limit the width of a modal, right? Kinda gives it that "modal" look on larger screens. Let's say 600px sounds right. But, you want to make sure it doesn't bust outside of its parent element. For example, avoid causing horizontal scrolling on a mobile screen. How would you do that?"
Chris Coyier investigates.
Flexbox Layouts with Susy by Michelle Barker on CodePen
I like Susy, of all the grid solutions out there that we might choose while we wait for the glorious day where we have CSS Grid Layout support, I think Susy is one of the best options. Here is a useful article explaining how to use it in conjunction with flexbox.
Lessons from building mobile-friendly, accessible data tables — Shopify UX — Medium
Very useful stuff from the Shopify UX team. How to build accessible and mobile friendly data tables.
How to Build a Responsive Image Gallery with Flexbox – Tania Rascia
A short article demonstrating how to build a simple grid with flexbox. It's this kind of thing that will be even simpler with Grid Layout. For now if Flexbox is what you have this article explains how the majority of flexbox based grid solutions work.
Interesting
Above & Beneath: Featured Content Layout Effect | Codrops
These are nice demos - used in production I think you would need to take care that people know how to access the menu. It took me a little while at first to spot it!
Horizontal lines around centered content
A nice demo (via @zomigi on Twitter) of using Flexbox to create lines around centered content.
Our Sponsor
CSS Dev Conf - San Antonio, Texas - October 17-18
At CSS Dev Conf 2016 The Alamo, join Rachel Andrew, Trent Walton, Chris Coyier, Rachel Nabors, Estelle Weyl, Jen Simmons, and Jonathan Snook and more this October in gorgeous San Antonio, deep in the heart of Texas. Your CSS Dev Conference registration includes: Admission to the two-day conference, including keynotes and sessions; Continental breakfast, lunch, and snacks throughout the day; and Admission to the Check-In Reception, Monday night Party, and Tuesday night Happy Hour! Check out the sessions and register now!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.