Photo by Alexander London on Unsplash

Looking Phugly, feeling Stylus

The Kettlefish project is something that arose from restructuring the Langenium project from being a Node.js server to a static HTML site built for Github Pages. At that time in 2015, I had no income and faced the prospect of having no ability to regularly look after the EC2 VPS even if I could afford it. Github Pages offers high performance free hosting for static websites so it seemed like a good fit.

Five years on, it was one of the best decisions I could’ve made for my studio. Kettlefish is at the core of my entire web domain, allowing me to have high speed websites that are easy to build and hosted for free. The repository on it’s own is designed to be a starter kit for a static HTML website, shipping with a basic Node script for generating the site.

This Stylus file is compiled to CSS

The following frameworks are considered key to the Kettlefish stack:

  • Semantic UI (now Fomantic UI) as the main CSS framework
    When combined with Pug, the semantic languages power truly shines — allowing a definition first approach to HTML scaffoldin.
  • Pug for HTML templates
    An indendation based templating language that makes maintaining and even initial development easier, especially handy as your website template gets more complex.
  • Rollup for JS compilation
  • Stylus for CSS templates

Back when Ruby on Rails was in it’s hey day, a lot of people were using HAML and SASS together. That workflow was an inspiration for my choices in Kettlefish, focusing on rapid scaffolding and prototyping allows me to get great results with very little effort.

This Pug file is rendered live using Phug, allowing me to use it as the main templating language for my Wordpress theme

This week I’ve finally crossed another threshold with Kettlefish, using it’s innovations as guidance for constructing a new Wordpress theme for WooCommerce. It took a bit of problem solving to get it off the ground, particularly as Pug is built for Node.JS and static sites so I’ve had to go with a fork called Phug. Once setup though, it was quite easy for me to get the theme scaffolded using Semantic UI elements and most of my designs implemented in less than two days.

The screenshots in this article are an example of the Wordpress Kettlefish workflow, the indentation oriented Pug and Stylus make the complexity of what I’m building much easier to comprehend. Once a template file becomes too complicated, it’s trivial to move out a chunk to its own file. For the first time in a decade, I’m having fun and enjoying building a PHP CMS theme.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store