title |
---|
jekyll-bulma-feather |
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.
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.
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
Add this line to your site's _config.yml
:
remote_theme: YellowApple/jekyll-bulma-feather
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).
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).
You can use a Feather icon by name, like so:
{% raw %}{% include feather.html icon="github" %}{% endraw %}
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;
}
}
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).