bonsai.sass

A complete Utility First CSS Framework for less than 55 KB (8 KB Gzipped) and if implimenting purgecss likely under 5KB

Bonsai SASS is a super lightweight, fully responsive, utility first framework. All you need to build beautifully crafted web interfaces with ease.

Setup for development

Install the dependencies with npm first:

npm i

Building

To build new Bonsai files (in the dist folder), run:

npm run build

Developing

To automatically build new versions of Bonsai during development, run:

npm run watch

Documentation

For full documentation, visit bonsaisass.github.io.

Credits

Bonsai.sass has been ported from Bonsai.css and has been rebuilt using sass and npm scripts. The documentation is built using eleventy. Whereas the original Bonsai.css was built using postcss and gulp by Ciaran Walsh and Yves Hoppe from 2020-2021.

Methodology

Using css custom properties to build a utility first framework was utter brilliance by Ciaran and Yves but if you dig into the code base its also been implimented very simply and is easy to understand, maintain and customise for your own purposes. My hope is because this version is built on sass with a sprinkling of postcss, the maturity and stability of sass will stand the test of time. Rather that hoping/praying that the much large dependences nightmare of unmaintained postcss plugins wont bite you in the butt as some point. I originally tried to just update the postcss plugins, but unmaintained plugins proved to be its downfall.