Merge pull request #15642 from edx/andya/studio-bootstrap-theme

Add basic Bootstrap theme to Studio

cms/envs/common.py

@@ -710,6 +710,10 @@ base_vendor_js = [
     'edx-ui-toolkit/js/utils/string-utils.js',
     'edx-ui-toolkit/js/utils/html-utils.js',
 
+    # Load Bootstrap and supporting libraries
+    'common/js/vendor/tether.js',
+    'common/js/vendor/bootstrap.js',
+
     # Finally load RequireJS
     'common/js/vendor/require.js'
 ]

cms/static/sass/_build-v1.scss

@@ -10,7 +10,7 @@
 
 // +Base - Utilities
 // ====================
-@import 'partials/variables';
+@import 'cms/base/variables';
 @import 'mixins';
 @import 'mixins-inherited';
 

cms/static/sass/_build-v2.scss

@@ -6,10 +6,13 @@
 // Configuration
 @import 'config';
 
-// Extensions
-@import 'partials/variables';
+// +Base - Utilities
+// ====================
+@import 'partials/cms/base/variables';
 @import 'mixins-v2';
 @import 'base-v2';
+
+// Pattern Library styling
 @import 'elements-v2/controls';
 @import 'elements-v2/header';
 @import 'elements-v2/navigation';

cms/static/sass/bootstrap/_base.scss

+// Open edX: Studio base styles
+// ============================
+//
+// Note: these styles replicate the Studio styles directly
+// rather than benefiting from any Bootstrap classes. Ideally
+// the code base should be rebuilt using Bootstrap and then
+// these styles will no longer be necessary.
+
+.is-hidden {
+  display: none;
+}

cms/static/sass/bootstrap/_components.scss

+// Open edX: components
+// ====================
+
+// Skip nav
+.nav-skip,
+.transcript-skip {
+  font-size: 14px;
+  line-height: 14px;
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  top: -($baseline*30);
+  overflow: hidden;
+  background: $white;
+  border-bottom: 1px solid $gray-lightest;
+  padding: ($baseline*0.75) ($baseline/2);
+
+  &:focus,
+  &:active {
+    position: relative;
+    top: auto;
+    width: auto;
+    height: auto;
+    margin: 0;
+  }
+}
+
+// Page banner
+.page-banner {
+  max-width: $studio-max-width;
+  margin: 0 auto;
+
+  .user-messages {
+    margin-top: $baseline;
+  }
+}
+
+// Alerts
+.alert {
+  .icon-alert {
+    margin-right: $baseline / 4;
+  }
+}
+
+// Sock
+.wrapper-sock {
+  @include clearfix();
+  position: relative;
+  margin: ($baseline*2) 0 0 0;
+  border-top: 1px solid $gray-light;
+  width: 100%;
+
+  .wrapper-inner {
+    display: none;
+    width: 100% !important;
+    border-bottom: 1px solid $white;
+    padding: 0 $baseline !important;
+  }
+
+  // sock - actions
+  .list-cta {
+    @extend %ui-depth1;
+    position: absolute;
+    top: -($baseline*0.75);
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+    list-style: none;
+
+    .cta-show-sock {
+      @extend %ui-btn-pill;
+      @extend %t-action4;
+      background: $gray-lightest;
+      padding: ($baseline/2) $baseline;
+      color: $gray-light;
+
+      .icon {
+        margin-right: $baseline/4;
+      }
+
+      &:hover {
+        background: $brand-primary;
+        color: $white;
+      }
+    }
+  }
+
+  // sock - additional help
+  .sock {
+    @include clearfix();
+    @extend %t-copy-sub2;
+    max-width: $studio-max-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    padding: ($baseline*2) 0;
+    color: $gray-light;
+
+    // support body
+    header {
+
+      .title {
+        @extend %t-title4;
+      }
+
+    }
+
+    .list-actions {
+      list-style: none;
+    }
+
+    // shared elements
+    .support, .feedback {
+      .title {
+        @extend %t-title6;
+        color: $white;
+        margin-bottom: ($baseline/2);
+      }
+
+      .copy {
+        @extend %t-copy-sub2;
+        margin: 0 0 $baseline 0;
+      }
+
+      .list-actions {
+        @include clearfix();
+
+        .action-item {
+          float: left;
+          margin-right: $baseline/2;
+          margin-bottom: ($baseline/2);
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          .action {
+            @extend %t-action4;
+            display: block;
+
+            .icon {
+              @extend %t-icon4;
+              vertical-align: middle;
+              margin-right: $baseline/4;
+            }
+
+            &:hover, &:active {
+
+            }
+          }
+
+          .tip {
+            @extend %cont-text-sr;
+          }
+        }
+
+        .action-primary {
+          @extend %btn-primary-blue;
+          @extend %t-action3;
+        }
+      }
+    }
+
+    // studio support content
+    .support {
+      width: flex-grid(8,12);
+      float: left;
+      margin-right: flex-gutter();
+
+      .action-item {
+        width: flexgrid(4,8);
+      }
+    }
+
+    // studio feedback content
+    .feedback {
+      width: flex-grid(4,12);
+      float: left;
+
+      .action-item {
+        width: flexgrid(4,4);
+      }
+    }
+  }
+
+  // case: sock content is shown
+  &.is-shown {
+    border-color: $gray-dark;
+
+    .list-cta .cta-show-sock {
+      background: $gray-dark;
+      border-color: $gray-dark;
+      color: $white;
+    }
+  }
+}

