daviddarnes / garth

🥁 A really basic theme for Jekyll

Garth

🥁 A really basic theme for Jekyll, using the official Jekyll theme implementation.

Contents

• Installation
• Customising
• Site settings
• Page layouts
• Credits

Installation

Quick setup

To give you a running start I've put together some starter kits that you can download, fork or even deploy immediately:

• Vanilla Jekyll starter kit:
  
• Stackbit starter kit:
  
• GitHub Pages with remote theme kit - Download kit

As a Jekyll theme

1. Add gem "garth-jekyll-theme" to your Gemfile to add the theme as a dependancy
2. Run the command bundle install in the root of project to install the theme and its dependancies
3. Add theme: garth-jekyll-theme to your _config.yml file to set the site theme
4. Run bundle exec jekyll serve to build and serve your site
5. Done! Use the example _config.yml file to set site-wide options

As a GitHub Pages remote theme

1. Add gem "jekyll-remote-theme" to your Gemfile to add the theme as a dependancy
2. Run the command bundle install in the root of project to install the jekyll remote theme gem as a dependancy
3. Add jekyll-remote-theme to the list of plugins in your _config.yml file
4. Add remote_theme: daviddarnes/garth to your _config.yml file to set the site theme
5. Run bundle exec jekyll serve to build and serve your site
6. Done! Use the example _config.yml file to set site-wide options

As a Boilerplate / Fork

(deprecated, not recommended)

1. Fork the repo
2. Replace the Gemfile with one stating all the gems used in your project
3. Delete the following unnecessary files/folders: CODE_OF_CONDUCT.md, CONTRIBUTING.md, LICENSE, screenshot.png, CNAME and garth-jekyll-theme.gemspec
4. Run the command bundle install in the root of project to install the jekyll remote theme gem as a dependancy
5. Run bundle exec jekyll serve to build and serve your site
6. Done! Use the example _config.yml file to set site-wide options

Customising

When using Garth as a theme means you can take advantage of the file overriding method. This allows you to overwrite any file in this theme with your own custom file, by matching the file name and path. The most common example of this would be if you want to add your own styles or change the core style settings.

To add your own styles copy the styles.scss into your own project with the same file path (assets/styles.scss). From there you can add your own styles, you can even optionally ignore the theme styles by removing the @import "garth"; line.

If you're looking to set your own colours copy the _colors.scss and main theme styles file garth.scss into your project at the same file path (_sass/) and change variables however you wish. The settings are a mixture of custom variables and settings from Sassline - follow the link to find out how to configure the typographic settings.

Site settings

You'll need to change the description, title and url to match with the project.

Page layouts

There are 3 layouts; page, post and home (home acts as the font page blog).

Note: The Post List Page options are actually in the collection data within the _config.yml file, this is so they can be edited with CMSs such as Siteleaf

Credits

• Thanks to Sassline for the typographic basis, by Jake Giltsoff
• Thanks to Flexbox mixin by Brian Franco
• Thanks to Normalize by Nicolas Gallagher and Jonathan Neal.
• Thanks to pygments-css for the autumn syntax highlighting, by Rich Leland

garth's Issues

Better CSS file structure

Similar to Alembic, Garth needs to be easy to style. The best way would be to have the following file structure:

_sass/
  sassline-base/
  _flex.scss
  _normalize.scss
  _sassline-base.scss
  _settings.scss
  _theme.scss
  _garth.scss
assets/
  styles.scss

garth.scss will import all the theme related styles, including _theme.scss. Then in turn assets/styles.scss will import garth. This means all theme related styles are in one place and the theme user only has to import one file if they wish to add their own custom styles.

Remove demo code

The demo/ directory is no longer needed as people can use the jekyll-remote-theme gem instead of forking this repo to get this design running on GitHub Pages

Testimonial Submissions

Howdy all!
I'm looking for people using Garth to submit testimonials about their experiences of it. How are you using it? What are you liking about it? What's your favourite feature?

Let me know your thoughts and I might quote you in the README or on my personal site (as long as you're comfortable with me doing so)

Party on people!

Your theme is listed in jekyllthemes.ru

Your theme has been listed on http://jekyllthemes.ru/

Test fonts and weights

Need to make sure that the correct weights and variations are being loaded from Google Fonts. Appears to be working now but it'll be best to get the weights used loaded in

Allow use of baseurl

Currently the urls in the template don't account for a baseurl, which should prefix them

Cannot customize colors

I tried to follow the README's instructions:

If you're just looking to set your own colours copy the _colors.scss file into your project at the same file path (_sass/_settings.scss) and change variables however you wish.

Except I used the tagged version of _colors.scss that matched the version of the gem I installed: https://raw.githubusercontent.com/daviddarnes/garth/1.0.2/_sass/_colors.scss and I called it _sass/_colors.scss (Typo in README?)

I still see the Yellow background and garth's original colors.

Here is more info about my environment and a sample repo

ruby 2.4.4p296 (2018-03-28 revision 63013) [x86_64-darwin17]
jekyll-3.7.3
garth-jekyll-theme-1.0.2

Give a default footer

It says the date but no name, a default name would be helpful

Can't use theme

Jekyll 3.2.0, ubuntu 16.04.1. I can't follow your instructions. First 3 steps are okay, but then there is no css/styles.scss file in css directory, only main.scss. Also there is no js/ directory at all. If I create these files, then I get bare site without theme. jekyll s --watch complains:

[2016-07-31 16:35:30] ERROR `/css/theme' not found.
[2016-07-31 16:35:33] ERROR `/css/theme' not found.
[2016-07-31 16:35:36] ERROR `/css/theme' not found.

"kicking the tires" issues

Hi David,
When I follow your instructions I get jekyll 3.2.0.pre.beta1 | Error: The garth-jekyll-theme theme could not be found. so I added the following to the Gemfile

gem "jekyll", "3.2.0.pre.beta1"
group :jekyll_plugins do
  gem "garth-jekyll-theme"
  gem "jekyll-seo-tag"
  gem "jekyll-paginate"
end

and ran that. I'm still getting the default theme even though I see that your js and css files are being generated.

If I delete my _layouts folder, I get what appears to be your theme, but it's pretty funky.

I did this on two separate installs.

Navigation missing

There's no navigation when you install the theme out of the box, the nav should loop through pages and have an option for a custom nav.

Account for multiple categories

Currently posts can only have one category, however in most cases people want to be able to put multiple categories

garth/_includes/post-meta.html

Line 2 in b8f1295

{% if page.category %}<span class="label label--category">{{ page.category }}</span>&nbsp;&nbsp;&middot;&nbsp;&nbsp;{% endif %}<time datetime="{{ page.date | date_to_xmlschema }}" class="time">{{ page.date | date_to_string }}</time>

This example code in Alembic should cater for that https://github.com/daviddarnes/alembic/blob/master/_includes/post-meta.html

Remove unnecessary title and alt attributes

Anchor elements don't need titles if they contain text or images with alt text.

Provide a example site for reference

Like this one https://github.com/jekyll/minima/tree/master/example

Add support for separate favicons

Currently, the shortcut-icon property is mapped to {{ site.logo }}, but when said file is an svg, it won't be rendered by most browsers (save Firefox and Safari). For browsers that don't support non-raster favicons, maybe it'd be good to create a separate {{ site.favicon }}?