From 3cbb2d1a0892cefc887ae88a885ff17dfd447e6d Mon Sep 17 00:00:00 2001
From: AlasdairSwan <aswan@edx.org>
Date: Tue, 29 Mar 2016 16:10:52 -0400
Subject: [PATCH] FEDX-118 Adding header to test page

---
 .coveragerc                                   |   3 +
 cms/djangoapps/contentstore/views/dev.py      |  14 -
 cms/templates/ux/reference/container.html     | 706 ----------------
 .../ux/reference/course-create-rerun.html     | 358 --------
 cms/templates/ux/reference/index.html         |   5 +-
 .../ux/reference/modal_access-component.html  | 127 ---
 .../reference/modal_bulkpublish-section.html  | 144 ----
 .../modal_bulkpublish-subsection.html         |  74 --
 .../ux/reference/modal_bulkpublish-unit.html  |  31 -
 cms/templates/ux/reference/outline.html       | 773 ------------------
 .../ux/reference/outline_add-section.html     |   7 -
 .../ux/reference/outline_add-subsection.html  |   7 -
 .../ux/reference/outline_add-unit.html        |   7 -
 .../outline_section_header-collapsed.html     |  37 -
 .../outline_section_header-expanded.html      |  37 -
 .../ux/reference/outline_status_grading.html  |   9 -
 .../outline_status_message-error.html         |   5 -
 .../outline_status_message-lock.html          |   5 -
 ...ne_status_message-unpublished_changes.html |   5 -
 ...line_status_message-unpublished_units.html |   5 -
 .../outline_status_release-draft.html         |  11 -
 .../outline_status_release-lock.html          |  10 -
 .../outline_status_release-released.html      |  11 -
 ...e_status_release-released_with_parent.html |  10 -
 .../outline_status_release-scheduled.html     |  10 -
 ..._status_release-scheduled_with_parent.html |  10 -
 .../outline_subsection_header-collapsed.html  |  43 -
 .../outline_subsection_header-expanded.html   |  43 -
 .../ux/reference/outline_unit_header.html     |  33 -
 .../ux/reference/pattern-library-test.html    |  17 +-
 cms/urls_dev.py                               |   2 +-
 common/test/acceptance/pages/common/logout.py |   2 +-
 lms/djangoapps/debug/views.py                 |  15 -
 lms/static/js/header_factory.js               |  16 +
 lms/static/lms/js/build.js                    |   1 +
 lms/static/sass/_build-lms-v2.scss            |   4 +
 lms/static/sass/_shame.scss                   |   2 +-
 lms/static/sass/base/_extends.scss            |   2 +-
 lms/static/sass/base/_layouts.scss            |   6 +-
 .../course/layout/_courseware_header.scss     |   2 +-
 lms/static/sass/multicourse/_account.scss     |  10 +-
 lms/static/sass/multicourse/_dashboard.scss   |  10 +-
 lms/static/sass/shared-v2/_base.scss          |   6 +
 lms/static/sass/shared-v2/_header.scss        |  83 ++
 lms/static/sass/shared-v2/_navigation.scss    |  23 +
 lms/static/sass/shared/_header.scss           |  14 +-
 lms/static/sass/views/_verification.scss      |   4 +-
 lms/templates/main.html                       |  17 +-
 lms/templates/navigation-edx.html             | 156 ----
 lms/templates/navigation.html                 | 186 +++--
 lms/templates/register-sidebar.html           |   4 +-
 lms/templates/user_dropdown.html              |  59 ++
 lms/templates/ux/reference/index.html         |   8 +-
 .../ux/reference/pattern-library-test.html    |  16 +-
 lms/urls.py                                   |   2 +-
 openedx/core/djangoapps/debug/__init__.py     |   0
 openedx/core/djangoapps/debug/views.py        |  31 +
 themes/edx.org/lms/templates/header.html      |  99 +--
 themes/red-theme/lms/templates/header.html    |  14 +-
 .../lms/templates/register-sidebar.html       |   4 +-
 60 files changed, 465 insertions(+), 2890 deletions(-)
 delete mode 100644 cms/templates/ux/reference/container.html
 delete mode 100644 cms/templates/ux/reference/course-create-rerun.html
 delete mode 100644 cms/templates/ux/reference/modal_access-component.html
 delete mode 100644 cms/templates/ux/reference/modal_bulkpublish-section.html
 delete mode 100644 cms/templates/ux/reference/modal_bulkpublish-subsection.html
 delete mode 100644 cms/templates/ux/reference/modal_bulkpublish-unit.html
 delete mode 100644 cms/templates/ux/reference/outline.html
 delete mode 100644 cms/templates/ux/reference/outline_add-section.html
 delete mode 100644 cms/templates/ux/reference/outline_add-subsection.html
 delete mode 100644 cms/templates/ux/reference/outline_add-unit.html
 delete mode 100644 cms/templates/ux/reference/outline_section_header-collapsed.html
 delete mode 100644 cms/templates/ux/reference/outline_section_header-expanded.html
 delete mode 100644 cms/templates/ux/reference/outline_status_grading.html
 delete mode 100644 cms/templates/ux/reference/outline_status_message-error.html
 delete mode 100644 cms/templates/ux/reference/outline_status_message-lock.html
 delete mode 100644 cms/templates/ux/reference/outline_status_message-unpublished_changes.html
 delete mode 100644 cms/templates/ux/reference/outline_status_message-unpublished_units.html
 delete mode 100644 cms/templates/ux/reference/outline_status_release-draft.html
 delete mode 100644 cms/templates/ux/reference/outline_status_release-lock.html
 delete mode 100644 cms/templates/ux/reference/outline_status_release-released.html
 delete mode 100644 cms/templates/ux/reference/outline_status_release-released_with_parent.html
 delete mode 100644 cms/templates/ux/reference/outline_status_release-scheduled.html
 delete mode 100644 cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html
 delete mode 100644 cms/templates/ux/reference/outline_subsection_header-collapsed.html
 delete mode 100644 cms/templates/ux/reference/outline_subsection_header-expanded.html
 delete mode 100644 cms/templates/ux/reference/outline_unit_header.html
 create mode 100644 lms/static/js/header_factory.js
 create mode 100644 lms/static/sass/shared-v2/_base.scss
 create mode 100644 lms/static/sass/shared-v2/_header.scss
 create mode 100644 lms/static/sass/shared-v2/_navigation.scss
 delete mode 100644 lms/templates/navigation-edx.html
 create mode 100644 lms/templates/user_dropdown.html
 create mode 100644 openedx/core/djangoapps/debug/__init__.py
 create mode 100644 openedx/core/djangoapps/debug/views.py

