HPSTR, a Jekyll Theme

HPSTR, a Jekyll Theme

They say three times the charm, so here is another free Jekyll blog theme for you. I’ve learned a ton since open sourcing my first two themes on Github, and wanted to try a few new things this time around. If you’ve used my previous themes most of this should be familiar territory…

Features

  • Responsive layouts. Looks good on mobile, tablets, and desktop devices.
  • Full compatibility with GitHub Pages.
  • Modern and minimal design with a focus on clean typography.
  • Support for large images to call out your favorite posts.
  • Optional Disqus comments.
  • Support for Open Graph and Twitter Cards.
  • Simple custom 404 page to get you started.
  • Support for Pygments and Coderay syntax highlighting to make your code examples look snazzy.
  • Grunt and Rake tasks for easier site development.
Screenshot of HPSTR Theme

What’s Different with this Jekyll Theme?

This time around I wanted to see how much of the “branding”1 I could remove and deemphasize to make the content sing in contrast. The primary way I went about doing this was by down playing anything that wasn’t part of a post or page’s content. Collapsing the blog’s navigation behind a drop down was one way I slimmed the header, to get at the content quicker.

On desktops and tablets (horizontal orientation) the menu is placed in the top left corner with position: fixed2 to remain in view as the page is scrolled. Mild CSS3 animations and transforms were utilized to progressively enhance the drop down menu for browsers that support these properties, and gracefully degrades on those that do not. The menu is also completely usable when JavaScript is disabled.

Everything that isn’t #main I view as support content— living one step down from a post or page in the overall hierarchy. In the case of author bylines, post dates, and social sharing links, I used a light gray color to push these elements back, and pull the main content forward. Related posts and comments are sectioned off just enough from the main to keep them connected but visually separated.

Grunt Build Script for Development

Up until this point I’ve mostly used tools like CodeKit and Prepros to compile my LESS stylesheets and concatenate scripts. Flirting with Grunt on a few personal projects, I wanted to integrate it into this theme as a build tool for messing with the theme’s stylesheets.

For those who are unfamiliar with Grunt I encourage you to check out the getting started guide. Basically how this works is, you install Node.js, install Grunt and dependencies by running npm install, and then run various Grunt tasks defined in the project’s Gruntfile.js file.

Currently there are two Grunt tasks: one to build and optimize and the other to watch for changes to any LESS and JavaScript files. For now you need to run grunt to rebuild the CSS, concatenate JavaScript files, and optimize .jpg, .png, and .svg files in the images/ folder. And then run jekyll build to pull these changes in when developing locally.

There are some Jekyll Grunt plugins to help make things work more seamless, but I avoided them to keep the theme compatible with GitHub Pages. While not a perfect solution you can run grunt watch in combination with jekyll build --watch to watch for LESS and JS file updates to be processed by Grunt and auto-generated by Jekyll.

Instead of using bulky JavaScript widgets provided by Facebook, Twitter, and Google I went with lightweight share links. Social sharing links are disabled by default and must be turned on at the post or page level by adding share: true to the YAML front matter.

social share button screenshot
How social sharing buttons look in HPSTR

Questions?

Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter @mmistakes or file a GitHub issue. And if you make something cool with this theme feel free to let me know.


License

This theme is free and open source software, distributed under the GNU General Public License. So feel free to use it on your site without linking back to me or including a disclaimer.

  1. To me a blog’s masthead, logo, title, headline, and navigation are branding elements that can reinforce or distract from a central theme or feeling. I suppose downplaying or removing these elements could be see as a way of branding too… but that’s a discussion for another day.

  2. On mobile I choose to remove the fixed positioning to keep the menu from interfering with the main content.