Take a close look into Utilities

Utilities: Helper markup to structure your HTML.

Utilities are generic markup snippets. They are mostly responsible to wrap other markup.

General

On most applications we have markup which has no relationship to its content but is important to display the inner HTML in a structured way. Nice examples are grid helper classes like Foundation or Boostrap provides.

Therefore Veams uses the instrument Utility and provides a neat handlebars helper.

Examples are:

  1. Grid systems per class
  2. Multiple sections in regions

You do not have to use Utilities when you think it is not necessary - this is up to you.

Why do we use Utilities?

We use Utilities to simplify the differentiation between Components and helper markup.

Structure

When we use Utilities, we prefix them with u- (or _u- for scss files). The declaration helps us structuring our code base.

But you can also just forget the prefix when you are using frameworks with predefined classes.

Example Snippet

<div class="u-grid-row">
    <div class="u-grid-col is-3">
    </div>
    <div class="u-grid-col is-3">
    </div>
    <div class="u-grid-col is-3">
    </div>
</div>

File/Folder Structure

When you use a Template Engine, it is important to create a folder for your utilities.

Our utilities folder structure can look like this:

    └───partials
        └───utilities
               u-grid-row.hbs
               u-grid-col.hbs
               u-section.hbs

Styles and Sass Structure

The styles are scoped to the utility.

For each Utility we create a Sass file. The folder can look like this:

├───scss
    └───utilities
            _u-grid-row.scss
            _u-grid-col.scss
            _u-section.scss

Examples

Here are some examples:

  • Grid System
  • Sections

Grid Row

<div class="u-grid-row">
{{{yield}}}
</div>

Grid Column

<div class="u-grid-col{{#if options.classes}} {{options.classes}}{{/if}}">
{{{yield}}}
</div>