Take a close look into Regions

Regions: An instrument to divide your layout.

Regions are areas in our layout which can be filled with Blocks and Components.

General

Because images speak louder than words, here is an image to illustrate Regions:

alt text

This image makes it clear, that:

  1. Regions are not reusable.
  2. Regions are only defined in your layout files.
  3. Regions subdivide your layout.

This image is actually borrowed from Drupal.org.

Why do we use Regions?

By using Regions we separate layout styles from our other instruments (Components and Blocks). The main benefit is drop-in replacement.

In example we can just replace our logo (Block) and replace it with a language-switcher (Block) without worrying about layout issues.

Structure

When we use Regions, we prefix them with r- (or _r- for scss files). The declaration helps us structuring our code base.

Example Snippet

<div class="r-header">
    <div class="header__inner is-container is-table-lyt">
        <div class="r-header-left">
        </div>
        <div class="r-header-right">
        </div>
    </div>
</div>

File/Folder Structure

Every region should be defined in our layout file (in example lyt-default.hbs which you can find in your templating directory).

Styles and Sass Structure

For each layout section we create a Sass file. In this layout Sass file we define our regions.

The folder can look like this:

├───scss
    └───layout
            _header.scss
            _main.scss
            _footer.scss

Examples

  • Header Region
  • Logo Region in Header
  • Navigation Region in Header
  • Stage Region
  • Main Content Region
  • Sidebar Region
  • Footer Region

lyt-default.hbs

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js"> <!--<![endif]-->
<head>
    {{#block "metadata"}}
        {{> _metadata }}
    {{/block}}
    {{#block "styles"}}
        {{> _styles }}
    {{/block}}
</head>
<body class="{{bodyclass}}">

    <div class="page-wrapper">

        <div class="header">
            <div class="header__inner is-container is-table-lyt">
                <div class="r-header-left">
                    {{> b-logo }}
                </div>
                <div class="r-header-right">
                    {{> b-toggler }}
                    {{> b-github }}
                </div>
            </div>
        </div>

        <!-- Nav
        ================================================== -->
        <div class="r-off-canvas">
            <div class="off-canvas__inner is-container">
                {{> b-nav }}
            </div>
        </div>


        <!-- Stage
        ================================================== -->
        <section class="r-stage">
            <div class="stage__inner is-container">
                {{> b-stage-content }}
            </div>
        </section>

        <div class="r-main">
            <div class="main__inner is-container">
                <header class="main__header">
                    <h1 class="main__headline">
                        {{{contentTitle}}}
                    </h1>
                </header>
                <div class="main__content">
                    {{#block "main"}}{{/block}}
                </div>
            </div>
        </div>

        <!-- Footer
        ================================================== -->
        <footer class="footer">
            <div class="r-footer-container is-container">
                {{#block "footer"}}
                    {{> b-footer-copy }}
                {{/block}}
            </div>
        </footer>

    </div>

    <!-- Scripts
    ================================================== -->
    {{#block "scripts"}}
        {{> _scripts }}
    {{/block}}

</body>
</html>