2015
Lynda
Morten Rand-Hendriksen
1:49
English

The CSS Flexible Box Layout module (aka Flexbox) provides a simple solution to many of the design and layout problems web designers and developers have faced since the advent of CSS. Now that the module is becoming ready for the main stage, it's time to look at what we can do with it.
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.

Introduction
Welcome
How to use the exercise files
1. What Is Flexbox?
What is Flexbox?
Caveats when using Flexbox today
2. Flexbox-Powered Menus
Exploring common menu layouts
Marking up five types of menus
Using Flexbox to control single-level menu layout
Using Flexbox to control advanced menus
Using Flexbox to control multilevel menus with dropdowns
Creating a social media menu
Using Flexbox to control multiple menus
3. Responsive Card Layouts
Challenges with card layouts
Marking up typical cards
Using Flexbox to create a grid of cards
Adding responsive breakpoints
Solving the common "anchor doesn't fill the card" problem
4. Holy Grail Layout
What is the holy grail layout?
Marking up the holy grail layout in HTML
Styling the holy grail layout with Flexbox
Changing the layout with Flexbox
5. Handing Control to the User
Handing control to the user
Sidebar position switching
Changing from holy grail to vertical display
Hiding and showing the sidebar
Animating content
6. Putting It All Together
Putting it all together
Next steps
Thank you

Download File Size:351.31 MB

---