DEV Community

Cover image for Watery: A New Theme
Brennan K. Brown
Brennan K. Brown

Posted on

Watery: A New Theme

After my last post on Jekyll, I decided I wanted to contribute something myself to the community! So, without further ado, here is my announcement of the Watery theme!

Watery is a minimalist, bare-bones theme for the popular JAMstack file-based CMS Jekyll that only uses the <80kb Water.css framework (hence the name!), while still following the best practices possible for accessibility and search-engine optimization.

I created this because I wasn't able to find an up-to-date starter/skeleton theme for Jekyll. Even the default theme, Minima, uses the large Bootstrap framework.

What's the big deal, you might ask? As of November 1st, 2020, with >70 posts on Watery, the website scores a perfect 100/100 in Performance, Accessibility, Best Practices, and SEO on an audit with Google Lighthouse.

With so many tools available for web devs, it's easy to create something beautiful, but increasingly it becomes difficult to build something that's lean and efficient, losing sight of the computer science behind everything.

This project is aimed towards those curious about using Jekyll for the first time, and want to build from as close to scratch as possible. Alternatively, it still has all the features required for creating a hassle-free, informational website or blog in just a few clicks.

CODE / DEMO

Screenshot

Watery Screen Shot

Features

Despite Watery's minimalist nature, there are a few interesting features that have been added:

  • A fully customizable and empty _BLANK_config.yml to make getting up-and-running easy.
  • Having a _pages collection for easier organization.
  • Auto-generated links to newly created pages in the navigation.
  • An author bio at the end of each post. (Located in _inclues/author.html)
  • Full Rouge support for syntax highlighting. (Currently using base16.solarized.light)
  • Auto-generated RSS feed, sitemap, accessibility features, and search-engine optimization.

Getting Started

Once you have Jekyll up-and-running ( quick start guide ), there are only a few steps needed to make this theme your own:

  1. Fill out the _BLANK_config.yml configuration file and replace the current _config.yml
  2. Remove the example_posts folder in _posts and start writing your own!
  3. Modify or remove the pages in _pages to however you see fit.
  4. (Optional) Modify or remove this README.md with information about your own project or blog.
  5. (Optional) Modify the CSS files in the assets folder to customize the site.

Roadmap

There are several features that I'm still planning to create and integrate, including:

  • Create a Theme Gem
  • Add easy and automatic buttons to "Deploy to Neflify", Heroku, etc.
  • Add Travis continious integration checks
  • Add additional documentation for creating custom collections and auto generated pages

Resources

While creating this theme, I came across a lot of helpful and hard-to-find resources. If you'd like to dive deeper into Jekyll, check them out:

Other Resources

Credit

Water.css was created by Kognise.


If you ever wanted to try Jekyll, but didn't know where to start, please feel free to fork my repository and start something new! Who knows where it will lead.

This is just a small start, I know. After this, I'm planning to create a more feature-rich, dynamic theme with a framework such as Pure.css or Milligram, and aim for a perfect Lighthouse score again. ;)

Top comments (3)

Collapse
 
renegadecoder94 profile image
Jeremy Grifski

How can I use this with GitHub pages? I'd love for something a bit nicer than what I'm using now for this: sample-programs.therenegadecoder.com/

Collapse
 
brennan profile image
Brennan K. Brown

Hey Jeremy, that's a great question. This is a really large (and awesome!) project. My answer is a little complicated:

I downloaded it and played with it a little, and noticed that if you replace your SCSS file in the head with the water.css framework, this is what the site looks like: i.postimg.cc/131Qt91H/Screen-Shot-...

Obviously there'd be a lot of work that would need to be done, but it does essentially reset a lot. There's also a lot of other frameworks you could use: github.com/troxler/awesome-css-fra...

However, this is kind of hacky, since it's overriding everything that's already implemented with the Cayman theme you're using.

I'd usually just recommend changing theme: jekyll-theme-caymanin your _config.yml file to another theme you like more, or null if you wanted to build something from scratch. However, it seems that the site's architecture relies on the Cayman theme, and removing/changing it would cause a lot of manual work.

Collapse
 
renegadecoder94 profile image
Jeremy Grifski

True! There is an existing structure there already. That said, I designed it all, and I have very little experience with Jekyll and web dev in general. I wouldn't be opposed to starting from scratch. Looks like I might need to get things setup locally, so I can preview everything tho...