diff --git a/.coveragerc b/.coveragerc
index b1064ee89b..cb75a6a94e 100644
--- a/.coveragerc
+++ b/.coveragerc
@@ -14,14 +14,17 @@ source =
 omit =
     cms/envs/*
     cms/manage.py
+    cms/djangoapps/contentstore/views/dev.py
     cms/djangoapps/*/migrations/*
     cms/djangoapps/*/features/*
+    lms/debug/*
     lms/envs/*
     lms/djangoapps/*/migrations/*
     lms/djangoapps/*/features/*
     common/djangoapps/terrain/*
     common/djangoapps/*/migrations/*
     openedx/core/djangoapps/*/migrations/*
+    openedx/core/djangoapps/debug/*
 
 [report]
 ignore_errors = True
diff --git a/cms/djangoapps/contentstore/views/dev.py b/cms/djangoapps/contentstore/views/dev.py
index dd03998c30..7cf69eeb7f 100644
--- a/cms/djangoapps/contentstore/views/dev.py
+++ b/cms/djangoapps/contentstore/views/dev.py
@@ -12,17 +12,3 @@ from django.http import HttpResponseNotFound
 def dev_mode(request):
     "Sample static view"
     return render_to_response("dev/dev_mode.html")
-
-
-def dev_show_template(request, template):
-    """
-    Shows the specified template as an HTML page.
-    e.g. /template/ux/reference/container.html shows the template under ux/reference/container.html
-
-    Note: dynamic parameters can also be passed to the page.
-    e.g. /template/ux/reference/container.html?name=Foo
-    """
-    try:
-        return render_to_response(template, request.GET.dict())
-    except TopLevelLookupException:
-        return HttpResponseNotFound("Couldn't find template {tpl}".format(tpl=template))
diff --git a/cms/templates/ux/reference/container.html b/cms/templates/ux/reference/container.html
deleted file mode 100644
index 6a2632a90d..0000000000
--- a/cms/templates/ux/reference/container.html
+++ /dev/null
@@ -1,706 +0,0 @@
-<%inherit file="../../base.html" />
-
-<%block name="view_notes">
-    <%include file="_note-usage.html" />
-</%block>
-
-<%!
-  import logging
-  from util.date_utils import get_default_time_display
-  from django.utils.translation import ugettext as _
-  from contentstore.utils import reverse_usage_url
-%>
-
-<%block name="title">Container</%block>
-<%block name="bodyclass">is-signedin course uploads view-container</%block>
-
-<%namespace name='static' file='../../static_content.html'/>
-
-<%block name="content">
-<div id="content">
-
-
-<div class="wrapper-mast wrapper">
-    <header class="mast has-actions has-navigation has-subtitle">
-        <div class="page-header">
-            <small class="navigation navigation-parents subtitle">
-                        <a href="" class="navigation-item navigation-link navigation-parent">
-                            Section parent
-                        </a>
-                        <span class="navigation-item navigation-parent">Subsection parent</span>
-            </small>
-            <div class="wrapper-xblock-field" data-field="display_name">
-                <h1 class="page-header-title is-editable xblock-field-value">Unit Example</h1>
-            </div>
-        </div>
-
-        <nav class="nav-actions" aria-label="${_('Page Actions')}">
-            <h3 class="sr">Page Actions</h3>
-            <ul>
-
-<!-- begin publishing changes -->
-                <li class="action-item action-view nav-item">
-                    <a href="#" class="button view-button action-button">
-                        <span class="action-button-text">View Published Version</span>
-                    </a>
-                </li>
-                <li class="action-item action-preview nav-item">
-                    <a href="#" class="button preview-button action-button">
-                        <span class="action-button-text">Preview</span>
-                    </a>
-                </li>
-<!-- end publishing changes -->
-
-            </ul>
-        </nav>
-    </header>
-</div>
-<div class="wrapper-content wrapper">
-    <div class="inner-wrapper">
-        <section class="content-area">
-            <article class="content-primary">
-
-                <div class="ui-loading">
-                    <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading</span></p>
-                </div>
-                <div class="no-container-content">
-                    <p>This page has no content yet.</p>
-                </div>
-                <section class="wrapper-xblock level-page">
-                    <header class="xblock-header">
-                        <div class="header-details">
-                            Container Name
-                        </div>
-                        <div class="header-actions">
-                            <ul class="actions-list">
-                                <li class="action-item action-edit">
-                                    <a href="#" class="edit-button action-button">
-                                        <i class="icon fa fa-edit"></i>
-                                        <span class="action-button-text">Edit</span>
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </header>
-                    <article class="xblock-render">
-                        <ol class="xblock-list">
-                            <li class="xblock-list-item">
-                                <section class="wrapper-xblock level-nesting is-collapsible">
-                                    <header class="xblock-header">
-                                        <div class="header-details">
-                                            <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse collapse">
-                                                <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
-                                                <span class="sr">Expand or Collapse</span>
-                                            </a>
-                                            <span>Condition 1</span>
-                                        </div>
-                                        <div class="header-actions">
-                                            <ul class="actions-list">
-                                                <li class="sr action-item">No Actions</li>
-                                            </ul>
-                                        </div>
-                                    </header>
-                                    <article class="xblock-render">
-                                        <ol class="xblock-list">
-                                            <li class="xblock-list-item">
-                                                <section class="wrapper-xblock level-element">
-                                                    <header class="xblock-header">
-                                                        <div class="header-details">
-                                                            Video
-                                                        </div>
-                                                        <div class="header-actions">
-                                                            <ul class="actions-list">
-                                                                <li class="action-item action-edit">
-                                                                    <a href="#" class="edit-button action-button">
-                                                                        <i class="icon fa fa-edit"></i>
-                                                                        <span class="action-button-text">Edit</span>
-                                                                    </a>
-                                                                </li>
-                                                                <li class="action-item action-duplicate">
-                                                                    <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
-                                                                        <i class="icon fa fa-copy"></i>
-                                                                        <span class="sr">Duplicate this component</span>
-                                                                    </a>
-                                                                </li>
-                                                                <li class="action-item action-delete">
-                                                                    <a href="#" data-tooltip="Delete" class="delete-button action-button">
-                                                                        <i class="icon fa fa-trash-o"></i>
-                                                                        <span class="sr">Delete this component</span>
-                                                                    </a>
-                                                                </li>
-                                                            </ul>
-                                                        </div>
-                                                    </header>
-                                                    <article class="xblock-render">
-                                                        <section class="xblock xblock-student_view xmodule_display xmodule_VideoModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_AndyA;_ABT101;_video;_72b5a0d74e8c4ed4a4d4e6bf67837c09/handler" data-type="Video">
-
-
-                                                            <h2>Video</h2>
-
-                                                            <div id="video_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" class="video closed is-initialized" data-streams="1.00:OEoXaMPEzfM" data-save-state-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_video;_72b5a0d74e8c4ed4a4d4e6bf67837c09/handler/xmodule_handler/save_user_state" data-caption-data-dir="None" data-show-captions="true" data-general-speed="1.0" data-speed="null" data-start="0.0" data-end="0.0" data-caption-asset-path="/c4x/AndyA/ABT101/asset/subs_" data-autoplay="False" data-yt-test-timeout="1500" data-yt-test-url="https://www.googleapis.com/youtube/v3/videos/" data-autohide-html5="False" tabindex="-1">
-                                                                <div class="focus_grabber first" tabindex="-1"></div>
-
-                                                                <div class="tc-wrapper">
-                                                                    <a href="#before-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" class="nav-skip sr">Skip to a navigable version of this video transcript.</a>
-
-                                                                    <article class="video-wrapper">
-                                                                        <span tabindex="-1" class="spinner" aria-hidden="true" aria-label="Loading video player"></span>
-                                                                        <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="Play video"></span>
-                                                                        <div class="video-player-pre"></div>
-                                                                        <section class="video-player">
-                                                                            <iframe id="i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/OEoXaMPEzfM?controls=0&amp;wmode=transparent&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;modestbranding=1&amp;html5=1&amp;origin=http%3A%2F%2Flocalhost%3A8001" style="height: 411.75px; width: 732px; top: -22.875px; left: 0px;"></iframe>
-                                                                            <h3 class="hidden">ERROR: No playable video sources found!</h3>
-                                                                        </section>
-                                                                        <div class="video-player-post"></div>
-                                                                        <section class="video-controls" style="">
-                                                                            <div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" title="Video position" aria-disabled="false" tabindex="-1" style=""><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" role="slider" title="Video position" aria-disabled="false" aria-valuetext="0 seconds" style="left: 0%;"></a></div>
-                                                                            <div>
-                                                                                <ul class="vcr">
-                                                                                    <li><a class="video_control play" href="#" title="Play" role="button" aria-disabled="false"></a></li>
-                                                                                    <li><div class="vidtime">0:00 / 1:56</div></li>
-                                                                                </ul>
-                                                                                <div class="secondary-controls"><div class="speeds">
-                                                                                    <a href="#" title="Speeds" role="button" aria-disabled="false">
-                                                                                        <h3>Speed</h3>
-                                                                                        <p class="active">1.0x</p>
-                                                                                    </a>
-                                                                                    <ol class="video_speeds"><li data-speed="2.0"><a class="speed_link" href="#">2.0x</a></li><li data-speed="1.50"><a class="speed_link" href="#">1.50x</a></li><li data-speed="1.0" class="active"><a class="speed_link" href="#">1.0x</a></li><li data-speed="0.50"><a class="speed_link" href="#">0.50x</a></li></ol>
-                                                                                </div><div class="volume">
-                                                                                    <a href="#" title="Volume" role="button" aria-disabled="false" aria-label="Volume"></a>
-                                                                                    <div class="volume-slider-container">
-                                                                                        <div class="volume-slider ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="height: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" role="slider" title="Volume" aria-disabled="false" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-valuetext="Maximum" style="bottom: 100%;"></a></div>
-                                                                                    </div>
-                                                                                </div>
-
-
-                                                                                    <a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill browser</a>
-                                                                                    <a href="#" class="quality_control" title="HD off" role="button" aria-disabled="false" style="display: inline;">HD off</a>
-
-                                                                                    <a href="#" class="hide-subtitles" title="Turn on captions" role="button" aria-disabled="false" style="display: none;">Turn on captions</a>
-                                                                                </div>
-                                                                            </div>
-                                                                        </section>
-                                                                        <a class="nav-skip sr" id="before-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" href="#after-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09">Skip to end of transcript.</a>
-                                                                    </article>
-
-                                                                    <ol id="transcript-captions" class="subtitles" tabindex="0" title="Captions" role="group" aria-label="Activating an item in this group will spool the video to the corresponding time point. To skip transcript, go to previous item." style="max-height: 411px;">
-                                                                        <li style=""></li>
-                                                                    </ol>
-                                                                </div>
-
-                                                                <a class="nav-skip sr" id="after-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" href="#before-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09">Go back to start of transcript.</a>
-
-                                                                <div class="focus_grabber last" tabindex="-1"></div>
-                                                                <ul class="wrapper-downloads">
-                                                                </ul>
-                                                            </div>
-
-                                                        </section>
-                                                    </article>
-                                                </section>
-                                            </li><li class="xblock-list-item">
-                                            <section class="wrapper-xblock xblock-type-container level-element">
-                                                <header class="xblock-header">
-                                                    <div class="header-details">
-                                                        Randomize Block
-                                                    </div>
-                                                    <div class="header-actions">
-                                                        <ul class="actions-list">
-                                                            <li class="action-item action-view">
-                                                                <a href="#" class="action-button">
-                                                                    <span class="action-button-text">View</span>
-                                                                    <i class="icon fa fa-arrow-right"></i>
-                                                                </a>
-                                                            </li>
-                                                        </ul>
-                                                    </div>
-                                                </header>
-                                                <article class="xblock-render">Shows Element - Example Randomize Block could be here.</article>
-                                            </section>
-                                        </li><li class="xblock-list-item">
-                                            <section class="wrapper-xblock level-element">
-                                                <header class="xblock-header">
-                                                    <div class="header-details">
-                                                        Element Level Header
-                                                    </div>
-                                                    <div class="header-actions">
-                                                        <ul class="actions-list">
-                                                            <li class="action-item action-edit">
-                                                                <a href="#" class="edit-button action-button">
-                                                                    <i class="icon fa fa-edit"></i>
-                                                                    <span class="action-button-text">Edit</span>
-                                                                </a>
-                                                            </li>
-                                                            <li class="action-item action-duplicate">
-                                                                <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
-                                                                    <i class="icon fa fa-copy"></i>
-                                                                    <span class="sr">Duplicate this component</span>
-                                                                </a>
-                                                            </li>
-                                                            <li class="action-item action-delete">
-                                                                <a href="#" data-tooltip="Delete" class="delete-button action-button">
-                                                                    <i class="icon fa fa-trash-o"></i>
-                                                                    <span class="sr">Delete this component</span>
-                                                                </a>
-                                                            </li>
-                                                        </ul>
-                                                    </div>
-                                                </header>
-                                                <article class="xblock-render" style="height:200px;">Shows Element - Example HTML could be here.</article>
-                                            </section>
-                                        </li>
-                                        </ol>
-                                    </article>
-                                </section>
-                            </li>
-                            <li class="xblock-list-item xblock-list-item">
-                                <section class="wrapper-xblock level-nesting is-collapsible">
-                                    <header class="xblock-header">
-                                        <div class="header-details">
-                                            <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse collapse">
-                                                <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
-                                                <span class="sr">Expand or Collapse</span>
-                                            </a>
-                                            <span>Condition 2</span>
-                                        </div>
-                                        <div class="header-actions">
-                                            <ul class="actions-list">
-                                                <li class="sr action-item">No Actions</li>
-                                            </ul>
-                                        </div>
-                                    </header>
-                                    <article class="xblock-render">
-                                        <ol class="xblock-list">
-                                            <li class="xblock-list-item">
-                                                <section class="wrapper-xblock level-element">
-                                                    <header class="xblock-header">
-                                                        <div class="header-details">
-                                                            Video
-                                                        </div>
-                                                        <div class="header-actions">
-                                                            <ul class="actions-list">
-                                                                <li class="action-item action-edit">
-                                                                    <a href="#" class="edit-button action-button">
-                                                                        <i class="icon fa fa-edit"></i>
-                                                                        <span class="action-button-text">Edit</span>
-                                                                    </a>
-                                                                </li>
-                                                                <li class="action-item action-duplicate">
-                                                                    <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
-                                                                        <i class="icon fa fa-copy"></i>
-                                                                        <span class="sr">Duplicate this component</span>
-                                                                    </a>
-                                                                </li>
-                                                                <li class="action-item action-delete">
-                                                                    <a href="#" data-tooltip="Delete" class="delete-button action-button">
-                                                                        <i class="icon fa fa-trash-o"></i>
-                                                                        <span class="sr">Delete this component</span>
-                                                                    </a>
-                                                                </li>
-                                                                <ul>
-                                                                </ul></ul></div>
-                                                    </header>
-                                                    <article class="xblock-render" >Shows Element - Example Video could be here. </article>
-                                                </section>
-                                            </li><li class="xblock-list-item">
-                                            <section class="wrapper-xblock level-element">
-                                                <header class="xblock-header">
-                                                    <div class="header-details">
-                                                        Common Problem
-                                                    </div>
-                                                    <div class="header-actions">
-                                                        <ul class="actions-list">
-                                                            <li class="action-item action-edit">
-                                                                <a href="#" class="edit-button action-button">
-                                                                    <i class="icon fa fa-edit"></i>
-                                                                    <span class="action-button-text">Edit</span>
-                                                                </a>
-                                                            </li>
-                                                            <li class="action-item action-duplicate">
-                                                                <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
-                                                                    <i class="icon fa fa-copy"></i>
-                                                                    <span class="sr">Duplicate this component</span>
-                                                                </a>
-                                                            </li>
-                                                            <li class="action-item action-delete">
-                                                                <a href="#" data-tooltip="Delete" class="delete-button action-button">
-                                                                    <i class="icon fa fa-trash-o"></i>
-                                                                    <span class="sr">Delete this component</span>
-                                                                </a>
-                                                            </li>
-                                                            <ul>
-                                                            </ul></ul></div>
-                                                </header>
-                                                <article class="xblock-render">
-                                                    <section class="xblock xblock-student_view xmodule_display xmodule_CapaModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_AndyA;_ABT101;_problem;_46d2b65d793549e2876729d55df9a2cb/handler" data-type="Problem" data-block-type="problem">
-                                                        <section id="problem_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb" class="problems-wrapper" data-problem-id="i4x://AndyA/ABT101/problem/46d2b65d793549e2876729d55df9a2cb" data-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_problem;_46d2b65d793549e2876729d55df9a2cb/handler/xmodule_handler" data-progress_status="none" data-progress_detail="0/1">
-
-
-                                                            <h3 class="hd hd-2 problem-header">
-                                                                Multiple Choice
-                                                            </h3>
-
-                                                            <section class="problem-progress">(1 point possible)</section>
-
-                                                            <section class="problem">
-                                                                <div>
-                                                                    <p>
-                                                                        A multiple choice problem presents radio buttons for student
-                                                                        input. Students can only select a single option presented. Multiple Choice questions have been the subject of many areas of research due to the early invention and adoption of bubble sheets.</p>
-                                                                    <p> One of the main elements that goes into a good multiple choice question is the existence of good distractors. That is, each of the alternate responses presented to the student should be the result of a plausible mistake that a student might make.
-                                                                    </p>
-                                                                    <p>What Apple device competed with the portable CD player?</p>
-                              <span><form class="choicegroup capa_inputtype" id="inputtype_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1">
-                                  <div class="indicator-container">
-                                      <span class="unanswered" style="display:inline-block;" id="status_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1"></span>
-                                  </div>
-
-                                  <fieldset>
-
-                                      <label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipad">
-                                          <input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipad" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_ipad"> The iPad
-
-                                      </label>
-                                      <label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_beatles">
-                                          <input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_beatles" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_beatles"> Napster
-
-                                      </label>
-                                      <label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipod">
-                                          <input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipod" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_ipod"> The iPod
-
-                                      </label>
-                                      <label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_peeler">
-                                          <input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_peeler" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_peeler"> The vegetable peeler
-
-                                      </label>
-                                      <span id="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1"></span>
-                                  </fieldset>
-
-                              </form></span>
-                                                                    <section class="solution-span">
-                                                                        <span id="solution_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_solution_1"></span>
-                                                                    </section></div>
-
-                                                                <section class="action">
-                                                                    <input type="hidden" name="problem_id" value="Multiple Choice">
-
-                                                                    <input class="check Check" type="button" value="Check">
-                                                                </section>
-                                                            </section>
-                                                        </section>
-
-                                                    </section>
-                                                </article>
-                                            </section>
-                                        </li><li class="xblock-list-item">
-                                            <section class="wrapper-xblock level-element">
-                                                <header class="xblock-header">
-                                                    <div class="header-details">
-                                                        HTML
-                                                    </div>
-                                                    <div class="header-actions">
-                                                        <ul class="actions-list">
-                                                            <li class="action-item action-edit">
-                                                                <a href="#" class="edit-button action-button">
-                                                                    <i class="icon fa fa-edit"></i>
-                                                                    <span class="action-button-text">Edit</span>
-                                                                </a>
-                                                            </li>
-                                                            <li class="action-item action-duplicate">
-                                                                <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
-                                                                    <i class="icon fa fa-copy"></i>
-                                                                    <span class="sr">Duplicate this component</span>
-                                                                </a>
-                                                            </li>
-                                                            <li class="action-item action-delete">
-                                                                <a href="#" data-tooltip="Delete" class="delete-button action-button">
-                                                                    <i class="icon fa fa-trash-o"></i>
-                                                                    <span class="sr">Delete this component</span>
-                                                                </a>
-                                                            </li>
-                                                            <ul>
-                                                            </ul></ul></div>
-                                                </header>
-                                                <article class="xblock-render">
-                                                    <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_andya;_AA101;_html;_c8fb4780eb554aec95c6231680eb82cf/handler" data-type="HTMLModule" data-block-type="html">
-                                                        <ol>
-                                                            <li>
-                                                                <h2> September 21 </h2>
-                                                                <section class="update-description">
-                                                                    <section class="primary">
-                                                                        <p> Words of encouragement! This is a short note that most students will read. </p>
-                                                                        <p class="author">Anant  Agarwal (6.002x Principal Instructor)</p>
-                                                                    </section>
-                                                                    <p></p><h3>Primary versus Secondary Updates:</h3> Unfortunately, the internet throws a lot of text at students, and they
-                                                                    do not read everything that they are given. However, many students <em>do</em> read all that they are
-                                                                    given, and so detailed explanations in this section will benefit the most conscientious.
-                                                                    Any essential information should be extremely quickly summarized in the primary section for skimmers.<p></p>
-                                                                    <p></p><h3>Star Forum Poster</h3>
-                                                                    Students appreciate knowing that the course staff is reading what they post, and one of several ways
-                                                                    that you can do this is by acknowledging the star posters in your announcements.
-                                                                    <p></p>
-                                                                </section>
-                                                            </li>
-                                                        </ol>
-
-                                                    </section>
-                                                </article>
-                                            </section>
-                                        </li>
-                                        </ol>
-                                    </article>
-                                </section>
-                            </li>
-                        </ol>
-                </article>
-                </section>
-            </article>
-            <aside class="content-supplementary" role="complementary">
-
-<!-- begin publishing changes 1 -->
-
-                <!-- case never published, future release no staff lock -->
-
-                <div class="bit-publishing ">
-                  <h3 class="bar-mod-title pub-status"><span class="sr">Publishing Status </span>Draft (Never published)</h3>
-                  <div class="wrapper-last-draft bar-mod-content">
-
-                  <!-- case: unpubbed changes -->
-                      <p class="copy meta">
-                          Draft saved on 6/15/2014 at 12:45pm by amako
-                      </p>
-                  </div>
-
-                  <!-- case: future release -->
-                  <div class="wrapper-release bar-mod-content">
-                      <h5 class="title">Scheduled to Release:</h5>
-                      <p class="copy">
-                          <span class="release-date">July 25, 2014</span> with
-                          <span class="release-with">Section "Week 1"</span>
-                      </p>
-                  </div>
-
-                  <!-- case: staff and students - no lock -->
-                  <div class="wrapper-visibility bar-mod-content">
-                      <h5 class="title">Will be Visible to:</h5>
-                      <p class="copy">Staff and Students</p>
-                      <p class="action-inline">
-                        <a href="">
-                          <i class="icon fa fa-unlock"></i> Hide from Students
-                        </a>
-                      </p>
-                  </div>
-
-                  <!-- case: future release -->
-                  <div class="wrapper-pub-actions bar-mod-actions">
-                      <ul class="action-list">
-                        <li class="action-item"><a class="action-publish action-primary" href="">Publish</a></li>
-                        <li class="action-item"><a class="action-discard action-secondary is-disabled" href="" aria-disabled="true" >Discard Changes</a></li>
-                      </ul>
-                  </div>
-                </div>
-
-<!-- end publishing changes 1 -->
-
-<!-- begin publishing changes 2 -->
-
-                <!-- case published no changes, future release no staff lock -->
-
-                <div class="bit-publishing is-published">
-                  <h3 class="bar-mod-title pub-status"><span class="sr">Publishing Status </span>Published</h3>
-                  <div class="wrapper-last-draft bar-mod-content">
-
-                  <!-- case: unpubbed changes -->
-                      <p class="copy meta">
-                          Last published on 6/15/2014 at 12:45pm by amako
-                      </p>
-                  </div>
-
-                  <!-- case: future release -->
-                  <div class="wrapper-release bar-mod-content">
-                      <h5 class="title">Scheduled to Release:</h5>
-                      <p class="copy">
-                          <span class="release-date">July 25, 2014</span> with
-                          <span class="release-with">Section "Week 1"</span>
-                      </p>
-                  </div>
-
-                  <!-- case: staff and students - no lock -->
-                  <div class="wrapper-visibility bar-mod-content">
-                      <h5 class="title">Will be Visible to:</h5>
-                      <p class="copy">Staff and Students</p>
-                      <p class="action-inline">
-                        <a href="">
-                          <i class="icon fa fa-unlock"></i> Hide from Students
-                        </a>
-                      </p>
-                  </div>
-
-                  <!-- case: future release -->
-                  <div class="wrapper-pub-actions bar-mod-actions">
-                      <ul class="action-list">
-                        <li class="action-item"><a class="action-publish action-primary is-disabled" href="" aria-disabled="true" >Publish</a></li>
-                        <li class="action-item"><a class="action-discard action-secondary is-disabled" href="" aria-disabled="true" >Discard Changes</a></li>
-                      </ul>
-                  </div>
-                </div>
-
-<!-- end publishing changes 2 -->
-
-
-<!-- begin publishing changes 3 -->
-
-                <!-- case unpubbed changes, future release no staff lock -->
-
-                <div class="bit-publishing is-draft">
-                  <h3 class="bar-mod-title pub-status"><span class="sr">Publishing Status </span>Draft (Unpublished changes)</h3>
-                  <div class="wrapper-last-draft bar-mod-content">
-
-                  <!-- case: unpubbed changes -->
-                      <p class="copy meta">
-                          Draft saved on 6/15/2014 at 12:45pm by amako
-                      </p>
-                  </div>
-
-                  <!-- case: future release -->
-                  <div class="wrapper-release bar-mod-content">
-                      <h5 class="title">Scheduled to Release:</h5>
-                      <p class="copy">
-                          <span class="release-date">July 25, 2014</span> with
-                          <span class="release-with">Section "Week 1"</span>
-                      </p>
-                  </div>
-
-                  <!-- case: staff and students - no lock -->
-                  <div class="wrapper-visibility bar-mod-content">
-                      <h5 class="title">Will be Visible to:</h5>
-                      <p class="copy">Staff and Students</p>
-                      <p class="action-inline">
-                        <a href="">
-                          <i class="icon fa fa-unlock"></i> Hide from Students
-                        </a>
-                      </p>
-                  </div>
-
-                  <!-- case: future release -->
-                  <div class="wrapper-pub-actions bar-mod-actions">
-                      <ul class="action-list">
-                        <li class="action-item"><a class="action-publish action-primary" href="">Publish</a></li>
-                        <li class="action-item"><a class="action-discard action-secondary" href="">Discard Changes</a></li>
-                      </ul>
-                  </div>
-                </div>
-
-<!-- end publishing changes 3 -->
-
-
-<!-- begin publishing changes 4 -->
-
-                <!-- case unpubbed changes, future release with staff lock -->
-
-                <div class="bit-publishing is-draft is-staff-only">
-                  <h3 class="bar-mod-title pub-status"><span class="sr">Publishing Status </span>Draft (Unpublished changes)</h3>
-                  <div class="wrapper-last-draft bar-mod-content">
-
-                  <!-- case: unpubbed changes -->
-                      <p class="copy meta">
-                          Draft saved on 6/15/2014 at 12:45pm by amako
-                      </p>
-                  </div>
-
-                  <!-- case: future release -->
-                  <div class="wrapper-release bar-mod-content">
-                      <h5 class="title">Scheduled to Release:</h5>
-                      <p class="copy">
-                          <span class="release-date">July 25, 2014</span> with
-                          <span class="release-with">Section "Week 1"</span>
-                      </p>
-                  </div>
-
-                  <!-- case: staff and students - no lock -->
-                  <div class="wrapper-visibility bar-mod-content">
-                      <h5 class="title">Will be Visible to:</h5>
-                      <p class="copy">Staff only</p>
-                      <p class="action-inline">
-                        <a href="">
-                          <i class="icon fa fa-lock"></i> Hidden from Students
-                        </a>
-                      </p>
-                  </div>
-
-                  <!-- case: future release -->
-                  <div class="wrapper-pub-actions bar-mod-actions">
-                      <ul class="action-list">
-                        <li class="action-item"><a class="action-publish action-primary" href="">Publish</a></li>
-                        <li class="action-item"><a class="action-discard action-secondary" href="">Discard Changes</a></li>
-                      </ul>
-                  </div>
-                </div>
-
-<!-- end publishing changes 4 -->
-
-
-<!-- begin publishing changes 5 -->
-
-                <!-- case published no changes, release in past no staff lock -->
-
-                <div class="bit-publishing is-published">
-                  <h3 class="bar-mod-title pub-status"><span class="sr">Publishing Status </span>Published</h3>
-                  <div class="wrapper-last-draft bar-mod-content">
-
-                  <!-- case: unpubbed changes -->
-                      <p class="copy meta">
-                          Last published on 6/15/2014 at 12:45pm by amako
-                      </p>
-                  </div>
-
-                  <!-- case: future release -->
-                  <div class="wrapper-release bar-mod-content">
-                      <h5 class="title">Released:</h5>
-                      <p class="copy">
-                          <span class="release-date">May 25, 2014</span> with
-                          <span class="release-with">Section "Week 1"</span>
-                      </p>
-                  </div>
-
-                  <!-- case: staff and students - no lock -->
-                  <div class="wrapper-visibility bar-mod-content">
-                      <h5 class="title">Currently Visible to:</h5>
-                      <p class="copy">Staff and Students</p>
-                      <p class="action-inline">
-                        <a href="">
-                          <i class="icon fa fa-unlock"></i> Hide from Students
-                        </a>
-                      </p>
-                  </div>
-
-                  <!-- case: future release -->
-                  <div class="wrapper-pub-actions bar-mod-actions">
-                      <ul class="action-list">
-                        <li class="action-item"><a class="action-publish action-primary is-disabled" href="" aria-disabled="true" >Publish</a></li>
-                        <li class="action-item"><a class="action-discard action-secondary is-disabled" href="" aria-disabled="true" >Discard Changes</a></li>
-                      </ul>
-                  </div>
-                </div>
-
-<!-- end publishing changes 2 -->
-
-
-                <div class="bit-publishing">
-                    <h3 class="title-3">Publishing Status</h3>
-                    <p class="copy">This content is published with unit <a href="">Unit 1</a>. To make changes to the content of this container, place <a href="">Unit 1</a> in draft mode.</p>
-                </div>
-                <div class="bit">
-                    <h3 class="title-3">Container Reference Page</h3>
-                    <ul class="list-details">
-                        <li class="item-detail">This is a reference  for the container page, meant to show visual states and general FED hierarchy for the both the HTML template and the SASS styling.</li>
-                    </ul>
-                </div>
-            </aside>
-        </section>
-    </div>
-</div>
-
-
-</div>
-</%block>
diff --git a/cms/templates/ux/reference/course-create-rerun.html b/cms/templates/ux/reference/course-create-rerun.html
deleted file mode 100644
index 527b08004a..0000000000
--- a/cms/templates/ux/reference/course-create-rerun.html
+++ /dev/null
@@ -1,358 +0,0 @@
-<%inherit file="../../base.html" />
-
-<%block name="view_notes">
-  <%include file="_note-usage.html" />
-</%block>
-
-<%!
-from django.utils.translation import ugettext as _
-from django.core.urlresolvers import reverse
-%>
-
-<%block name="title">[template] Create a Course Rerun of HarvardX SW12.2x T2_2014</%block>
-<%block name="bodyclass">is-signedin view-course-create view-course-create-rerun</%block>
-
-<%block name="content">
-<div id="content">
-
-  <div class="wrapper-mast wrapper">
-    <header class="mast mast-wizard has-actions">
-      <h1 class="page-header">
-        <span class="page-header-sub">Create a re-run of a course</span>
-      </h1>
-
-      <nav class="nav-actions" aria-label="${_('Page Actions')}">
-        <h3 class="sr">Page Actions</h3>
-        <ul>
-          <li class="nav-item">
-            <a href="" rel="external" class="button cancel-button">Cancel</a>
-          </li>
-        </ul>
-      </nav>
-
-      <h2 class="page-header-super course-original">
-        <span class="sr">You are creating a re-run from:</span>
-        <span class="course-original-title-id">HarvardX SW12.2x T2_2014</span>
-        <span class="course-original-title">China (Part 2): The Creation and End of a Centralized Empire</span>
-      </h2>
-    </header>
-  </div> <!-- /mast -->
-
-  <div class="wrapper-content wrapper">
-    <div class="inner-wrapper">
-      <section class="content">
-        <article class="content-primary">
-          <div class="introduction">
-            <div class="copy">
-              <p>
-                Provide identifying information for this re-run of the course. The original course is not affected in any way by a re-run.
-                <strong>Note: Together, the organization, course number, and course run must uniquely identify this new course instance.</strong>
-              <p>
-            </div>
-          </div><!-- /introduction -->
-
-          <!-- - - - -->
-
-          <!-- STATE: initial form -->
-          <div class="wrapper-rerun-course">
-            <form class="form-create rerun-course course-info" id="rerun-course-form" name="rerun-course-form">
-              <!-- NOTE: this element's contents should be only included when they are needed and not kept in the DOM for all states -->
-              <div class="wrapper-error">
-
-              </div>
-
-              <div class="wrapper-form">
-                <fieldset>
-                  <legend class="sr">Required Information to Create a re-run of a course</legend>
-
-                  <ol class="list-input">
-                    <li class="field text required" id="field-course-name">
-                      <label for="rerun-course-name">Course Name</label>
-                      <input class="rerun-course-name" id="rerun-course-name" type="text" name="rerun-course-name" aria-required="true" placeholder="e.g. Introduction to Computer Science" />
-                      <span class="tip">
-                        The public display name for the new course. (This name is often the same as the original course name.)
-                      </span>
-                      <span class="tip tip-error is-hidden"></span>
-                    </li>
-                    <li class="field text required" id="field-organization">
-                      <label for="rerun-course-org">Organization</label>
-                      <input class="rerun-course-org" id="rerun-course-org" type="text" name="rerun-course-org" aria-required="true" placeholder="e.g. UniversityX or OrganizationX" />
-                      <span class="tip">
-                        The name of the organization sponsoring the new course. (This name is often the same as the original organization name.)
-                        <strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                      </span>
-                      <span class="tip tip-error is-hidden"></span>
-                    </li>
-
-                    <li class="row">
-                      <div class="column field text required" id="field-course-number">
-                        <label for="rerun-course-number">Course Number</label>
-                        <input class="rerun-course-number" id="rerun-course-number" type="text" name="rerun-course-number" aria-required="true" placeholder="e.g. CS101" />
-                        <span class="tip">
-                          The unique number that identifies the new course within the organization.  (This number is often the same as the original course number.)
-                          <strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                        </span>
-                        <span class="tip tip-error is-hidden"></span>
-                      </div>
-
-                      <div class="column field text required" id="field-course-run">
-                        <label for="rerun-course-run">Course Run</label>
-                        <input class="rerun-course-run" id="rerun-course-run" type="text" name="rerun-course-run" aria-required="true"placeholder="e.g. 2014_T1" />
-                        <span class="tip">
-                          The term in which the new course will run. (This value is often different than the original course run value.)
-                          <strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                        </span>
-                        <span class="tip tip-error is-hidden"></span>
-                      </div>
-                    </li>
-                  </ol>
-
-                  <input type="hidden" value="" class="allow-unicode-course-id" /> <!-- TODO: need to add support for allow_unicode_course_id in real view's template -->
-                </fieldset>
-              </div>
-
-              <div class="actions">
-                <button type="submit" class="action action-primary rerun-course-save is-disabled" aria-disabled="true" >Create Re-run</button>
-                <button type="button" class="action action-secondary action-cancel rerun-course-cancel">Cancel</button>
-              </div>
-            </form>
-          </div><!-- /rerun-course -->
-
-          <!-- - - - -->
-
-          <!-- STATE: error - all attributes match an existing course -->
-          <div class="wrapper-rerun-course">
-            <form class="form-create rerun-course course-info" id="rerun-course-form" name="rerun-course-form">
-              <div class="wrapper-error is-shown">
-                <!-- NOTE: this element's contents should be only included when they are needed and not kept in the DOM for all states -->
-                <div id="course_rerun_error" name="course_rerun_error" class="message message-status error" role="alert">
-                  <p>A course already has that organization, course number, and course run. Change one or more of these values to give the new course a unique URL.</p>
-                </div>
-              </div>
-
-              <div class="wrapper-form">
-                <fieldset>
-                  <legend class="sr">Required Information to Create a re-run of a course</legend>
-
-                  <ol class="list-input">
-                    <li class="field text required error" id="field-course-name">
-                      <label for="rerun-course-name">Course Name</label>
-                      <input class="rerun-course-name" id="rerun-course-name" type="text" name="rerun-course-name" aria-required="true" placeholder="e.g. Introduction to Computer Science" />
-                      <span class="tip">
-                        The public display name for the new course. (This name is often the same as the original course name.)
-                      </span>
-                      <span class="tip tip-error is-hiding"></span>
-                    </li>
-                    <li class="field text required error" id="field-organization">
-                      <label for="rerun-course-org">Organization</label>
-                      <input class="rerun-course-org" id="rerun-course-org" type="text" name="rerun-course-org" aria-required="true" placeholder="e.g. UniversityX or OrganizationX" />
-                      <span class="tip">
-                        The name of the organization sponsoring the new course. (This name is often the same as the original organization name.)
-                        <strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                      </span>
-                      <span class="tip tip-error is-hiding"></span>
-                    </li>
-
-                    <li class="row">
-                      <div class="column field text required error" id="field-course-number">
-                        <label for="rerun-course-number">Course Number</label>
-                        <input class="rerun-course-number" id="rerun-course-number" type="text" name="rerun-course-number" aria-required="true" placeholder="e.g. CS101" />
-                        <span class="tip">
-                          The unique number that identifies the new course within the organization.  (This number is often the same as the original course number.)
-                          <strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                        </span>
-                        <span class="tip tip-error is-hiding"></span>
-                      </div>
-
-                      <div class="column field text required error" id="field-course-run">
-                        <label for="rerun-course-run">Course Run</label>
-                        <input class="rerun-course-run" id="rerun-course-run" type="text" name="rerun-course-run" aria-required="true"placeholder="e.g. 2014_T1" />
-                        <span class="tip">
-                          The term in which the new course will run. (This value is often different than the original course run value.)
-                          <strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                        </span>
-                        <span class="tip tip-error is-hiding"></span>
-                      </div>
-                    </li>
-                  </ol>
-
-                  <input type="hidden" value="" class="allow-unicode-course-id" /> <!-- TODO: need to add support for allow_unicode_course_id in real view's template -->
-
-                </fieldset>
-              </div>
-
-              <div class="actions">
-                <button type="submit" class="action action-primary rerun-course-save is-disabled" aria-disabled="true" >Create Re-run</button>
-                <button type="button" class="action action-secondary action-cancel rerun-course-cancel">Cancel and Return to Dashboard</button>
-              </div>
-            </form>
-          </div><!-- /rerun-course -->
-
-          <!-- - - - -->
-
-          <!-- STATE: error - specific error fields -->
-          <div class="wrapper-rerun-course">
-            <form class="form-create rerun-course course-info" id="rerun-course-form" name="rerun-course-form">
-              <div class="wrapper-error is-shown">
-                <!-- NOTE: this element's contents should be only included when they are needed and not kept in the DOM for all states -->
-                <div id="course_rerun_error" name="course_rerun_error" class="message message-status error" role="alert">
-                  <p>Please correct the highlighted fields below.</p>
-                </div>
-              </div>
-
-              <div class="wrapper-form">
-                <fieldset>
-                  <legend class="sr">Required Information to Create a re-run of a course</legend>
-
-                  <ol class="list-input">
-                    <li class="field text required error" id="field-course-name">
-                      <label for="rerun-course-name">Course Name</label>
-                      <input class="rerun-course-name" id="rerun-course-name" type="text" name="rerun-course-name" aria-required="true" placeholder="e.g. Introduction to Computer Science" />
-                      <span class="tip">
-                        The public display name for the new course. (This name is often the same as the original course name.)
-                      </span>
-                      <span class="tip tip-error is-showing">Required field.</span>
-                    </li>
-                    <li class="field text required error" id="field-organization">
-                      <label for="rerun-course-org">Organization</label>
-                      <input class="rerun-course-org" id="rerun-course-org" type="text" name="rerun-course-org" aria-required="true" placeholder="e.g. UniversityX or OrganizationX" />
-                      <span class="tip">
-                        The name of the organization sponsoring the new course. (This name is often the same as the original organization name.)
-                        <strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                      </span>
-                      <span class="tip tip-error is-showing">Please do not use any spaces or special characters in this field.</span>
-                    </li>
-
-                    <li class="row">
-                      <div class="column field text required error" id="field-course-number">
-                        <label for="rerun-course-number">Course Number</label>
-                        <input class="rerun-course-number" id="rerun-course-number" type="text" name="rerun-course-number" aria-required="true" placeholder="e.g. CS101" />
-                        <span class="tip">
-                          The unique number that identifies the new course within the organization.  (This number is often the same as the original course number.)
-                          <strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                        </span>
-                        <span class="tip tip-error is-showing">Please do not use any spaces or special characters in this field.</span>
-                      </div>
-
-                      <div class="column field text required error" id="field-course-run">
-                        <label for="rerun-course-run">Course Run</label>
-                        <input class="rerun-course-run" id="rerun-course-run" type="text" name="rerun-course-run" aria-required="true"placeholder="e.g. 2014_T1" />
-                        <span class="tip">
-                          The term in which the new course will run. (This value is often different than the original course run value.)
-                          <strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                        </span>
-                        <span class="tip tip-error is-showing">Required field.</span>
-                      </div>
-                    </li>
-                  </ol>
-
-                  <input type="hidden" value="" class="allow-unicode-course-id" /> <!-- TODO: need to add support for allow_unicode_course_id in real view's template -->
-
-                </fieldset>
-              </div>
-
-              <div class="actions">
-                <button type="submit" class="action action-primary rerun-course-save is-disabled" aria-disabled="true" >Create Re-run</button>
-                <button type="button" class="action action-secondary action-cancel rerun-course-cancel">Cancel and Return to Dashboard</button>
-              </div>
-            </form>
-          </div><!-- /rerun-course -->
-
-          <!-- - - - -->
-
-          <!-- STATE: processing successful submission -->
-          <div class="wrapper-rerun-course">
-            <form class="form-create rerun-course course-info" id="rerun-course-form" name="rerun-course-form">
-              <div class="wrapper-error">
-              </div>
-
-              <div class="wrapper-form">
-                <fieldset>
-                  <legend class="sr">Required Information to Create a re-run of a course</legend>
-
-                  <ol class="list-input">
-                    <li class="field text required" id="field-course-name">
-                      <label for="rerun-course-name">Course Name</label>
-                      <input class="rerun-course-name" id="rerun-course-name" type="text" name="rerun-course-name" aria-required="true" placeholder="e.g. Introduction to Computer Science" />
-                      <span class="tip">
-                        The public display name for the new course. (This name is often the same as the original course name.)
-                      </span>
-                      <span class="tip tip-error is-hiding"></span>
-                    </li>
-                    <li class="field text required" id="field-organization">
-                      <label for="rerun-course-org">Organization</label>
-                      <input class="rerun-course-org" id="rerun-course-org" type="text" name="rerun-course-org" aria-required="true" placeholder="e.g. UniversityX or OrganizationX" />
-                      <span class="tip">
-                        The name of the organization sponsoring the new course. (This name is often the same as the original organization name.)
-                        <strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                      </span>
-                      <span class="tip tip-error is-hiding"></span>
-                    </li>
-
-                    <li class="row">
-                      <div class="column field text required" id="field-course-number">
-                        <label for="rerun-course-number">Course Number</label>
-                        <input class="rerun-course-number" id="rerun-course-number" type="text" name="rerun-course-number" aria-required="true" placeholder="e.g. CS101" />
-                        <span class="tip">
-                          The unique number that identifies the new course within the organization.  (This number is often the same as the original course number.)
-                          <strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                        </span>
-                        <span class="tip tip-error is-hiding"></span>
-                      </div>
-
-                      <div class="column field text required" id="field-course-run">
-                        <label for="rerun-course-run">Course Run</label>
-                        <input class="rerun-course-run" id="rerun-course-run" type="text" name="rerun-course-run" aria-required="true"placeholder="e.g. 2014_T1" />
-                        <span class="tip">
-                          The term in which the new course will run. (This value is often different than the original course run value.)
-                          <strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
-                        </span>
-                        <span class="tip tip-error is-hiding"></span>
-                      </div>
-                    </li>
-                  </ol>
-
-                  <input type="hidden" value="" class="allow-unicode-course-id" /> <!-- TODO: need to add support for allow_unicode_course_id in real view's template -->
-                </fieldset>
-              </div>
-
-              <div class="actions">
-                <button type="submit" class="action action-primary rerun-course-save is-disabled is-processing"  aria-disabled="true">
-                  <i class="icon fa fa-refresh fa-spin"></i>
-                  Processing Re-run Request
-                </button>
-              </div>
-            </form>
-          </div><!-- /rerun-course -->
-
-        </article><!-- /content-primary -->
-
-        <aside class="content-supplementary" role="complementary">
-          <div class="bit">
-            <h3 class="title-3">When will my course re-run start?</h3>
-            <ul class="list-details">
-              <li class="item-detail">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum.</li>
-            </ul>
-          </div>
-
-          <div class="bit">
-            <h3 class="title-3">What transfers from the original course?</h3>
-            <ul class="list-details">
-              <li class="item-detail">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum.</li>
-            </ul>
-          </div>
-
-          <div class="bit">
-            <h3 class="title-3">What does not transfer from the original course?</h3>
-            <ul class="list-details">
-              <li class="item-detail">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum.</li>
-            </ul>
-          </div>
-        </aside><!-- /content-supplementary -->
-
-      </section>
-    </div><!-- /content -->
-
-  </div>
-</div>
-</%block>
diff --git a/cms/templates/ux/reference/index.html b/cms/templates/ux/reference/index.html
index 5f7c6d1aeb..a39951ade0 100644
--- a/cms/templates/ux/reference/index.html
+++ b/cms/templates/ux/reference/index.html
@@ -1,3 +1,6 @@
+## Override the default styles_version to the Pattern Library version (version 2)
+<%! main_css = "style-main-v2" %>
+
 <%page expression_filter="h"/>
 <%inherit file="../../base.html" />
 
@@ -22,8 +25,6 @@
                         </div>
                         <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
                             <ul>
-                                <li><a href="container.html">Container page</a></li>
-                                <li><a href="unit.html">Unit page</a></li>
                                 <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
                             </ul>
                         </section>
diff --git a/cms/templates/ux/reference/modal_access-component.html b/cms/templates/ux/reference/modal_access-component.html
deleted file mode 100644
index 7608244c3e..0000000000
--- a/cms/templates/ux/reference/modal_access-component.html
+++ /dev/null
@@ -1,127 +0,0 @@
-<%page expression_filter="h"/>
-<div class="wrapper wrapper-modal-window wrapper-modal-window-edit-xblock"  aria-labelledby="modal-window-title" role="dialog">
-  <div class="modal-window-overlay"></div>
-  <div class="modal-window confirm modal-med modal-type-html modal-editor" style="top: 50px; left: 400px;" tabindex="-1" aria-labelledby="modal-window-title">
-    <div class="edit-xblock-modal">
-      <div class="modal-header">
-        <h2 id="modal-window-title" class="title modal-window-title">Editing visibility for: [Component Name]</h2>
-      </div>
-
-      <div class="modal-content">
-        <div class="xblock-editor" data-locator="i4x://TestU/cohorts001/chapter/748152225449412a846bc24811a5621c" data-course-key="">
-
-          <div class="xblock xblock-visibility_view">
-
-            <div class="modal-section visibility-summary">
-              <div class="summary-message summary-message-warning visibility-summary-message">
-                <i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
-                <p class="copy"><span class="sr">Warning: </span>This component is contained in a unit that is hidden from students. Component visibility settings are overridden by the unit visibility settings.</p>
-              </div>
-
-              <!-- NOTE: use when no group configuration has been set -->
-              <div class="is-not-configured has-actions">
-                <h4 class="title">You have not set up any groups</h4>
-
-                <div class="copy">
-                  <p>Groups are a way for you to organize content in your course with a particular student experience in mind. They are commonly used to facilitate content and pedagogical experiments as well as to provide different tracks of content.</p>
-                </div>
-
-                <div class="actions">
-                  <a href="" class="action action-primary action-settings">Manage groups in this course</a>
-                </div>
-              </div>
-            </div>
-
-            <form class="visibility-controls-form" method="post" action="">
-
-              <div class="modal-section visibility-controls">
-                <h3 class="modal-section-title">Set visibility to:</h3>
-
-                <div class="modal-section-content">
-
-                  <section class="visibility-controls-primary">
-                    <ul class="list-fields list-radio">
-                      <li class="field field-radio field-visibility-level">
-                        <input type="radio" id="visibility-level-all" name="visibility-level" value="" class="input input-radio visibility-level-all"  />
-                        <label for="visibility-level-all" class="label">All Students and Staff</label>
-                      </li>
-
-                      <li class="field field-radio field-visibility-level">
-                        <input type="radio" id="visibility-level-specific" name="visibility-level" value="" class="input input-radio visibility-level-specific" checked="checked" />
-                        <label for="visibility-level-specific" class="label">Specific Groups</label>
-                      </li>
-                    </ul>
-                  </section>
-
-                  <!-- NOTE: @andyarmstrong, if you need this wrapper to show and hide, great. If not, please remove it from the DOM -->
-                  <div class="wrapper-visibility-specific">
-
-                    <section class="visibility-controls-secondary">
-                      <div class="visibility-controls-group">
-                        <h4 class="visibility-controls-title modal-subsection-title sr">Content Groups</h4>
-                        <ul class="list-fields list-checkbox">
-                          <li class="field field-checkbox field-visibility-content-group">
-                            <input type="checkbox" id="visibility-content-group-NAME1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME1" />
-                            <label for="visibility-content-group-NAME1" class="label">Content Group NAME 1</label>
-                          </li>
-
-                          <li class="field field-checkbox field-visibility-content-group">
-                            <input type="checkbox" id="visibility-content-group-NAME2" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME2" />
-                            <label for="visibility-content-group-NAME2" class="label">Content Group NAME 2</label>
-                          </li>
-
-                          <li class="field field-checkbox field-visibility-content-group">
-                            <input type="checkbox" id="visibility-content-group-NAME3" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME3" />
-                            <label for="visibility-content-group-NAME3" class="label">Content Group NAME 3</label>
-                          </li>
-
-                          <li class="field field-checkbox field-visibility-content-group">
-                            <input type="checkbox" id="visibility-content-group-NAME4" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME4" />
-                            <label for="visibility-content-group-NAME4" class="label">Content Group NAME 4</label>
-                          </li>
-
-                          <!-- NOTE: @andyarmstrong, here's an example of how we would treat a group that was deleted/removed - we need a .was removed class and an additional UI element called a .note -->
-                          <li class="field field-checkbox field-visibility-content-group was-removed">
-                            <input type="checkbox" id="visibility-content-group-deleted1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-deleted" checked="checked" />
-                            <label for="visibility-content-group-deleted1" class="label">
-                              Deleted Content Group
-                            </label>
-                            <span class="note">The selected group no longer exists. Choose another group or make the component visible to All Students and Staff</span>
-                          </li>
-
-                          <!-- NOTE: @andyarmstrong, here's an example of how we would treat a group that was deleted/removed - we need a .was removed class and an additional UI element called a .note -->
-                          <li class="field field-checkbox field-visibility-content-group was-removed">
-                            <input type="checkbox" id="visibility-content-group-deleted1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-deleted" checked="checked" />
-                            <label for="visibility-content-group-deleted1" class="label">
-                              Deleted Content Group
-                            </label>
-                            <span class="note">The selected group no longer exists. Choose another group or make the component visible to All Students and Staff</span>
-                          </li>
-                        </ul>
-                      </div>
-                    </section>
-                  </div>
-                </div>
-              </div>
-
-            </form>
-
-          </div><!-- .xblock -->
-        </div><!-- .xblock-editor -->
-      </div><!-- .modal-content -->
-
-      <div class="modal-actions">
-        <h3 class="sr">Actions</h3>
-        <ul>
-          <li class="action-item">
-            <a href="#" class="button action-primary action-save">Save</a>
-          </li>
-
-          <li class="action-item">
-            <a href="#" class="button  action-cancel">Cancel</a>
-          </li>
-        </ul>
-      </div>
-    </div><!-- .xblock-visibility-modal -->
-  </div><!-- .modal-window -->
-</div><!-- .wrapper-modal-window -->
diff --git a/cms/templates/ux/reference/modal_bulkpublish-section.html b/cms/templates/ux/reference/modal_bulkpublish-section.html
deleted file mode 100644
index 7534c363ad..0000000000
--- a/cms/templates/ux/reference/modal_bulkpublish-section.html
+++ /dev/null
@@ -1,144 +0,0 @@
-<%page expression_filter="h"/>
-<%! from django.utils.translation import ugettext as _ %>
-
-<div class="wrapper wrapper-modal-window wrapper-modal-window-bulkpublish-section" aria-labelledby="modal-window-title" role="dialog">
-    <div class="modal-window-overlay"></div>
-    <div style="top: 5%; left: 30%;" class="modal-window confirm modal-med modal-type-confirm">
-        <div class="bulkpublish-section-modal">
-            <div class="modal-header">
-                <h2 class="title modal-window-title">Publish [section name]</h2>
-            </div>
-
-            <div class="modal-content">
-                <div class="message modal-introduction">
-                    <p>Publish all unpublished changes for this section?</p>
-                </div>
-
-                <div class="modal-section bulkpublish-included">
-                    <h3 class="modal-section-title">The following will be published:</h3>
-                    <div class="modal-section-content">
-                        <div class="outline outline-simple outline-bulkpublish">
-                            <ol class="list-subsections">
-                                <li class="outline-item outline-subsection">
-                                    <h4 class="subsection-title item-title">Subsection Title</h4>
-
-                                    <div class="subsection-content">
-                                        <ol class="list-units">
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                        </ol>
-                                    </div>
-                                </li>
-
-                                <li class="outline-item outline-subsection">
-                                    <h4 class="subsection-title item-title">Subsection Title</h4>
-
-                                    <div class="subsection-content">
-                                        <ol class="list-units">
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
-                                            </li>
-                                            <li class="outline-item outline-unit">
-                                                <span class="unit-title item-title">Unit Title</span>
-                                            </li>
-                                        </ol>
-                                    </div>
-                                </li>
-
-                                <li class="outline-item outline-subsection">
-                                    <h4 class="subsection-title item-title">Subsection Title</h4>
-
-                                    <div class="subsection-content">
-                                        <ol class="list-units">
-                                            <ol class="list-units">
-                                                <li class="outline-item outline-unit">
-                                                    <span class="unit-title item-title">Unit Title</span>
-                                                </li>
-                                                <li class="outline-item outline-unit">
-                                                    <span class="unit-title item-title">Unit Title</span>
-                                                </li>
-                                                <li class="outline-item outline-unit">
-                                                    <span class="unit-title item-title">Unit Title</span>
-                                                </li>
-                                                <li class="outline-item outline-unit">
-                                                    <span class="unit-title item-title">Unit Title</span>
-                                                </li>
-                                                <li class="outline-item outline-unit">
-                                                    <span class="unit-title item-title">Unit Title</span>
-                                                </li>
-                                                <li class="outline-item outline-unit">
-                                                    <span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
-                                                </li>
-                                                <li class="outline-item outline-unit">
-                                                    <span class="unit-title item-title">Unit Title</span>
-                                                </li>
-                                            </ol>
-                                        </ol>
-                                    </div>
-                                </li>
-                            </ol>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="modal-actions">
-                <h3 class="sr">Actions</h3>
-                <ul>
-                  <li class="action-item">
-                    <a href="#" class="button action-primary action-publish">Publish</a>
-                  </li>
-                  <li class="action-item">
-                    <a href="#" class="button  action-cancel">Cancel</a>
-                  </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/cms/templates/ux/reference/modal_bulkpublish-subsection.html b/cms/templates/ux/reference/modal_bulkpublish-subsection.html
deleted file mode 100644
index 72d0c4625c..0000000000
--- a/cms/templates/ux/reference/modal_bulkpublish-subsection.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<%page expression_filter="h"/>
-<%! from django.utils.translation import ugettext as _ %>
-
-<div class="wrapper wrapper-modal-window wrapper-modal-window-bulkpublish-subsection" aria-labelledby="modal-window-title" role="dialog">
-    <div class="modal-window-overlay"></div>
-    <div style="top: 5%; left: 30%;" class="modal-window confirm modal-med modal-type-confirm">
-        <div class="bulkpublish-subsection-modal">
-            <div class="modal-header">
-                <h2 class="title modal-window-title">Publish [subsection name]</h2>
-            </div>
-
-            <div class="modal-content">
-                <div class="message modal-introduction">
-                    <p>Publish all unpublished changes for this subsection?</p>
-                </div>
-
-                <div class="modal-section bulkpublish-included">
-                    <h3 class="modal-section-title">The following will be published:</h3>
-                    <div class="modal-section-content">
-                        <div class="outline outline-simple outline-bulkpublish">
-                            <ol class="list-units">
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title</span>
-                                </li>
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title</span>
-                                </li>
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title</span>
-                                </li>
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title</span>
-                                </li>
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title</span>
-                                </li>
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
-                                </li>
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title</span>
-                                </li>
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title</span>
-                                </li>
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title</span>
-                                </li>
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title</span>
-                                </li>
-                                <li class="outline-item outline-unit">
-                                    <span class="unit-title item-title">Unit Title</span>
-                                </li>
-                            </ol>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="modal-actions">
-                <h3 class="sr">Actions</h3>
-                <ul>
-                  <li class="action-item">
-                    <a href="#" class="button action-primary action-publish">Publish</a>
-                  </li>
-                  <li class="action-item">
-                    <a href="#" class="button  action-cancel">Cancel</a>
-                  </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/cms/templates/ux/reference/modal_bulkpublish-unit.html b/cms/templates/ux/reference/modal_bulkpublish-unit.html
deleted file mode 100644
index 0cdd09e389..0000000000
--- a/cms/templates/ux/reference/modal_bulkpublish-unit.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<%page expression_filter="h"/>
-<%! from django.utils.translation import ugettext as _ %>
-
-<div class="wrapper wrapper-modal-window wrapper-modal-window-bulkpublish-unit" aria-labelledby="modal-window-title"  role="dialog">
-    <div class="modal-window-overlay"></div>
-    <div style="top: 5%; left: 30%;" class="modal-window confirm modal-med modal-type-confirm">
-        <div class="bulkpublish-unit-modal">
-            <div class="modal-header">
-                <h2 class="title modal-window-title">Publish [unit name]</h2>
-            </div>
-
-            <div class="modal-content">
-                <div class="message modal-introduction">
-                    <p>Publish all unpublished changes for this unit?</p>
-                </div>
-            </div>
-
-            <div class="modal-actions">
-                <h3 class="sr">Actions</h3>
-                <ul>
-                  <li class="action-item">
-                    <a href="#" class="button action-primary action-publish">Publish</a>
-                  </li>
-                  <li class="action-item">
-                    <a href="#" class="button  action-cancel">Cancel</a>
-                  </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/cms/templates/ux/reference/outline.html b/cms/templates/ux/reference/outline.html
deleted file mode 100644
index 55600ea26d..0000000000
--- a/cms/templates/ux/reference/outline.html
+++ /dev/null
@@ -1,773 +0,0 @@
-<%inherit file="../../base.html" />
-
-<%block name="view_notes">
-  <%include file="_note-usage.html" />
-</%block>
-
-<%!
-from django.core.urlresolvers import reverse
-%>
-<%block name="title">[template] Course Outline UI</%block>
-<%block name="bodyclass">is-signedin course view-outline</%block>
-
-<%block name="content">
-
-<div id="content">
-
-  <div class="wrapper-mast wrapper">
-    <header class="mast has-actions has-subtitle">
-      <h1 class="page-header">
-        <small class="subtitle">Content</small>
-        <span class="sr">&gt; </span>Course Outline
-      </h1>
-
-      <nav class="nav-actions" aria-label="${_('Page Actions')}">
-        <h3 class="sr">Page Actions</h3>
-        <ul>
-          <li class="nav-item">
-            <a href="#" class="button button-new" data-category="chapter" data-parent="" data-default-name="">
-              <i class="icon fa fa-plus"></i>New Section
-            </a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all">
-              <span class="collapse-all"><i class="icon fa fa-arrow-up"></i> <span class="label">Collapse All Sections</span></span>
-              <span class="expand-all"><i class="icon fa fa-arrow-down"></i> <span class="label">Expand All Sections</span></span>
-            </a>
-          </li>
-          <li class="nav-item">
-            <a href="" rel="external" class="button button-view view-live-button" title="This link will open in a new browser window/tab">View Live</a>
-          </li>
-        </ul>
-      </nav>
-    </header>
-  </div>
-
-  <div class="wrapper-content wrapper">
-    <section class="content">
-
-      <article class="content-primary" role="main">
-
-        <div class="wrapper-dnd">
-          <article class="outline" data-locator="" data-course-key="">
-            <h2 class="sr outline-title">Your Course's Outline</h2>
-
-            <ol class="list-sections is-sortable">
-
-              <!-- section -->
-              <li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-expanded.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-scheduled.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <ol class="list-subsections is-sortable">
-                    <!-- subsection -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-expanded.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-scheduled.html" />
-
-                        <%include file="outline_status_grading.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                        <ol class="list-units is-sortable">
-                          <!-- unit -->
-                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-                          </li>
-                        </ol>
-                        <!-- /list: units -->
-                      </div>
-
-                      <%include file="outline_add-unit.html" />
-
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection -->
-
-                    <!-- subsection -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-expanded.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-scheduled.html" />
-
-                        <%include file="outline_status_grading.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                        <ol class="list-units is-sortable">
-                          <!-- unit -->
-                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-                          </li>
-
-                          <!-- unit -->
-                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-                          </li>
-
-                          <!-- unit -->
-                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-                          </li>
-
-                          <!-- unit -->
-                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-                          </li>
-                        </ol>
-                        <!-- /list: units -->
-
-                        <%include file="outline_add-unit.html" />
-
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection -->
-                  </ol>
-                  <!-- /list: subsections -->
-
-                  <%include file="outline_add-subsection.html" />
-
-                </div>
-                <!-- /section-content -->
-              </li>
-              <!-- /section -->
-            </ol>
-            <!-- /list: sections -->
-
-            <%include file="outline_add-section.html" />
-
-
-            <!-- ========== -->
-
-
-            <!-- STATES: sections -->
-            <ol class="list-sections is-sortable">
-
-              <!-- section: not published + not scheduled/released -->
-              <li class="outline-item outline-section is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-collapsed.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-draft.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <!-- subsections + units here -->
-                </div>
-              </li>
-               <!-- /section: not published + not scheduled/released -->
-
-              <!-- section: published + scheduled -->
-              <li class="outline-item outline-section is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-collapsed.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-scheduled.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <!-- subsections + units here -->
-                </div>
-              </li>
-              <!-- /section: published + scheduled -->
-
-              <!-- section: published + released -->
-              <li class="outline-item outline-section is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-collapsed.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-released.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <!-- subsections + units here -->
-                </div>
-              </li>
-              <!-- /section: published + released -->
-
-              <!-- section: published + scheduled + locked content -->
-              <li class="outline-item outline-section is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-collapsed.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-scheduled.html" />
-
-                  <%include file="outline_status_message-lock.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <!-- subsections + units here -->
-                </div>
-              </li>
-              <!-- /section: published + scheduled + locked content -->
-
-              <!-- section: published + released + locked content -->
-              <li class="outline-item outline-section is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-collapsed.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-released.html" />
-
-                  <%include file="outline_status_message-lock.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <!-- subsections + units here -->
-                </div>
-              </li>
-              <!-- /section: published + released + locked content -->
-
-              <!-- section: locked content -->
-              <li class="outline-item outline-section is-collapsible is-draggable is-staff-only is-collapsed" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-collapsed.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-lock.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <!-- subsections + units here -->
-                </div>
-              </li>
-              <!-- /section: locked content -->
-
-              <!-- section: published + released + has unpublished content -->
-              <li class="outline-item outline-section is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-collapsed.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-released.html" />
-
-                  <%include file="outline_status_message-unpublished_changes.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <!-- subsections + units here -->
-                </div>
-              </li>
-              <!-- /section: published + released + has unpublished content -->
-
-              <!-- section: published + scheduled + has unpublished content -->
-              <li class="outline-item outline-section is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-collapsed.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-scheduled.html" />
-
-                  <%include file="outline_status_message-unpublished_changes.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <!-- subsections + units here -->
-                </div>
-              </li>
-              <!-- /section: published + scheduled + has unpublished content -->
-
-              <!-- section: published + released + has error -->
-              <li class="outline-item outline-section is-collapsible is-draggable has-errors is-collapsed" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-collapsed.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-released.html" />
-
-                  <%include file="outline_status_message-error.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <!-- subsections + units here -->
-                </div>
-              </li>
-              <!-- /section: published + released + has error -->
-
-              <!-- section: published + scheduled + has error -->
-              <li class="outline-item outline-section is-collapsible is-draggable has-errors is-collapsed" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-collapsed.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-scheduled.html" />
-
-                  <%include file="outline_status_message-error.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <!-- subsections + units here -->
-                </div>
-              </li>
-              <!-- /section: published + scheduled + has error -->
-
-
-              <!-- ========== -->
-
-
-              <!-- section: placeholder -->
-              <li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-expanded.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-draft.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <ol class="list-subsections is-sortable">
-                    <!-- subsection: not published + not scheduled/released -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-draft.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                        <!-- units here  -->
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: not published + not scheduled/released -->
-
-                    <!-- subsection: not published + not scheduled/released + graded -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-draft.html" />
-
-                        <%include file="outline_status_grading.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: not published + not scheduled/released + graded -->
-
-                    <!-- subsection: published + scheduled w/ section -->
-                    <li class="outline-item outline-subsection is-collapsible is-ready is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-scheduled_with_parent.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + scheduled w/ section -->
-
-                    <!-- subsection: published + scheduled + graded  -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-scheduled.html" />
-
-                        <%include file="outline_status_grading.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + scheduled + graded -->
-
-                    <!-- subsection: published + scheduled + graded + due date  -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-scheduled.html" />
-
-                        <%include file="outline_status_grading.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + scheduled + graded + due date -->
-
-                    <!-- subsection: published + scheduled + graded + due date + locked content  -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-scheduled.html" />
-
-                        <%include file="outline_status_grading.html" />
-
-                        <%include file="outline_status_message-lock.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + scheduled + graded + due date + locked content -->
-
-                    <!-- subsection: published + released  -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable is-live is-scheduled is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-released_with_parent.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + released -->
-
-                    <!-- subsection: published + released (on specific date) + graded  -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <div class="status-release">
-                          <p>
-                            <span class="sr status-release-label">Release Status:</span>
-                            <span class="status-release-value">
-                              <i class="icon fa fa-check-square"></i>
-                              Released <span class="sr">on</span>:
-                            </span>
-                            <span class="status-release-date">March 25, 2014</span>
-                          </p>
-                        </div>
-
-                        <%include file="outline_status_grading.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + released (on specific date) + graded -->
-
-                    <!-- subsection: published + released + graded + due date  -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-released_with_parent.html" />
-
-                        <%include file="outline_status_grading.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + released + graded + due date -->
-
-                    <!-- subsection: published + released + graded + due date + locked content  -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-released_with_parent.html" />
-
-                        <%include file="outline_status_grading.html" />
-
-                        <%include file="outline_status_message-lock.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + released + graded + due date + locked content -->
-
-                    <!-- subsection: locked content -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable is-staff-only is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-lock.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: locked content -->
-
-                    <!-- subsection: published + scheduled + has unpublished content -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-scheduled.html" />
-
-                        <%include file="outline_status_message-unpublished_units.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + scheduled + has unpublished content -->
-
-                    <!-- subsection: published + released + has unpublished content -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-released.html" />
-
-                        <%include file="outline_status_message-unpublished_changes.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + released + has unpublished content -->
-
-                    <!-- subsection: published + released + has error -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable has-errors is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-released.html" />
-
-                        <%include file="outline_status_message-error.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + released + has error -->
-
-                    <!-- subsection: published + scheduled + has error -->
-                    <li class="outline-item outline-subsection is-collapsible has-errors is-collapsed" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-collapsed.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-scheduled.html" />
-
-                        <%include file="outline_status_message-error.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: published + scheduled + has error -->
-                  </ol>
-                </div>
-              </li>
-              <!-- /section: placeholder -->
-
-
-              <!-- ========== -->
-
-
-              <!-- section: placeholder -->
-              <li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
-
-                <%include file="outline_section_header-expanded.html" />
-
-                <div class="section-status">
-                  <%include file="outline_status_release-draft.html" />
-                </div>
-                <!-- /section-status -->
-
-                <div class="section-content">
-                  <ol class="list-subsections is-sortable">
-                    <!-- subsection: placeholder -->
-                    <li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
-
-                      <%include file="outline_subsection_header-expanded.html" />
-
-                      <div class="subsection-status">
-                        <%include file="outline_status_release-scheduled.html" />
-                      </div>
-                      <!-- /subsection-status -->
-
-                      <div class="subsection-content">
-                        <ol class="list-units is-sortable">
-
-                          <!-- unit -->
-                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-
-                            <div class="unit-status">
-
-                            </div>
-                            <!-- /unit-status -->
-                          </li>
-                          <!-- /unit -->
-
-
-                          <!-- unit: not published -->
-                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-
-                            <div class="unit-status">
-                              <%include file="outline_status_release-draft.html" />
-                            </div>
-                            <!-- /unit-status -->
-                          </li>
-                          <!-- /unit: not published -->
-
-                          <!-- unit: published -->
-                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-                          </li>
-                          <!-- /unit: published -->
-
-                          <!-- unit: not published + locked content -->
-                          <li class="outline-item outline-unit is-draggable is-staff-only" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-
-                            <div class="unit-status">
-                              <%include file="outline_status_message-lock.html" />
-                            </div>
-                            <!-- /unit-status -->
-                          </li>
-                          <!-- /unit: not published + locked content -->
-
-                          <!-- unit: published + has unpublished content -->
-                          <li class="outline-item outline-unit is-draggable has-warnings" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-
-                            <div class="unit-status">
-                              <%include file="outline_status_message-unpublished_changes.html" />
-                            </div>
-                            <!-- /unit-status -->
-                          </li>
-                          <!-- /unit: published + has unpublished content -->
-
-                          <!-- unit: not published + has unpublished content -->
-                          <li class="outline-item outline-unit is-draggable has-warnings" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-
-                            <div class="unit-status">
-                              <%include file="outline_status_message-unpublished_units.html" />
-                            </div>
-                            <!-- /unit-status -->
-                          </li>
-                          <!-- /unit: not published + has unpublished content -->
-
-                          <!-- unit: has error -->
-                          <li class="outline-item outline-unit is-draggable has-errors" data-parent="" data-locator="">
-                            <%include file="outline_unit_header.html" />
-
-                            <div class="unit-status">
-                              <%include file="outline_status_message-error.html" />
-                            </div>
-                            <!-- /unit-status -->
-                          </li>
-                          <!-- /unit: has error -->
-                        </ol>
-                        <!-- /list: units -->
-
-                        <%include file="outline_add-unit.html" />
-
-                      </div>
-                      <!-- /subsection-content -->
-                    </li>
-                    <!-- /subsection: placeholder -->
-                  </ol>
-
-                  <%include file="outline_add-subsection.html" />
-
-                </div>
-              </li>
-              <!-- /section: placeholder -->
-            </ol>
-
-            <%include file="outline_add-section.html" />
-          </article>
-        </div>
-
-        <div class="ui-loading is-hidden">
-          <p><span class="spin">
-            <i class="icon fa fa-refresh"></i></span>
-            <span class="copy">Loading</span>
-          </p>
-        </div>
-
-      </article>
-
-      <aside class="content-supplementary" role="complementary">
-        <div class="bit">
-          <h3 class="title-3">What can I do on this page?</h3>
-          <p>You can create new sections and subsections, set the release date for sections, and create new units in existing subsections.  You can set the assignment type for subsections that are to be graded, and you can open a subsection for further editing.</p>
-
-          <p>In addition, you can drag and drop sections, subsections, and units to reorganize your course.</p>
-        </div>
-      </aside>
-
-    </section>
-  </div>
-
-</div>
-</%block>
diff --git a/cms/templates/ux/reference/outline_add-section.html b/cms/templates/ux/reference/outline_add-section.html
deleted file mode 100644
index e0f6e91d90..0000000000
--- a/cms/templates/ux/reference/outline_add-section.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<%page expression_filter="h"/>
-<div class="add-section add-item">
-  <a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Section">
-    <i class="icon fa fa-plus"></i> New Section
-  </a>
-</div>
-<!-- /add-section -->
diff --git a/cms/templates/ux/reference/outline_add-subsection.html b/cms/templates/ux/reference/outline_add-subsection.html
deleted file mode 100644
index bf15ab6c4d..0000000000
--- a/cms/templates/ux/reference/outline_add-subsection.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<%page expression_filter="h"/>
-<div class="add-subsection add-item">
-  <a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Subsection">
-    <i class="icon fa fa-plus"></i> New Subsection
-  </a>
-</div>
-<!-- /add-subsection -->
diff --git a/cms/templates/ux/reference/outline_add-unit.html b/cms/templates/ux/reference/outline_add-unit.html
deleted file mode 100644
index 81a4922ce6..0000000000
--- a/cms/templates/ux/reference/outline_add-unit.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<%page expression_filter="h"/>
-<div class="add-unit add-item">
-  <a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Unit">
-    <i class="icon fa fa-plus"></i> New Unit
-  </a>
-</div>
-<!-- /add-unit -->
diff --git a/cms/templates/ux/reference/outline_section_header-collapsed.html b/cms/templates/ux/reference/outline_section_header-collapsed.html
deleted file mode 100644
index beadc9905e..0000000000
--- a/cms/templates/ux/reference/outline_section_header-collapsed.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<%page expression_filter="h"/>
-<div class="section-header">
-  <h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
-    <i class="icon fa fa-caret-down icon"></i>
-    <span class="wrapper-section-title is-editable wrapper-xblock-field">
-      <span class="section-title item-title xblock-field-value">Section Title</span>
-    </span>
-  </h3>
-
-  <div class="section-header-actions">
-    <ul class="actions-list">
-      <li class="action-item action-publish">
-        <a href="#" data-tooltip="Publish all content" class="publish-button action-button">
-          <i class="icon fa fa-share-square-o"></i>
-          <span class="action-button-text sr">Publish all content</span>
-        </a>
-      </li>
-      <li class="action-item action-settings">
-        <a href="#" data-tooltip="Settings" class="settings-button action-button">
-          <i class="icon fa fa-cog"></i>
-          <span class="action-button-text sr">Settings</span>
-        </a>
-      </li>
-      <li class="action-item action-delete">
-        <a href="#" data-tooltip="Delete" class="delete-button action-button">
-          <i class="icon fa fa-trash-o"></i>
-          <span class="action-button-text sr">Delete</span>
-        </a>
-      </li>
-      <li class="action-item action-drag">
-        <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
-      </li>
-    </ul>
-  </div>
-</div>
-<!-- /section-header -->
-
diff --git a/cms/templates/ux/reference/outline_section_header-expanded.html b/cms/templates/ux/reference/outline_section_header-expanded.html
deleted file mode 100644
index beadc9905e..0000000000
--- a/cms/templates/ux/reference/outline_section_header-expanded.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<%page expression_filter="h"/>
-<div class="section-header">
-  <h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
-    <i class="icon fa fa-caret-down icon"></i>
-    <span class="wrapper-section-title is-editable wrapper-xblock-field">
-      <span class="section-title item-title xblock-field-value">Section Title</span>
-    </span>
-  </h3>
-
-  <div class="section-header-actions">
-    <ul class="actions-list">
-      <li class="action-item action-publish">
-        <a href="#" data-tooltip="Publish all content" class="publish-button action-button">
-          <i class="icon fa fa-share-square-o"></i>
-          <span class="action-button-text sr">Publish all content</span>
-        </a>
-      </li>
-      <li class="action-item action-settings">
-        <a href="#" data-tooltip="Settings" class="settings-button action-button">
-          <i class="icon fa fa-cog"></i>
-          <span class="action-button-text sr">Settings</span>
-        </a>
-      </li>
-      <li class="action-item action-delete">
-        <a href="#" data-tooltip="Delete" class="delete-button action-button">
-          <i class="icon fa fa-trash-o"></i>
-          <span class="action-button-text sr">Delete</span>
-        </a>
-      </li>
-      <li class="action-item action-drag">
-        <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
-      </li>
-    </ul>
-  </div>
-</div>
-<!-- /section-header -->
-
diff --git a/cms/templates/ux/reference/outline_status_grading.html b/cms/templates/ux/reference/outline_status_grading.html
deleted file mode 100644
index 29014cb104..0000000000
--- a/cms/templates/ux/reference/outline_status_grading.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-grading">
-  <p>
-    <span class="sr status-grading-label">Graded as:</span>
-    <i class="icon fa fa-check"></i>
-    <span class="status-grading-value">Homework</span>
-    <span class="status-grading-date">Due: December 31, 2014</span>
-  </p>
-</div>
diff --git a/cms/templates/ux/reference/outline_status_message-error.html b/cms/templates/ux/reference/outline_status_message-error.html
deleted file mode 100644
index 32e944ce7d..0000000000
--- a/cms/templates/ux/reference/outline_status_message-error.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-message">
-  <i class="icon fa fa-warning"></i>
-  <p class="status-message-copy">Critical error</p>
-</div>
diff --git a/cms/templates/ux/reference/outline_status_message-lock.html b/cms/templates/ux/reference/outline_status_message-lock.html
deleted file mode 100644
index af48aac3af..0000000000
--- a/cms/templates/ux/reference/outline_status_message-lock.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-message">
-  <i class="icon fa fa-lock"></i>
-  <p class="status-message-copy">Contains Staff only content</p>
-</div>
diff --git a/cms/templates/ux/reference/outline_status_message-unpublished_changes.html b/cms/templates/ux/reference/outline_status_message-unpublished_changes.html
deleted file mode 100644
index edcaf270e5..0000000000
--- a/cms/templates/ux/reference/outline_status_message-unpublished_changes.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-message">
-  <i class="icon fa fa-file-o"></i>
-  <p class="status-message-copy">Unpublished change(s) to live content</p>
-</div>
diff --git a/cms/templates/ux/reference/outline_status_message-unpublished_units.html b/cms/templates/ux/reference/outline_status_message-unpublished_units.html
deleted file mode 100644
index 17b970f147..0000000000
--- a/cms/templates/ux/reference/outline_status_message-unpublished_units.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-message">
-  <i class="icon fa fa-file-o"></i>
-  <p class="status-message-copy">Unpublished unit(s) will not be released</p>
-</div>
diff --git a/cms/templates/ux/reference/outline_status_release-draft.html b/cms/templates/ux/reference/outline_status_release-draft.html
deleted file mode 100644
index 0798b9a2b8..0000000000
--- a/cms/templates/ux/reference/outline_status_release-draft.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-release">
-  <p>
-    <span class="sr status-release-label">Release Status:</span>
-    <span class="status-release-value">
-      <i class="icon fa fa-file-o"></i>
-      <span class="sr">This item is</span>
-    </span>
-    <span class="status-release-date">Unscheduled</span>
-  </p>
-</div>
diff --git a/cms/templates/ux/reference/outline_status_release-lock.html b/cms/templates/ux/reference/outline_status_release-lock.html
deleted file mode 100644
index a725b658ba..0000000000
--- a/cms/templates/ux/reference/outline_status_release-lock.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-release">
-  <p>
-    <span class="sr status-release-label">Release Status:</span>
-    <span class="status-release-value">
-      <i class="icon fa fa-lock"></i>
-      Will never release - Contains Staff only content
-    </span>
-  </p>
-</div>
diff --git a/cms/templates/ux/reference/outline_status_release-released.html b/cms/templates/ux/reference/outline_status_release-released.html
deleted file mode 100644
index 85d11b02e1..0000000000
--- a/cms/templates/ux/reference/outline_status_release-released.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-release">
-  <p>
-    <span class="sr status-release-label">Release Status:</span>
-    <span class="status-release-value">
-      <i class="icon fa fa-check-square"></i>
-      Released <span class="sr">on</span>:
-    </span>
-    <span class="status-release-date">March 25, 2014</span>
-  </p>
-</div>
diff --git a/cms/templates/ux/reference/outline_status_release-released_with_parent.html b/cms/templates/ux/reference/outline_status_release-released_with_parent.html
deleted file mode 100644
index f05ff272e6..0000000000
--- a/cms/templates/ux/reference/outline_status_release-released_with_parent.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-release">
-  <p>
-    <span class="sr status-release-label">Release Status:</span>
-    <span class="status-release-value">
-      <i class="icon fa fa-check-square"></i>
-      Released with Section
-    </span>
-  </p>
-</div>
diff --git a/cms/templates/ux/reference/outline_status_release-scheduled.html b/cms/templates/ux/reference/outline_status_release-scheduled.html
deleted file mode 100644
index f5c91afb32..0000000000
--- a/cms/templates/ux/reference/outline_status_release-scheduled.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-release">
-  <p>
-    <span class="sr status-release-label">Release Status:</span>
-    <span class="status-release-value">
-      <i class="icon fa fa-clock-o"></i>
-      Scheduled: October 31, 2014
-    </span>
-  </p>
-</div>
diff --git a/cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html b/cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html
deleted file mode 100644
index afb5a27aea..0000000000
--- a/cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<%page expression_filter="h"/>
-<div class="status-release">
-  <p>
-    <span class="sr status-release-label">Release Status:</span>
-    <span class="status-release-value">
-      <i class="icon fa fa-clock-o"></i>
-      Scheduled: with Section
-    </span>
-  </p>
-</div>
diff --git a/cms/templates/ux/reference/outline_subsection_header-collapsed.html b/cms/templates/ux/reference/outline_subsection_header-collapsed.html
deleted file mode 100644
index 9c33be21ad..0000000000
--- a/cms/templates/ux/reference/outline_subsection_header-collapsed.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<%page expression_filter="h"/>
-<div class="subsection-header">
-  <h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
-    <i class="icon fa fa-caret-down icon"></i>
-    <span class="wrapper-subsection-title is-editable wrapper-xblock-field">
-      <span class="subsection-title item-title xblock-field-value">Subsection Title</span>
-
-      <!-- editor-title -->
-      <span class="editor">
-        <label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
-        <input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
-      </span>
-      <!-- /editor-title -->
-    </span>
-  </h3>
-
-  <div class="subsection-header-actions">
-    <ul class="actions-list">
-      <li class="action-item action-publish">
-        <a href="#" data-tooltip="Publish" class="publish-button action-button">
-          <i class="icon fa fa-share-square-o"></i>
-          <span class="action-button-text sr">Publish</span>
-        </a>
-      </li>
-      <li class="action-item action-settings">
-        <a href="#" data-tooltip="Settings" class="settings-button action-button">
-          <i class="icon fa fa-cog"></i>
-          <span class="action-button-text sr">Settings</span>
-        </a>
-      </li>
-      <li class="action-item action-delete">
-        <a href="#" data-tooltip="Delete" class="delete-button action-button">
-          <i class="icon fa fa-trash-o"></i>
-          <span class="action-button-text sr">Delete</span>
-        </a>
-      </li>
-      <li class="action-item action-drag">
-        <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
-      </li>
-    </ul>
-  </div>
-</div>
-<!-- /subsection-header -->
diff --git a/cms/templates/ux/reference/outline_subsection_header-expanded.html b/cms/templates/ux/reference/outline_subsection_header-expanded.html
deleted file mode 100644
index 9c33be21ad..0000000000
--- a/cms/templates/ux/reference/outline_subsection_header-expanded.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<%page expression_filter="h"/>
-<div class="subsection-header">
-  <h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
-    <i class="icon fa fa-caret-down icon"></i>
-    <span class="wrapper-subsection-title is-editable wrapper-xblock-field">
-      <span class="subsection-title item-title xblock-field-value">Subsection Title</span>
-
-      <!-- editor-title -->
-      <span class="editor">
-        <label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
-        <input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
-      </span>
-      <!-- /editor-title -->
-    </span>
-  </h3>
-
-  <div class="subsection-header-actions">
-    <ul class="actions-list">
-      <li class="action-item action-publish">
-        <a href="#" data-tooltip="Publish" class="publish-button action-button">
-          <i class="icon fa fa-share-square-o"></i>
-          <span class="action-button-text sr">Publish</span>
-        </a>
-      </li>
-      <li class="action-item action-settings">
-        <a href="#" data-tooltip="Settings" class="settings-button action-button">
-          <i class="icon fa fa-cog"></i>
-          <span class="action-button-text sr">Settings</span>
-        </a>
-      </li>
-      <li class="action-item action-delete">
-        <a href="#" data-tooltip="Delete" class="delete-button action-button">
-          <i class="icon fa fa-trash-o"></i>
-          <span class="action-button-text sr">Delete</span>
-        </a>
-      </li>
-      <li class="action-item action-drag">
-        <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
-      </li>
-    </ul>
-  </div>
-</div>
-<!-- /subsection-header -->
diff --git a/cms/templates/ux/reference/outline_unit_header.html b/cms/templates/ux/reference/outline_unit_header.html
deleted file mode 100644
index e9d4769754..0000000000
--- a/cms/templates/ux/reference/outline_unit_header.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<%page expression_filter="h"/>
-<div class="unit-header">
-  <h3 class="unit-header-details">
-    <span class="unit-title item-title"><a class="unit-url" href="">Unit Name</a></span>
-  </h3>
-
-  <div class="unit-header-actions">
-    <ul class="actions-list">
-      <li class="action-item action-publish">
-        <a href="#" data-tooltip="Publish" class="publish-button action-button">
-          <i class="icon fa fa-share-square-o"></i>
-          <span class="action-button-text sr">Publish</span>
-        </a>
-      </li>
-      <li class="action-item action-settings">
-        <a href="#" data-tooltip="Settings" class="settings-button action-button">
-          <i class="icon fa fa-cog"></i>
-          <span class="action-button-text sr">Settings</span>
-        </a>
-      </li>
-      <li class="action-item action-delete">
-        <a href="#" data-tooltip="Delete" class="delete-button action-button">
-          <i class="icon fa fa-trash-o"></i>
-          <span class="action-button-text sr">Delete</span>
-        </a>
-      </li>
-      <li class="action-item action-drag">
-        <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
-      </li>
-    </ul>
-  </div>
-</div>
-<!-- /unit-header -->
diff --git a/cms/templates/ux/reference/pattern-library-test.html b/cms/templates/ux/reference/pattern-library-test.html
index 0881993f7e..ba133e276c 100644
--- a/cms/templates/ux/reference/pattern-library-test.html
+++ b/cms/templates/ux/reference/pattern-library-test.html
@@ -7,17 +7,16 @@
 <%block name="bodyclass">is-signedin pattern-library</%block>
 
 <%block name="content">
-<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3>
-<div class="example-set">
-    <div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
-        <span class="icon alert-icon icon-warning" aria-hidden="true"></span>
+<h1>Pattern Library test page</h1>
 
-        <div class="alert-message">
-            <p class="alert-copy">
-                Interesting pattern library content to come...
-            </p>
-        </div>
+<div class="alert alert-warning" role="alert" tabindex="-1">
+    <span class="icon alert-icon fa fa-exclamation-triangle" aria-hidden="true"></span>
 
+    <div class="alert-message">
+        <p class="alert-copy">
+            Interesting pattern library content to come...
+        </p>
     </div>
+
 </div>
 </%block>
diff --git a/cms/urls_dev.py b/cms/urls_dev.py
index 3229a222b1..42c53bd25a 100644
--- a/cms/urls_dev.py
+++ b/cms/urls_dev.py
@@ -7,5 +7,5 @@ from django.conf.urls import url
 
 urlpatterns = (
     url(r'^dev_mode$', 'contentstore.views.dev.dev_mode', name='dev_mode'),
-    url(r'^template/(?P<template>.+)$', 'contentstore.views.dev.dev_show_template'),
+    url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
 )
diff --git a/common/test/acceptance/pages/common/logout.py b/common/test/acceptance/pages/common/logout.py
index 9a8fe54a25..134a4e8d92 100644
--- a/common/test/acceptance/pages/common/logout.py
+++ b/common/test/acceptance/pages/common/logout.py
@@ -13,4 +13,4 @@ class LogoutPage(PageObject):
     url = BASE_URL + "/logout"
 
     def is_browser_on_page(self):
-        return self.q(css='.cta-login').present
+        return self.q(css='.btn-login').present
diff --git a/lms/djangoapps/debug/views.py b/lms/djangoapps/debug/views.py
index b7d5582eba..7784c6b0a7 100644
--- a/lms/djangoapps/debug/views.py
+++ b/lms/djangoapps/debug/views.py
@@ -45,18 +45,3 @@ def show_parameters(request):
     for name, value in sorted(request.POST.items()):
         html.append(escape("POST {}: {!r}".format(name, value)))
     return HttpResponse("\n".join("<p>{}</p>".format(h) for h in html))
-
-
-def show_reference_template(request, template):
-    """
-    Shows the specified template as an HTML page. This is used only in debug mode to allow the UX team
-    to produce and work with static reference templates.
-    e.g. /template/ux/reference/container.html shows the template under ux/reference/container.html
-
-    Note: dynamic parameters can also be passed to the page.
-    e.g. /template/ux/reference/container.html?name=Foo
-    """
-    try:
-        return render_to_response(template, request.GET.dict())
-    except TopLevelLookupException:
-        return HttpResponseNotFound("Couldn't find template {template}".format(template=template))
diff --git a/lms/static/js/header_factory.js b/lms/static/js/header_factory.js
new file mode 100644
index 0000000000..507daaf634
--- /dev/null
+++ b/lms/static/js/header_factory.js
@@ -0,0 +1,16 @@
+;(function (define) {
+    'use strict';
+
+    define([
+        'edx-ui-toolkit/js/dropdown-menu/dropdown-menu-view'
+    ],
+    function (DropdownMenuView) {
+        return function() {
+            var dropdownMenuView = new DropdownMenuView({
+                el: '.js-header-user-menu'
+            }).postRender();
+
+            return dropdownMenuView;
+        };
+    });
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/lms/js/build.js b/lms/static/lms/js/build.js
index 4ca8fb5dff..86c5a000ea 100644
--- a/lms/static/lms/js/build.js
+++ b/lms/static/lms/js/build.js
@@ -23,6 +23,7 @@
             'js/edxnotes/views/page_factory',
             'js/financial-assistance/financial_assistance_form_factory',
             'js/groups/views/cohorts_dashboard_factory',
+            'js/header_factory',
             'js/search/course/course_search_factory',
             'js/search/dashboard/dashboard_search_factory',
             'js/student_account/logistration_factory',
diff --git a/lms/static/sass/_build-lms-v2.scss b/lms/static/sass/_build-lms-v2.scss
index a982b28c2a..b20fe16b6b 100644
--- a/lms/static/sass/_build-lms-v2.scss
+++ b/lms/static/sass/_build-lms-v2.scss
@@ -5,5 +5,9 @@
 
 // Configuration
 @import 'config';
+@import 'base/variables';
 
 // Extensions
+@import 'shared-v2/base';
+@import 'shared-v2/navigation';
+@import 'shared-v2/header';
diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss
index c8a37991ca..7580a4e9a9 100644
--- a/lms/static/sass/_shame.scss
+++ b/lms/static/sass/_shame.scss
@@ -139,7 +139,7 @@
 .verification-process {
 
   //overriding reset link style for nav/header
-  header.global {
+  .header-global {
 
     .logo a:hover, .logo:active, .logo a:focus {
       border: none;
diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss
index 9522d0dbda..a93c655967 100644
--- a/lms/static/sass/base/_extends.scss
+++ b/lms/static/sass/base/_extends.scss
@@ -79,7 +79,7 @@
   color: rgb(255, 255, 255);
 }
 
-.global {
+.header-global {
   h2 {
     display: none;
   }
diff --git a/lms/static/sass/base/_layouts.scss b/lms/static/sass/base/_layouts.scss
index 128f14f526..4fda8d9a93 100644
--- a/lms/static/sass/base/_layouts.scss
+++ b/lms/static/sass/base/_layouts.scss
@@ -12,11 +12,11 @@ body.view-in-course {
   }
 
   // courseware header
-  header.global,
-  header.global.slim {
+  .header-global,
+  .header-global.slim {
     width: auto;
 
-    .nav-wrapper {
+    .wrapper-header {
       min-width: auto;
       padding-right: 2%;
       padding-left: 2%;
diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss
index f3519cd4fd..6fff2062ea 100644
--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -72,7 +72,7 @@
   }
 }
 
-header.global.slim {
+.header-global.slim {
   box-shadow: 0 1px 2px $shadow-l1;
   height: auto;
   padding: ($baseline/4) 0 ($baseline/2) 0;
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index f922667cde..2e6bd463df 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -217,7 +217,7 @@
   // aside
   aside {
 
-    .cta {
+    .btn {
       margin: 0 0 ($baseline*2) 0;
 
       &:last-child {
@@ -230,7 +230,7 @@
       }
     }
 
-    .cta-login {
+    .btn-login {
 
       h3.title,
       .instructions {
@@ -238,7 +238,7 @@
         margin-bottom: 0;
       }
 
-      .cta-login-action {
+      .btn-login-action {
         @extend %btn-secondary-grey-outline;
         padding: ($baseline/10) ($baseline*0.75);
         @include margin-left($baseline/4);
@@ -631,7 +631,7 @@
 // login
 .view-login {
 
-  header.global  .nav-courseware .cta-login {
+  .header-global  .nav-courseware .btn-login {
     display: none;
   }
 
@@ -657,7 +657,7 @@
 // password reset
 .view-passwordreset {
 
-  header.global .nav-courseware .cta-login {
+  .header-global .nav-courseware .btn-login {
     display: none;
   }
 
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index b502bb3712..6428c98d0a 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -456,7 +456,7 @@
           }
 
           // TYPE: facebook share
-          &.action-facebook, {
+          &.action-facebook {
             color: $facebook-blue;
           }
 
@@ -931,7 +931,7 @@
               @include float(left);
               @include margin(0, 15px, 0, 0);
 
-              .btn, .cta {
+              .btn {
                 display: inline-block;
               }
 
@@ -954,7 +954,7 @@
                 }
               }
 
-              .cta {
+              .btn {
                 @include float(left);
                 font: normal 0.8rem/1.2rem $sans-serif;
                 letter-spacing: 1px;
@@ -1013,7 +1013,7 @@
 
           &.course-status-certrendering {
 
-            .cta {
+            .btn {
               margin-top: 2px;
             }
           }
@@ -1093,7 +1093,7 @@
             @include float(left);
             position: relative;
 
-            .cta {
+            .btn {
               @extend %btn-pl-green-base;
               @include float(right);
             }
diff --git a/lms/static/sass/shared-v2/_base.scss b/lms/static/sass/shared-v2/_base.scss
new file mode 100644
index 0000000000..55363c2800
--- /dev/null
+++ b/lms/static/sass/shared-v2/_base.scss
@@ -0,0 +1,6 @@
+// LMS base styles
+
+.content-wrapper {
+    margin: 0 auto;
+    padding: 10px;
+}
diff --git a/lms/static/sass/shared-v2/_header.scss b/lms/static/sass/shared-v2/_header.scss
new file mode 100644
index 0000000000..921613674a
--- /dev/null
+++ b/lms/static/sass/shared-v2/_header.scss
@@ -0,0 +1,83 @@
+// LMS header styles
+
+.header-global {
+    @extend %ui-depth1;
+    @include box-sizing(border-box);
+    position: relative;
+    width: 100%;
+    border-bottom: 4px solid $courseware-border-bottom-color;
+    box-shadow: 0 1px 5px 0 $shadow-l1;
+    background: $header-bg;
+
+    .wrapper-header {
+        @include clearfix();
+        @include box-sizing(border-box);
+        height: 74px;
+        margin: 0 auto;
+        padding: 10px 10px 0;
+        width: 100%;
+        max-width: 1180px;
+
+        .logo {
+            @include float(left);
+            @include margin-right(39px);
+            @include margin-left(10px);
+            margin-top: 4px;
+            margin-bottom: 0;
+            position: relative;
+        }
+
+        .left {
+            @include float(left);
+        }
+
+        .right {
+            @include float(right);
+        }
+
+        .wrapper-user-menu {
+            @include float(right);
+            margin-top: 4px;
+            width: auto;
+        }
+
+        .dropdown-menu {
+            @include text-align(left);
+            top: inherit;
+        }
+
+        .list-inline {
+            margin-top: 12px;
+
+            .item {
+                display: inline-block;
+                font-size: font-size(small);
+                font-weight: font-weight(semi-bold);
+                text-transform: uppercase;
+                letter-spacing: 0 !important;
+
+                &.active {
+                    a {
+                        text-decoration: none;
+                        color: $link-color;
+                    }
+                }
+
+                a {
+                    color: $courseware-navigation-color;
+                    padding: 3px 10px;
+
+                    &:hover,
+                    &:focus {
+                        background: inherit;
+                        color: $courseware-hover-color;
+                    }
+                }
+            }
+        }
+
+        .nav-courseware.list-inline {
+            margin-top: 5px;
+        }
+    }
+}
diff --git a/lms/static/sass/shared-v2/_navigation.scss b/lms/static/sass/shared-v2/_navigation.scss
new file mode 100644
index 0000000000..69abf46f34
--- /dev/null
+++ b/lms/static/sass/shared-v2/_navigation.scss
@@ -0,0 +1,23 @@
+// LMS navigation styles
+
+// skip navigation
+.nav-skip {
+    font-size: font-size(small);
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    top: -($baseline*30);
+    overflow: hidden;
+    background: $white;
+    border-bottom: 1px solid palette(grayscale, white);
+    padding: ($baseline*0.75) ($baseline/2);
+
+    &:focus,
+    &:active {
+        position: relative;
+        top: auto;
+        width: auto;
+        height: auto;
+        margin: 0;
+    }
+}
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 8a7c3118fa..38fa3215d4 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -1,7 +1,7 @@
 @import '../base/grid-settings';
 @import 'neat/neat'; // lib - Neat
 
-header.global {
+.header-global {
   @extend %ui-depth1;
   border-bottom: 1px solid $gray-l1;
   box-shadow: 0 1px 5px 0 $shadow-l1;
@@ -330,7 +330,7 @@ header.global {
     li, div {
       display: inline-block;
 
-      .cta {
+      .btn {
         @extend %m-btn-primary;
       }
     }
@@ -340,7 +340,7 @@ header.global {
 // marketing site design syncing
 .view-register, .view-login, .view-passwordreset {
 
-  header.global nav {
+  .header-global nav {
     width: 960px;
   }
 }
@@ -360,7 +360,7 @@ header.global {
 // ====================
 
 // CASE: marketing/course discovery
-header.global-new {
+.header-global-new {
   @extend %ui-depth1;
   /* Temp. fix until applied globally */
   @include box-sizing(border-box);
