Blocks form the foundation of Snowfire, enabling editors to construct websites using a modular, Lego-like approach.
Block Structure
Blocks are stackable components. An example page might show three blocks: a hero section with background image and CTA button, a text block, and an image grid.
Block Composition
Blocks contain one or more content tags, which represent editable elements users can modify within the Snowfire editor.
Block Capabilities
Support multiple content tags
Control spacing above and below other blocks
Include custom CSS styling
Apply design changes made by editors
Block Components
Blocks consist of four distinct parts accessed by switching modes:
HTML - Wrapper structure
CSS - Styling with SCSS variables and mixins
Properties - Configuration settings
JavaScript - Interactive functionality
Code Examples
Basic HTML structure
A div wrapper contains editable content, identified by block-specific class names.
<div class="wrapper">
<sf-text id=":1"></sf-text>
</div>
CSS implementation
Demonstrates SCSS variables linked to property definitions, utilizing mixins for padding.
.wrapper {
background: $background;
@include echo-padding-y();
}
Properties
Color definitions use rgba() format with default values and UI category descriptors.
<color variable="$background" default="rgba(255, 255, 255, 1)" kind="background"/>
Content Tags
Content tags enable user-editable content:
Prefixed with
<sf-Require unique numeric IDs (0-40)
Forward HTML attributes for flexibility
Support elements like headings and interactive components