Multi-column layout column-span, should you use grid or a framework? CSS Exclusions
I'm at Chrome Dev Summit this week, helping to staff the MDN booth. It has been great fun as everyone comes to chat to us about how much they love MDN. We're promoting the browser compat data that we have on the bottom of each property page, such as this one for row-gap. That data is stored in a GitHub repo which anyone can help contribute to. So if you spot some data you can improve please do submit a PR!
I was the technical editor for CSS Master, by Tiffancy Brown and SitePoint have offered me three copies of the book as a giveaway to readers of this newsletter. I will pick at random three email addresses from the people who reply and answer this question.
If you could add any feature to CSS (other than all browsers magically supporting everything immediately) what would it be?
Finally, as I didn't have a sponsor this week I am promoting one of my own products. For those of you who only know me as a CSS person, I also run a company with a couple of products. Our CMS software Perch and Perch Runway, and our new product for public speakers Notist. Perch will be 10 years old next year and is a CMS for people who really care about structured content, speed, and a great experience for content editors. We're running a sale through this Friday, with 20% off licenses with the link https://grabaperch.com/code/NOV18. If you need a CMS, take a look - or share with your CMS-needing friends and help out your local friendly independent software developers!
Rachel Andrew, CSS Layout News
Multi-column layout column-span support coming to Firefox
If you have Firefox Nightly, then you can enable the flag
layout.css.column-span.enabled and find
column-span working. This is work still in progress hence it being behind a flag, but as an editor of the spec it makes me very happy to see this happening.
Project VisBug: An experiment in web design tooling - YouTube
Announced at Chrome Dev Summit yesterday, an "experiment in web design tooling". This is pretty neat and it will be interesting to see where it goes.
CSS Frameworks Or CSS Grid: What Should I Use For My Project? — Smashing Magazine
I often hear folk saying that CSS frameworks are not needed now that we have grid layout. I thought that people were probably using frameworks for more than the grid, so I asked and then wrote up this post considering the responses.
!important // basecamp.com [CSS Grid] on XOTV
A video which looks at the CSS Grid implementation on the Basecamp homepage, including the fallbacks for non-grid browsers being used.
Fun Tip: Use calc() to Change the Height of a Hero Component | CSS-Tricks
A nice technique using
calc() to create a nicely formatted hero component at various breakpoints.
Editorial Layouts, Floats, and CSS Grid | Rob Weychert
Rob Weychert writes about a design pattern that he is struggling to create when using CSS Grid, due to the fact that floated items no longer cause text wrapping behaviour once a grid item.
Editorial Layouts, Exclusions, and CSS Grid
My reply to Rob Weycherts' post. I think that Exclusions would be the way to solve this use case. Now, if we can just get some browser support for them!
Why Do All Websites Look the Same? – Member Feature Stories – Medium
The creative results when teams of students were asked to redesign a website and:
"Treat the browser as a blank canvas and create expressive, imaginative visual experiences. Use the technological potential of current web technologies as a channel for your creativity. Do not be constrained by questions of usability, legibility, and flexibility. Have an attitude. "
Perch CMS - fast, light, simple and friendly with 20% off this week!
Perch is a CMS built for web designers who need to offer content management to their clients without having to install a bloated system or change their workflow.
Download a trial today and follow our video tutorial to see how easy Perch can make creating a content managed website.
Plus save 20% on licenses through Friday 16th November with link https://grabaperch.com/code/NOV18
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.