Wamer Stencil Concept [Rev 0.1]

We use the component-based approach to develop our Web pages.
This allows us to make our pages from a relatively small reusable building blocks.
Indeed, there is no problem to write and debug (or copy from somewhere) a small piece of code.
Also, there is no problem to do a lot of such pieces.
We can easily manage them because they are relatively small and independent.
Then we just put our the pieces together (or embed them one into another), and voila! the page is ready!

How we make our components?

The component usually consists of three related entities: the HTML/CSS/JS code fragments.
In order to make our component adaptable and reusable, we add the 4th entity. We call it model.

Let's consider the example:
Panel 1 content
Panel 2 content
Panel 3 content
It's a Bootstrap Accordion component with three tabs.
Here we have the HTML part only. JS is not required, and CSS is included "somewhere else" at a page level.
<div id="root" class="panel-group">

    <div class="panel panel-default">

        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#root" href="#panel1">
                Item1</a>
            </h4>
        </div>

        <div id="panel1" class="panel-collapse collapse">
            <div class="panel-body">
                Panel 1 content
            </div>
        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#root" href="#panel2">
                Item2</a>
            </h4>
        </div>

        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Panel 2 content
            </div>
        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#root" href="#panel3">
                Item3</a>
            </h4>
        </div>

        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Panel 3 content
            </div>
        </div>

    </div>

</div>
This component performs its functions well. But if we want to change the header or the contents of the tabs, or add tabs, we need to change (adapt) HTML code "in place".
What are the opportunities we would like to have during the design:

Sketch offers several visual tools for these tasks.
We use a model to communicate with the Sketch tools. Let's rewrite our example with the model:
<root>
    <!-- Sample accordion with 3 empty panels which is drawn by default -->
    <item label="Item1">
        <panel>
            Panel 1 content
        </panel>
    </item>
    <item label="Item2">
        <panel>
            Panel 2 content
        </panel>
    </item>
    <item label="Item3">
        <panel>
            Panel 3 content
        </panel>
    </item>
</root>

<sketch-instr>
    <root class="box-default tab-array">
        <item attr-edit="label">
             <panel class="panel no-del"></panel>
        </item>
        <ws:new-item>       <!-- Drawn new item -->
            <item label="New Item">
                <panel></panel>
            </item>
        </ws:new-item>
    </root>
</sketch-instr>
The main part of the model (inside <root> tag) is "the skeleton" of our component, without the implementation details.
The <root> part is also used by Sketch to create the instance of Accordion component by default.
So we can consider a model as a fragment of our page description.
The <sketch-instr> tag contains instructions on how to handle the model in Sketch visual editor.
There is the individual instruction for each distinct tag of the model.
Let us examine them one by one:

Then, we made a few changes to the HTML linked to our model:
<div ws:mtag="root" id="root-{{iid}}" class="ws-box panel-group">

    <ws:_ each="item">

    <div class="panel panel-default">

        <div ws:mtag=":this" class="panel-heading">
            <h4 class="panel-title">
                <a class="ws-dt-click-target" data-toggle="collapse" data-parent="#root-{{/.iid}}" href="#panel-{{panel.iid}}">
                {{label}}</a>
            </h4>
        </div>

        <div ws:mtag="panel" id="panel-{{iid}}" class="panel-collapse collapse">
            <div class="panel-body">
                {{:content}}
            </div>
        </div>

    </div>

    </ws:_>

</div>
The changes one by one:

What now

Try our stencils technology with Wamer Sketch