-.- --. .-. --..

Jekyll, Responsified

13 Sep 2013

I sort of like the default Jekyll theme. My only peeve is that it isn’t responsive. So, today, I modified the theme and gave it a responsive twist. The css source is available at: https://gist.github.com/6551567

This website uses the same css. I’ve extracted the portions of this page’s css that are common to the default Jekyll installation’s css file. The class names in the main.css file of the default installation are not modified and so, you can replace the default css with the one linked above and it will work right away.


What’s Different?

The previous version had fonts from Google Web Fonts. I’ve migrated the webfont stack to TypeKit which offers the Adelle and Calluna free fonts.

  • Adelle Extra Bold is used for the headings (800 weight).
  • Calluna Light for the body copy

The setting up of the stack is not quite as easy as that with Google Web Fonts but the instructions on Typekit are pretty useful.


Once you create a new Jekyll website, replace the main.css file with the one at the link above. Alternatively, use git:

Installation via Git

  • Clone the repo at the gist link to your jekyll installation’s css folder(note the .git at the end). This command will save the file to the css/6551567 directory.
# In the root of the Jekyll installation

cd css
git clone https://gist.github.com/6551567.git
  • In your _layout/default.html modify the link to main.css to point to the cloned file:
<link rel='stylesheet' href='/css/655156/main.css'/>
  • To enable the fonts used by the stylesheet, add this line to the _layout/default.html template:
<link href='http://fonts.googleapis.com/css?family=Cabin:700,700italic|Droid+Serif:400,400italic|Inconsolata:400,700' rel='stylesheet' type='text/css'>

What’s different?

Apart from the obivious addition of media queries, the fonts have been changed. The default Jekyll installation comes shipped with a sans-serif stack. This has been changed to a serif stack of Droid Serif and Georgia as the fallback font. The headings use Cabin with Verdana as the fallback option.