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.

google.com

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.

gridbyexample.com


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.

eduardoboucas.com


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.

alistapart.com


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.

24ways.org


Block Reveal Effects | Codrops

Flexbox, Viewport Units and 3D transforms are used to create these block reveal effects in this tutorial.

tympanus.net


Using the currentColor CSS keyword | soledad penadés

The currentColor keyword can be incredibly useful. Here is a quick intro.

soledadpenades.com

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.

wstone.io

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!

thecssworkshop.com