Coding the home page

The first of two templates for this project is the home page. This page is made up of a flexbox grid that is wrapped into the Bootstrap grid code. Following the grid, we'll add a pagination section. The entire body of the page is wrapped in the following HTML:

<div class="page-body">
  ..
</div>

This section has top and bottom margins attached to it. This is the same spacing that we'll use on the article page, so you'll see .article class in there as well:

.page-body,
.article {
  margin: (@margin * 2) 0;
}

Creating a post grid with flexbox

Before we jump fully into the flexbox code, let's outline the basic structure of a row of posts. Each row of our grid will have four posts in it. As with the footer, we want rows to stretch across the width of the layout, so we'll be omitting the .container <div>. Here's the basic structure of a row:

<div class="row">
  <div class="col-lg-12">
    <div class="flex-parent">
      <div class="flex-child...