How I used collections with Jekyll to build a style guide and pattern library for Made Mistakes.
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
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.
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
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.
Grunt is no longer needed to build
main.css. I’ve ported all of the Less stylesheets over to Sass to utilize Jekyll’s built-in support for preprocessing .scss files. Updating most colors and fonts is as easy as changing a few values in
_sass/_variables.scss and running
jekyll build (or deploying to GitHub if you host there).
share: false to the post’s YAML Front Matter.
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.
This theme is free and open source software, distributed under the MIT License. So feel free to modify it however you’d like without linking back to me or including a disclaimer.
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. ↩
On mobile I choose to remove the fixed positioning to keep the menu from interfering with the main content. ↩