Flow
is a simple and elegant SPA-inspired Jekyll theme for your client or portfolio. This mobile-friendly design features snap scrolling, lazy loading capability, and more.
-
Download theme scaffold
-
Customize
_config.yml
-
Upload to GitHub (or build locally)
-
Go to your repository settings tab and enable GitHub Pages via Actions
-
Go to your repository actions tab and trigger the workflow to generate your website
-
Use Bundler
-
Create a Gemfile and paste this
source "https://rubygems.org" gem "jam-flow", tag: 'flow-v0.0.0', github: 'benjammin4dayz/jekyll-themes'
-
Then get the template
$ bundle install $ bundle exec flow go
-
-
Use specific_install if you're too lazy to add a Gemfile
$ gem install specific_install $ gem specific_install -l 'https://github.com/benjammin4dayz/jekyll-themes.git' -t 'flow-v0.0.0'
-
Generate and download your favicon using your preferred method
- I suggest favicon.ico by John Sorrentino
-
Extract your favicon files in
assets/favicon/
- _articles/ - _includes/ - assets/ - js/ - favicon/ - android-chrome-192x192.png - android-chrome-512x512.png - apple-touch-icon.png - favicon.ico - favicon-16x16.png - favicon-32x32.png - site.webmanifest
Specify a URL or replace the local portrait found at ./assets/portrait.jpg
# _config.yml
client:
portrait_url: https://example.com/my-photo # Leave blank to use local portrait
Under the social
namespace, declare each platform
with its name, and then specify your handle
. Buttons appear in the order that platforms are listed here.
# _config.yml
social:
- platform: Facebook
handle: JohnD
Create n-article.html
in the _articles
folder, where n
is the order in which it should appear.
- To include something in the document head, use
_includes/head.html
---
title: Page One
anchor: page-one
---
<section id="example-article">
<header>
<h1>This is a page</h1>
</header>
<p>Copy me to create new scrollable pages</p>
</section>
Create the HTML document in your project root with the following front matter:
- To include something in the document head, use
_includes/custom-head.html
---
title: My Custom Page
description: Hello, search engine robots!
layout: custom
---
Note: don't worry about <!DOCTYPE>
, <head>
, or <body>
tags- they are handled for you.
const whenThisElementIsObserved = 'my-element-id';
const forThisAmountOfTime = 100; // ms
const thisHappensAsAResult = () => console.log('Hello, world!');
// Post 'Hello, world' to the console when 'my-element-id' is observed for 100ms
FlowTheme.lazy(
whenThisElementIsObserved,
forThisAmountOfTime,
thisHappensAsAResult
);
const YouTube = new FlowTheme.EmbedHelper.YouTube(
'your-channel-id',
'embed-target-id'
);
YouTube.fetchVideoData().then((data) => {
const { mostRecentVideo, list } = data;
mostRecentVideo.embed();
list[i].embed();
});
Not implemented yet :(
Please share any bugs that you encounter on GitHub or contact me on Discord @benjammin4dayz
This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
Clone the repo
$ git clone https://github.com/benjammin4dayz/jekyll-themes.git
$ git checkout flow-src
Get the distributables and navigate to the output directory
$ .\dist
$ cd jam-flow
Modify the Gemfile to point flow
to the gem development path instead of the repo
gem "jam-flow", path: '../'
Call bundler exec jekyll serve
using the serve.rb
alias
$ .\serve
When the theme is built, only the files specified in spec.files
will be bundled.
To add a custom directory to the theme-gem, please edit the regexp in flow.gemspec
accordingly.
The theme is available as open source under the terms of the MIT License.