6.3 templates.layout-2cols Layout 2 columns

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