Bootstrap in practice: Blogception

Sorry Plauto: metablog just wasn’t cool enough. William Ghelfi in This very blog post.

I have a plan

Hello! Since I was going to redesign my blog using Bootstrap 3, I thought it would be fun to document my step-by-step progress in a blog post. Or, in other words:

So this is the plan, and this also why for some time you should expect discrepancies between blog posts’ look & feel and the overall design of the website. as I rewrite the various layouts and includes in Octopress.

A beginning

Anyway. Here we have the minimum core of a proper blog post, and we also started to set it up with Bootstrap 3:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap In Practice - Blog example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<div class="container">
	<div class="row">
		<article class="col-12 col-lg-10 col-offset-1">

			<header>
				<h1>Blogception</h1>
				<p class="meta">
					<time datetime="2013-08-11T17:55:00+02:00">Aug 11th, 2013</time> |
					<a href="#disqus_thread">Comments</a>
				</p>
			</header>

			<blockquote>
				<p>Sorry <a href="http://lmgtfy.com/?q=plautus+metatheatre">Plauto</a>: <em>metablog</em> just wasn't cool enough.</p>
				<small>William Ghelfi in <cite title="This very blog post">This very blog post.</cite></small>
			</blockquote>

			<h2>I have a plan</h2>
			<p>
				Hello! Since I was going to redesign my blog using Bootstrap 3, I thought it would be fun to document my step-by-step progress in a blog post. Or, in other words:
			</p>

			<figure class="text-center">
				<img src="img/yo-dawg-i-heard-you-like-blogs.jpg" class="img-thumbnail" />
			</figure>

			<p>
				So this is the plan, and this also why for some time you should expect discrepancies between blog posts' look & feel and the overall design of the website. as I rewrite the various layouts and includes in Octopress.
			</p>

			<h2>A beginning</h2>
			<p>Anyway. Here we have the minimum core of a proper blog post, and we also started to set it up with Bootstrap 3:</p>
			<ul>
				<li>Up there in the <code>head</code>, Bootstrap from the great guys at NetDNA — hey, thanks again!</li>
				<li>An wide and centered article, slightly narrower at desktop sizes and which is containing the whole post</li>
				<li>A nerd<em>ish</em> title for our post, followed by a publishing date and a pointer to the comments section. All of them packed into a <code>header</code> element.</li>
				<li>An intro with accompanying picture</li>
			</ul>

		</article>
	</div>
</div>

</body>
</html>
  • Up there in the head, Bootstrap from the great guys at NetDNA — hey, thanks again!
  • A wide and centered article, slightly narrower at desktop sizes and which is containing the whole post
  • A nerdish title for our post, followed by a publishing date and a pointer to the comments section. All of them packed into a header element.
  • An intro with accompanying picture

Easier to the eyes

Before proceeding further, let’s adjust the font size for an easier reading. We are all here on a blog, reading a blog post, after all.
I’m going to add some overriding styles using a style element into the head of this document.

<style>
/* Overriding for fun and profit */

body {
  /* 17 is better than 16 is better than 14 */
  font-size: 17px;
}

pre {
  font-size: 16px;
}
</style>

While this is perfect for showing all the code in a single place, for real world scenarios it’s always better to put the stylesheets into separated files and link them back into the document.

A good name for such a file, would certainly be something like bootstrap-override.css.

Highlight my fire

And, since nobody likes code snippets without syntax highlighting, we are now going to add Prism by Lea Verou to our blog post. I’m leaving out line numbers, because I got some problems with vertical alignments.

<!DOCTYPE html>
<html>
<head>
  ...
  <link href="prism.css" rel="stylesheet" />
</head>
<body>
  ...
  <script src="prism.js"></script>
</body>
</html>

Not much pain. We only needed to add the js library and our theme of choice — I chose Twilight — and now we are good to go.

Closing the post

This blogception is coming to an end, so we need to add the closing bits:

<div id="disqus_thread"></div>

<hr />

<footer>
<span class="vcard">
	Posted by <address class="author"><span class="fn">William Ghelfi</span></address> on
	<time datetime="2013-08-11T17:55:00+02:00" class="published">Aug 11th, 2013</time>
</span>
<span class="pull-right">
	<a class="label label-info" href="/blog/categories/bootstrap/">Bootstrap</a>
	<a class="label label-info" href="/blog/categories/css/">CSS</a>
</span>
<hr />
<!-- Insert tweet button here -->
<ul class="pager">
	<li class="previous">
		<a href="/blog/2013/08/04/bootstrap-in-practice-a-landing-page/" title="Previous Post: Bootstrap in Practice: A Landing Page">← Bootstrap in Practice: A Landing Page</a>
	</li>
	<li class="next"><a href="/fakeurl" title="Next Post: Fake Title" >Fake Title →</a></li>
</ul>
</footer>
  • A placeholder for the comments section using Disqus — but I’m not going to show you how to use Disqus
  • Who wrote the post, and when it was published
  • Categories this post is related to
  • A placeholder for the tweet this button — same as for Disqus above
  • A pager pointing to the previous or next post as needed

Final touches

Before saying goodbye, we are going to prettify things a bit.

Stay with me while we add a nicer font for the headings, push the opening date and the link to the commens above the main title, and adjust some margin and padding here and there:

<head>
...
	<link href="//fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css" />
...

	<style>
	
	/* Overriding for fun and profit */

	body {
		/* 17 is better than 16 is better than 14 */
		font-size: 17px;
	}

	pre {
	  font-size: 16px;
	}

	header {
		position: relative;
		margin-bottom: 1.5em;
		padding: 1.8em 0 1em 0;
	}

	header h1 {
		margin: 0;
		padding: 0;
	}

	header .meta {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
		font-size: 0.9em;
		color: #aaa;
	}

	footer {
		font-size: 0.9em;
	}

	h1, h2 {
		font-family: "Fjalla One", Arial, serif;
		font-weight: 400;
		margin-bottom: 1em;
	}

	article h2 {
		padding-top: 0.8em;
	}

	figure {
		margin: 2em 0;
	}

	.author {
		display: inline;
	}
	</style>

</head>

I’m not sure I won’t come back to the code and refine some edgy corners — for instance, I’m not quite happy with the overall vertical rythm — but the final result plays nicely with a Mobile First approach and I hope to have accomplished the mission: showing how to create a clean and readable blog post with Bootstrap 3!


Want to learn more about Bootstrap?
Take a look at these other posts.