Take a close look into Blocks

Blocks: Static content which is not reusable.

Blocks are unique html snippets. You can only declare them once per page.

General

Blocks are partials which are very simple to understand.

  1. Blocks are unique snippets, this means you can add an id to it.
  2. Blocks can contain components.
  3. They are not reusable.

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

Why do we use Blocks?

We use Blocks, because ...

  1. ... sometimes we need to create simple snippets without thinking about generalization
  2. ... we need to define unique elements which should not be used a second time on the same page

Structure

When we use Blocks, we prefix them with b- (or _b- for scss files). The declaration helps us structuring our code base.

Example Snippet

<nav class="b-breadcrumb" role="navigation" id="breadcrumb"></nav>

File/Folder Structure

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

Our block folder structure can look like this:

    └───partials
        └───blocks
               b-footer-copy.hbs
               b-logo.hbs
               b-toggle.hbs
               b-nav.hbs
               b-aside-content.hbs
               b-sitemap.hbs

Styles and Sass Structure

The styles are scoped to the block.

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

├───scss
    └───blocks
            _b-logo.scss
            _b-release.scss
            _b-footer-copy.scss

Examples

Here are some examples:

  • Logo - Content Block
  • Navigation - Content Block
  • Footer Content - Content Block
  • Search Bar - Content Block

b-logo.hbs

---
block: b-logo
---
<div class="b-logo">
    <h1 class="logo__headline">
        <a class="logo__link" href="/">
            Veams
        </a>
    </h1>
</div>

b-release.hbs

---
block: b-footer-copy
---
<div class="b-footer-copy">
    <p>If you've spotted a typo or a mistake,
        or wish to add something on,
        you could write about this on GitHub.</p>
</div>