Synthesis : Scott Becker

Minimalist blog template progression

Ok, I put in a little more work into the new blog template tonight. If you’re just joining, in the last entry I declared my intention to create a new, basic minimalist blog template for this site and live blog it.

So, first I created an empty git repository and added a nearly blank readme file to it and threw it on Github.

Next is the question of how much HTML5-specific tags to use in the markup. I looked at the source of a few of the minimalist templates out there. The source on Mike Bostock’s blog is very HTML5. There is no head or body tags. Just the doctype, followed by a title tag, style and script tags, then right into content with HTML5 tags – header, aside, footer. Alex Payne’s blog has the more traditional head and body tags, various links and meta tags, etc. It doesn’t really seem to matter. Everyone got along fine before HTML5 tags. I guess they have more semantic meaning than plain divs with semantic classes. I found this handy HTML5 Element Flowchart, just in case you need help making these intense tag name decisions.

Then I went back to the Twitter Bootstrap framework, because I like it’s built in responsive design. I started with the appropriately named “starter template“, which still isn’t 100% minimal – it includes the ubiquitous top navigation bar that every lazy developer who uses Twitter Bootstrap fails to modify, so to start I just copied that file to index.html.

Next, since I’m building bootstrap from source (instructions), I compiled it with “make” and copied over the CSS and JS to an “assets” folder in my template project. Next was simply removing the top navigation bar, since I won’t be using that on the blog. Then to make it more blog like, I put in some long form generic lorem ipsum text and headers, and made it more HTML5-y by adding header, article and footer tags. It didn’t seem to make a difference to the look and feel, so why not.

-  <body>
-
-    <div class="container">
+  <body class="container">
 
+    <header>
       <h1>Primary Header</h1>
+    </header>
 
+    <article>

By default, this template resizes as you scale the window up and down, which looks good as it gets smaller, but isn’t very readable for a single column when the screen gets wide. With the chrome inspector pointed at the container element, you can see that depending on the width, different style rules start applying:

  @media (min-width: 1200px)
  @media (max-width: 979px) and (min-width: 768px)
  @media (max-width: 767px)

This is all coming from boostrap-responsive.css. Compiling from source actually turned out to be useful right away, because the LESS templates generate a lot of code for each of those layouts. You could remove them from the generated css file, but it would be a lot more code. With the LESS templates, you can comment out the wide layout in one line, and modify another and have it stop expanding beyond 768px wide:

diff --git a/less/responsive-768px-979px.less b/less/responsive-768px-979px.less
index 76f4f6d..7fa6dd0 100644
--- a/less/responsive-768px-979px.less
+++ b/less/responsive-768px-979px.less
 
-@media (min-width: 768px) and (max-width: 979px) {
+@media (min-width: 768px) {
 
diff --git a/less/responsive.less b/less/responsive.less
index 734b198..e8476ea 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -38,7 +38,7 @@
 @import "responsive-768px-979px.less";
 
 // Large desktops
-@import "responsive-1200px-min.less";
+// @import "responsive-1200px-min.less";

So far it looks like this. Yes, mind blowing. It’s a good start though.

 

Leave a Reply