CSS Widgetization

Brick.JS uses brick-asset to generate site.css and site.js, which contains modularized CSS and JS from all bricks.

See: Static Resources.

This article explains how brick-asset modularize your stylesheets, and apply it to the corresponding DOM element.

Consider you have a brick like this:

- bricks/
  |- hello-world/
     |- view.html
     |- style.css

Prefixing CSS

style.css:

body {
  background: #F9F9F9;
}
img {
  width: 36px;
  border-radius: 18px;
}

brick-asset will generate site.css containing:

.brk-hello-world body {
  background: #F9F9F9;
}
.brk-hello-world img {
  width: 36px;
  border-radius: 18px;
}

brick-asset use brick-less to do LESS processing. More syntax: https://github.com/brick-js/brick-less

Binding to HTML

view.html:

<html>
  <body><img src="foo"></body>
</html>

will be renderd as:

<html class="brk-hello-world">
  <body><img src="foo"></body>
</html>

Note that Brick.JS adds class brk-<id> to the root element of HTML provided by view.html.

Multi Bricks per Page

It's also possible for single page to contain multiple bricks, for example:

This happens when a template include or extend another, see: Partials and Layouts

<html class="brk-default">
  <body>
    <div class="brk-sidebar">..</div>
    <div class="brk-main-content">..</div>
  </body>
</html>

Above HTML contains 3 bricks: default, sidebar, and main-content. There stylesheets will be prefixed by Brick.JS and applied to corresponding DOM elements.

Style Folder

The path for entry CSS of each brick can be one of style.css, style/index.css, style.less, style/index.less. CSS within these Entry Files will be prefix with .brk-<Brick-ID> class.

Non-entry files within style/ directory (eg. style/footer.less) WILL NOT be parsed by default. But you can import them using LESS syntax, for example:

hello-world/
   ├── view.html
   └── style/
       |─ index.less
       └─ footer.less

With file contents:

// file: style/index.css
&{
  background: #f5f5f5;
}
.footer{
  @import './footer.less';
}
// file: style/footer.less
&{
  background: black;
  color: white;
}
a{
  color: white;
}

The generated public/site.css will contain:

.brk-hello-world {
  background: #f5f5f5;
}
.brk-hello-world .footer {
  background: black;
  color: white;
}
.brk-hello-world .footer a {
  color: white;
}