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.
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 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.
Thank you for reading! Want more content? Follow me on
- Medium: https://medium.com/@paulbrzeski
- LinkedIn: https://www.linkedin.com/in/paul-b-23620b209/
- Website: https://www.paulbrzeski.com
- YouTube: https://www.youtube.com/@paulbrzeski4237/
