Cyclist Jekyll

Cyclist Jekyll is a Jekyll theme. It uses Cyclist Grid to construct a layout using typographic grid.

The typefaces are Playfair Display for headers, Crimson for body copy, Lato for block quotes, and Fira Mono for code. All of them are free software under the SIL Open Font License. Thank you for everyone's hard work on free typography.

Customization

Using Custom SCSS

Add a assets/main.scss to your Jekyll directory with the following contents:

$font-size: 15px;
$line-height: 22px;

@import "{{ site.theme }}";

// Your SCSS rules here

Using a Custom Font

Add an assets/main.scss to your Jekyll directory, as described in Using Custom SCSS
Add @import "typography"; after @import "{{ site.theme }}"; to the _assets/main.scss in your Jekyll directory
Copy _sass/typography.scss from this repository to the same path in your Jekyll directory, and edit the font styles. (If you want to remove a style in typography.scss to set it to the CSS default, do not delete it, instead, use unset like font-size: unset;. This is because the original typography.scss is still also loaded, and the _sass/typography.scss in your Jekyll directory is then applied on top.)
Copy _includes/head.html from this repository to the same path in your Jekyll directory, and change the Google font link tag to reference the new fonts

Using a Header Image

Copy _includes/header.html from this repository to the same path in your Jekyll directory.

In the header.html in your Jekyll diectory, replace the contents of the header role="banner" > H1 > a with an img:

 <header role="banner">
   <h1>
     <a href="{{ "/" | relative_url }}"><img height="176px" src="/assets/repla.svg" alt="Repla"></a>
   </h1>

Add an assets/main.scss to your Jekyll directory, as described in Using Custom SCSS, and add the following styles:

 header[role="banner"] img {
   display: block;
 }

 header[role="banner"] h1 a {
   display: inline-block;
   line-height: normal;
 }

 header[role="banner"] h1 {
   line-height: 0;
   margin-bottom: $line-height;
 }

Social Links

To add social links to the footer for each page, add a collection to the _config.yml:

cyclist_jekyll:
    social_links:
        twitter: robenkleene
        github:  robenkleene

Review the social.html source to see the full list of supported social sites.

Cyclist Grid

To show the grid, import the cyclist-grid.js JavaScript in the HTML <head> element:

<script src="/vendor/cyclist-grid/dist/js/cyclist-grid.js"></script>

Add the following classes to the <body> and grid <div> elements:

<body class="cyclist-show-baseline">
  <div id="grid" class="cyclist-show-guidelines">

Installation

Add this line to your Jekyll site's Gemfile:

gem "cyclist"

And add this line to your Jekyll site's _config.yml: yaml theme: cyclist

And then execute:

$ bundle

Or install it yourself as:

$ gem install cyclist

License

The theme is available as open source under the terms of the MIT License.

cyclist

Runtime