Cyclist Jekyll

<img src=“cyclist-background.svg” width=“200” height=“200” alt=“Cyclist”>

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.

Customizing Styles

Add a assets/main.scss to your Jekyll directory:

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

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

// Your SCSS rules here

Fonts

  1. Add a assets/main.scss to your Jekyll directory, as in Customizing Styles

  2. Add @import "typography"; after @import "{{ site.theme }}"; to the _assets/main.scss in your Jekyll directory

  3. Copy the file _sass/typography.scss 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.)

  4. Copy the _includes/head.html to the same path in your Jekyll directory, and change the Google font link tag to reference the new fonts

Header Image

Using a custom header image:

h1 {
  display: none;
}

@import "typography"

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;
}

Cyclist

To show the Cyclist 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}[_layouts/default.html]:

    <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:

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.