Skip to content

Markup guide

Jump to bottom
Gábor Udvari edited this page Oct 5, 2015 · 5 revisions

Markup guide

The theme should use a clean and standardized set of markup. This guide will list a number of markup bits which need to be followed throughout the theme layout.

Top layout

Used in templates/layout.php

<!DOCTYPE html>
<html>
  <head>
    <!-- meta, link, title, etc. -->
  </head>
  <body>
    <div id="main_container">
      <header>
        <!-- The header for the whole page: navbar, breadcrumb -->
      </header>
      <div id="content_container">
        <div class="content-wrapper">
          <!-- The content for the page: sidebar, content -->
        </div>
      </div>
      <footer>
        <!-- The page footer: Buggenie credits, copyright info -->
      </footer>
    </div>
  </body>
</html>
Notes:

  • #main_container is only reserved for JavaScript, it has no styles

  • header is only semantic, it has no styles

  • content_container is a Bootstrap container, .content-wrapper is a Bootstrap row

  • footer is mainly semantic, it only has a top border

Content layouts

Used in *.html.php pages. The content is included inside div.content-wrapper which is a Bootstrap row, you can create columns directly.

Content with a main column and a sidebar

4 column wide sidebar and 8 column wide main, eg. main_index.html.php, publish_showarticle.html.php

<aside class="sidebar">
  <!-- Left sidebar -->
</aside>
<section class="main">
  <!-- Main content section -->
</section>

Content with one full-width area

Used when a full-width single area is required, eg. error message in publish_showarticle.html.php

<section class="full-width">
  <!-- Main content section -->
</section>

Navigation layouts

Navbar layout

Used in header.inc.php, etc. Note: navbar is included inside a non-styled header tag.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="" class="navbar-brand">
        <img src="" alt="">
        Title
      </a>
    </div>
    <ul id="main-menu">
      <!-- Main menu -->
    </ul>
    <ul id="user-menu">
      <!-- User menu on the right side -->
    </ul>
  </div>
</nav>
Notes:

  • #main-menu extends the following classes: .nav, .navbar-nav

  • #user-menu extends the following classes: .nav, .navbar-nav, .navbar-right

Simple dropdown menu

Used in header-mainmenu.inc.php, header-usermenu.inc.php, etc.

<ul id="main-menu">
  <li class="active">
    <a href="/"><img src="icon.png" alt="Home">Home</a>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="icon.png" alt="Dropdown">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li>Second level</li>
    </ul>
  </li>
</ul>

Megamenu dropdown

Used in _publish_menustriplinks.inc.php, etc. Yamm3 is used for the megamenu.

<ul id="main-menu">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="icon.png" alt="Dropdown">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li>
        <div>
          <h3>Section title</h3>
          <p><a href="">Single link</a></p>
        </div>
      </li>
    </ul>
  </li>
</ul>
Notes:

  • the .yamm-content in the markup is optional

  • any level of header tag can be used inside the megamenu content

  • in order to make the links easily recognizable add icons

Form layouts

The forms are styled to be horizontal by default. No extra form-horizonzal related classes are required.

Text, passwords and email fields

<form>
  <input type="hidden">
  <div class="form-group">
    <label>Input label</label>
    <div class="control-wrapper">
      <input type="text" name="" value="">
    </div>
  </div>
  <div class="form-group">
    <label>Input label</label>
    <div class="control-wrapper">
      <input type="password" name="" value="">
    </div>
  </div>
</form>

Checkbox fields

<form>
  <div class="form-group">
    <div class="checkbox-wrapper">
      <label for=""><input type="checkbox">Checkbox</label>
    </div>
  </div>
</form>

Button fields

<form>
  <div class="form-group">
    <div class="button-wrapper">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
Clone this wiki locally