4.5 Decorator Markup Guide
We've replaced our homegrown template framework which lived up to Decorator 4.0, with a customized version of Bootstrap. This means the markup is entirely different from our previous decorator versions. The guide below is intended to give you a quick overview of the new markup structure and tags.
Markup at a glance
This is a collapsed view of the main structure. You will notice the new markup is using HTML5 document type and the complete removal of the old "tdr_" ID's.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head></head>
<body>
<header class="layout-header"></header>
<nav class="navdrawer-container layout-navbar" role="navigation"></nav>
<main class="layout-main" id="main-content" role="main"></main>
<footer class="layout-footer"></footer>
</body>
</html>
A section by section breakdown
Header
<header class="layout-header">
<a class="sr-only" href="#">Skip to main content</a>
<div id="uc-emergency"></div>
<section class="layout-login">
<div class="layout-container"></div>
</section>
<!-- title section -->
<section class="layout-title">
<div class="layout-container">
<button class="btn-nav">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="title-header" href="/">EXAMPLE SITE</a>
<a class="title-header title-header-short" href="/" style="display: none;">SHORT-NAME</a>
<a class="title-logo" href="http://www.ucsd.edu">UC San Diego</a>
</div>
</section>
</header>
Nav
<nav class="navdrawer-container layout-navbar" role="navigation">
<div class="layout-container">
<div class="search">
<button class="search-toggle btn-default">
<span class="glyphicon glyphicon-search"></span>
<span class="caret"></span>
</button>
<div class="search-content">
<form action="//act.ucsd.edu/cwp/tools/search-redir" id="cse-site-search" method="get">
<label for="search-scope" style="display:none;">Search</label>
<select class="search-scope" id="search-scope" name="search-scope">
<option selected="selected" value="cwo">This Site</option>
<option value="default_collection">All UCSD Sites</option>
<option value="faculty-staff">Faculty/Staff</option>
</select>
<div class="input-group">
<label for="q" id="search-term-label" style="display:none;">Search Term</label>
<input autofocus="autofocus" class="form-control search-term" id="q" name="search-term" placeholder="Search..." type="search">
</div>
</form>
</div>
</div>
<ul class="navbar-list">
<li class="navbar-subnav "><a href="about/index.html">Menu Item 1</a>
<ul class="navbar-sublist">
<li><a href="about/team/index.html">Sub Item A</a></li>
<li><a href="about/accessibility.html">Sub Item B</a></li>
</ul>
</li>
<li class="navbar-subnav "><a href="prod-serv/index.html">Menu Item 2</a></li>
<li class="navbar-subnav "><a href="support/index.html">Menu Item 3</a></li>
</ul>
</div>
</nav>
Body and Template Varieties
Blank Slate Template Main Section
<main class="layout-main" role="main">
<div class="layout-container">
<ol class="breadcrumb breadcrumbs-list">
<li><a href="index.html">HOME</a></li>
<li><a href="templates.html">Templates</a></li>
<li class="active">Blank Slate</li>
</ol>
<h1>Blank Slate</h1>
<section class="main-section">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</section>
</div>
</main>
Two Column Template Main Section
<main class="layout-main" id="main-content" role="main">
<div class="layout-container row">
<ol class="breadcrumb breadcrumbs-list">
<li><a href="index.html">HOME</a></li>
<li><a href="templates.html">Templates</a></li>
<li class="active">Two Columns</li>
</ol>
<section class="col-xs-9 main-section pull-right">
<article class="main-section-content">
<h1>Two Column</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</article>
</section>
<section class="col-xs-3 main-section">
<article class="main-content-nav">
<h2>Navigation</h2>
<ul class="navbar-list">
<li>
<a href="#">Nav Link 1</a>
</li>
<li>
<a href="#">Nav Link 2</a>
</li>
<li class="active">
Styles
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li>
<a href="#">Nav Link</a>
</li>
</ul>
</article>
</section>
</div>
</main>
Three Column Template Main Section
<main class="layout-main" id="main-content" role="main">
<div class="layout-container row">
<ol class="breadcrumb breadcrumbs-list">
<li><a href="index.html">HOME</a></li>
<li><a href="templates.html">Templates</a></li>
<li class="active">Three Columns</li>
</ol>
<section class="col-xs-12 col-sm-9 main-content-container pull-right">
<section class="col-sm-9 col-md-10 main-section">
<article class="main-section-content">
<h1>Three Column</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
</article>
</section>
<section class="col-sm-3 col-md-2 main-section">
<article class="main-section-supplement">
<h3>Hello</h3>
<p>This is a third column</p>
</article>
</section>
</section>
<section class="col-xs-12 col-sm-3 main-section pull-left">
<article class="main-content-nav">
<h2>Navigation</h2>
<ul class="navbar-list">
<li><a href="#">Nav Link 1</a></li>
<li><a href="#">Nav Link 2</a></li>
<li class="active">
Styles
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li>
<a href="#">Nav Link</a>
</li>
</ul>
</article>
</section>
</div>
</main>
Footer
<footer class="layout-footer">
<section class="layout-container">
<article>
<span>
UC San Diego 9500 Gilman Dr. La Jolla, CA 92093 (858) 534-2230
</span>
</article>
<article>
<span>
Copyright © <span class="footer-copyright-year">2016</span> Regents of the University of California. All rights reserved.
</span>
</article>
<ul class="footer-links">
<li><a href="https://www.ucsd.edu/_about/legal/index.html">Terms & Conditions</a></li>
<li><a href="https://act.ucsd.edu/cwp/feedback/tool/cwo">Feedback</a></li>
</ul>
</section>
</footer>