Issue 35
Grid plus Regions, a polyfill for position: sticky, CSS Multi-column, and what is Houdini?
News
Issue 35
The first quarter of 2016 is almost over. In the UK we had a four day holiday weekend, which I managed to spend working, but did get time to put together an experiment with Grid and Regions which is linked below.
I am putting the finishing touches to the Advanced part of my online CSS Layout course. The pre-launch offer will end later this week once I get those final lessons online. Many thanks to those of you who have already signed up, or who have helped me spread the word on Twitter!
Rachel Andrew, CSS Layout News
Hack on Experimental Layouts in CSS - CSS Layout Club NYC (New York, NY) - Meetup
If you are in NYC and interested in CSS Layout, Jen Simmons is organizing a meetup on April 20th. Sounds like fun!
Foundation for Emails 2 is Here! | ZURB Blog
If you sometimes have to lay out HTML emails then Foundation for Emails may just make your life easier. Foundation for Emails 2 has now been launched.
Learn
Video: Making Sense of the New CSS Layout
A recording, with all of the slides embedded, of my talk at Fluent. I explain the relationship between Grid Layout, Flexbox and the Box Alignment Module.
A CSS Multi-column Layout Tutorial for Beginners
A tutorial introducing multiple column layout.
CSS Grid and CSS Regions
With Grid Layout on the horizon I hope that browser vendors once again take a look at CSS Regions. Without Grid the use for this feature seemed limited - with Grid it seems like something we will all want to do. To play with the two specifications combined requires WebKit Nightlies - so I made a quick video to demonstrate the code.
Interesting
Houdini: Maybe The Most Exciting Development In CSS You've Never Heard Of – Smashing Magazine
An excellent explanation of what Houdini is from Philip Walton:
"imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. And think about all of the new features you read of in blog posts or hear about at conferences and meetups — things like CSS grids, CSS snap points and sticky positioning. Imagine if you could use all of them today and in a way that was as performant as native CSS features. And all you’d need to do is grab the code from GitHub.
This is the dream of Houdini. This is the future that the task force is trying to make possible."
StickyState - a polyfill for position: sticky
The sticky value of the position property gives us a method to do something we've typically used JavaScript to do - the item scrolls with the page and then when reaching a certain point becomes "sticky" and the page scrolls under it. This polyfill makes this work cross browser.
Web Animation Past, Present, and Future · An A List Apart Article
Animation is becoming more present in web design and in this article Rachel Nabors writes up the current state of animation on the web, with plenty of useful resources.
CSS Shapes Editor - Chrome Web Store
If you are using CSS Shapes then you will want to install the CSS Shapes Editor for Chrome - once you start working with more complex shapes it becomes incredibly useful!
Our Sponsor
A CMS that leaves design and code decisions to you
Until the end of March 2016, this link will give you 20% off a Perch or Perch Runway license.
If your experience of working with a CMS in having to fight to use the markup you want, Perch will be a breath of fresh air. Our soon-to-launch Shop Addon will bring the same flexible control to ecommerce, so there has never been a better time to learn Perch!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.