Issue 6
News
Issue 6
We are at issue 6 already! In this issue I have linked to several things that have come out of the Paris face to face meeting of the CSS WG. Those meeting notes can be a bit tough to read, but if you are interested in emerging specifications for layout there is useful information to be found about how specs are developing.
In all of this new stuff there is a huge amount of scope for good explanations and tutorials to be written. If you write something about CSS Layout let me know the link, as I would love to include it here!
CSS Layout News
Do you use percentage margins and padding?
This link is to minutes from the CSS WG Paris Face to Face meeting that refer to Grid and Flexbox. There was a lengthy and unresolved discussion about calculating vertical percentage margins and padding. Working Group members felt that the only real use of percentage margins and padding came from the aspect ratio hack. Is that right? Do you use them for something else? Let me know, and I'll collate and send feedback.
[announcement] Houdini moving to GitHub issues for all technical discussion
For anyone who would love to get involved in emerging specifications the current W3C mailing lists are often a showstopper. Houdini is moving to GitHub for issues, and Tab Atkins has mentioned publicly that if all goes well the CSS WG will follow in 2016. I believe this to be a positive move as GitHub is where people already are, and if more input is wanted from authors, then it seems the right place to be.
Learn
CSS Grid and The Box Alignment Module
The Box Alignment Module is the module that will allow us to vertically centre things. In this post I detail how some of the properties work when used with CSS Grid Layout. You'll need Chrome Canary to see this in action.
Make responsive masks for CSS Shapes using Mac Preview App
One of my favourite things about the CSS Shapes specification is that you can use the Alpha Channel of an image to define the mask for your shape. Here is how to create an image to use in this way using the Mac Preview App.
The anatomy of responsive images
A reference to the various use-cases for responsive images from Jake Archibald.
Interesting
Dev.Opera — Houdini Task Force meeting report
If you are interested in extending what is currently possible in layout and other parts of CSS, then keep an eye on the CSS Houdini project. This report of the recent meeting from Bruce Lawson explains some of the things being discussed.
Visualizing Flexbox
A neat little CodePen Demo to play around with Flex properties.
Our Sponsor
Save 20% through Thursday September 10th
Use this link to add a 20% discount coupon to your cart and save 20% on Perch and Perch Runway licenses until the end of the day on Thursday 10th September. An ideal time to start using the CMS designed for front-end developers.