The “Side rail” theme (rail): a model tag-based theme

Page frame

<div class="rail-shell">
  <aside class="rail">
    <a class="rail__brand brand" href="{home}"><span class="brand-name">{site_name}</span></a>
    <div class="rail__find">{search}</div>
    <nav class="rail__nav">
      [each:menu]<a class="rail__link" href="{item.url}">{item.title}</a>[/each]
    </nav>
    <div class="rail__side">{region:sidebar}</div>
    <div class="rail__foot">
      {languages}
      [if:user.logged]<div class="rail__me">{user_menu}</div>[else]<div class="rail__login">{login}</div>[/if]
    </div>
  </aside>
  <div class="rail-main">
    <header class="rail-top">… brand, {menu_toggle}, {region:header}, {region:head_actions}</header>
    <div class="rail-band">{region:before_content}</div>
    <main id="content" class="rail-content">{content}</main>
    <div class="rail-band">{region:after_content}</div>
    <footer class="rail-foot"><p>© {year} {site_name}</p>{region:footer}</footer>
  </div>
</div>

How it holds up on a phone

The left column works from 768 points. Below that the column turns into a compact “search · language · sign-in” row, with a top bar above it holding the name and a “Menu” button ({menu_toggle}, which also opens the sections). It is all done with styles: .rail-main { display: contents } and the block order order, so the markup is the same for all widths and no script is needed.

What is already provided and ready-made here

• the member menu {user_menu} (with the sign-out button), sign-in {login}, search {search}, language picker {languages} — ready-made engine tags; the forms and protection keys stay with the engine;
• the {region:…} places — module blocks placed into the theme (banners, subscription, archive, poll);
• the frame needs no interface words: all labels are already inside the ready-made tags, so the theme works in all seven languages without translations of its own.

How to make your own from this model

1. Copy the themes/rail folder under your own name and edit name and the titles in theme.json.
2. Change only views/layouts/main.tpl.html (the arrangement) and the layer at the end of assets/css/theme.css.
3. Cannot find the tag you need? See the list in the “Views on tags” reference. If the tag file is missing or broken (a block is not closed), the regular view works and the page does not break.
4. Not allowed: PHP, <form>, <script>, <style>, event handlers. Forms are drawn only by the engine.