Issue 74
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!