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¶ ↑
-
Add a
assets/main.scss
to your Jekyll directory, as in Customizing Styles -
Add
@import "typography";
after@import "{{ site.theme }}";
to the_assets/main.scss
in your Jekyll directory -
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 intypography.scss
to set it to the CSS default, do not delete it, instead, useunset
likefont-size: unset;
. This is because the originaltypography.scss
is still also loaded, and the_sass/typography.scss
in your Jekyll directory is then applied on top.) -
Copy the
_includes/head.html
to the same path in your Jekyll directory, and change the Google fontlink
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.