What?

It’s a barebones Jekyll theme that includes Bulma and Feather, with some default layouts and a few SCSS tweaks to provide a half-decent batteries-included experience.

Why?

I originally created this for the website of one of my projects, and decided it looks nice enough that I might as well make it reusable so I could use it for other things, too.

How?

Install it

Normal Jekyll

Add this line to your Jekyll site’s Gemfile:

gem "jekyll-bulma-feather"

And add this line to your Jekyll site’s _config.yml:

theme: jekyll-bulma-feather

And then execute:

$ bundle

Or install it yourself as:

$ gem install jekyll-bulma-feather

GitHub Pages

Add this line to your site’s _config.yml:

remote_theme: YellowApple/jekyll-bulma-feather

Use it

This theme’s already pretty batteries-included with some sensible-ish defaults.

You might want to consider some customizations, in which case you can define your own assets/style.scss with the following:

---
# frontmatter is required
---

// If you want to override any Bulma variables, do it here.

@import "jekyll-bulma-feather";

// Start full-blown customizing here.

If you want a clean slate, you can do @import "bulma" instead. You’ll likely want to define your own _layouts/default.html if you do so (since it relies heavily on the theme’s “batteries-included” tweaks).

Navbar

The default templates include a nav bar that you can configure in your _config.yml:

navbar:
    title: Blog
    logo: /my-logo.svg
    start:
        -   title: Home
            url: /
            icon: home
    end:
        -   title: GitHub
            url: https://github.com
            icon: github

site.navbar.title and site.navbar.logo both fall back to site.title and site.logo, respectively (that way, if your site’s own title/logo ain’t well-suited for use in the nav bar, you can freely override them).

Feather icons

You can use a Feather icon by name, like so:

{% include feather.html icon="github" %}

The default Feather styling is through the .feather-icon class, which you can modify in your site’s SCSS files as needed (e.g. to make it bigger or smaller than 1em for different text sizes, or to re-include this outright if you went with the clean-slate Bulma approach per above).

.feather-icon {
    @extend .icon;
    margin-right: 0 !important;

    >svg {
        width: 1em;
        height: 1em;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }
}

Who?

See the included COPYING.md file for details (or if you’re viewing this README as a Jekyll site, click the “License” link in the navbar above).