diff --git a/resources/styles/_components.less b/resources/styles/_components.less
new file mode 100644
index 0000000..f245d4e
--- /dev/null
+++ b/resources/styles/_components.less
@@ -0,0 +1,12 @@
+// This file should be imported wrapped within another less file only.
+// Each of them begin with a `&-`, allowing whatever file that is importing
+// this file to easily namespace all the components at once.
+
+@import './components/html/index';
+@import './components/exercise/step-card';
+@import './components/exercise/group';
+@import './components/breadcrumbs/step';
+@import './components/question';
+@import './components/close';
+@import './components/spy-mode';
+@import './components/smart-overflow';
diff --git a/resources/styles/components/breadcrumbs/icons.less b/resources/styles/components/breadcrumbs/icons.less
new file mode 100644
index 0000000..29faa6f
--- /dev/null
+++ b/resources/styles/components/breadcrumbs/icons.less
@@ -0,0 +1,26 @@
+// Note: Use tokens instead of strings to be able to do LESS compile-time validation
+.icon-feedback { .x-icon-bg(feedback); }
+.icon-exercise { .x-icon-bg(homework); }
+.icon-homework { .x-icon-bg(homework); }
+.icon-external { .x-icon-bg(external); }
+.icon-event { .x-icon-bg(event); }
+.icon-end { .x-icon-bg(end); }
+.icon-interactive { .x-icon-bg(interactive); }
+.icon-coach { .x-icon-bg(coach); }
+.icon-video { .x-icon-bg(video); }
+.icon-reading  { .x-icon-bg(reading); }
+.icon-recover  { .x-icon-bg(recover); }
+.icon-test     { .x-icon-bg(test); }
+.icon-spaced_practice  { .x-icon-bg(review); }
+.icon-personalized     { .x-icon-bg(personalized); }
+.icon-worked-example   { .x-icon-bg(worked-example); }
+
+.icon-placeholder {
+  &:before {
+    content: '?';
+    font-style: normal;
+  }
+}
+// The following are usually overlays on other icons
+.icon-correct  { .x-icon-bg(correct); }
+.icon-incorrect { .x-icon-bg(incorrect); }
\ No newline at end of file
diff --git a/resources/styles/components/breadcrumbs/index.less b/resources/styles/components/breadcrumbs/index.less
index eed075b..bf9192c 100644
--- a/resources/styles/components/breadcrumbs/index.less
+++ b/resources/styles/components/breadcrumbs/index.less
@@ -1,26 +1,13 @@
-.crumb-circle(@radius){
-  font-size: @radius;
-  border-radius: 2 * @radius;
-  line-height: 2 * @radius;
-  min-width: 2 * @radius;
-}
-
-.crumb-text(){
-  position: absolute;
-  width: 100%;
-  text-align: center;
-  left: 0;
-}
-
 // http://caniuse.com/#search=counter
 .task-homework,
 .task-practice,
 .task-chapter_practice,