@@ -852,13 +852,13 @@ header.global-new {
   }
 }
 
-.view-register header.global-new .cta-register {
+.view-register .header-global-new .btn-register {
   text-decoration: none;
   color: $courseware-hover-color;
   border-bottom-color: $courseware-border-bottom-color;
 }
 
-.view-login header.global-new .cta-login {
+.view-login .header-global-new .btn-login {
   text-decoration: none;
   color: $courseware-hover-color;
 }
@@ -866,7 +866,7 @@ header.global-new {
 // marketing site design syncing
 .view-register, .view-login {
 
-  header.global nav {
+  .header-global nav {
     width: 960px;
   }
 }
diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss
index 052ccc8859..fc824dae4f 100644
--- a/lms/static/sass/views/_verification.scss
+++ b/lms/static/sass/views/_verification.scss
@@ -109,12 +109,12 @@
   }
 
   // reset: navigation (needed due to edX's new global-header styling)
-  .global-new .nav-global a {
+  .header-global-new .nav-global a {
     padding-bottom: ($baseline +1);
   }
 
   // HACK: fix global header height in verification flow ECOM-1808
-  header.global {
+  .header-global {
     height: 76px;
   }
 
diff --git a/lms/templates/main.html b/lms/templates/main.html
index 808394e8cd..b7e13300cc 100644
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -62,12 +62,18 @@ from pipeline_mako import render_require_js_path_overrides
   <%static:css group='style-vendor'/>
   <%static:css group='${self.attr.main_css}'/>
 
-  % if disable_courseware_js:
-    <%static:js group='base_vendor'/>
-    <%static:js group='base_application'/>
+  % if not uses_pattern_library:
+    % if disable_courseware_js:
+      <%static:js group='base_vendor'/>
+      <%static:js group='base_application'/>
+    % else:
+      <%static:js group='main_vendor'/>
+      <%static:js group='application'/>
+    % endif
   % else:
-    <%static:js group='main_vendor'/>
-    <%static:js group='application'/>
+    ## TODO: Update to only bring in RequireJS
+    ## https://openedx.atlassian.net/browse/FEDX-140
+    <%static:js group='base_vendor'/>
   % endif
 
   <script>
@@ -140,6 +146,7 @@ from pipeline_mako import render_require_js_path_overrides
 % endif
 
   <%block name="js_extra"/>
+
   <%include file="widgets/segment-io-footer.html" />
   <script type="text/javascript" src="${static.url('js/vendor/noreferrer.js')}" charset="utf-8"></script>
   <script type="text/javascript" src="${static.url('js/utils/navigation.js')}" charset="utf-8"></script>
diff --git a/lms/templates/navigation-edx.html b/lms/templates/navigation-edx.html
deleted file mode 100644
index f24fe5ba71..0000000000
--- a/lms/templates/navigation-edx.html
+++ /dev/null
@@ -1,156 +0,0 @@
-## mako
-<%page expression_filter="h"/>
-<%namespace name='static' file='static_content.html'/>
-<%namespace file='main.html' import="login_query"/>
-<%!
-from django.core.urlresolvers import reverse
-from django.utils.translation import ugettext as _
-
-from microsite_configuration.templatetags.microsite import platform_name
-from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
-
-# App that handles subdomain specific branding
-from branding import api as branding_api
-# app that handles site status messages
-from status.status import get_site_status_msg
-%>
-
-## Provide a hook for themes to inject branding on top.
-<%block name="navigation_top" />
-
-<%block>
-<%
-try:
-    course_id = course.id
-except:
-    # can't figure out a better way to get at a possibly-defined course var
-    course_id = None
-site_status_msg = get_site_status_msg(course_id)
-%>
-% if site_status_msg:
-<div class="site-status">
-  <div class="inner-wrapper">
-    <span class="white-error-icon"></span>
-    <p>${site_status_msg}</p>
-  </div>
-</div>
-% endif
-</%block>
-
-<header class="${"global slim" if course and not disable_courseware_header else "global-new"}" aria-label="Main" role="banner">
-  <div class="${'rwd ' if responsive else ''}wrapper-header nav-container">
-    <h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
-      <a href="${marketing_link('ROOT')}" itemprop="url">
-        <%block name="navigation_logo">
-            <img src="${static.url(branding_api.get_logo_url())}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
-        </%block>
-      </a>
-    </h1>
-
-    % if course and not disable_courseware_header:
-    <h2 class="course-header">
-      <span class="provider">${course.display_org_with_default}:</span>
-      <span class="course-number">${course.display_number_with_default}</span>
-      <span class="course-name">${course.display_name_with_default}</span>
-    </h2>
-    % endif
-
-    % if user.is_authenticated():
-      % if not course or disable_courseware_header:
-        % if not nav_hidden:
-    <nav aria-label="Main" class="nav-main">
-      <ul class="left nav-global authenticated">
-        <%block name="navigation_global_links_authenticated">
-          <li class="nav-global-01">
-            <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
-          </li>
-          <li class="nav-global-02">
-            <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
-          </li>
-          <li class="nav-global-03">
-            <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
-          </li>
-        </%block>
-      </ul>
-    </nav>
-        % endif
-      % endif
-
-    <ul class="user">
-      <li class="primary">
-        <a href="${reverse('dashboard')}" class="user-link">
-          <span class="sr">${_("Dashboard for:")}</span>
-          <%
-          username = user.username
-          profile_image_url = get_profile_image_urls_for_user(user)['medium']
-          %>
-          <img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
-          <div class="label-username">${username}</div>
-        </a>
-      </li>
-      <li class="primary">
-        <button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</button>
-        <ul class="dropdown-menu" aria-label="More Options" role="menu">
-          <%block name="navigation_dropdown_menu_links" >
-            <li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
-            <li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("Profile")}</a></li>
-            <li><a href="${reverse('account_settings')}">${_("Account")}</a></li>
-          </%block>
-          <li><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
-        </ul>
-      </li>
-    </ul>
-
-      % if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
-    <ul class="user">
-      <li class="primary">
-        <a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
-          <i class="icon fa fa-shopping-cart" aria-hidden="true"></i> ${_("Shopping Cart")}
-        </a>
-      </li>
-    </ul>
-      % endif
-
-    % else:
-    <nav aria-label="Account" class="nav-account-management">
-      <div class="right nav-courseware">
-        <div class="nav-courseware-01">
-          % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
-              % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-              <a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
-              % else:
-              <a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a>
-              % endif
-          % endif
-        </div>
-        % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
-          % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-          <div class="nav-courseware-02">
-            <a class="cta cta-register nav-courseware-button" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
-          </div>
-          % else:
-          <div class="nav-courseware-02">
-            <a class="cta cta-register nav-courseware-button" href="/register">${_("Register")}</a>
-          </div>
-          % endif
-        % endif
-      </div>
-    </nav>
-    % endif
-  </div>
-</header>
-% if course:
-<!--[if lte IE 9]>
-<div class="ie-banner" aria-hidden="true">
-${Text(_('{begin_strong}Warning:{end_strong} Your browser is not fully supported. We strongly recommend using {chrome_link} or {ff_link}.')).format(
-    begin_strong=HTML('<strong>'),
-    end_strong=HTML('</strong>'),
-    chrome_link=HTML('<a href="https://www.google.com/chrome" target="_blank">Chrome</a>'),
-    ff_link=HTML('<a href="http://www.mozilla.org/firefox" target="_blank">Firefox</a>'),
-  )
-}
-</div>
-<![endif]-->
-% endif
-
-<%include file="help_modal.html"/>
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html
index d87aedd9e4..3257dc31df 100644
--- a/lms/templates/navigation.html
+++ b/lms/templates/navigation.html
@@ -10,7 +10,6 @@ from lms.djangoapps.ccx.overrides import get_current_ccx
 from microsite_configuration import microsite
 from microsite_configuration.templatetags.microsite import platform_name
 from openedx.core.djangolib.markup import Text, HTML
-from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
 
 # App that handles subdomain specific branding
 from branding import api as branding_api
@@ -21,6 +20,15 @@ from status.status import get_site_status_msg
 ## Provide a hook for themes to inject branding on top.
 <%block name="navigation_top" />
 
+## Add UI Toolkit components if using the Pattern Library
+% if uses_pattern_library:
+    <%block name="js_extra">
+    <%static:require_module module_name="js/header_factory" class_name="HeaderFactory">
+    HeaderFactory();
+    </%static:require_module>
+    </%block>
+% endif
+
 <%block>
 <%
 try:
@@ -39,8 +47,8 @@ site_status_msg = get_site_status_msg(course_id)
 </div>
 % endif
 </%block>
-  <header id="global-navigation" class="global ${"slim" if course else ""}" >
-    <nav class="nav-wrapper" aria-label="${_('Global')}">
+  <header id="global-navigation" class="header-global ${"slim" if course else ""}" >
+    <nav class="wrapper-header" aria-label="${_('Global')}">
     <h1 class="logo">
       <a href="${marketing_link('ROOT')}">
         <%block name="navigation_logo">
@@ -63,10 +71,10 @@ site_status_msg = get_site_status_msg(course_id)
     % endif
 
     % if user.is_authenticated():
-    <ol class="left nav-global authenticated">
+    <ol class="left ${main_nav_menu_classlist} authenticated">
       <%block name="navigation_global_links_authenticated">
         % if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
-          <li class="nav-global-01">
+          <li class="item nav-global-01">
             <a href="${marketing_link('COURSES')}">${_('Explore courses')}</a>
           </li>
         % endif
@@ -83,37 +91,84 @@ site_status_msg = get_site_status_msg(course_id)
           </li>
         % endif
         %if settings.FEATURES.get('ENABLE_SYSADMIN_DASHBOARD','') and user.is_staff:
-          <li>
+          <li class="item">
             ## Translators: This is short for "System administration".
             <a href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
           </li>
         %endif
       </%block>
     </ol>
+    % if uses_pattern_library:
+    <div class="wrapper-user-menu dropdown-menu-container logged-in js-header-user-menu">
+      <a href="${reverse('dashboard')}" class="menu-title">
+        <span class="sr-only">${_("Dashboard for:")}</span>
+        <%
+          username = user.username
+          profile_image_url = get_profile_image_urls_for_user(user)['medium']
+        %>
+        <img class="menu-image" src="${profile_image_url}" alt="">
+        ${username}
+      </a>
+      <button type="button" class="menu-button button-more has-dropdown js-dropdown-button default-icon" aria-haspopup="true" aria-expanded="false" aria-controls="${_("Usermenu")}">
+        <span class="icon-fallback icon-fallback-img">
+          <span class="icon icon-angle-down" aria-hidden="true"></span>
+          <span class="text">${_("Usermenu dropdown")}</span>
+        </span>
+      </button>
+      <ul class="dropdown-menu list-divided is-hidden" id="${_("Usermenu")}" tabindex="-1">
+        <%block name="navigation_dropdown_menu_links" >
+        <%
+        if uses_pattern_library:
+          dropdown_menu_item_classlist = "dropdown-item item has-block-link"
+        else:
+          dropdown_menu_item_classlist = ""
+        %>
+            <li class="${dropdown_menu_item_classlist}"><a href="${reverse('dashboard')}" class="action">${_("Dashboard")}</a></li>
+            <li class="${dropdown_menu_item_classlist}"><a href="${reverse('learner_profile', kwargs={'username': user.username})}" class="action">${_("Profile")}</a></li>
+            <li class="${dropdown_menu_item_classlist}"><a href="${reverse('account_settings')}" class="action">${_("Account")}</a></li>
+          </%block>
+            <li class="${dropdown_menu_item_classlist}"><a href="${reverse('logout')}" role="menuitem" class="action">${_("Sign Out")}</a></li>
+      </ul>
+    </div>
+    % else:
     <ol class="user">
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
           <span class="sr">${_("Dashboard for:")}</span>
           <%
-          username = user.username
-          profile_image_url = get_profile_image_urls_for_user(user)['medium']
+          if uses_pattern_library:
+            discovery_btn_classlist = "btn"
+          else:
+            discovery_btn_classlist = "cta cta-discovery"
           %>
-          <img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
-          <div class="label-username">${username}</div>
-        </a>
-      </li>
-      <li class="primary">
-        <button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><span class="fa fa-sort-desc" aria-hidden="true"></span></button>
-        <ul class="dropdown-menu" aria-label="More Options" role="menu">
-          <%block name="navigation_dropdown_menu_links" >
-            <li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
-            <li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("Profile")}</a></li>
-            <li><a href="${reverse('account_settings')}">${_("Account")}</a></li>
-          </%block>
-          <li><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
-        </ul>
-      </li>
-    </ol>
+          % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
+            <li class="item nav-global-01">
+              <a href="${marketing_link('COURSES')}">${_('Find Courses')}</a>
+            </li>
+          % endif
+          % if show_program_listing:
+            <li class="tab-nav-item">
+              <a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
+                ${_("Courses")}
+              </a>
+            </li>
+            <li class="tab-nav-item">
+              <a class="${'active ' if reverse('program_listing_view') == request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
+                ${_("Programs")}
+              </a>
+            </li>
+          % endif
+          % if settings.FEATURES.get('ENABLE_SYSADMIN_DASHBOARD','') and user.is_staff:
+            <li class="item">
+              ## Translators: This is short for "System administration".
+              <a href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
+            </li>
+          % endif
+        </%block>
+      </ol>
+
+      <%include file="user_dropdown.html"/>
+
       % if should_display_shopping_cart_func() and not (course and static.is_request_in_themed_site()): # see shoppingcart.context_processor.user_has_cart_context_processor
         <ol class="user">
           <li class="primary">
@@ -124,57 +179,56 @@ site_status_msg = get_site_status_msg(course_id)
         </ol>
       % endif
     % else:
-    <ol class="left nav-global">
-      <%block name="navigation_global_links">
-        % if static.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)):
-          <li class="nav-global-01">
-            <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
-          </li>
-          % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
-            <li class="nav-global-02">
-              <a href="${marketing_link('COURSES')}">${_("Courses")}</a>
+      <ol class="left list-inline nav-global">
+        <%block name="navigation_global_links">
+          % if static.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)):
+            <li class="item nav-global-01">
+              <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
+            </li>
+            % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
+              <li class="item nav-global-02">
+                <a href="${marketing_link('COURSES')}">${_("Courses")}</a>
+              </li>
+            % endif
+            <li class="item nav-global-03">
+              <a href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
             </li>
           % endif
