steve.fm

A work in progress

Customizing Bootstrap

While it’s certainly not a bad look, I’d prefer to not use Bootstrap out of the box. Instead, I’ll be modifying some of the core Bootstrap components and adding some of my own styles to make it more my own.

The first thing I’m going to do is create my own custom variables file called stevefm-variables.less and import it right after I import Bootstrap in my style.less file. That way, I can safely overwrite Bootstrap’s variables with my own values.

Because I want to use a custom typeface from Adobe TypeKit, I’ll have to add their embed tag to my header.php within my <head> tags. I’ll put it just before the wp_head(); function.

I’ll also update the header to have my site’s name and description. The updated header file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Steve Carroll">

    <title>
        <?php echo get_bloginfo('name'); ?> &mdash;
        <?php echo get_bloginfo('description'); ?>
    </title>

    <script src="https://use.typekit.net/uqh7odo.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>

    <?php wp_head(); ?>
</head>
<body>
    
    <div class="jumbotron">
        <div class="container">
            <h1><?php echo get_bloginfo('name') ?></h1>
            <p><small><?php echo get_bloginfo('description') ?></small></p>
        </div>
    </div>

    <div class="container">

While I’m in the process of updating my formatting, I’m also going to take a minute to update the format of my posts in content.php. Right now, the text spans widely across large screens, such as laptops and desktop computers, which makes it difficult to read. I’ll use Bootstrap’s grid formatting with .col-* and .row to achieve the formatting I want at various sizes.

content.php

<div class="row">
    <div class="col-sm-8 col-md-6">
        <div class="blog-post">
            <h2 class="blog-post-title"><?php the_title(); ?></h2>
            
            <?php the_content(); ?>
            <p class="blog-post-metadata">&mdash;<?php the_author(); ?> <?php the_date(); ?></p>
            <hr>
        </div>
    </div>
</div>

I’ll also get rid of that text in my footer.php that says “this is the footer,” since I know it’s working correctly now.

And last but not least, my style.less now looks like this:

@import '../bower_components/bootstrap/less/bootstrap.less';
@import "stevefm-variables.less";


.blog-post-title {
    .h2;
    // margin-bottom: 0;
}

.blog-post-metadata {
    .small;
}

It’s all coming together!

Read more about Building Steve.fm