Issue 27
What is display: contents? Pattern libraries and updating clearfix.
News
Issue 27
Hello from Linz, Austria where I am speaking about CSS Grid Layout tomorrow. Before I left I did some experimenting with display: contents and you can see a link to a write-up of that and some code examples below. I'm going to follow that up with some thoughts about the method as used with CSS Grid Layout.
On my return to the UK, I will be getting things lined up for the launch of my CSS Layout Online Workshop - if you are interested in the launch offers or to find out more about that take a look at the site, and sign up to be notified.
Rachel Andrew, CSS Layout News
Learn
Vanishing boxes with display contents
In order to work out how much display: contents could be a solution to a lack of subgrid in Grid Layout, I needed to get my head around how display: contents works at all. I created a couple of examples and then wrote up how it works. Take a look.
HOW TO: Pure CSS masonry layouts — Medium
An in-depth look at how you can create masonry style layouts without relying on JavaScript.
Working with Pattern Libraries — Medium
A short article with links to further information, covering the benefits of working with pattern libraries.
The very latest clearfix reloaded
Thierry Koblentz explains why he thinks we should use display: block rather than display: table in our clearfix hacks.
Deep Dive into Grid Layout Placement - Rego's Everyday Life
Very detailed post explaining how positioning works in the CSS Grid Layout Spec from Manuel Rego Casasnovas who has been implementing this in Blink and WebKit.
Interesting
Flexbooks
Jonathan Garner has started a project where he tries to recreate book covers using HTML and CSS. A lovely idea for a learning project and the results are fun to see.
Responsive HTML Email Framework
Sometimes we have to build HTML emails, and this makes us sad. However here is a framework for creating responsive emails which gives a solid starting point.
Our Sponsor
Tired of struggling with CMS templates when implementing your designs?
Perch has a template system that is HTML-like, simple to use and gives you full control of your mark-up. Use Foundation, Bootstrap or your own CSS. Design and develop the way you want to, knowing that Perch has you covered for functionality when it comes to editing the site.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.