Issue 19
News
Issue 19
I'm back from the excellent dotCSS Conference in Paris. The talks were all recorded so I'll share them with you once they show up online as it really was a brilliant event.
I spoke about Flexbox, Grid Layout and Box Alignment - at high speed as we only had 18 minutes each for our talks. The short talk format worked well however, each speaker compressed the real core of their subject but gave ways to follow up and learn more. Despite the conference only being one afternoon it felt like I had learned a huge amount in a short time!
I am getting an increasing number of requests from people asking me to promote their grid layout framework here. Unless I've actually used and could recommend something I won't simply link to a GitHub repo or site. That said, I would love to see decent write-ups comparing these things - even if from the framework author. Give me a way to see why readers should invest their time in this, why it solves problems other things don't, and I'll be far more likely to link it up!
Get in touch with me on Twitter, or just reply to the email if you have something to share.
Rachel Andrew, CSS Layout News
CSS Custom Properties for Cascading Variables Module at Candidate Review
The CSS Custom Properties specification went to Candidate Review last week. This is the "CSS Variables" spec. This is now available behind the Experimental Web Platform Features flag in Chrome. If you were wondering how native CSS Variables differ from using Sass or similar then take a look at this lengthy post from Google Engineer Philip Walton - Why I'm Excited About Native CSS Variables.
Learn
Getting Started With CSS calc() – Smashing Magazine
The CSS calc() function can help you with layout and much more. This is an excellent article demonstrating some of the things you can do with it.
Introducing the CSS Grid Layout spec | CSS3 | Creative Bloq
A short article of mine, originally written for Net Magazine. It's just a quick intro to CSS Grid Layout with links to some code examples.
Flexbox’s Best-Kept Secret — Medium
An article explaining how to use auto-margins with Flexbox.
Content-Driven Layouts with Flexbox (Chris Sauve, CSSDay 2015)
I don't know if this talk was recorded but this slide deck has some very clear examples of how Flexbox works.
Intrinsic Placeholders with the Picture Element - daverupert.com
A nice technique to prevent the jumping around of layout as space is calculated for images as they load.
Interesting
What I learned in one weekend with CSS Shapes — Medium
A few examples of CSS Shapes. I'm always surprised how few people are playing around with Shapes as the spec is pretty easy to understand and the fallback (to a regular float) often acceptable.
Our Sponsor
A CMS that supports modern web development
With a simple but powerful template language Perch supports the techniques you want to use. Support for Responsive Images, adding Open Graph data, working with frameworks such as Foundation or Bootstrap or with your own CSS. We'll deal with the CMS part so you can concentrate on delivering great websites.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.