For the longest time we’ve been stuck with boxes and it makes things that are common yet beautiful in the print world difficult if not impossible on the web. CSS shapes change this, leveling the playing field allowing us to create much more engaging layouts and designs on the web.
I was lucky enough to get the invite from Matt West, founder/organizer of CodeSLO, via my coworker @schwarty to give a presentation at the CodeSLO meetup "HTML and CSS - Part 3 - Modern Web Design" meet up. This was a good time. I got to get out and talk shop with a great group of people who were excited to learn about design and the role it plays on the web. My talk went a little over thirty minutes and covered the basic principles of good design: contrast, repetition, proximity, alignment, layout, typography, color, and more. For those that were unable to attend, feel free to take a look at the slides to see what you missed...
Some of my favorite parts of CSS3 are those concerning layout. So far I've explored Flexbox and Columns, but today I'm going to dig into CSS Regions.
Layout has traditionally been a pretty difficult thing to get right when it comes to building web sites. With CSS3, however, it looks like things are getting a bit easier. I've written "Flexbox: Modern Web Layouts Simplified" which covered Flexbox layout techniques. That was cool, but there are other great layout features provided for us in CSS3, In this article I'm covering CSS3 Multiple Columns.
New in the world of web layouts is the CSS3 "Flexible Box Layout Module" known as Flexbox. It is so new in fact that at the time of writing this post it is still just a W3C Recommendation and is still in flux with different browsers implementing things a little differently. That being said, it actually has been around since 2009 although the syntax was different. The most recent version of the module seems to be fairly stable with solid support among the latest versions of all major browsers.