Skip to content

Issue 4

Flexbox, Grid Layout, Responsive Shapes and Images.

Rachel Andrew
2 min read

News

Issue 4

Apologies for those of you who had trouble with the email last week. An incorrect DKIM record was upsetting Gmail. I'm keeping my fingers crossed that all is well this time.

Thank you for all the great feedback on the newsletter. Don't forget to let me know if you spot or write something about layout on the web. Find me on Twitter, or just reply to this email.

CSS Layout News


Bootstrap 4 alpha

Version 4 of Bootstrap is now in Alpha. The framework has switched from Less to Sass, but the news most of interest to readers of this email is that it now includes an optional Flexbox based Grid. I've not taken a look yet, but will share my thoughts when I do.

getbootstrap.com

Learn

Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box – Smashing Magazine

A useful article showing how to use the clip-path property from the CSS Masking Module.

smashingmagazine.com


What IS Flexbox? — Medium

A nice post from Scott Vandehey detailing the history of Flexbox, and where we stand now with browser support.

medium.com


Responsive Images explained

A short video explanation of Responsive Images. A really clear and quick way to get to grips with the standards and terminology around the subject.

youtube.com


Grid by Example - Usage examples of CSS Grid Layout

Over the weekend I added CodePen live demos to my CSS Grid Layout examples. You'll need the Experimental Web Platform Features Flag switched on in Chrome to see these in action. Each also has an image to demonstrate what it should look like.

gridbyexample.com


Grid Tidbits part 3: grid track sizing

Emil Björklund has written up some details of how track sizing works in CSS Grid Layout.

thatemil.com

Interesting

CSS element() function - Vincent De Oliveira

The element function can render any part of a page as a live image. Sound strange? Read this post to find out more and see it in action.

iamvdo.me

Our Sponsor

A CMS for front-end developers

A CMS for front-end developers

With a simple, elegant template language that leaves you in control of your markup and CSS, Perch is a CMS that works with you and the way you want to create websites.

grabaperch.com

Newsletter