Examples Templates Store Pricing Docs Turbo CSS Blog Boomla WishList Introducing Turbo UI Named buckets Turbo CSS is Tailwind CSS on steroids Introducing Turbo CSS, the most advanced web-design language Calculate how much storage you use Better login system Collaboration settings Filesystem and Database are not cutting the problem space right What I'm working on 64bit File node IDs New how-to videos Creating buttons gets easier Introducing reusable components HTTPS by default Introducing the Boomla Theme CDN for faster pageloads Write your own website builder on top of Boomla On On composition Shared admin access A fresh config editor Building a multi-purpose theme A filesystem to replace your CMS New file link type: scope Mobile editing support Inline file wrapping changed Package sandboxing New PHP-like JavaScript engine [sjs-4e] Send emails to the website owner New JavaScript engine [sjs-4] A better editing experience New email service provider Glossary and other changes New panel changes Improved registration flow Boomla goes multiplayer Using local dev tools Why Boomla doesn't need Git File Panel Let's build a community Automatic updates Improved sjs-3 API New Frontend CSS modules Work offline with Boomla Faster page loads via caching Drag & drop supercharged Supporting CommonJS modulesĀ  Paranoid about loosing data IDE usability improvements Simple App install flow Meetups in Budapest Goodbye broken links Flow control from user space Customizing apps Contextmenu support for apps Deprecating the .Class file Hello Changelog Embedding 3rd party plugins Introducing Tools Installing apps just got amazing Public beta Host on our servers Simple deploy with push/pull Version Control for the Web 350M files on a 1TB disk 2 weeks in review
Control Panel

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.)

See the templates

 

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.

Start with cloning a template.


Cheers,

you can follow me on Twitter