-          <li class="nav-global-03">
-            <a href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
-          </li>
-        % endif
-      </%block>
+        </%block>
 
-      <%block name="navigation_other_global_links">
-        % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
+        <%block name="navigation_other_global_links">
+          % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
             % if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
-            <li class="nav-global-05">
-              <a class="cta cta-discovery" href="/courses">${_("Explore courses")}</a>
-            </li>
+              <li class="item nav-global-05">
+                <a class="btn" href="/courses">${_("Explore Courses")}</a>
+              </li>
             %endif
             % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-            <li class="nav-global-04">
-              <a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
-            </li>
+              <li class="item nav-global-04">
+                <a class="btn-neutral" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
+              </li>
             % else:
-            <li class="nav-global-04">
-              <a class="cta cta-register" href="/register${login_query()}">${_("Register")}</a>
-            </li>
+              <li class="item nav-global-04">
+                <a class="btn-neutral" href="/register${login_query()}">${_("Register")}</a>
+              </li>
             % endif
-
-        % endif
-      </%block>
-    </ol>
-
-    <ol class="right nav-courseware">
-      <%block name="navigation_sign_in">
-        <li class="nav-courseware-01">
-          % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
-              % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-              <a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
-              % else:
-              <a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a>
-              % endif
           % endif
-        </li>
-      </%block>
-    </ol>
+        </%block>
+      </ol>
+
+      <ol class="right nav-courseware list-inline">
+        <%block name="navigation_sign_in">
+          <li class="nav-courseware-01">
+            % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
+              % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
+                <a class="btn-brand btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
+              % else:
+                <a class="btn-brand btn-login" href="/login${login_query()}">${_("Sign in")}</a>
+              % endif
+            % endif
+          </li>
+        </%block>
+      </ol>
     % endif
     % if static.show_language_selector():
      <% languages = static.get_released_languages() %>
