Issue 74
Writing Modes, Sass include-media and a new value of display
News
Issue 74
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.
Learn
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.
The currentColor keyword can be incredibly useful. Here is a quick intro.
Interesting
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.
Our Sponsor
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!