A flexbox-based, modular CSS design framework.

Links

Tools

SASS, Gulp, Nunjucks, Git, npm

Context

Having built dozens of websites each, my friend Andrew and I were tired of having to modify existing CSS frameworks to suit our needs. Sometimes, components provided by one framework needed extensive tweaking to suit our needs. Other times frameworks were missing components all together.

Enter boba.

Boba was built based on the concept of the ever popular drink, boba (or bubble tea). Our components are very basic (i.e. minimal styling) and modular but can be combined with each other to create more complex designs. For casual users, we created a set of colors and helper classes to make building a web page extremely simple. For more advanced users, we also created a version of the framework that strictly provides the layout components and elements with as little styling as possible to keep the framework's footprint small and its design language flexible. The entire release process for this happens automatically through a custom CI/CD pipeline built with CircleCI that automatically deploys new releases to the production website. Boba is an ever-growing framework that we are both very passionate about and hope to see succeed.

Highlights

Highlights from developing this project include:

Creating a CI/CD pipeline using CicleCI to automatically deploy to a self-hosted Dokku instance on Linode
Designing a color palette and style guide for use throughout the entire framework
Architecting the SCSS in such a way that one gulp process could build every variation of the framework
Modularizing the framework so that advanced users can select which elements and components they want to include or exclude from their custom builds
Deciding upon a syntax convention for the css classes and a file naming convention for developing
Finding a domain name that wasn't taken

Back