• Stars
    star
    131
  • Rank 275,867 (Top 6 %)
  • Language SCSS
  • License
    MIT License
  • Created over 8 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🥁 A really basic theme for Jekyll

Garth

Gem Version

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

Screenshot

Contents

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:
    Deploy to Netlify
  • Stackbit starter kit:
    Create with Stackbit
  • 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

More Repositories

1

alembic

⚗️ A Jekyll boilerplate theme designed to be a starting point for any Jekyll website
SCSS
752
star
2

mac-cursors

✛ All cursor icons from OS X, in SVG format
Nunjucks
369
star
3

component-template

Template for kicking off a new Web Component
HTML
125
star
4

netlify-plugin-ghost-markdown

Returns Ghost content as markdown files for static site generators like Jekyll to consume.
JavaScript
67
star
5

link-peek

A Web Component to unfurl regular links into rich previews
HTML
47
star
6

eleventy-plugin-unfurl

Unfurl links into rich cards, as seen in places like Slack and Twitter
JavaScript
45
star
7

play-button

A Web Component to play audio or video with a button
HTML
37
star
8

mastodon-post

A Web Component to display Mastodon posts and their metadata
HTML
32
star
9

share-button

A Web Component to share web pages using the native OS sharing options
HTML
31
star
10

code-pen

A Web Component to open code samples in CodePen
HTML
31
star
11

jekyll-search-js

🔍 Search through your jekyll pages, posts, or any collection the ES6 way
JavaScript
28
star
12

storage-form

A Web Component that allows you to submit data to local storage
HTML
27
star
13

heading-anchors

A Web Component to add anchor links to headings with IDs
HTML
26
star
14

inline-email-form

📫 An inline email dialog, inspired by @MrMarkCollins and designed by @mr-stezz
HTML
25
star
15

eleventy-plugin-ghost

Access the Ghost API in Eleventy 👻🎈
JavaScript
20
star
16

daviddarnes.github.io

🌐 My site for showing experiments, tools and other projects
CSS
16
star
17

live-filter

A Web Component for filtering items using a text input
HTML
13
star
18

alembic-netlifycms-kit

⚗️💠 Starter kit for Alembic with Netlify CMS, hosted on Netlify
HTML
12
star
19

sample-input

A Web Component to sample audio or video added to an upload input
HTML
12
star
20

alembic-kit

⚗️📦 Starter kit for Alembic, hosted on GitHub Pages, Netlify or anywhere you like
Ruby
11
star
21

ticket

⚓️ A cute little theme for Anchor CMS
PHP
11
star
22

is-playing

A Web Component to indicate when an audio, or video, element is playing
HTML
10
star
23

duration-property

A Web Component to surface an audio or video's duration as a CSS Custom Property
HTML
9
star
24

repo-listing-demo

⚙ A demo showing the usage of GitHub Pages to list public repos, to coincide with my tuts+ tutorial
CSS
8
star
25

contrast-details

A Web Component to display the contrast ratio and level of two colours using CSS custom properties
HTML
8
star
26

css-buttons

💡 Literally CSS buttons
CSS
6
star
27

plain

⚓️ Plain: An Anchor CMS theme by Chris Veto
PHP
5
star
28

flynn

📈 Flynn is a CSS grid I use for personal projects
CSS
5
star
29

random-source

A Web Component to randomly change audio or video sources
JavaScript
5
star
30

gatsby-starter-ghost-blog

Gatsby starter for creating a Ghost powered blog
JavaScript
4
star
31

anchorthemes.com

⚓️ Source repo for Anchor Themes and Anchor Showcase
Nunjucks
4
star
32

awetheme

⚓️ Awetheme: An Anchor CMS theme by @CosminNegoita
PHP
3
star
33

garth-kit

🥁📦 Starter kit for Garth, hosted on GitHub Pages, Netlify or anywhere you like
Ruby
3
star
34

mic-drop

✋🎤 Dropping the mic on Netlify Drop
HTML
2
star
35

greaves

⚓️ Greaves: An Anchor CMS theme by Russell Jones
CSS
2
star
36

prototype

⚓️ Prototype: An Anchor CMS theme by @CosminNegoita
PHP
2
star
37

sando

⚓️ Sando: An Anchor CMS theme by @CosminNegoita
PHP
2
star
38

alembic-stackbit-kit

⚗️🚀 Starter kit for Alembic on Stackbit
Ruby
2
star
39

cleat

⚓️ A light and pure theme thats simple at heart
CSS
1
star
40

garth-stackbit-kit

🥁🚀 Starter kit for Garth on Stackbit
Ruby
1
star
41

svg-sprite-demo

⚙ A demo showing the usage of SVG sprites, to coincide with my tuts+ tutorial
HTML
1
star
42

alembic-forestry-kit

⚗️🌲 Starter kit for Alembic with Forestry
Ruby
1
star
43

dropinblog-beanthere-site

Demonstration of switching from DropInBlog embed code to a fully fledged blog site, using Eleventy to generate the blog and blog pages
HTML
1
star