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

CSS modules

2017-09-17

This is a developer post. If you are not a developer, you will totally not enjoy it, so, run!

Boomla has had CSS namespacing features built-in for at least 8 years, I can’t tell you the exact date from the tip of my head. While most of the development efforts at Boomla went into building the platform side, the industry has caught up and it became widely known under the name of CSS modules. The idea is the same, with a slightly different implementation.

Fixed shortcomings

In the early days, we were not reusing CSS modules across applications. Each app had its own CSS module, and we copy-pasted code between them. Those modules lived in .InlineStyle and .RequestStyle files, and the platform matched them to your application at runtime.

There are 3 problems with this approach:

  • copy-pasting is bad,

  • if the platform is matching them with apps, it is harder to learn,

  • you could not centralize and modularize your CSS modules, as you could have only used one CSS module at a time.

The new approach

All the above problems are fixed with the release v0.9.1. While the .InlineStyle and .RequestStyle files still work, it is now not the preferred approach any more. Instead, you should load CSS modules and inject namespaced class names yourself.

A new file method was introduced, named .CssModule, which returns CSS module information, like classNames and a dependency list.

Two built-in types were added to the system which implmenet that interface.

App: css-2

The css-2 allows loading CSS code as a CSS module and also serves it to clients.

Example code to store within a css-2 file:

.div {
    color: red;
    background: url(pattern.png);
}

It will be served like this (namespace and version hash will differ):

.NF45D5AD8-div {
    color: red;
    background: url(/domain/relative/path/pattern.png?o1-cache=58757c621f283255d0710a38834c6b9f9592f1be);
}

You can use it in an sjs-3 app like this:

cssFile = f.select('/style.css')
style = response.addCssModule(cssFile)
 
response.body('<div class="' + style.div + '">foo</div>')

The above will print:

<div class="NF45D5AD8-div">foo</div>

and will add the following to the <head>:

<link rel="stylesheet" href="/style.css?o1-cache=aa650ef855087440b571f7edea76c6ea829f9b37">

App: css-2-wrapper

The css-2-wrapper app does almost the same, but instead of loading the CSS from the file’s body, it calls the .Request method of its only child file, and works with the result as the starting CSS. This allows you to dynamically generate CSS modules.

Ideally, you could use a SASS/SCSS interpreter for this, which Boomla doesn’t have yet. It will in the future, but so long, you can just as well generate CSS code with the sjs-3 interpreter.

Read more

 


Best,

you can follow me on Twitter