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
Intent to implement and ship: CSS display:flow-root - Google Groups
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
Video: The grid-template shorthand
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.
How I use include-media in my projects / Eduardo Bouças
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.
Learning from Lego: A Step Forward in Modular Web Design · An A List Apart Article
A technique to create consistent spacing between blocks, taking inspiration from Lego.
CSS Writing Modes
Jen Simmons takes us on a tour of CSS Writing Modes, useful for more than just the layout of non left-to-right languages.
Block Reveal Effects | Codrops
Flexbox, Viewport Units and 3D transforms are used to create these block reveal effects in this tutorial.
Using the currentColor CSS keyword | soledad penadés
The currentColor keyword can be incredibly useful. Here is a quick intro.
Interesting
Flexible Boxes - layout generator
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
Start 2017 by really learning CSS Layout
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.