diff --git a/lms/templates/register-sidebar.html b/lms/templates/register-sidebar.html
index c2b400fb4e..72560ea4b3 100644
--- a/lms/templates/register-sidebar.html
+++ b/lms/templates/register-sidebar.html
@@ -13,10 +13,10 @@ from django.core.urlresolvers import reverse
 
 % if has_extauth_info is UNDEFINED:
 
-<div class="cta cta-login">
+<div class="btn-brand btn-login">
   <h3 class="title">${_("Already registered?")}</h3>
   <p class="instructions">
-    <a class="cta-login-action" href="${reverse('signin_user')}${login_query()}">
+    <a class="btn-login-action" href="${reverse('signin_user')}${login_query()}">
       ${_("Log in")}
     </a>
   </p>
diff --git a/lms/templates/user_dropdown.html b/lms/templates/user_dropdown.html
new file mode 100644
index 0000000000..ca71ccf624
--- /dev/null
+++ b/lms/templates/user_dropdown.html
@@ -0,0 +1,59 @@
+## mako
+<%page expression_filter="h"/>
+<%namespace name='static' file='static_content.html'/>
+
+<%!
+from django.core.urlresolvers import reverse
+from django.utils.translation import ugettext as _
+
+from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
+%>
+
+% if uses_pattern_library:
+    <div class="wrapper-user-menu dropdown-menu-container logged-in js-header-user-menu">
+        <a href="${reverse('dashboard')}" class="menu-title">
+            <span class="sr-only">${_("Dashboard for:")}</span>
+            <%
+            username = user.username
+            profile_image_url = get_profile_image_urls_for_user(user)['medium']
+            %>
+            <img class="menu-image" src="${profile_image_url}" alt="">
+            ${username}
+        </a>
+        <button type="button" class="menu-button button-more has-dropdown js-dropdown-button default-icon" aria-haspopup="true" aria-expanded="false" aria-controls="${_("Usermenu")}">
+            <span class="icon-fallback icon-fallback-img">
+              <span class="icon icon-angle-down" aria-hidden="true"></span>
+              <span class="text">${_("Usermenu dropdown")}</span>
+            </span>
+        </button>
+        <ul class="dropdown-menu list-divided is-hidden" id="${_("Usermenu")}" tabindex="-1">
+            <%block name="navigation_dropdown_menu_links" >
+                <li class="dropdown-item item has-block-link"><a href="${reverse('dashboard')}" class="action">${_("Dashboard")}</a></li>
+                <li class="dropdown-item item has-block-link"><a href="${reverse('learner_profile', kwargs={'username': user.username})}" class="action">${_("Profile")}</a></li>
+                <li class="dropdown-item item has-block-link"><a href="${reverse('account_settings')}" class="action">${_("Account")}</a></li>
+            </%block>
+            <li class="dropdown-item item has-block-link"><a href="${reverse('logout')}" role="menuitem" class="action">${_("Sign Out")}</a></li>
+        </ul>
+    </div>
+% else:
+    <ol class="user">
+        <li class="primary">
+            <a href="${reverse('dashboard')}" class="user-link">
+                <span class="sr">${_("Dashboard for:")}</span>
+                <%
+                username = user.username
+                profile_image_url = get_profile_image_urls_for_user(user)['medium']
+                %>
+                <img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
+                <div class="label-username">${username}</div>
+            </a>
+        </li>
+        <li class="primary">
+            <button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><span class="fa fa-sort-desc" aria-hidden="true"></span></button>
+            <ul class="dropdown-menu" aria-label="More Options" role="menu">
+                ${navigation_dropdown_menu_links()}
+                <li class="item"><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
+            </ul>
+        </li>
+    </ol>
+% endif
diff --git a/lms/templates/ux/reference/index.html b/lms/templates/ux/reference/index.html
index e4ce1d1142..07da7d7c81 100644
--- a/lms/templates/ux/reference/index.html
+++ b/lms/templates/ux/reference/index.html
@@ -1,5 +1,9 @@
+## Override the default styles_version to the Pattern Library version (version 2)
+<%! main_css = "style-main-v2" %>
+
 <%page expression_filter="h"/>
 <%inherit file="/main.html" />
