steve.fm

A work in progress

Customizing the Post Layout

When I first launched the blog, I didn’t care much how content was laid out, I just wanted to make sure things were displaying. Now that i’ve got this worked out, I want to get my posts set up a little nicer.

Ideally, I’ll have the post metadata on the lefthand side of the post, de-emphasized, and the post content to the right of it.

When the site gets scaled down to smaller devices, I want the metadata to shift below the post, rather than being before it. On left-to-right layouts, this tends to be an issue because typically the contpent that comes first left-to-right will be on the top for mobile devices. Bootstrap has a solution to this problem.

In Bootstrap’s responsive grid layouts, they have the option to push or pull columns for different size classes. What this means is that you can basically shift the contents when the devices get larger than a certain size. The actual order of blog post elements is:

  1. Title
  2. Content
  3. Metadata

So I’ll start off by structuring my content.php file with that in mind:

<!-- Title Row -->
<div class="row">
    <div class="col-sm-offset-2 col-md-offset-2 col-sm-8 col-md-6">
        <h2 class="blog-post-title"><?php the_title(); ?></h2>
    </div>
</div>

<!-- Content & Metadata Row -->
<div class="row">

    <!-- Content Column -->
    <div class="col-sm-8 col-md-6">
        <div class="blog-post">
            <?php the_content(); ?>
        </div>
    </div>

    <!-- Metadata Column -->
    <div class="col-sm-2 col-md-2">
        <div class="blog-post-metadata">
            <?php the_author(); ?> <br>
            <?php echo get_the_date(); ?>
        </div>
    </div>
</div>

<hr>

Larger Devices

Smaller Devices

While it’s not quite what we want for larger devices, it works well for smaller ones. Before we go into pushing and pulling, it helps to have a basic understanding about how Bootstrap’s grid system works.

Bootstrap grids are basically divided up into twelve columns. Twelve makes a lot of sense because it’s a relatively small and manageable number that’s evenly divisible by a lot of other numbers:

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Those numbers can then be combined to make other combinations of numbers, leaving you with a lot of possibilities for how you arrange your grid. In fact, you don’t even have to get to twelve if you don’t want to. You can see in the code above, the content takes up 8 columns on small devices, but only 6 columns on medium-sized devices.

Once you specify the number of columns to use for an element, it will use that number of columns for all larger devices until you specify it again. For example, I’ve specified 8 columns on small — if I had not specified anything for medium, it would use 8 columns for medium, large, and extra large devices. For any devices smaller than “small”, the column would span the entire width of the device.

Now that we’ve got that under our belts, pushing and pulling should make a little more sense. Let’s say I have an element (A) that’s using 8 columns, then an element (B) that’s using 2 columns.

You can see that element A is using columns 1-8 and element B is using columns 9-10. To get element B into element A’s spot, I’ll have to pull it 8 columns. Because I have two different values at two different sizes, I’ll have to specify for each size class.

The code will look like this for the metadata column:

<!-- Metadata Column -->	
<div class="col-sm-2 col-md-2 col-md-pull-6 col-sm-pull-8">
    <div class="blog-post-metadata">
        <?php the_author(); ?> <br>
        <?php the_date(); ?>
    </div>
</div>

Yikes! To get this to display the way it’s supposed to, I also need to push my other content over:

<!-- Content Column -->
<div class="col-sm-8 col-md-6 col-md-push-2 col-sm-push-2">
    <div class="blog-post">
        <?php the_content(); ?>
    </div>
</div>

Read more about Building Steve.fm