I expect to find my inbox swamped with auto-responder messages sending issue 74 in between Christmas and New Year. I also wondered if I would have anything interesting to share, however it turns out that there is plenty happening!
If you have been celebrating over the last few days, I hope you have had a relaxing time. Best wishes for a successful and happy 2017 to you all.
Rachel Andrew, CSS Layout News
An intent to implement and ship a feature from the Level 3 Display specification -
display: flow-root which aims to make clearfix hacks for floated elements obsolete.
There is more discussion about the feature on the WICG Discourse forum.
Despite having surgery on my arm in the week before Christmas I managed to keep up with posting a CSS Grid Layout tip every day in Advent. This one explains the
grid-template shorthand. These tips resulted in a whole bunch of new video. There are now 20 videos in the video tutorial.
Include Media is a Sass library for media queries, I've used it on a few projects where I've ended up needing to use a lot of media queries. Here is a video and related CodePen demonstrating it.
A technique to create consistent spacing between blocks, taking inspiration from Lego.
Jen Simmons takes us on a tour of CSS Writing Modes, useful for more than just the layout of non left-to-right languages.
Flexbox, Viewport Units and 3D transforms are used to create these block reveal effects in this tutorial.
currentColor keyword can be incredibly useful. Here is a quick intro.
A neat site that allows you to generate a flexbox baased layout. The nicest thing about this is being able to select part of a layout and see how different values of the flex properties change the way it behaves.
I've distilled everything I know about CSS layout into this online video-led workshop. From the basics of floats and positioning right through to new methods such as Flexbox, Grid and Shapes. Never be baffled by layout 'weirdness' again!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.