6 templates Templates

Source: 00-config/_variables.scss, line 33

6.1 templates.regions Regions

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

We have split up the layout of the interface into regions. In Drupal we can assign blocks to these regions. Each region can contain different views/blocks/elements, based on the context of the node or page.

<i>The complementary_bottom region will be hidden on small screens.</i>

Example
Header

Blocks: Primary navigation, user navigation, site search. The header is always present. It holds a navbar component and the logo.

Breadcrumbs

Pathway navigation for large screen and 'go back' navigation for mobile

Hero

Provides a summary of the main content of this page, for example a person, a group or an event.

Secondary navigation

Navigation options to the sub contents of a main content.

Content top

Region to place content blocks above the main content. There are no blocks placed here by default.

Content

Content about this section.

Complementary top

Complementary content, filters, actions, quick navigations that is specific to the section. On mobile this region will be placed on top of the Main content, possibly in a different appearance such as with an off-canvas component.

Complementary bottom

Complementary content like blocks that is specific to the section. On mobile this region will be hidden.

Sidebar first

To create a two column layout you can use the sidebar first region together with the conent region. This is a good layout when the content is both regions are of equal importance.

Sidebar second

On top of sidebar first you can also use sidebar second. This will create a 3 column layout where all columns have an equal share. On mobile sidebar second will come last, while on desktop it will be placed on the right.

Content bottom

Region to place content blocks below the main content. There are no blocks placed here by default.

Footer

It is static and contains information about the whole application.

Markup: 05-templates/layout/regions.twig

<div class="list-item">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #E57373; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Header</h6>
    <p>Blocks: Primary navigation, user navigation, site search. The header is always present. It holds a navbar component and the logo.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #E6EE9C; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
  <h6 >Breadcrumbs</h6>
  <p>Pathway navigation for large screen and 'go back' navigation for mobile</p>
</span>
</div>

<div class="list-item">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #9575CD; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Hero</h6>
    <p>Provides a summary of the main content of this page, for example a person, a group or an event.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #FFE082; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6 >Secondary navigation</h6>
    <p >Navigation options to the sub contents of a main content.</p>
  </span>
</div>

<div class="list-item">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #FF8A65; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Content top</h6>
    <p>Region to place content blocks above the main content. There are no blocks placed here by default.</p>
  </span>
</div>

<div class="list-item">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #4DB6AC; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Content</h6>
    <p>Content about this section.</p>
  </span>
</div>

<div class="list-item">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #4DD0E1; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Complementary top</h6>
    <p>Complementary content, filters, actions, quick navigations that is specific to the section. On mobile this region will be placed on top of the Main content, possibly in a different appearance such as with an off-canvas component.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #81C784; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Complementary bottom</h6>
    <p>Complementary content like blocks that is specific to the section. On mobile this region will be hidden.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #ec407a; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Sidebar first</h6>
    <p>To create a two column layout you can use the sidebar first region together with the conent region. This is a good layout when the content is both regions are of equal importance.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #ffe0b2; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Sidebar second</h6>
    <p>On top of sidebar first you can also use sidebar second. This will create a 3 column layout where all columns have an equal share. On mobile sidebar second will come last, while on desktop it will be placed on the right.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #DCE775; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Content bottom</h6>
    <p>Region to place content blocks below the main content. There are no blocks placed here by default.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #64b5f6; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Footer</h6>
    <p>It is static and contains information about the whole application.</p>
  </span>
</div>
Source: 05-templates/layout/layout.scss, line 1

6.2 templates.layout-default Layout default

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The default layout consists of the content in a 2/3 column with a complementary region in the sidebar with a width of 1/3.

Example

Header

Hero

Secondary navigation

Content top

Complementary top

Complementary bottom

Page title

Main content

Content bottom

Footer

