02 FEB 2016

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

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.


An in-depth look at how you can create masonry style layouts without relying on JavaScript.


A short article with links to further information, covering the benefits of working with pattern libraries.


Thierry Koblentz explains why he thinks we should use display: block rather than display: table in our clearfix hacks.


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

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.


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.

Enjoyed this article?

Join our free newsletter and never miss an update.


Related Articles