+
 <%namespace name='static' file='/static_content.html'/>
 
 <%block name="pagetitle">UX Reference</%block>
@@ -12,10 +16,10 @@
     <div class="inner-wrapper">
         <div class="main-column">
             <article class="window unit-body">
-                <h1>UX Style Reference</h1>
+                <h2>UX Style Reference</h2>
 
                 <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
-                    <h2>Page Types</h2>
+                    <h3>Page Types</h3>
                     <ul>
                         <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
                     </ul>
diff --git a/lms/templates/ux/reference/pattern-library-test.html b/lms/templates/ux/reference/pattern-library-test.html
index cb44766107..67f68270c5 100644
--- a/lms/templates/ux/reference/pattern-library-test.html
+++ b/lms/templates/ux/reference/pattern-library-test.html
@@ -10,17 +10,15 @@
 <%block name="bodyclass">pattern-library</%block>
 
 <%block name="content">
-<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3>
-<div class="example-set">
-    <div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
-        <span class="icon alert-icon icon-warning" aria-hidden="true"></span>
+<h1>Pattern Library test page</h1>
 
-        <div class="alert-message">
-            <p class="alert-copy">
-                Interesting pattern library content to come...
-            </p>
-        </div>
+<div class="alert alert-warning" role="alert" tabindex="-1">
+    <span class="icon alert-icon fa fa-exclamation-triangle" aria-hidden="true"></span>
 
