See latest changes in changelog.md
Fundamental is a clean, fully responsive, lightweight Jekyll theme for blogging. No frameworks. It uses system fonts, so no external stylesheets are loaded. The CSS is just 2Kb gzipped.
View the demo here.
- Tag support
- Archive support
- Editable color palette via: (
- Automatic header navigation
- Syntax highlighting
- Social Buttons
- Bio Section
- Pagination *new (please rename index.md to index.html, see changelog.md) for more information.
Via Direct Download:
Add this line to your Jekyll site's
And add this line to your Jekyll site's
And then execute:
Or install it yourself as:
$ gem install fundamental
After installing you should have a
config.yml file in your base directory. Copy the contents of the repo config.yml into your own config file. This will supply you with all the required configurations. You can edit them from here.
Jekyll gives you an
index.md file as your homepage. Copy this into it to get started, the front matter will be explained below: !! Something to note, Fundamental does not currently support categories (they're coming!). The default page Jekyll produces will break breadcrumbs (for now).
!! Change the index.md extension to
.htmlto allow pagination to work.
--- layout: home title: Home ---
If you want to add the 'Archive' file you see in the demo. Create an
/archive directory in your base directory. Then create an
index.md inside it. Ensure it has the
layout: site-archive. This layout displays all the posts in the site.
Fundamemtal uses these plugins. When you have installed the Fundamental gem, run
bundle install to install the required plugins. They can be turned on and off in your configuration file.
The top navigation loops through the sites pages that have
menu: true in the front matter. This makes it easy to add new pages to your site. You can also order the pages by setting the value of
order: 2 will place this item second (to the right of the first item).
The homepage is linked in the naviagtion statically by default. It can't be removed.
The usual configuration settings can be found at the top of
You can turn the themes components off and on by setting these to
false. These are fairly self explanatory, the social ones can also be turned on or off independently.
enabled: breadcrumbs: true tags: true # Enable RSS menu item rss: false seo: true # Share buttons are only on desktop (user use the share menu on mobile). social: enabled: true twitter: true facebook: true messenger: true whatsapp: true
You can copy this code into your
enabled can be set to either true or false (as per plugins). You can then edit the fields how you like. The
img_url can be linked to any image, locally or remote,
false === a default icon which inherits the colour from
This appears as a slide out menu from a fixed circular icon in the bottom right corner.
For blog posts use the
post layout (this is already set as default via config file, unless changed.) For normal pages use the
page layout. Naturally, the home layout is used for the home page which is where the post-loop (blog) lives. All of these layouts inherit from the
default layout, which contains the head and footer includes.
The other layouts are for the
├── _layouts │ ├── archive.html │ ├── default.html | ├── home.html │ ├── month.html │ ├── page.html │ ├── post.html | ├── site-archive.html │ └── tag_page.html
The includes are fairly self explanatory aside from info/item.
info.html is the post information include in the
post layout. Item is the blog item that gets outputted on the homepage.
tag-cloud.html is the recurrent tag list you see on the homepage/throughout the sites pages.
There's a few svg includes as well that are just buttons/icons.
├── _includes │ ├── bio.html │ ├── bio.svg │ ├── breadcrumbs.html │ ├── comments.html │ ├── facebook.svg │ ├── footer.html │ ├── head.html │ ├── header.html │ ├── info.html │ ├── item.html │ ├── messenger.svg │ ├── share.html │ ├── tag-cloud.html │ ├── twitter.svg │ └── whatsapp.svg
Sass is split into logical sections. The
main.scss file is in
To overwrite these files, add one with the equivalent name to your
_sass directory (make one if it doesn't already exist). Jekyll will look in here before defaulting back to the theme files.
Sass Folder Structure
├── _sass │ ├── _blog.scss │ ├── _footer.scss │ ├── _fundamentals.scss │ ├── _globals.scss │ ├── _header.scss │ ├── _post.scss │ ├── _syntax.scss │ ├── _tables.scss │ ├── _typography.scss │ └── _variables.scss
The first file to customise would be
_variables.scss, you're probably best copying it from the repo and editing it. You can overwrite any of these variables with your own. There are four palette variables:
$base: #f5f2f2;- the body background colour.
$accent: #4845DF;- the purple colour
$tertiary: lighten($accent, 5%);- lighter version of accent
$font uses a system font stack. Change this to whatever you wish.
$font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
TODO: Separate palette from other variables. For easier custom colours.
Bug reports and pull requests are welcome on GitHub. 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.
The theme is available as open source under the terms of the MIT License.
You can get this 404 page from the repo to use in your site. Just copy it into your main directory.