+.task-concept_coach,
 .task-page_practice {
   .task-breadcrumbs {
     counter-reset: step;
   }
-  .task-breadcrumbs-step:not(.end) {
+  .openstax-breadcrumbs-step:not(.end) {
     &:before {
       counter-increment: step;
       content: counter(step);
@@ -34,7 +21,7 @@
 
 // label readings with chapter info if it exists
 .task-reading {
-  .task-breadcrumbs-step[data-chapter] {
+  .openstax-breadcrumbs-step[data-chapter] {
 
     background: @reading-color;
     color: @openstax-white;
@@ -59,7 +46,7 @@
   margin-right: -2px;
 
   &.shrink {
-    .task-breadcrumbs-step {
+    .openstax-breadcrumbs-step {
       &:not(:hover):not(.active) {
         .scale(.75, .75);
         margin-left: -16px;
@@ -72,36 +59,3 @@
     }
   }
 }
-
-.task-breadcrumbs-step {
-  .crumb-circle(2rem);
-  position: relative;
-  font-weight: 500;
-  cursor: pointer;
-  margin: 2px;
-  display: inline-block;
-  text-align: center;
-  background: @openstax-white;
-  color: @openstax-neutral;
-
-  &:hover,
-  &.active {
-    .openstax-icon-active(1.4, 0.5);
-  }
-
-  &.active {
-    color: @openstax-primary;
-  }
-  &.completed {
-    background: @openstax-answer-background;
-    color: @openstax-answer-color;
-  }
-  &.status-correct {
-    background: @openstax-correct-background;
-    color: @openstax-correct-color;
-  }
-  &.status-incorrect {
-    background: @openstax-incorrect-background;
-    color: @openstax-incorrect-color;
-  }
-}
\ No newline at end of file
diff --git a/resources/styles/components/breadcrumbs/step.less b/resources/styles/components/breadcrumbs/step.less
new file mode 100644
index 0000000..015e1f6
--- /dev/null
+++ b/resources/styles/components/breadcrumbs/step.less
@@ -0,0 +1,37 @@
+&-breadcrumbs-step {
+
+  &.completed{
+    .icon-end { .x-icon-bg(completed); }
+  }
+
+  .crumb-circle(2rem);
+  position: relative;
+  font-weight: 500;
+  cursor: pointer;
+  margin: 2px;
+  display: inline-block;
+  text-align: center;
+  background: @openstax-white;
+  color: @openstax-neutral;
+
+  &:hover,
+  &.active {
+    .openstax-icon-active(1.4, 0.5);
+  }
+
+  &.active {
+    color: @openstax-primary;
+  }
+  &.completed {
+    background: @openstax-answer-background;
+    color: @openstax-answer-color;
+  }
+  &.status-correct {
+    background: @openstax-correct-background;
+    color: @openstax-correct-color;
+  }
+  &.status-incorrect {
+    background: @openstax-incorrect-background;
+    color: @openstax-incorrect-color;
+  }
+}
\ No newline at end of file
diff --git a/resources/styles/components/close.less b/resources/styles/components/close.less
index b13ff6b..1acee87 100644
--- a/resources/styles/components/close.less
+++ b/resources/styles/components/close.less
@@ -1,4 +1,4 @@
-.close-x {
+&-close-x {
   &::before {
     content: "\00d7";
   }
diff --git a/resources/styles/components/exercise/free-response.less b/resources/styles/components/exercise/free-response.less
deleted file mode 100644
index e69de29..0000000
diff --git a/resources/styles/components/exercise/group.less b/resources/styles/components/exercise/group.less
index e69de29..2e5bb63 100644
--- a/resources/styles/components/exercise/group.less
+++ b/resources/styles/components/exercise/group.less
@@ -0,0 +1,13 @@
+&-step-group {
+  font-size: 1.6rem;
+  color: @openstax-neutral;
+  padding-top: 2rem;
+  padding-bottom: 0;
+  .opacity(0.5);
+
+}
+
+&-step-group-label {
+  display: inline-block;
+  margin-left: 4px;
+}
\ No newline at end of file
diff --git a/resources/styles/components/exercise/index.less b/resources/styles/components/exercise/index.less
deleted file mode 100644
index 50f5424..0000000
--- a/resources/styles/components/exercise/index.less
+++ /dev/null
@@ -1,24 +0,0 @@
-.exercise {
-  font-size: 1.8rem;
-  line-height: 1.68em;
-
-  @{placeholder-selector} {
-    font-style: italic;
-  }
-
-  textarea {
-    width: 100%;
-    min-height: 8em;
-    line-height: 1.5em;
-    margin: 1em 0;
-    padding: 0.75em;
-
-    &[disabled] {
-      border: none;
-    }
-  }
-}
-
-.exercise-card {
-  position: relative;
-}
\ No newline at end of file
diff --git a/resources/styles/components/exercise/modes.less b/resources/styles/components/exercise/modes.less
deleted file mode 100644
index e69de29..0000000
diff --git a/resources/styles/components/exercise/step-card.less b/resources/styles/components/exercise/step-card.less
index e69de29..e5da798 100644
--- a/resources/styles/components/exercise/step-card.less
+++ b/resources/styles/components/exercise/step-card.less
@@ -0,0 +1,32 @@
+&-exercise {
+  .exercise-typography();
+
+  @{placeholder-selector} {
+    font-style: italic;
+  }
+
+  textarea {
+    width: 100%;
+    min-height: 8em;
+    line-height: 1.5em;
+    margin: 1em 0;
+    padding: 0.75em;
+
+    &[disabled] {
+      border: none;
+    }
+  }
+
+  .exercise-uid {
+    position: absolute;
+    right: @answer-horizontal-spacing;
+    bottom: @answer-vertical-spacing;
+    color: @answer-label-color;
+    font-size: 1.2rem;
+    line-height: 1.2rem;
+  }
+}
+
+&-exercise-card {
+  position: relative;
+}
\ No newline at end of file
diff --git a/resources/styles/components/html/index.less b/resources/styles/components/html/index.less
index 5572fe1..1e92802 100644
--- a/resources/styles/components/html/index.less
+++ b/resources/styles/components/html/index.less
@@ -1,3 +1,3 @@
-.has-html {
+&-has-html {
   .openstax-tables();
 }
\ No newline at end of file
diff --git a/resources/styles/components/pinned-header-footer-card/index.less b/resources/styles/components/pinned-header-footer-card/index.less
index 32f5f6c..679fcc3 100644
--- a/resources/styles/components/pinned-header-footer-card/index.less
+++ b/resources/styles/components/pinned-header-footer-card/index.less
@@ -1,15 +1,3 @@
-@pinned-top-heading-buffer: @openstax-navbar-height;
-
-.make-shy() {
-  .transform-origin(0 0);
-  .translate(0, -@pinned-top-heading-buffer);
-}
-
-.make-shy-animate() {
-  .transition(transform 0.2s ease-out);
-}
-
-
 body.pinned-shy {
   .pinned-header, .navbar-fixed-top {
     .make-shy();
diff --git a/resources/styles/components/pinned-header-footer-card/sections.less b/resources/styles/components/pinned-header-footer-card/sections.less
index f7485e7..1ca41db 100644
--- a/resources/styles/components/pinned-header-footer-card/sections.less
+++ b/resources/styles/components/pinned-header-footer-card/sections.less
@@ -11,7 +11,7 @@
 
 .pinned-on {
   .pinned-header {
-    top: @pinned-top-heading-buffer;
+    top: @openstax-navbar-height;
     .fixed-bar();
   }
 }
diff --git a/resources/styles/components/question.less b/resources/styles/components/question.less
index 11012c6..c08ae00 100644
--- a/resources/styles/components/question.less
+++ b/resources/styles/components/question.less
@@ -127,7 +127,7 @@
 }
 
 
-.question {
+&-question {
 
   .clearfix();
 
@@ -288,12 +288,3 @@
     }
   }
 }
-
-.exercise-uid {
-  position: absolute;
-  right: @answer-horizontal-spacing;
-  bottom: @answer-vertical-spacing;
-  color: @answer-label-color;
-  font-size: 1.2rem;
-  line-height: 1.2rem;
-}
diff --git a/resources/styles/components/smart-overflow.less b/resources/styles/components/smart-overflow.less
index c1f87a1..9148bdc 100644
--- a/resources/styles/components/smart-overflow.less
+++ b/resources/styles/components/smart-overflow.less
@@ -1,4 +1,4 @@
-.smart-overflow {
+&-smart-overflow {
   overflow-y: auto;
   overflow-x: hidden;
   max-height: none;
diff --git a/resources/styles/components/spy-mode.less b/resources/styles/components/spy-mode.less
index 4d33f15..af9c9a6 100644
--- a/resources/styles/components/spy-mode.less
+++ b/resources/styles/components/spy-mode.less
@@ -1,4 +1,4 @@
-.debug-content {
+&-debug-content {
 
   &.is-enabled {
     .debug-toggle-link {
diff --git a/resources/styles/globals/icons.less b/resources/styles/globals/icons.less
index 2f89e35..0a1ff51 100644
--- a/resources/styles/globals/icons.less
+++ b/resources/styles/globals/icons.less
@@ -1,33 +1,9 @@
-@icon-path: '../../images/icons';
-@icon-size-xs: 1rem;
-@icon-size-sm: @icon-size-xs * 1.6;
-@icon-size-md: @icon-size-xs * 2;
-@icon-size-lg: @icon-size-xs * 4;
-@icon-size-xlg: @icon-size-xs * 6;
-
 // # Overview
 //
 // - add `<i class="icon-homework icon-sm" />` tag in the HTML
 //   - Similar to font-awesome icons
 // - use `<span class="icon-stack icon-lg">` for stacking icons
 
-
-// # Local mixins
-//
-.x-icon-size(@size) {
-  display: inline-block;
-  width: @size;
-  height: @size;
-  background-size: @size @size;
-  background-repeat: no-repeat;
-  background-position: center;
-  .transition(~"transform .1s ease-in-out, margin .3s ease-in-out");
-}
-
-.x-icon-bg(@name) {
-  background-image: url("@{icon-path}/icon-@{name}.svg");
-}
-
 // # Support stacking icons
 //
 // Example:
@@ -59,37 +35,7 @@
 .icon-lg  { .x-icon-size(@icon-size-lg); }
 .icon-xlg { .x-icon-size(@icon-size-xlg); }
 
-// Note: Use tokens instead of strings to be able to do LESS compile-time validation
-.icon-feedback { .x-icon-bg(feedback); }
-.icon-exercise { .x-icon-bg(homework); }
-.icon-homework { .x-icon-bg(homework); }
-.icon-external { .x-icon-bg(external); }
-.icon-event { .x-icon-bg(event); }
-.icon-end { .x-icon-bg(end); }
-.completed{
-  .icon-end { .x-icon-bg(completed); }
-}
-.icon-interactive { .x-icon-bg(interactive); }
-.icon-coach { .x-icon-bg(coach); }
-.icon-video { .x-icon-bg(video); }
-.icon-reading  { .x-icon-bg(reading); }
-.icon-recover  { .x-icon-bg(recover); }
-.icon-test     { .x-icon-bg(test); }
-.icon-spaced_practice  { .x-icon-bg(review); }
-.icon-personalized     { .x-icon-bg(personalized); }
-.icon-worked-example   { .x-icon-bg(worked-example); }
-
 .icon-sm.icon-personalized {
   width: @icon-size-sm * 2;
   background-size: @icon-size-sm * 2 @icon-size-sm;
 }
-
-.icon-placeholder {
-  &:before {
-    content: '?';
-    font-style: normal;
-  }
-}
-// The following are usually overlays on other icons
-.icon-correct  { .x-icon-bg(correct); }
-.icon-incorrect { .x-icon-bg(incorrect); }
diff --git a/resources/styles/main.less b/resources/styles/main.less
index 63ac107..2a2c344 100644
--- a/resources/styles/main.less
+++ b/resources/styles/main.less
@@ -6,14 +6,16 @@
 @import './variables/colors';
 @import './variables/openstax-bootstrap';
 @import './mixins/index';
-@import './globals/icons';
 
-@import './components/html/index';
-@import './components/exercise/index';
-@import './components/breadcrumbs/index';
-@import './components/question';
-@import './components/close';
-@import './components/spy-mode';
-@import './components/smart-overflow';
 @import './components/pinned-header-footer-card/index';
 @import './components/pinned-header-footer-card/sections';
+
+.openstax {
+  @import './_components';
+
+  &-wrapper {
+    @import './components/breadcrumbs/index';
+    @import './components/breadcrumbs/icons';
+    @import './globals/icons';
+  }
+}
diff --git a/resources/styles/mixins/icon.less b/resources/styles/mixins/icon.less
new file mode 100644
index 0000000..bf0481a
--- /dev/null
+++ b/resources/styles/mixins/icon.less
@@ -0,0 +1,40 @@
+@icon-path: '../../images/icons';
+@icon-size-xs: 1rem;
+@icon-size-sm: @icon-size-xs * 1.6;
+@icon-size-md: @icon-size-xs * 2;
+@icon-size-lg: @icon-size-xs * 4;
+@icon-size-xlg: @icon-size-xs * 6;
+
+.x-icon-size(@size) {
+  display: inline-block;
+  width: @size;
+  height: @size;
+  background-size: @size @size;
+  background-repeat: no-repeat;
+  background-position: center;
+  .transition(~"transform .1s ease-in-out, margin .3s ease-in-out");
+}
+
+.x-icon-bg(@name) {
+  background-image: url("@{icon-path}/icon-@{name}.svg");
+}
+
+.openstax-icon-active(@scale: 1.4; @shadow: 0.12) {
+  .scale(@scale);
+  .box-shadow(0 1px 6px rgba(0, 0, 0, @shadow));
+  border-radius: 50%;
+}
+
+.crumb-circle(@radius){
+  font-size: @radius;
+  border-radius: 2 * @radius;
+  line-height: 2 * @radius;
+  min-width: 2 * @radius;
+}
+
+.crumb-text(){
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  left: 0;
+}
diff --git a/resources/styles/mixins/index.less b/resources/styles/mixins/index.less
index 93aa2de..af611e7 100644
--- a/resources/styles/mixins/index.less
+++ b/resources/styles/mixins/index.less
@@ -1,4 +1,5 @@
 @import './flexbox';
+@import './icon';
 
 
 .openstax-tables() {
@@ -52,15 +53,23 @@
   }
 }
 
-.openstax-icon-active(@scale: 1.4; @shadow: 0.12) {
-  .scale(@scale);
-  .box-shadow(0 1px 6px rgba(0, 0, 0, @shadow));
-  border-radius: 50%;
-}
-
 .fixed-bar() {
   left: 0;
   position: fixed;
   width: 100%;
   z-index: 2;
 }
+
+.make-shy() {
+  .transform-origin(0 0);
+  .translate(0, -@openstax-navbar-height);
+}
+
+.make-shy-animate() {
+  .transition(transform 0.2s ease-out);
+}
+
+.exercise-typography() {
+  font-size: 1.8rem;
+  line-height: 1.68em;
+}
diff --git a/resources/styles/no-conflict.less b/resources/styles/no-conflict.less
new file mode 100644
index 0000000..921e742
--- /dev/null
+++ b/resources/styles/no-conflict.less
@@ -0,0 +1,21 @@
+@import './variables/paths';
+
+@import './variables/index';
+@import './variables/colors';
+@import './variables/openstax-bootstrap';
+@import './mixins/index';
+
+@import "@{bootstrap-path}/mixins";
+@import "@{bootstrap-path}/popovers";
+@import "@{fa-path}less/variables.less";
+@import "@{fa-path}less/mixins.less";
+
+.openstax {
+  @import './_components';
+
+  &-wrapper {
+    @import './components/breadcrumbs/index';
+    @import './components/breadcrumbs/icons';
+    @import './globals/icons';
+  }
+}
diff --git a/resources/styles/variables/index.less b/resources/styles/variables/index.less
index ef94a4b..069fccb 100644
--- a/resources/styles/variables/index.less
+++ b/resources/styles/variables/index.less
@@ -1,4 +1,4 @@
 @placeholder-selector: ~'::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder';
 
 @openstax-navbar-height: 61px;
-@openstax-navbar-padding-horizontal: 4rem;
\ No newline at end of file
+@openstax-navbar-padding-horizontal: 4rem;
diff --git a/resources/styles/variables/openstax-bootstrap.less b/resources/styles/variables/openstax-bootstrap.less
index f0c51d0..69c2053 100644
--- a/resources/styles/variables/openstax-bootstrap.less
+++ b/resources/styles/variables/openstax-bootstrap.less
@@ -21,7 +21,7 @@
 @brand-danger:          @openstax-danger;  // openstax-danger, red
 
 @state-info-bg:         @openstax-info-bg;
-@container-large-desktop:      (1200px + @grid-gutter-width);
+// @container-large-desktop:      (1200px + @grid-gutter-width);
 
 @link-hover-color:      darken(@link-color, 5%);
 
@@ -47,13 +47,13 @@
 // //
 // //## Font, line-height, and color for body text, headings, and more.
 
-// @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
 // @font-family-serif:       Georgia, "Times New Roman", Times, serif;
 // //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 // @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
-// @font-family-base:        @font-family-sans-serif;
+@font-family-base:        @font-family-sans-serif;
 
-// @font-size-base:          14px;
+@font-size-base:          14px;
 // @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
 // @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 
@@ -65,7 +65,7 @@
 // @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
 
 // //** Unit-less `line-height` for use in components like buttons.
-// @line-height-base:        1.428571429; // 20/14
+@line-height-base:        1.428571429; // 20/14
 // //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 // @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
 
@@ -108,7 +108,7 @@
 // @line-height-small:         1.5;
 
 // @border-radius-base:        4px;
-// @border-radius-large:       6px;
+@border-radius-large:       6px;
 // @border-radius-small:       3px;
 
 // //** Global color for active items (e.g., navs or dropdowns).
@@ -271,7 +271,7 @@
 
 // @zindex-navbar:            1000;
 // @zindex-dropdown:          1000;
-// @zindex-popover:           1060;
+@zindex-popover:           1060;
 // @zindex-tooltip:           1070;
 // @zindex-navbar-fixed:      1030;
 // @zindex-modal-background:  1040;
@@ -529,33 +529,33 @@
 // @tooltip-arrow-color:         @tooltip-bg;
 
 
-// //== Popovers
-// //
-// //##
-
-// //** Popover body background color
-// @popover-bg:                          #fff;
-// //** Popover maximum width
-// @popover-max-width:                   276px;
-// //** Popover border color
-// @popover-border-color:                rgba(0,0,0,.2);
-// //** Popover fallback border color
-// @popover-fallback-border-color:       #ccc;
-
-// //** Popover title background color
-// @popover-title-bg:                    darken(@popover-bg, 3%);
-
-// //** Popover arrow width
-// @popover-arrow-width:                 10px;
-// //** Popover arrow color
-// @popover-arrow-color:                 @popover-bg;
-
-// //** Popover outer arrow width
-// @popover-arrow-outer-width:           (@popover-arrow-width + 1);
-// //** Popover outer arrow color
-// @popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
-// //** Popover outer arrow fallback color
-// @popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
+//== Popovers
+//
+//##
+
+//** Popover body background color
+@popover-bg:                          #fff;
+//** Popover maximum width
+@popover-max-width:                   276px;
+//** Popover border color
+@popover-border-color:                rgba(0,0,0,.2);
+//** Popover fallback border color
+@popover-fallback-border-color:       #ccc;
+
+//** Popover title background color
+@popover-title-bg:                    darken(@popover-bg, 3%);
+
+//** Popover arrow width
+@popover-arrow-width:                 10px;
+//** Popover arrow color
+@popover-arrow-color:                 @popover-bg;
+
+//** Popover outer arrow width
+@popover-arrow-outer-width:           (@popover-arrow-width + 1);
+//** Popover outer arrow color
+@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
+//** Popover outer arrow fallback color
+@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
 
 
 // //== Labels
diff --git a/src/components/breadcrumb/index.cjsx b/src/components/breadcrumb/index.cjsx
index 307aff1..5cfdff2 100644
--- a/src/components/breadcrumb/index.cjsx
+++ b/src/components/breadcrumb/index.cjsx
@@ -62,7 +62,7 @@ Breadcrumb = React.createClass
     if isEnd
       title = "#{step.title} Completion"
 
-    classes = classnames 'task-breadcrumbs-step', 'icon-stack', 'icon-lg', step.group, crumbType, className,
+    classes = classnames 'openstax-breadcrumbs-step', 'icon-stack', 'icon-lg', step.group, crumbType, className,
       current: isCurrent
       active: isCurrent
       completed: isCompleted
diff --git a/src/components/buttons/close-button.cjsx b/src/components/buttons/close-button.cjsx
index 502f8d5..f0e7ae9 100644
--- a/src/components/buttons/close-button.cjsx
+++ b/src/components/buttons/close-button.cjsx
@@ -3,5 +3,5 @@ classnames = require 'classnames'
 
 module.exports = React.createClass
   render: ->
-    classNames = classnames 'close-x', 'close', @props.className
+    classNames = classnames 'openstax-close-x', 'close', @props.className
     <button {...@props} className={classNames} aria-role='close'></button>
diff --git a/src/components/demo.cjsx b/src/components/demo.cjsx
index 81851e9..ca9d92b 100644
--- a/src/components/demo.cjsx
+++ b/src/components/demo.cjsx
@@ -142,7 +142,7 @@ Demo = React.createClass
       breadcrumbs: <BreadcrumbDemo/>
 
     demos = _.map(demos, (demo, name) ->
-      <BS.Row className='demo'>
+      <BS.Row className='demo openstax-wrapper'>
         <BS.Col xs={12}>
           <h1>{"#{name}"}</h1>
           <section className={"#{name}-demo"}>{demo}</section>
diff --git a/src/components/exercise/group.cjsx b/src/components/exercise/group.cjsx
index dc87a74..90ed6f8 100644
--- a/src/components/exercise/group.cjsx
+++ b/src/components/exercise/group.cjsx
@@ -56,9 +56,9 @@ ExerciseGroup = React.createClass
       className = group.replace(' ', '_')
       labels = @getGroupLabel(group, related_content)
 
-      groupDOM = <div className='task-step-group'>
+      groupDOM = <div className='openstax-step-group'>
           <i className="icon-sm icon-#{className}"></i>
-          <span className='task-step-group-label'>{labels}</span>
+          <span className='openstax-step-group-label'>{labels}</span>
         </div>
 
     groupDOM
diff --git a/src/components/exercise/modes.cjsx b/src/components/exercise/modes.cjsx
index 36e2633..128cd99 100644
--- a/src/components/exercise/modes.cjsx
+++ b/src/components/exercise/modes.cjsx
@@ -122,7 +122,7 @@ ExFreeResponse = React.createClass
     {freeResponse} = @state
     question = content.questions[0]
 
-    <div className='exercise'>
+    <div className='openstax-exercise'>
       <ArbitraryHtmlAndMath className='stimulus' block={true} html={content.stimulus_html} />
       <ArbitraryHtmlAndMath className='stem' block={true} html={question.stem_html} />
       <textarea
@@ -160,7 +160,7 @@ ExMultipleChoice = React.createClass
     question = content.questions[0]
     {answerId} = @state
 
-    <div className='exercise'>
+    <div className='openstax-exercise'>
       <Question
         answer_id={answerId}
         onChange={@onAnswerChanged}
@@ -182,7 +182,7 @@ ExReview = React.createClass
     {content, free_response, answer_id, correct_answer_id, feedback_html, type, onChangeAnswerAttempt} = @props
     question = content.questions[0]
 
-    <div className='exercise'>
+    <div className='openstax-exercise'>
       <Question
         key='step-question'
         model={question}
diff --git a/src/components/exercise/step-card.cjsx b/src/components/exercise/step-card.cjsx
index 4029c20..f9ab7cd 100644
--- a/src/components/exercise/step-card.cjsx
+++ b/src/components/exercise/step-card.cjsx
@@ -148,7 +148,7 @@ ExerciseStepCard = React.createClass
     footerProps.controlButtons = controlButtons or <ControlButtons {...controlProps}/>
     footer = React.addons.cloneWithProps(footer, footerProps)
 
-    cardClasses = classnames 'task-step', 'exercise-card', className
+    cardClasses = classnames 'task-step', 'openstax-exercise-card', className
 
     <CardBody className={cardClasses} footer={footer} pinned={pinned}>
       <div className="exercise-#{panel}">
diff --git a/src/components/html.cjsx b/src/components/html.cjsx
index b50b0bf..3ffdde6 100644
--- a/src/components/html.cjsx
+++ b/src/components/html.cjsx
@@ -1,5 +1,6 @@
 React = require 'react'
 _ = require 'underscore'
+classnames = require 'classnames'
 
 {typesetMath} = require '../helpers/mathjax'
 
@@ -13,13 +14,13 @@ module.exports = React.createClass
     block: false
 
   render: ->
-    classes = ['has-html']
-    classes.push(@props.className) if @props.className
-    classes = classes.join(' ')
+    {className, block} = @props
+
+    classes = classnames 'openstax-has-html', className
 
     otherProps = _.omit(@props, 'className', 'block', 'html')
 
-    if @props.block
+    if block
       <div
         {...otherProps}
         className={classes}
diff --git a/src/components/question.cjsx b/src/components/question.cjsx
index d655f2e..99113fe 100644
--- a/src/components/question.cjsx
+++ b/src/components/question.cjsx
@@ -211,7 +211,7 @@ module.exports = React.createClass
 
     answers.splice(checkedAnswerIndex + 1, 0, feedback) if feedback? and checkedAnswerIndex?
 
-    classes = classnames 'question',
+    classes = classnames 'openstax-question',
       'has-correct-answer': hasCorrectAnswer
 
     <div className={classes}>
diff --git a/src/components/smart-overflow.cjsx b/src/components/smart-overflow.cjsx
index 292016b..0b232fa 100644
--- a/src/components/smart-overflow.cjsx
+++ b/src/components/smart-overflow.cjsx
@@ -1,5 +1,6 @@
 React = require 'react'
 _ = require 'underscore'
+classnames = require 'classnames'
 
 ResizeListenerMixin = require './resize-listener-mixin'
 
@@ -52,7 +53,7 @@ SmartOverflow = React.createClass
   render: ->
     {className} = @props
 
-    classes = "#{className} smart-overflow"
+    classes = classnames 'openstax-smart-overflow', className
 
     <div className={classes} style={@state.style}>
       {@props.children}
diff --git a/src/components/spy-mode.cjsx b/src/components/spy-mode.cjsx
index 35ff28f..c324211 100644
--- a/src/components/spy-mode.cjsx
+++ b/src/components/spy-mode.cjsx
@@ -14,7 +14,7 @@ SpyModeWrapper = React.createClass
     ev.preventDefault()
 
   render: ->
-    <div className={classnames('debug-content', {'is-enabled': @state.isEnabled})}>
+    <div className={classnames('openstax-debug-content', {'is-enabled': @state.isEnabled})}>
       {@props.children}
       <a href='#spy' onClick={@toggleDebug} className='debug-toggle-link'>&pi;</a>
     </div>