+    <div class="alert-message">
+        <p class="alert-copy">
+            Interesting pattern library content to come...
+        </p>
     </div>
 </div>
 </%block>
diff --git a/lms/urls.py b/lms/urls.py
index e5c64346b5..f3db4952ce 100644
--- a/lms/urls.py
+++ b/lms/urls.py
@@ -966,7 +966,7 @@ if settings.DEBUG:
     )
 
     # in debug mode, allow any template to be rendered (most useful for UX reference templates)
-    urlpatterns += url(r'^template/(?P<template>.+)$', 'debug.views.show_reference_template'),
+    urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
 
 if 'debug_toolbar' in settings.INSTALLED_APPS:
     import debug_toolbar
diff --git a/openedx/core/djangoapps/debug/__init__.py b/openedx/core/djangoapps/debug/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/openedx/core/djangoapps/debug/views.py b/openedx/core/djangoapps/debug/views.py
new file mode 100644
index 0000000000..6591f07bc1
--- /dev/null
+++ b/openedx/core/djangoapps/debug/views.py
@@ -0,0 +1,31 @@
+"""
+Views that are only activated when the project is running in development mode.
+These views will NOT be shown on production: trying to access them will result
+in a 404 error.
+"""
+from edxmako.shortcuts import render_to_response
+from mako.exceptions import TopLevelLookupException
+from django.http import HttpResponseNotFound
+
+
+def show_reference_template(request, template):
+    """
+    Shows the specified template as an HTML page. This is used only in
+    debug mode to allow the UX team to produce and work with static
+    reference templates.
+
+    e.g. http://localhost:8000/template/ux/reference/index.html
+    shows the template from ux/reference/index.html
+
+    Note: dynamic parameters can also be passed to the page.
+    e.g. /template/ux/reference/index.html?name=Foo
+    """
+    try:
+        context = {
+            "disable_courseware_js": True,
+            "uses_pattern_library": True
+        }
+        context.update(request.GET.dict())
+        return render_to_response(template, context)
+    except TopLevelLookupException:
+        return HttpResponseNotFound("Couldn't find template {template}".format(template=template))
diff --git a/themes/edx.org/lms/templates/header.html b/themes/edx.org/lms/templates/header.html
index 13c74bde71..e324b84415 100644
--- a/themes/edx.org/lms/templates/header.html
+++ b/themes/edx.org/lms/templates/header.html
@@ -1,4 +1,5 @@
 ## mako
