Blocks are partials which are very simple to understand.
- Blocks are unique snippets, this means you can add an
- Blocks can contain components.
- 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 ...
- ... sometimes we need to create simple snippets without thinking about generalization
- ... we need to define unique elements which should not be used a second time on the same page
When we use Blocks, we prefix them with
_b- for scss files). The declaration helps us structuring our code base.
<nav class="b-breadcrumb" role="navigation" id="breadcrumb"></nav>
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
Here are some examples:
- Logo - Content Block
- Navigation - Content Block
- Footer Content - Content Block
- Search Bar - Content Block
--- block: b-logo --- <div class="b-logo"> <h1 class="logo__headline"> <a class="logo__link" href="/"> Veams </a> </h1> </div>
--- 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>