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.
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
assets/main.scss
to your Jekyll directory, as described in Using Custom SCSS@import "typography";
after @import "{{ site.theme }}";
to the _assets/main.scss
in your Jekyll directory_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.)_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 fontsCopy _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;
}
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.
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">
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
The theme is available as open source under the terms of the MIT License.