+<%page expression_filter="h"/>
 <%namespace name='static' file='static_content.html'/>
 <%namespace file='main.html' import="login_query"/>
 <%!
@@ -9,13 +10,20 @@ from django.utils.translation import ugettext as _
 import branding
 # app that handles site status messages
 from status.status import get_site_status_msg
-
-from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
 %>
 
 ## Provide a hook for themes to inject branding on top.
 <%block name="navigation_top" />
 
+## Add UI Toolkit components if using the Pattern Library
+% if uses_pattern_library:
+    <%block name="js_extra">
+    <%static:require_module module_name="js/header_factory" class_name="HeaderFactory">
+    HeaderFactory();
+    </%static:require_module>
+    </%block>
+% endif
+
 <%block>
 <%
 try:
@@ -35,8 +43,12 @@ site_status_msg = get_site_status_msg(course_id)
 % endif
 </%block>
 
-<header class="${"global slim" if course and not disable_courseware_header else "global-new"}" aria-label="Main" role="banner">
-  <div class="${'rwd ' if responsive else ''}wrapper-header nav-container">
+% if uses_pattern_library:
+<header class="header-global ${"slim" if course and not disable_courseware_header else ""}" aria-label="Main" role="banner">
+% else:
+<header class="${"header-global slim" if course and not disable_courseware_header else "header-global-new"}" aria-label="Main" role="banner">
+% endif
+  <div class="${"rwd" if responsive else ""} wrapper-header nav-container">
     <h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
       <a href="${marketing_link('ROOT')}" itemprop="url">
         <%block name="navigation_logo">
@@ -58,7 +70,7 @@ site_status_msg = get_site_status_msg(course_id)
       % if not course or disable_courseware_header:
         % if not nav_hidden or show_program_listing:
           <nav aria-label="Main" class="nav-main">
-            <ul class="left nav-global authenticated">
+            <ul class="left list-inline nav-global authenticated">
               % if not nav_hidden:
                 <%block name="navigation_global_links_authenticated">
                   <li class="nav-global-01">
@@ -89,66 +101,43 @@ site_status_msg = get_site_status_msg(course_id)
       % endif
     % endif
 
-    <ul class="user">
-      <li class="primary">
-        <a href="${reverse('dashboard')}" class="user-link">
-          <span class="sr">${_("Dashboard for:")}</span>
-          <%
-          username = user.username
-          profile_image_url = get_profile_image_urls_for_user(user)['medium']
-          %>
-          <img class="user-image-frame" src="${profile_image_url}" alt="">
-          <div class="label-username">${username}</div>
-        </a>
-      </li>
-      <li class="primary">
-        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</a>
-        <ul class="dropdown-menu" aria-label="More Options" role="menu">
-          <%block name="navigation_dropdown_menu_links" >
-            <li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
-            <li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("Profile")}</a></li>
-            <li><a href="${reverse('account_settings')}">${_("Account")}</a></li>
-          </%block>
-          <li><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
-        </ul>
-      </li>
-    </ul>
+      <%include file="user_dropdown.html"/>
 
       % if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
-    <ul class="user">
-      <li class="primary">
-        <a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
-          <i class="icon fa fa-shopping-cart" aria-hidden="true"></i> ${_("Shopping Cart")}
-        </a>
-      </li>
-    </ul>
+        <ul class="user">
+          <li class="primary">
+            <a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
+              <i class="icon fa fa-shopping-cart" aria-hidden="true"></i> ${_("Shopping Cart")}
+            </a>
+          </li>
+        </ul>
       % endif
 
     % else:
-    <nav aria-label="Account" class="nav-account-management">
-      <div class="right nav-courseware">
-        <div class="nav-courseware-01">
-          % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
+      <nav aria-label="Account" class="nav-account-management">
+        <div class="right nav-courseware">
+          <div class="nav-courseware-01">
+            % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
               % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-              <a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
+                <a class="btn-brand btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
               % else:
-              <a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a>
+                <a class="btn-brand btn-login" href="/login${login_query()}">${_("Sign in")}</a>
               % endif
+            % endif
+          </div>
+          % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
+            % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
+              <div class="nav-courseware-02">
+                <a class="btn-neutral btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
+              </div>
+            % else:
+              <div class="nav-courseware-02">
+                <a class="btn-neutral btn-register" href="/register">${_("Register")}</a>
+              </div>
+            % endif
           % endif
         </div>
-        % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
-          % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-          <div class="nav-courseware-02">
-            <a class="cta cta-register nav-courseware-button" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
-          </div>
-          % else:
-          <div class="nav-courseware-02">
-            <a class="cta cta-register nav-courseware-button" href="/register">${_("Register")}</a>
-          </div>
-          % endif
-        % endif
-      </div>
-    </nav>
+      </nav>
     % endif
   </div>
 </header>
diff --git a/themes/red-theme/lms/templates/header.html b/themes/red-theme/lms/templates/header.html
index c28c48e62e..cb8fa2b61e 100755
--- a/themes/red-theme/lms/templates/header.html
+++ b/themes/red-theme/lms/templates/header.html
@@ -136,15 +136,15 @@ site_status_msg = get_site_status_msg(course_id)
         % endif
       </%block>
       % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
-          % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
+        % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
           <li class="nav-global-04">
-            <a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
+            <a class="btn-neutral btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
           </li>
-          % else:
+        % else:
           <li class="nav-global-04">
-            <a class="cta cta-register" href="/register">${_("Register Now")}</a>
+            <a class="btn-neutral btn-register" href="/register">${_("Register Now")}</a>
           </li>
-          % endif
+        % endif
       % endif
     </ol>
 
@@ -152,9 +152,9 @@ site_status_msg = get_site_status_msg(course_id)
     <li class="nav-courseware-01">
       % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
           % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-          <a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
+          <a class="btn-brand btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
           % else:
-          <a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a>
+          <a class="btn-brand btn-login" href="/login${login_query()}">${_("Sign in")}</a>
           % endif
       % endif
     </li>
diff --git a/themes/stanford-style/lms/templates/register-sidebar.html b/themes/stanford-style/lms/templates/register-sidebar.html
index 91ef291ae1..e661d5adbe 100644
--- a/themes/stanford-style/lms/templates/register-sidebar.html
+++ b/themes/stanford-style/lms/templates/register-sidebar.html
@@ -11,10 +11,10 @@ from django.core.urlresolvers import reverse
 
 % if has_extauth_info is UNDEFINED:
 
-<div class="cta cta-login">
+<div class="btn-brand btn-login">
   <h3 class="title">${_("Already registered?")}</h3>
   <p class="instructions">
-    <a class="cta-login-action" href="${reverse('signin_user')}${login_query()}">
+    <a class="btn-login-action" href="${reverse('signin_user')}${login_query()}">
       ${_("Log in")}
     </a>
   </p>