B:STRUCT

B:STRUCT is a simple preprocessor for compiling easy to write structures into HTML and appropriate SCSS-templates. Because of syntax lack, B:STRUCT is easy to learn and use. Using B:STRUCT you get a good boilerplate for your front-end project.

Examples

Simple B:STRUCT structure like:

b:header
    id:main
    e:logo>img
    e:link>a
b:footer
    e:copyright>a

is compiled into appropriate HTML and SCSS-templates:

<div class="block-header" id="main">
    <img class="header_logo" src="" alt=""/>
    <a class="header_link" href="#" title=""></a>
</div>
<div class="block-footer">
    <a class="footer_copyright" href="#" title=""></a>
</div>

.block-header {
    img.header_logo{
    }
    a.header_link{
    }
}
.block-footer {
    a.footer_copyright{
    }
}

Usage

Watcher

Use B:STRUCT watcher to compile .bstruct text files into HTML and SCSS. For example, run command:

$ bstruct --watch test.bstruct

to watch and compile test.ctdl file into test.html and test.scss files. Use .bstruct extension for your B:STRUCT files to compile. Note! The executable bin file for B:STRUCT watcher is placed in bin folder of bstruct node module directory. If bstruct command does not work after the installation by default, you can try install bstruct globally or try to add this directory to your PATH (recommended) or create a symlink inside your bin folder.

Inside the B:STRUCT repo you can build production version by executing $ grunt build task. Watcher executable will be placed into production/bin directory.

B:STRUCT supports separate blocks compilation. Execution of

$ bstruct --watch test.bstruct --blocks

will run B:STRUCT watcher in the blocks compilation mode. Code for every block defined in bstruct-schema will be saved in the separate files by the following rule:

/templates/<file-name-watched>/<block-name>.mustache
/scss/<file-name-watched>/_<block-name>.scss

For example, running watch task with --blocks flag for the test.bstruct file with the content

b:header
b:footer

will create 4 files:

/templates/test/block-header.mustache
/scss/test/_block-header.scss
/templates/test/block-footer.mustache
/scss/test/_block-footer.scss

These files can be used as mustache templates and SCSS import files.

Node

B:STRUCT implements an interface of a compiler:

var Compiler = require('bstruct'),
    compiler = new Compiler('b:test');

console.log(compiler.getSCSS());
console.log(compiler.getHTML());

To get compiled code templates use getSCSS and getHTML methods of compiler instance created with B:STRUCT data string.

Syntax

Declarations

B:STRUCT uses two main logical entities to describe page markup structure. BLOCK represents complete logical part of web-site page like header, footer, popup, sale-block and etc. BLOCK contains ELEMENTS that represent its markup (for example, logo inside header, button inside product sale block and etc.). Every BLOCK must have an unique name (class name in HTML and CSS).

Use:

b:header

to declare block with name 'header' ('block-header' class name in markup).

<div class="block-header"></div>

.block-header {

}

Use '>' operand to specify HTML-tag to use in markup for your block:

b:header>ul

creates UL HTML-element with 'block-header' class name.

<ul class="block-header"></ul>

.block-header {

}

ELEMENT must have an unique name inside its block. To provide element name uniqueness inside whole web-page B:STRUCT preprocessor prepends ELEMENT name with its parent block name. For example:

b:header
    e:auth

e:auth structure compiles into DIV HTML-element with 'header_auth' CSS-class name.

<div class="block-header">
    <div class="header_auth"></div>
</div>

.block-header {
    .header_auth {
    
    }
}

ELEMENT declaration supports '>' and key:value syntax too.

Nesting

To declare nested elements use 4-spaces length offsets.

Attributes

Use key:value pairs to specify attributes for your block:

b:stats>table
    id:main
    width:300

creates TABLE HTML-element with class name 'block-stats', and attributes id="main" and width="300".

<table class="block-stats" id="main" width="300"></table>

Attributes statements are ignored by SCSS-compiler. If an attribute defined in bstruct-schema is already used in appropriate HTML tag template, its value will be merged with value used in the template. For example,

b:stats
    class:inverted

will be compiled into

<div class="block-stats inverted"></div>

Collections

To generate set of elements in HTML, use multiplication operator to specify elements count.

e:item>li*3

<li class="item"></li>
<li class="item"></li>
<li class="item"></li>

Count statements are ignored by SCSS compiler.

Placeholders

Use p:value declaration to add Mustache like placeholders into your generated HTML.

b:list
    p:items
        e:item
        p:name

generates into following Mustache template

<div class="block-list">
    {{#items}}
        <div class="list_item">
            {{name}}
        </div>
    {{/items}}
</div>

p:value statements are ignored by SCSS-compiler.

Notes

B:STRUCT is designed as a part of Citadel front-end boilerplate.