Elementary is a zero Javascript and minimal CSS ultra lightweight Jekyll theme for those of you who love simplicity, yet don't want to compromise on mobile responsiveness, readability and asthetics. Elementary is mobile first, content first and is aimed towards content heavy blogs.
The theme is highly customizable, takes less than 100 miliseconds to load, weighs less than 10K gzip'd and looks great on mobile. As vanilla as a website can get, this theme reminds the visitor of the pre 2000s era Internet, yet is backed by the modern CSS flexbox layout and has a sticky footer made with the same.
Find it here: https://elementary-jekyll.github.io/
- Ultra lightweight, ~6-9KB gzip'd, load times consistently less than 100 milliseconds (as tested on my personal blog with Cloudflare)
- Mobile responsive, high accessibility
- No JS required, makes use of HTML5 and CSS3 semantics
- Theme itself makes a single http request
- Content focussed, great for text heavy personal blogs with focus on blog material
- Homepage is the archive page
- Sticky footer (is it 2018 yet? ;)
- If this is your first Jekyll blog, follow this helpful guide to set up Jekyll
- Fork this repository, rename the fork as
your-username.github.io
. Your blog should immediately be live onhttps://your-username.github.io
- Clone your fork
- Delete everything in
_posts
directory. Delete thetmp
directory - Open
_config.yml
and set the variables - Run
jekyll serve
and your blog should be live onhttp://localhost:4000
. Make changes, test them locally, commit your changes and push to your fork. Your changes should be live in a couple of seconds
_config.yml
Config variables_/layouts/default.html
Default page with head and footer section_/layout/post.html
Page forlayout: post
, inheritsdefault
_/layout/page.html
Page forlayout: page
, inheritsdefault
- Eric S Raymond (http://www.catb.org/~esr/hacker-emblem/glider.png) for the favicon
I recently read in a blog post that a personal blog has to be fast and lean. There's no reason for a personal blog to be bloated and take 2 seconds to load. That was when I reviewed my own blog code and started analyzing. I discovered that I was loading jQuery just for another jQuery plugin which just helped the images and videos to be mobile responsive. That was some 40KB of overhead, 2 additional requests which could have been prevented with just a `max-width: 100%` attribute to the culprit elements. Similarly, there was Disqus which loaded tonnes of scripts along with its own Google Analytics script.
I went on stripping weight from the code, and was left with something what you see here. Few extra CSS tweaks and Tadaa!
GNU GENERAL PUBLIC LICENSE Version 3