Block architecture

Blocks are the foundation of Snowfire. Creating blocks allows your editors to build websites in the same way as building with Lego

A block has four different parts, and you access each part by opening the block and switching in the lower right corner. When you open a block it is always in HTML mode.

Lets look at the blank block to see how they are connected to each other.

HTML

<div class="hero-wrapper">
    Example
</div>

CSS

.hero-wrapper {
    background-color: $background;
    @include padding();
}

Properties

<properties>
     <color variable="$background" default="rgba(0, 0, 0, 1)" kind="background"/>
     <padding top="60px" bottom="60px"/>
</properties>

Each block is wrapped in div with the block name. In my case hero. In the CSS part we utilize SCSS variables and mixins. If you don't know what these are, don't worry.

Lets go trough it line by line:
background-color: $background

$background is a variable which is defined in the block properties on this line:
<color variable="$background" default="$sf-background-color" kind="background"/>

The first attribute is the name ($background) which we can use in our CSS file. The second attribute is the default value. This is the color the block will have when it's added to a page. In this example it will become black since we use an rgba string. The third value is only for the UI. It will tell users what kind of color this is.

Note: Colors should always rgba() in properties.