Introducing the Boomla Theme
2020-04-21
I'm excited to announce the release of the Boomla Theme.
So, what exactly is it?
Templates, built on top of
Components, made of
Elements, built on top of
a Design System, built on top of
a new Design Programming Language,
...and a new Editor (Frontend Toolchain).
Let's take a look at them one after the other.
Templates
Templates are ready-made websites you can clone and edit to make your own. They may contain 1 or more pages - like the preview pages above. Expect more templates to come.
I hope to start a user-contributed section in the future, so if you find it inspiring, please contribute by creating templates for others. (And shoot me an email to publish your work.)
Elements, Components
Elements are application instances, for example an image, a menu, a text element, you name it. On the end-user level, elements are the atomic building blocks of Boomla. (They map to a file on the Boomla Filesystem.)
Elements can be composed into, well, components. The benefit of working with components is that it is a higher level of abstraction, it lets you build websites with higher level building blocks. It's also great to provide you with lots of ideas, so that you can have some creative inspiration. The truth is, we are better at modifying things than comping up with novel compositions ourselves...
You can find a list of all elements in the Boomla UI kit - just click around. You will find lots of test-cases there as the site is also used for development.
This UI kit is installed as a package onto every template (..that uses it). Once you clone a template, you can open the New Panel to see all the available components.
Design System
Under the hood, all elements are built on a shared design system, which is a framework for building coherent designs. It contains lots of variables that can be configured and bent to your liking. Currently, this ability is not exposed, so right now, everything is hard-coded. For example, the brand color of your website is blue.
Currently, you can create any kind of website with Boomla, as long as its brand color is blue.
The important thing is that all these variables are in place and they are used. Which means, soon enough, you will have the option to centrally customize the look of your websites.
Design Programming Language
Unfortunately, I could not find a programming language that was expressive enough for my needs of building all this. First, I was struggling because I made a decision long ago that I'm not going to write a programming language. An OS is hard enough. But in the end, the available options were just way too limiting. So I ended up writing a language that builds on the ideas of the Tailwind CSS framework. I brought up the idea on the Tailwind Reddit thread, with not much excitement. I pinged Tailwind author Adam Wathan, with no luck. So, if there is not much interest, I'm just going to implement it for myself.
The first version took about a week to implement, and it saved me tons of time since. It was the best decision I made for a long time.
New Editor (Frontend Toolchain)
Instead of having a global editor inserted into every website, now it is up-to the website's developer to create a custom editor and insert it into the website. This has massive benefits, now we can move faster and insert special purpose functionality.
Interestingly, you may end up seeing different editors on different websites, or sometimes even different editors on different pages of the same website. But hey, that's a good thing. You don't want to see the toolbar of Ms Word within Photoshop.
You will notice some slight differences in the user experience, but overall it didn't change much.
Give it a try!
I'd like to invite you to give it a try and tell me what you think.
Cheers,