Join Morten Rand-Hendriksen for an in-depth discussion in this video Marking up the holy grail layout in HTML, part of Advanced Responsive Layouts with CSS Flexbox.
- View Offline
- In the exercise files for Chapter 4, under 04_02,…you will find holy-grail.html,…and holy-grail.css.…These are the two files we will be working with…to create our Flexbox based Holy Grail layout.…Just like in the previous movies,…we'll start by looking at the mark-up…in holy-grail.html.…And if you look from the top, you'll see…this looks pretty much like the other demo pages.…When we scroll down, there are a few notable differences.…You'll see here, before we get to the header…with the class "masthead," I've added a new div…with the class "outer-wrap."…And this div will wrap around all the content…on the page, and will be the baseline…that we're going to be using for our Flexbox based layout.…
Within "outer-wrap" we have three main sections:…we have a header with the class "masthead,"…then we have a div with the class "content,"…and then, finally, we have a footer…with the class "footer-area."…Within each of these main content sections,…we have further divisions.…So, for instance, in the header, we have a…div with the class "site-branding,"…
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.
- Creating Flexbox-powered menus
- Building a responsive card layout
- Marking up and styling the holy grail layout
- Changing displays
- Showing and hiding the sidebar
- Animating content