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.scssto your Jekyll directory, as described in Using Custom SCSS - Add
@import "typography";after@import "{{ site.theme }}";to the_assets/main.scssin your Jekyll directory - Copy
_sass/typography.scssfrom this repository to the same path in your Jekyll directory, and edit the font styles. (If you want to remove a style intypography.scssto set it to the CSS default, do not delete it, instead, useunsetlikefont-size: unset;. This is because the originaltypography.scssis still also loaded, and the_sass/typography.scssin your Jekyll directory is then applied on top.) - Copy
_includes/head.htmlfrom this repository to the same path in your Jekyll directory, and change the Google fontlinktag to reference the new fonts
Using a Header Image
-
Copy
_includes/header.htmlfrom this repository to the same path in your Jekyll directory. -
In the
header.htmlin your Jekyll diectory, replace the contents of theheader role="banner" > H1 > awith animg:<header role="banner"> <h1> <a href="{{ "/" | relative_url }}"><img height="176px" src="/assets/repla.svg" alt="Repla"></a> </h1> -
Add an
assets/main.scssto 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.
