Issue 16
Responsive design, Susy Grid, SVG, Grid Alignment and much more.
News
Issue 16
Thank you for all your replies to my questions last week. I picked three email addresses at random of those of you who replied and have sent those off to SitePoint. Keep an eye on your inboxes if you sent a reply last week to see if you have been lucky! Your answers have given me a lot to think about in terms of creating resources around layout. Some of the links this week also turned up in your replies - thank you!
Despite the terrible events of the last week my final conference of the year - dotCSS - is still taking place in Paris. I'll be talking about CSS Grid Layout. Tickets are still available, let me know if you will be there.
Rachel Andrew, CSS Layout News
A Book Apart, Responsive Design: Patterns & Principles
Coming soon from A Book Apart is Responsive Design: Patterns and Principles from Ethan Marcotte. Alongside this book will be Going Responsive from Karen McGrane. I've been lucky enough to see a preview copy of these and I think they will be a great addition to the bookshelf of anyone building modern websites.
Learn
Box-Sizing: The Secret to Simple CSS Layouts - Treehouse Blog
A good primer on Box Sizing from Treehouse.
Front-end Handbook - GitBook
Recommended by a couple of readers in response to my question last week is the pre-release Front-end Handbook. Not really about layout however we don't do layout in isolation to the rest of what we do as front-end developers. The topics covered in this book will help you make sense of the tools and practices of front-end development today.
But What About Old Browsers?
A video of my talk from Fronteers Conference in Amsterdam plus links to CodePens of all of the examples in the slides. The talk covers Grid, Flexbox and the Box Alignment Model.
The Difference Between Responsive and Adaptive Design | CSS-Tricks
An explanation of what we mean when we talk about responsive versus adaptive design.
Migrating From Bootstrap to Susy — Zell Liew
While we wait for CSS Grid Layout to land in browsers I am often asked which Grid system I would recommend for a complex grid-based site. I would suggest taking a look at Susy as this system at avoids the describing of layout in markup common to many grids. Using a preprocessed grid like this would also make it easy to switch to Grid Layout in future.
This is a really good article explaining the approach.
Tips for Creating and Exporting Better SVGs for the Web
Related to CSS Layout as we move to more modern ways of approaching our work, here are some excellent tips from Sara Soueidan on creating and exporting SVG images.
Interesting
CodePen - Grid Alignment Properties Visualisation
A useful CodePen by Abhishek Sachan demonstrating the Grid Alignment Properties. This requires a browser that supports CSS Grid Layout.
Screengrabs of early webpages
A Twitter account that tweets screengrabs of old webpages. It's a trip down memory lane for me!
Our Sponsor
Perch Multi-site Subscription
For a monthly subscription build and launch of to 50 Perch sites. Perfect for educational use, marketing microsites and more. 25% off your first month this week.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.