cms/static/sass/bootstrap/_footer.scss

+// Open edX: Studio footer
+// =======================
+//
+// Note: these styles replicate the Studio styles directly
+// rather than benefiting from any Bootstrap classes. Ideally
+// the header should be reimagined using Bootstrap and then
+// these styles will no longer be necessary.
+
+.wrapper-footer {
+  position: relative;
+  width: 100%;
+  margin: 0 0 $baseline 0;
+  padding: $baseline;
+
+  footer.primary {
+    @extend %t-copy-sub2;
+    @include clearfix();
+    max-width: $studio-max-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    color: $gray-light;
+
+    .footer-content-primary {
+      @include clearfix();
+    }
+
+    .colophon {
+      width: flex-grid(4, 12);
+      float: left;
+      margin-right: flex-gutter(2);
+    }
+
+    .nav-peripheral {
+      width: flex-grid(6, 12);
+      float: right;
+      text-align: right;
+
+      .nav-item {
+        display: inline-block;
+        margin-right: $baseline/4;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        a {
+          border-radius: 2px;
+          padding: ($baseline/2) ($baseline/2);
+          background: transparent;
+
+          .icon {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: $baseline/4;
+          }
+        }
+      }
+    }
+
+    .footer-content-secondary {
+      @include clearfix();
+      margin-top: $baseline;
+    }
+
+    .footer-about-copyright, .footer-about-openedx {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    // platform trademarks
+    .footer-about-copyright {
+      width: flex-grid(4, 12);
+      float: left;
+      margin-right: flex-gutter(2);
+    }
+
+    // platform Open edX logo and link
+    .footer-about-openedx {
+      float: right;
+      text-align: right;
+
+      a {
+        display: inline-block;
+
+        img {
+          display: block;
+          width: ($baseline* 6);
+        }
+
+        &:hover {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}

cms/static/sass/bootstrap/_layouts.scss

+// Open edX: Studio layout
+// =======================
+//
+// Note: these styles replicate the Studio styles directly
+// rather than benefiting from any Bootstrap classes. Ideally
+// the layouts should be reimagined using Bootstrap and then
+// these styles will no longer be necessary.
+
+.content-wrapper {
+  margin-top: $baseline;
+
+  .course-tabs {
+    padding-bottom: 0;
+
+    .nav-item {
+      &.active, &:hover{
+        .nav-link {
+          border-bottom-color: $brand-primary;
+          color: $brand-primary;
+        }
+      }
+
+      .nav-link {
+        padding: $baseline/2 $baseline*3/4 $baseline*13/20;
+        border-style: solid;
+        border-width: 0 0 $baseline/5 0;
+        border-bottom-color: transparent;
+
+        @media (max-width: map-get($grid-breakpoints, md)) {
+          border: none;
+          text-align: left;
+          padding: 0 0 $baseline/2 0;
+        }
+      }
+    }
+  }
+
+  .main-container {
+    border: 1px solid $inverse-color;
+    background-color: $body-bg;
+
+    .page-header {
+      border-bottom: 1px solid $inverse-color;
+      padding: 20px;
+    }
+
+    .page-content {
+      padding: 20px;
+    }
+  }
+
+  &.container-fluid {
+    max-width: $studio-max-width;
+  }
+}
+
+// studio - elements - layouts
+// ====================
+
+// layout - basic
+// the wrapper around the viewable page area, excluding modal and other extra-view content
+.wrapper-view {
+
+}
+
+// ====================
+
+// layout - basic page header
+.wrapper-mast {
+  margin: ($baseline*1.5) 0 0 0;
+  padding: 0 $baseline;
+  position: relative;
+
+  .mast,
+  .metadata {
+    @include clearfix();
+    position: relative;
+    max-width: $studio-max-width;
+    width: flex-grid(12);
+    margin: 0 auto $baseline auto;
+    color: $gray-dark;
+  }
+
+  .mast {
+    border-bottom: 1px solid $gray-light;
+    padding-bottom: ($baseline/2);
+
+    // layout without actions
+    .page-header {
+      width: flex-grid(12);
+    }
+
+    // layout with actions
+    &.has-actions {
+      @include clearfix();
+
+      .page-header {
+        float: left;
+        width: flex-grid(6,12);
+        margin-right: flex-gutter();
+      }
+
+      .nav-actions {
+        position: relative;
+        bottom: -($baseline*0.75);
+        float: right;
+        width: flex-grid(6,12);
+        text-align: right;
+
+        .nav-item {
+          display: inline-block;
+          vertical-align: top;
+          margin-right: ($baseline/2);
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
+        // buttons
+        .button {
+          @extend %btn-primary-blue;
+          @extend %sizing;
+
+          .action-button-text {
+            display: inline-block;
+            vertical-align: baseline;
+          }
+
+          .icon {
+            display: inline-block;
+            vertical-align: baseline;
+          }
+
+          // CASE: new/create button
+          &.new-button,
+          &.button-new {
+            @extend %btn-primary-green;
+            @extend %sizing;
+          }
+        }
+      }
+    }
+
+    // layout with actions
+    &.has-subtitle {
+
+      .nav-actions {
+        bottom: -($baseline*1.5);
+      }
+    }
+
+    // layout with breadcrumb navigation
+    &.has-navigation {
+
+      .nav-actions {
+        bottom: -($baseline*1.5);
+      }
+
+      .navigation-item {
+        @extend %cont-truncated;
+        display: inline-block;
+        vertical-align: bottom; // correct for extra padding in FF
+        max-width: 250px;
+        color: $gray-dark;
+
+        &.navigation-current {
+          @extend %ui-disabled;
+          color: $gray;
+          max-width: 250px;
+
+          &:before {
+            color: $gray;
+          }
+        }
+      }
+
+      .navigation-link:hover {
+        color: $brand-primary;
+      }
+
+      .navigation-item:before {
+        content: " / ";
+        margin: ($baseline/4);
+        color: $gray;
+
+        &:hover {
+          color: $gray;
+        }
+      }
+
+      .navigation .navigation-item:first-child:before {
+        content: "";
+        margin: 0;
+      }
+    }
+  }
+
+  // CASE: wizard-based mast
+  .mast-wizard {
+
+    .page-header-sub {
+      @extend %t-title4;
+      color: $gray;
+      font-weight: 300;
+    }
+
+    .page-header-super {
+      @extend %t-title4;
+      float: left;
+      width: flex-grid(12,12);
+      margin-top: ($baseline/2);
+      border-top: 1px solid $gray-lighter;
+      padding-top: ($baseline/2);
+      font-weight: 600;
+    }
+  }
+
+  // page metadata/action bar
+  .metadata {
+
+  }
+}
+
+// layout - basic page content
+.wrapper-content {
+  margin: 0;
+  padding: 0 $baseline;
+  position: relative;
+}
+
+.content {
+  @include clearfix();
+  @extend %t-copy-base;
+  max-width: $studio-max-width;
+  width: flex-grid(12);
+  margin: 0 auto;
+  color: $gray-dark;
+
+  header {
+    position: relative;
+    margin-bottom: $baseline;
+    border-bottom: 1px solid $gray-lighter;
+    padding-bottom: ($baseline/2);
+
+    .title-sub {
+      @extend %t-copy-sub1;
+      display: block;
+      margin: 0;
+      color: $gray-light;
+    }
+
+    .title-1 {
+      @extend %t-title3;
+      @extend %t-strong;
+      margin: 0;
+      padding: 0;
+      color: $gray-dark;
+    }
+  }
+}
+
+// 3/4 - 1/4 two col layout
+%two-col-1 {
+  .content-primary {
+    float: left;
+    margin-right: flex-gutter();
+    width: flex-grid(9,12);
+    box-shadow: none;
+    border: 0;
+    background-color: $white;
+  }
+
+  .content-supplementary {
+    float: left;
+    width: flex-grid(3,12);
+  }
+}
+
+
+// layout - primary content
+.content-primary {
+
+  .title-1 {
+    @extend %t-title3;
+  }
+
+  .title-2 {
+    @extend %t-title4;
+    margin: 0 0 ($baseline/2) 0;
+  }
+
+  .title-3 {
+    @extend %t-title6;
+    margin: 0 0 ($baseline/2) 0;
+  }
+
+  header {
+    @include clearfix();
+
+    .title-2 {
+      width: flex-grid(5, 12);
+      margin: 0 flex-gutter() 0 0;
+      float: left;
+    }
+
+    .tip {
+      @extend %t-copy-sub2;
+      width: flex-grid(7, 12);
+      float: right;
+      margin-top: ($baseline/2);
+      text-align: right;
+      color: $gray-dark;
+    }
+  }
+}
+
+// layout - supplemental content
+.content-supplementary {
+
+  > section {
+    margin: 0 0 $baseline 0;
+  }
+}
+
+// ====================
+
+// layout - grandfathered
+.main-wrapper {
+  position: relative;
+  margin: 0 ($baseline*2);
+}
+
+.inner-wrapper {
+  @include clearfix();
+  position: relative;
+  max-width: 1280px;
+  margin: auto;
+
+  > article {
+    clear: both;
+  }
+}
+
+.main-column {
+  clear: both;
+  float: left;
+  width: 70%;
+}
+
+.sidebar {
+  float: right;
+  width: 28%;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}

cms/static/sass/bootstrap/_mixins.scss

+// common - utilities - mixins and extends
+// ====================
+//
+// Note: these mixins replicate the Studio mixins directly
+// to simplify the usage of Studio Sass partials. They
+// should be deprecated in favor of using native Bootstrap
+// functionality.
+
+
+// Table of Contents
+// * +Font Sizing - Mixin
+// * +Line Height - Mixin
+// * +Sizing - Mixin
+// * +Square - Mixin
+// * +Placeholder Styling - Mixin
+// * +Flex Support - Mixin
+// * +Flex Polyfill - Extends
+// * +UI - Wrapper - Extends
+// * +UI - Window - Extend
+// * +UI - Visual Link - Extend
+// * +UI - Functional Disable - Extend
+// * +UI - Visual Link - Extend
+// * +UI - Depth Levels - Extends
+// * +UI - Clear Children - Extends
+// * +UI - Buttons - Extends
+// * +UI - Well Archetype - Extends
+// * +Content - No List - Extends
+// * +Content - Hidden Image Text - Extend
+// * +Content - Screenreader Text - Extend
+// * +Content - Text Wrap - Extend
+// * +Content - Text Truncate - Extend
+// * +Icon - Font-Awesome  - Extend
+// * +Icon - SSO icon images
+
+// +Font Sizing - Mixin
+// ====================
+@mixin font-size($sizeValue: 16){
+  font-size: $sizeValue + px;
+  font-size: ($sizeValue/10) + rem;
+}
+
+// +Line Height - Mixin
+// ====================
+@mixin line-height($fontSize: auto){
+  line-height: ($fontSize*1.48) + px;
+  line-height: (($fontSize/10)*1.48) + rem;
+}
+
+// +Sizing - Mixin
+// ====================
+@mixin size($width: $baseline, $height: $baseline) {
+  height: $height;
+  width: $width;
+}
+
+// +Square - Mixin
+// ====================
+@mixin square($size: $baseline) {
+  @include size($size);
+}
+
+// +Placeholder Styling - Mixin
+// ====================
+@mixin placeholder($color) {
+  :-moz-placeholder {
+    color: $color;
+  }
+  ::-webkit-input-placeholder {
+    color: $color;
+  }
+  :-ms-input-placeholder {
+     color: $color;
+  }
+}
+
+// +Flex Support - Mixin
+// ====================
+@mixin ui-flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+// +Flex PolyFill - Extends
+// ====================
+
+// justify-content right for display:flex alignment in older browsers
+%ui-justify-right-flex {
+  -webkit-box-pack: flex-end;
+  -moz-box-pack: flex-end;
+  -ms-flex-pack: flex-end;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+}
+
+// justify-content left for display:flex alignment in older browsers
+%ui-justify-left-flex {
+  -webkit-box-pack: flex-start;
+  -moz-box-pack: flex-start;
+  -ms-flex-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+}
+
+// align items center for display:flex alignment in older browsers
+%ui-align-center-flex {
+  -webkit-flex-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+
+// +UI - Wrapper - Extends
+// ====================
+// used for page/view-level wrappers (for centering/grids)
+%ui-wrapper {
+  @include clearfix();
+  width: 100%;
+}
+
+// +UI - Depth Levels - Extends
+// ====================
+%ui-depth0 { z-index: 0; }
+%ui-depth1 { z-index: 10; }
+%ui-depth2 { z-index: 100; }
+%ui-depth3 { z-index: 1000; }
+%ui-depth4 { z-index: 10000; }
+%ui-depth5 { z-index: 100000; }
+
+
+// +UI - Clear Children - Extends
+// ====================
+// extends - UI - utility - first child clearing
+%wipe-first-child {
+
+  &:first-child {
+    margin-top: 0;
+    border-top: none;
+    padding-top: 0;
+  }
+}
+
+// extends - UI - utility - last child clearing
+%wipe-last-child {
+
+  &:last-child {
+    margin-bottom: 0;
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+}
+
+// +Content - No List - Extends
+// ====================
+// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
+%cont-no-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// +Content - Hidden Image Text - Extend
+// ====================
+// image-replacement hidden text
+%cont-text-hide {
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// +Content - Screenreader Text - Extend
+// ====================
+%cont-text-sr {
+    // clip has been deprecated but is still supported
+    clip: rect(1px 1px 1px 1px);
+    clip: rect(1px, 1px, 1px, 1px);
+    position: absolute;
+    margin: -1px;
+    height: 1px;
+    width: 1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    // ensure there are spaces in sr text
+    word-wrap: normal;
+}
+
+// +Content - Text Wrap - Extend
+// ====================
+%cont-text-wrap {
+  word-wrap: break-word;
+}
+
+// +Content - Text Truncate - Extend
+// ====================
+%cont-truncated {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+// * +Icon - Font-Awesome  - Extend
+// ====================
+%use-font-awesome {
+  display: inline-block;
+  font-family: FontAwesome;
+  -webkit-font-smoothing: antialiased;
+  speak: none;
+}
+
+%btn-no-style {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+
+// * +Icon - SSO icon images
+// ====================
+
+%sso-icon {
+  .icon-image {
+    width: auto;
+    height: auto;
+    max-height: 1.4em;
+    max-width: 1.4em;
+    margin-top: -2px;
+  }
+}

cms/static/sass/bootstrap/_navigation.scss

+// Local overrides for bootstrap navigation bar theming
+.navigation-container {
+  border-bottom: 2px solid $brand-primary;
+  text-decoration: none;
+  background-color: $header-bg;
+
+  &.slim {
+    border-bottom: 1px solid $inverse-color;
+    box-shadow: 0 1px 5px 0 $black-t0;
+  }
+
+  .navbar {
+    margin: 0 auto;
+    max-width: map-get($container-max-widths, xl);
+
+    .logo.slim a {
+      height: $baseline*3/2;
+      margin-top: $baseline/5;
+    }
+
+    .course-header {
+      font-size: $font-size-lg;
+      margin: $baseline/2 $baseline/2 0 0;
+
+      .provider {
+        font-weight: $font-weight-bold;
+      }
+    }
+
+    .nav-item {
+      margin: 0 $baseline 0 0;
+      font-weight: $font-weight-normal;
+      font-family: $font-family-base;
+      text-transform: uppercase;
+      list-style: none;
+
+      .nav-link {
+        color: $brand-primary;
+      }
+
+      .user-image-frame {
+        max-width: $baseline*2;
+        border-radius: $border-radius;
+      }
+
+      // Dealing with creating a collapsed menu
+      &.nav-item-open-collapsed-only {
+        display: none;
+      }
+
+      @media (max-width: map-get($grid-breakpoints,md)) {
+        &.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
+          display: initial;
+          margin: $baseline/4 $baseline/2;
+
+          a {
+            color: $brand-primary;
+            padding: 0;
+            text-decoration: none;
+
+            &:hover {
+              color: $input-border-color;
+            }
+          }
+        }
+        &.nav-item-hidden-collapsed {
+          display: none;
+        }
+      }
+    }
+
+    .btn-shopping-cart{
+      padding-top: 0.7rem; // $btn-padding-y-lg once themed
+    }
+
+    .navbar-right .nav-item {
+      @media (min-width: map-get($grid-breakpoints,md)) {
+        .nav-link {
+          text-transform: none;
+          color: $brand-inverse;
+          font-weight: $font-weight-bold;
+          cursor: pointer;
+        }
+      }
+
+      &.dropdown {
+        cursor: pointer;
+
+        .dropdown-item {
+          text-transform: initial;
+        }
+      }
+    }
+  }
+}

cms/static/sass/bootstrap/_variables.scss

+// Studio - bootstrap utilities - variables
+// ========================================
+
+// #Units:          Unit variables
+// #GRID:           Grid and layout variables
+// #COLORS:         Base, palette and theme color definitions + application
+// #TYPOGRAPHY:     Font definitions and scales
+// #ICONS:          Icon specific colors + other styling
+
+// ----------------------------
+// #UNITS
+// ----------------------------
+$baseline: 20px !default;
+
+// ----------------------------
+// #GRID
+// ----------------------------
+$studio-max-width: 1180px !default;
+
+// ----------------------------
+// #COLORS
+// ----------------------------
+
+$studio-gray: palette(grayscale, base) !default;
+$studio-background-color: palette(grayscale, x-back) !default;
+$studio-container-background-color: $white !default;
+$studio-border-color: palette(grayscale, back) !default;
+$studio-label-color: palette(grayscale, black) !default;
+$studio-active-color: palette(primary, base) !default;
+$studio-preview-menu-color: #c8c8c8 !default;
+$success-color: palette(success, accent) !default;
+$success-color-hover: palette(success, text) !default;
+
+$button-bg-hover-color: $white !default;
+
+$white-transparent: rgba(255, 255, 255, 0) !default;
+$white-opacity-40: rgba(255, 255, 255, 0.4) !default;
+$white-opacity-60: rgba(255, 255, 255, 0.6) !default;
+$white-opacity-70: rgba(255, 255, 255, 0.7) !default;
+$white-opacity-80: rgba(255, 255, 255, 0.8) !default;
+
+$black:     rgb(0,0,0) !default;
+$black-t0:  rgba($black, 0.125) !default;
+$black-t1:  rgba($black, 0.25) !default;
+$black-t2:  rgba($black, 0.5) !default;
+$black-t3:  rgba($black, 0.75) !default;
+
+$light-grey-transparent: rgba(200,200,200, 0) !default;
+$light-grey-solid: rgba(200,200,200, 1) !default;
+
+$header-bg: $white !default;
+$footer-bg: $white !default;
+
+// ----------------------------
+// #TYPOGRAPHY
+// ----------------------------
+$font-light: 300 !default;
+$font-regular: 400 !default;
+$font-semibold: 600 !default;
+$font-bold: 700 !default;
+
+// ----------------------------
+// #ICONS
+// ----------------------------
+// Icons
+$studio-dark-icon-color: $white !default;
+$studio-dark-icon-background-color: palette(grayscale, black) !default;
+
+$site-status-color: rgb(182,37,103) !default;
+
+$shadow-l1: rgba(0,0,0,0.1) !default;

cms/static/sass/bootstrap/studio-main.scss

+// -----------------------------
+// Studio main styles for Bootstrap
+// -----------------------------
+
+// Bootstrap theme
+@import 'bootstrap/theme';
+@import 'bootstrap/scss/bootstrap';
+
+// Variables
+@import 'mixins';
+@import 'variables';
+@import 'base';
+
+// Elements
+@import 'header';
+@import 'footer';
+@import 'navigation';
+@import 'layouts';
+@import 'components';

cms/static/sass/partials/bootstrap/_theme.scss

+// Default bootstrap theming
+
+$body-bg: #f5f5f5 !default;
+
+@import 'edx-bootstrap/sass/open-edx/theme';

cms/templates/base.html

@@ -44,7 +44,11 @@ from openedx.core.djangolib.js_utils import (
     <%static:css group='style-vendor-tinymce-content'/>
     <%static:css group='style-vendor-tinymce-skin'/>
 
+    % 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
 
     <%include file="widgets/segment-io.html" />
 

cms/templates/ux/reference/_note-usage.html

-<!-- NOTE:
-
-This file is a static reference template used by the edX design and development teams while
-building new features. These files are not generally maintained or updated once a feature has
-been completed. Additionally, these templates are subject to the following:
-
-* inconsistent markup/UI with current UI
-* deletion by the edX design or development if not needed
-* not compliant with internationalization, javascript, or accessibility standards used
-  throughout the rest of the platform
-
--->

cms/templates/ux/reference/index.html

-## Override the default styles_version to the Pattern Library version (version 2)
-<%! main_css = "style-main-v2" %>
+## Override the default styles_version to use Bootstrap
+<%! main_css = "css/bootstrap/studio-main.css" %>
 
 <%page expression_filter="h"/>
-<%inherit file="../../base.html" />
 
-<%block name="view_notes">
-  <%include file="_note-usage.html" />
-</%block>
+<%inherit file="../../base.html" />
 
 <%block name="title">UX Style Reference</%block>
-<%block name="bodyclass">is-signedin course uploads view-container</%block>
+<%block name="bodyclass">ux-reference</%block>
 
 <%block name="content">
 <div class="main-wrapper">
     <div class="inner-wrapper">
         <div class="main-column">
             <article class="window unit-body">
-                <h1>UX Style Reference</h1>
+                <h2>UX Style Reference</h2>
 
-                <ol class="components">
-                    <li class="component">
-                        <div class="wrapper wrapper-component-action-header">
-                            <h2>Page Types</h2>
-                        </div>
-                        <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
                 <ul>
-                                <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
+                    <a href="bootstrap/test.html">Bootstrap Test Page</a>
+                    <a href="pattern-library/test.html">Pattern Library Test Page</a>
                 </ul>
-                        </section>
-                    </li>
-                </ol>
             </article>
         </div>
     </div>

lms/templates/ux/reference/index.html

 ## mako
 
+## Override the default styles_version to use Bootstrap
+<%! main_css = "css/bootstrap/lms-main.css" %>
+
 <%page expression_filter="h"/>
 <%inherit file="/main.html" />
 

openedx/core/djangoapps/debug/views.py

@@ -28,16 +28,27 @@ 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 = u'/pattern-library/' in request.path
         is_v1 = u'/v1/' in request.path
+        uses_bootstrap = not uses_pattern_library and not is_v1
         context = {
-            "disable_courseware_js": not is_v1,
-            "uses_pattern_library": uses_pattern_library,
-            "uses_bootstrap": uses_bootstrap,
+            'request': request,
+            'disable_courseware_js': not is_v1,
+            'uses_pattern_library': uses_pattern_library,
+            'uses_bootstrap': uses_bootstrap,
         }
         context.update(request.GET.dict())
 
+        # Support dynamic rendering of messages
+        if request.GET.get('alert'):
+            register_info_message(request, request.GET.get('alert'))
+        if request.GET.get('success'):
+            register_success_message(request, request.GET.get('success'))
+        if request.GET.get('warning'):
+            register_warning_message(request, request.GET.get('warning'))
+        if request.GET.get('error'):
+            register_error_message(request, request.GET.get('error'))
+
         # Add some messages to the course skeleton pages
         if u'course-skeleton.html' in request.path:
             register_info_message(request, _('This is a test message'))
@@ -47,4 +58,4 @@ def show_reference_template(request, template):
 
         return render_to_response(template, context)
     except TopLevelLookupException:
-        return HttpResponseNotFound("Couldn't find template {template}".format(template=template))
+        return HttpResponseNotFound('Missing template {template}'.format(template=template))

package.json

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

themes/edge.edx.org/cms/static/sass/partials/bootstrap/_theme.scss

+// Override theming for edx.org bootstrap
+
+$body-bg: #f5f5f5 !default;
+
+@import 'edx-bootstrap/sass/edx/theme';

themes/edx.org/cms/static/sass/partials/bootstrap/_theme.scss

+// Override theming for edx.org bootstrap
+
+$body-bg: #f5f5f5 !default;
+
+@import 'edx-bootstrap/sass/edx/theme';

themes/red-theme/cms/static/sass/partials/bootstrap/_theme.scss

+// Sample red theme to demonstrate SASS overrides
+
+// Theme colors
+//
+// Note: define colors needed by your theme first
+$red: #d9534f !default;
+$brand-primary: $red;
+
+// Theme fonts
+$font-family-sans-serif: cursive;
+
+// Initialize the Open edX bootstrap theme
+@import 'edx-bootstrap/sass/open-edx/theme';

themes/red-theme/cms/static/sass/partials/cms/base/_variables.scss

+// Color overrides
+$white: rgb(255,255,255);
+$red: #d9534f !default;
+
+$footer-bg: $white;
+$header-bg: $white;
+$header-border-color: $red;
+
+$base-font-color: $red;
+$link-color: $red;
+$lms-active-color: $red;
+$lms-label-color: $red;
+
+@import 'cms/static/sass/partials/cms/base/variables';