October 8th, 2019 Update: WP Rig is a better option than _underscores these days.
This post hasn’t ages so well, but do check out Morten Rand-Hendriksen‘s video below for a comprehensive intro to building a PWA using WP Rig as a starter template
Original post from February 5th, 2019:
In this tutorial we’ll make the Underscores theme CSS Grid friendly by flattening out the layout. There are two main divs we can lose in order to make the nesting more effective:
<div id="content" class="site-content">
<div id=“primary” class=“content-area”>
The first div, #content, opens up in
header.php and its closing tags is the in
The #primary div needs to be removed from the following pages:
Now we’re left with the following nesting structure:
<div id="page" class="site"> <header id="masthead" class="site-header" role="banner"> </header> <main id="main" class="site-main" role="main"></main> <aside id="secondary" class="widget-area" role="complementary"></aside> <footer id="colophon" class="site-footer" role="contentinfo"></footer> </div>
Now when we add a grid property to the
#site div, the
.site-footer will all fall in line as children.