Join Morten Rand-Hendriksen for an in-depth discussion in this video Create responsive layouts with Flexbox, part of Learning Responsive Web Design in the Browser.
- [Voiceover] We're moving into a new era…where web layouts are concerned, and new…technologies like Flexbox and CSS Grid…makes design in the browser much easier…and more exciting.…To see what I mean, let's look at how we…can use Flexbox to change the layout of…some of our content.…Right now, these three boxes at the top…and the three levels below display vertically…across all screen widths.…That means as I widen the screen here…you'll see the boxes always stack one…on top of another.…I want them to appear horizontally on…wider screens as three buckets with…equal heights.…
Now, I could do that using the good old…float and clear techniques, but that…would result in clunky CSS and boxes…with different heights because the contents…are different for each box, so instead I'll…use Flexbox, it's way easier, way more efficient,…and we can do a lot more with it,…so let's see how that works.…Now, both these areas are actually pretty…much identical, we have three boxes next to…another, so I'm just gonna focus on…the boxes and then you can apply…
In this course, Morten Rand-Hendriksen explains his approach to designing in the browser, which starts well before he even starts coding. He shows how to define the layout on paper and create a "language" for the site, and then builds a baseline document with HTML5. Then he uses CSS to guide the look of the site and the layout, using media queries and Flexbox to add responsive behaviors. In chapter 3, Morten improves the site's interactivity using CSS transitions and transforms. Finally, he reveals how to use these techniques to build WordPress themes in the browser.
Each step involves design strategies, best practices, and actual code examples that will turn the web browser into your new favorite design tool.
- Use the browser as a design canvas
- Draft layouts with pen and paper
- Modularizing the design
- Create a baseline document with HTML5
- Create responsive layouts with Flexbox
- Applying CSS transitions and transforms
- Building WordPress themes in the browser