Implement a skeleton page with Bootstrap

LEARNER-1174

lms/static/sass/bootstrap/lms-main-bootstrap.scss

+// -----------------------------
+// LMS main styles for Bootstrap
+// -----------------------------
+
+// Bootstrap theme
+@import 'edx-bootstrap/sass/open-edx/theme';
+@import 'bootstrap/scss/bootstrap';

lms/templates/main.html

@@ -61,7 +61,11 @@ from pipeline_mako import render_require_js_path_overrides
   <link rel="icon" type="image/x-icon" href="${static.url(static.get_value('favicon_path', settings.FAVICON_PATH))}" />
 
   <%static:css group='style-vendor'/>
-  <%static:css group='${self.attr.main_css}'/>
+  % if uses_bootstrap:
+    <link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
+  % else:
+    <%static:css group='${self.attr.main_css}'/>
+  % endif
 
   % if not uses_pattern_library:
     % if disable_courseware_js:
@@ -78,6 +82,11 @@ from pipeline_mako import render_require_js_path_overrides
     <%static:js group='base_application'/>
   % endif
 
+  % if uses_bootstrap:
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
+  % endif
+
   <script>
     window.baseUrl = "${settings.STATIC_URL}";
     (function (require) {
@@ -131,14 +140,14 @@ from pipeline_mako import render_require_js_path_overrides
 % if not disable_window_wrap:
   <div class="window-wrap" dir="${static.dir_rtl()}">
 % endif
-    <a class="nav-skip" href="#main">${_("Skip to main content")}</a>
+    <a class="nav-skip sr-only sr-only-focusable" href="#main">${_("Skip to main content")}</a>
 
     % if not disable_header:
         <%include file="${static.get_template_path('header.html')}" args="online_help_token=online_help_token" />
         <%include file="/preview_menu.html" />
     % endif
 
-    <div class="content-wrapper" id="content">
+    <div class="content-wrapper container main-container" id="content">
       ${self.body()}
       <%block name="bodyextra"/>
     </div>

lms/templates/ux/reference/bootstrap/course-skeleton.html

+## Override the default styles_version to use Bootstrap
+<%! main_css = "css/bootstrap/lms-main-bootstrap.css" %>
+
+<%page expression_filter="h"/>
+<%inherit file="/main.html" />
+
+<%block name="pagetitle">Course Skeleton</%block>
+
+<%block name="bodyclass">course-skeleton</%block>
+
+<%block name="content">
+<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
+    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="index.html">Home</a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Discussion</a>
+            </li>
+        </ul>
+    </div>
+</nav>
+
+<section class="main-container">
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <h2 class="hd hd-2 page-title">Skeleton Page</h2>
+                <p class="page-description">This demonstrates the pieces available to a courseware page.</p>
+            </div>
+            <div class="col-8">
+                <div class="form-actions">
+                    <button class="btn btn-primary">Click Me!</button>
+                    <form class="form-inline my-2 my-lg-0">
+                        <input class="form-control mr-sm-2" type="text" placeholder="Search">
+                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <h3>Sidebar</h3>
+                <ul>
+                    <li>Item one</li>
+                    <li>Item two</li>
+                    <li>Item three</li>
+                </ul>
+            </div>
+            <main id="main" aria-label="Content" tabindex="-1" class="col-8">
+                <article tabindex="-1" aria-label="Main Content">
+                    <h3>Main content goes here.</h3>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie, orci at viverra ornare,
+                        augue urna fermentum ex, vitae dignissim magna est sit amet diam. Nunc sodales dolor finibus
+                        pulvinar placerat. Suspendisse vitae tellus auctor, sodales erat ac, venenatis quam. Etiam
+                        purus est, consequat nec erat vel, bibendum volutpat ex. Fusce vitae consectetur ante.
+                        Suspendisse elit mauris, iaculis sed diam eu, efficitur tempor dui. Praesent tristique nunc
+                        quam, in tincidunt ligula accumsan et. Etiam augue sem, commodo ac ipsum vel, fringilla dapibus
+                        lacus. Sed facilisis euismod felis, non malesuada massa scelerisque sed. Etiam et placerat
+                        lorem. Nullam quis tincidunt sapien.</p>
+                </article>
+            </main>
+        </div>
+    </div>
+</section>
+</%block>

lms/templates/ux/reference/index.html

@@ -24,6 +24,11 @@
                         <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
                         <li><a href="course-skeleton.html">Course skeleton page</a></li>
                     </ul>
+
+                    <h3>Bootstrap</h3>
+                    <ul>
+                        <li><a href="bootstrap/course-skeleton.html">Course skeleton page</a></li>
+                    </ul>
                 </section>
             </article>
         </div>

openedx/core/djangoapps/debug/views.py

@@ -22,9 +22,12 @@ def show_reference_template(request, template):
     e.g. /template/ux/reference/index.html?name=Foo
     """
     try:
+        uses_bootstrap = u'/bootstrap/' in request.path
+        uses_pattern_library = not uses_bootstrap
         context = {
             "disable_courseware_js": True,
-            "uses_pattern_library": True
+            "uses_pattern_library": uses_pattern_library,
+            "uses_bootstrap": uses_bootstrap,
         }
         context.update(request.GET.dict())
         return render_to_response(template, context)

package.json

@@ -9,6 +9,7 @@
     "backbone.paginator": "~2.0.3",
     "coffee-loader": "^0.7.3",
     "coffee-script": "1.6.1",
+    "edx-bootstrap": "~0.1.6",
     "edx-pattern-library": "0.18.1",
     "edx-ui-toolkit": "1.5.2",
     "exports-loader": "^0.6.4",