Issue 135
Generated content, responsive components with ResizeObserver, and margin collapsing
News
Issue 135
Next week I'll be sending this email from California, where I'll be making a flying visit, and then conference season gets underway properly as we head into April. I look forward to having things to share from the conferences I'll be attending this year.
Speaking of conferences, the email this week is sponsored by SmashingConf. You can see me and a whole host of brilliant speakers at SmashingConf this year. I'm also running CSS Grid and Flexbox workshops at many of the events. I would love to see you there!
Rachel Andrew, CSS Layout News
Learn
Some thoughts from me on using CSS Generated Content to style grid areas, with a few little examples of where you might find this technique useful.
A little tip for using generated content to keep track of breakpoints while developing.
Emil Björklund adds to the previous post on displaying CSS breakpoint information with generated content, with an enhancement using Custom Properties.
Using ResizeObserver to create responsive components. A great explanation of how and why you might want to do this, including limitations and drawbacks.
A refresher on how margin collapsing works.
Interesting
Some information on using Grid and Flexbox to attain "responsive tables" and on using CSS table properties to do vertical centering and so on - often used as a fallback for flexbox and grid. It seems as if some more digging into this is needed, as the need for the display of tabular data that works well on small screen devices is a real one.
Interesting notes on use of typography and spacing in the GOV.UK beta, the aim to give teams across sites to have a consistent way of managing this.
Our Sponsor
— Ryan Chittenden, Director of Web Development, Fuego Digital Media
With our third SmashingConf San Francisco, taking place on April 17 & 18, we want to explore strategies for making outstanding, fast experiences, and what we all need to know today, to be more productive and make smarter decisions tomorrow.
Register for three days and save $100 off the cost of registering separately for the conference and the workshop. Check the speakers →