Markup: 05-templates/layout/layout-default.twig
<div class="browser-window">
  <div class="top-bar">
    <div class="circles">
      <div class="circle" id="close-circle"></div>
      <div class="circle" id="minimize-circle"></div>
      <div class="circle" id="maximize-circle"></div>
    </div>
  </div>
  <div class="content">
    <div>
      <div style="padding: 20px;background-color:#E57373; min-height: 80px">
        <p>Header</p>
      </div>
    </div>
    <div class="hidden-xs">
      <div style="padding: 20px;background-color:#E6EE9C; min-height: 30px">
        <p>Breadcrumbs</p>
      </div>
    </div>
    <div>
      <div style="padding: 20px;background-color:#9575CD; min-height: 220px">
        <p>Hero</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div>
      <div style="padding: 20px;background-color:#FFE082; min-height: 40px">
        <p>Secondary navigation</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div>
      <div style="padding: 20px;background-color:#FF8A65; min-height: 100px">
        <p>Content top</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div class="row layout--with-complementary">
      <div class="region--complementary">
        <div class="region--complementary-top" style="padding: 20px; background-color:#4DD0E1; min-height: 150px">
          <p>Complementary top</p>
          <p class="flat-text small"></p>
          <p class="flat-text"></p>
          <p class="flat-text"></p>
        </div>
        <div class="region--complementary-bottom" style="padding: 20px;background-color:#81C784; min-height: 150px">
          <p>Complementary bottom</p>
          <p class="flat-text small"></p>
          <p class="flat-text"></p>
          <p class="flat-text"></p>
        </div>
      </div>
      <div class="region--content" style="padding: 20px; background-color:#4DB6AC; min-height: 400px">
        <p>Page title</p>
        <p>Main content</p>
        <p class="flat-text-header"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>
    </div>
    <div>
      <div style="background-color:#DCE775; min-height: 100px">
        <p>Content bottom</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div>
      <div style="background-color:#64b5f6; min-height: 50px">
        <p>Footer</p>
      </div>
    </div>
  </div>
</div>
Source: 05-templates/layout/layout.scss, line 15

6.3 templates.layout-2cols Layout 2 columns

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

As mentioned above we have a default layout for Open Social. You also choose a 2 columns layout. We do not use a module for that, but as a site manager make sure blocks are placed in the correct region. To use the 2 columns layout, you must place you blocks in the region "Sidebar First". The other argument that must be true is that the complementary regions are empty. To prevent a site manager from showing blocks in both the complementary region and the sidebar first region, we add this argument for the display of the latter.

{% if page.sidebar_first and not page.complementary_top and not page.complementary_bottom %}

Example

Page title

Main content

Sidebar first

Markup: 05-templates/layout/layout-2columns.twig
<div class="browser-window">
  <div class="top-bar">
    <div class="circles">
      <div class="circle" id="close-circle"></div>
      <div class="circle" id="minimize-circle"></div>
      <div class="circle" id="maximize-circle"></div>
    </div>
  </div>
  <div class="content">
    <div class="row container layout--with-two-columns">
      <div class="region--content" style="padding: 20px; background-color:#4DB6AC; min-height: 400px">
        <p>Page title</p>
        <p>Main content</p>
        <p class="flat-text-header"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>
      <div class="region--sidebar-first" style="padding: 20px; background-color:#ec407a; min-height: 400px">
        <p>Sidebar first</p>
        <p class="flat-text small"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>
    </div>

  </div>
</div>
Source: 05-templates/layout/layout.scss, line 26

6.4 templates.layout-3cols Layout 3 columns

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Besides a two column layout, you can also get 3 columns. For this you can fill the region sidebar second with blocks. When you use sidebar second and sidebar first the columns will take up an equal share of the row.

Example

Page title

Main content

Sidebar first

Sidebar second

Markup: 05-templates/layout/layout-3columns.twig
<div class="browser-window">
  <div class="top-bar">
    <div class="circles">
      <div class="circle" id="close-circle"></div>
      <div class="circle" id="minimize-circle"></div>
      <div class="circle" id="maximize-circle"></div>
    </div>
  </div>
  <div class="content">
    <div class="row container layout--with-three-columns">
      <div class="region--content" style="padding: 20px; background-color:#4DB6AC; min-height: 400px">
        <p>Page title</p>
        <p>Main content</p>
        <p class="flat-text-header"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>

      <div class="region--sidebar-first" style="padding: 20px; background-color:#ec407a; min-height: 400px">
        <p>Sidebar first</p>
        <p class="flat-text small"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>

      <div class="region--sidebar-second" style="padding: 20px; background-color:#ffe0b2 ; min-height: 400px">
        <p>Sidebar second</p>
        <p class="flat-text small"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>
    </div>

  </div>
</div>
Source: 05-templates/layout/layout.scss, line 44