CBS files

CBS (Cascading Behaviour Sheet) file make creating prototypes, transfer to development and maintenance of the entire cycle easier by offloading the Patterns configuration from the markup into a file.

Patterns will look for a linked CBS file in the head section of the HTML file and parse it.

<script type="text/behavioursheet" href="/assets/script/all.cbs"></script>

The syntax above is up for discussion.

Example

Consider the following Pattern declaration:

<div id="portal">
    <a href="document.html"
       class="pat-inject pat-switch document-preview"
       data-pat-inject="history: record; source: #app-space; target: #app-space;"
       data-pat-switch="selector: #app-space; remove: state-off; add: state-on;">Document</a>
</div>

With a CBS file attached, instead the HTML could be reduced to:

<div id="portal">
    <a href="document.html"
       class="document-preview">Document</a>
</div>

And the behaviour would be declared in the CBS file as follows:

#portal a.document-preview {
  @pattern inject {
    history: record;
    source: #app-space;
    target: #app-space;
  }

  @pattern switch {
    selector: #app-space;
    remove: state-off;
    add: state-on;
  }
}

Notice that with the #portal in the example, a different behaviour — such as a different injection target — could be configured for the same component when it lives in a different context. This way both the designer and the developer require less conditions in their code to let component's behaviour differ in various context.