update docs to include separate responsive css, update docs to highlight proper file name, updated makefile to build responsive separately

17 files changed, 275 insertions, 253 deletions

diff --git a/Makefile b/Makefile
index f4324e5665..612f77fdf5 100644
--- a/Makefile
+++ b/Makefile
@@ -2,6 +2,9 @@ VERSION=2.0.0
 BOOTSTRAP = ./bootstrap.css
 BOOTSTRAP_MIN = ./bootstrap.min.css
 BOOTSTRAP_LESS = ./lib/bootstrap.less
+BOOTSTRAP_RESPONSIVE = ./bootstrap-responsive.css
+BOOTSTRAP_RESPONSIVE_MIN = ./bootstrap-responsive.min.css
+BOOTSTRAP_RESPONSIVE_LESS = ./lib/responsive.less
 LESS_COMPRESSOR ?= `which lessc`
 UGLIFY_JS ?= `which uglifyjs`
 WATCHR ?= `which watchr`
@@ -16,6 +19,10 @@ build:
 		lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP}; \
 		lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP_MIN} --compress; \
 		rm -f ${BOOTSTRAP_LESS}.tmp; \
+		sed -e 's/@VERSION/'"v${VERSION}"'/' -e 's/@DATE/'"`date`"'/' <${BOOTSTRAP_RESPONSIVE_LESS} >${BOOTSTRAP_RESPONSIVE_LESS}.tmp; \
+		lessc ${BOOTSTRAP_RESPONSIVE_LESS}.tmp > ${BOOTSTRAP_RESPONSIVE}; \
+		lessc ${BOOTSTRAP_RESPONSIVE_LESS}.tmp > ${BOOTSTRAP_RESPONSIVE_MIN} --compress; \
+		rm -f ${BOOTSTRAP_RESPONSIVE_LESS}.tmp; \
 		echo "Bootstrap successfully built! - `date`"; \
 	else \
 		echo "You must have the LESS compiler installed in order to build Bootstrap."; \
diff --git a/bootstrap-responsive.css b/bootstrap-responsive.css
new file mode 100644
index 0000000000..4a924da68d
--- /dev/null
+++ b/bootstrap-responsive.css
@@ -0,0 +1,245 @@
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+@media (max-width: 480px) {
+  .navbar .nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 180px;
+    padding-top: 40px;
+    list-style: none;
+  }
+  .navbar .nav, .navbar .nav > li:last-child a {
+    -webkit-border-radius: 0 0 4px 0;
+    -moz-border-radius: 0 0 4px 0;
+    border-radius: 0 0 4px 0;
+  }
+  .navbar .nav > li {
+    float: none;
+    display: none;
+  }
+  .navbar .nav > li > a {
+    float: none;
+    background-color: #222;
+  }
+  .navbar .nav > .active {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .navbar .nav > .active > a {
+    background-color: transparent;
+  }
+  .navbar .nav > .active > a:hover {
+    background-color: #333;
+  }
+  .navbar .nav > .active > a:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-top: 8px;
+    margin-left: 6px;
+    text-indent: -99999px;
+    vertical-align: top;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid #ffffff;
+    filter: alpha(opacity=100);
+    -moz-opacity: 1;
+    opacity: 1;
+    content: "&darr;";
+  }
+  .navbar .nav:hover > li {
+    display: block;
+  }
+  .navbar .nav:hover > li > a:hover {
+    background-color: #333;
+  }
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  .form-horizontal .control-list {
+    padding-top: 0;
+  }
+  .form-horizontal .form-actions {
+    padding-left: 0;
+  }
+  .modal {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    width: auto;
+    margin: 0;
+  }
+  .modal.fade.in {
+    top: auto;
+  }
+  .modal-header .close {
+    padding: 10px;
+  }
+}
+@media (max-width: 768px) {
+  .navbar-fixed {
+    position: absolute;
+  }
+  .navbar-fixed .nav {
+    float: none;
+  }
+  .container {
+    width: auto;
+    padding: 0 20px;
+  }
+  .row {
+    margin-left: 0;
+  }
+  .row > [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+  }
+}
+@media (min-width: 768px) and (max-width: 940px) {
+  .container {
+    width: 748px;
+  }
+  .span1 {
+    width: 44px;
+  }
+  .span2 {
+    width: 108px;
+  }
+  .span3 {
+    width: 172px;
+  }
+  .span4 {
+    width: 236px;
+  }
+  .span5 {
+    width: 300px;
+  }
+  .span6 {
+    width: 364px;
+  }
+  .span7 {
+    width: 428px;
+  }
+  .span8 {
+    width: 492px;
+  }
+  .span9 {
+    width: 556px;
+  }
+  .span10 {
+    width: 620px;
+  }
+  .span11 {
+    width: 684px;
+  }
+  .span12 {
+    width: 748px;
+  }
+  .offset1 {
+    margin-left: 64px;
+  }
+  .offset2 {
+    margin-left: 128px;
+  }
+  .offset3 {
+    margin-left: 192px;
+  }
+  .offset4 {
+    margin-left: 256px;
+  }
+  .offset5 {
+    margin-left: 320px;
+  }
+  .offset6 {
+    margin-left: 384px;
+  }
+  .offset7 {
+    margin-left: 448px;
+  }
+  .offset8 {
+    margin-left: 512px;
+  }
+  .offset9 {
+    margin-left: 576px;
+  }
+  .offset10 {
+    margin-left: 640px;
+  }
+  .offset11 {
+    margin-left: 704px;
+  }
+  .offset12 {
+    margin-left: 768px;
+  }
+}
+/*
+@media (min-width: 1210px) {
+
+  // Reset grid variables
+  @gridColumns:       12;
+  @gridColumnWidth:   70px;
+  @gridGutterWidth:   30px;
+  @siteWidth:         1170px;
+
+  // Bring grid mixins to recalculate widths
+  .columns(@columnSpan: 1) {
+    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+  }
+  .offset(@columnOffset: 1) {
+    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
+  }
+
+  .container {
+    width: @siteWidth;
+  }
+  .row {
+    margin-left: @gridGutterWidth * -1;
+  }
+  [class*="span"] {
+    margin-left: @gridGutterWidth;
+  }
+
+  // Default columns
+  .span1     { .columns(1); }
+  .span2     { .columns(2); }
+  .span3     { .columns(3); }
+  .span4     { .columns(4); }
+  .span5     { .columns(5); }
+  .span6     { .columns(6); }
+  .span7     { .columns(7); }
+  .span8     { .columns(8); }
+  .span9     { .columns(9); }
+  .span10    { .columns(10); }
+  .span11    { .columns(11); }
+  .span12    { .columns(12); }
+
+  // Offset column options
+  .offset1   { .offset(1); }
+  .offset2   { .offset(2); }
+  .offset3   { .offset(3); }
+  .offset4   { .offset(4); }
+  .offset5   { .offset(5); }
+  .offset6   { .offset(6); }
+  .offset7   { .offset(7); }
+  .offset8   { .offset(8); }
+  .offset9   { .offset(9); }
+  .offset10  { .offset(10); }
+  .offset11  { .offset(11); }
+  .offset12  { .offset(12); }
+
+}
+*/
diff --git a/bootstrap-responsive.min.css b/bootstrap-responsive.min.css
new file mode 100644
index 0000000000..5c45bd12b7
--- /dev/null
+++ b/bootstrap-responsive.min.css
@@ -0,0 +1,3 @@
+
+.hidden{display:none;visibility:hidden;}
+@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"&darr;";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;} .modal{position:absolute;top:20px;left:20px;right:20px;width:auto;margin:0;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
diff --git a/bootstrap.css b/bootstrap.css
index 85b515ecc3..d90ec91889 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Wed Jan 25 09:53:40 PST 2012
+ * Date: Wed Jan 25 10:01:08 PST 2012
  */
 article,
 aside,
@@ -3011,248 +3011,3 @@ a.thumbnail:hover {
 .invisible {
   visibility: hidden;
 }
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-@media (max-width: 480px) {
-  .navbar .nav {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 180px;
-    padding-top: 40px;
-    list-style: none;
-  }
-  .navbar .nav, .navbar .nav > li:last-child a {
-    -webkit-border-radius: 0 0 4px 0;
-    -moz-border-radius: 0 0 4px 0;
-    border-radius: 0 0 4px 0;
-  }
-  .navbar .nav > li {
-    float: none;
-    display: none;
-  }
-  .navbar .nav > li > a {
-    float: none;
-    background-color: #222;
-  }
-  .navbar .nav > .active {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .navbar .nav > .active > a {
-    background-color: transparent;
-  }
-  .navbar .nav > .active > a:hover {
-    background-color: #333;
-  }
-  .navbar .nav > .active > a:after {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-top: 8px;
-    margin-left: 6px;
-    text-indent: -99999px;
-    vertical-align: top;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 4px solid #ffffff;
-    filter: alpha(opacity=100);
-    -moz-opacity: 1;
-    opacity: 1;
-    content: "&darr;";
-  }
-  .navbar .nav:hover > li {
-    display: block;
-  }
-  .navbar .nav:hover > li > a:hover {
-    background-color: #333;
-  }
-  .form-horizontal .control-group > label {
-    float: none;
-    width: auto;
-    padding-top: 0;
-    text-align: left;
-  }
-  .form-horizontal .controls {
-    margin-left: 0;
-  }
-  .form-horizontal .control-list {
-    padding-top: 0;
-  }
-  .form-horizontal .form-actions {
-    padding-left: 0;
-  }
-  .modal {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    right: 20px;
-    width: auto;
-    margin: 0;
-  }
-  .modal.fade.in {
-    top: auto;
-  }
-  .modal-header .close {
-    padding: 10px;
-  }
-}
-@media (max-width: 768px) {
-  .navbar-fixed {
-    position: absolute;
-  }
-  .navbar-fixed .nav {
-    float: none;
-  }
-  .container {
-    width: auto;
-    padding: 0 20px;
-  }
-  .row {
-    margin-left: 0;
-  }
-  .row > [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
-}
-@media (min-width: 768px) and (max-width: 940px) {
-  .container {
-    width: 748px;
-  }
-  .span1 {
-    width: 44px;
-  }
-  .span2 {
-    width: 108px;
-  }
-  .span3 {
-    width: 172px;
-  }
-  .span4 {
-    width: 236px;
-  }
-  .span5 {
-    width: 300px;
-  }
-  .span6 {
-    width: 364px;
-  }
-  .span7 {
-    width: 428px;
-  }
-  .span8 {
-    width: 492px;
-  }
-  .span9 {
-    width: 556px;
-  }
-  .span10 {
-    width: 620px;
-  }
-  .span11 {
-    width: 684px;
-  }
-  .span12 {
-    width: 748px;
-  }
-  .offset1 {
-    margin-left: 64px;
-  }
-  .offset2 {
-    margin-left: 128px;
-  }
-  .offset3 {
-    margin-left: 192px;
-  }
-  .offset4 {
-    margin-left: 256px;
-  }
-  .offset5 {
-    margin-left: 320px;
-  }
-  .offset6 {
-    margin-left: 384px;
-  }
-  .offset7 {
-    margin-left: 448px;
-  }
-  .offset8 {
-    margin-left: 512px;
-  }
-  .offset9 {
-    margin-left: 576px;
-  }
-  .offset10 {
-    margin-left: 640px;
-  }
-  .offset11 {
-    margin-left: 704px;
-  }
-  .offset12 {
-    margin-left: 768px;
-  }
-}
-/*
-@media (min-width: 1210px) {
-
-  // Reset grid variables
-  @gridColumns:       12;
-  @gridColumnWidth:   70px;
-  @gridGutterWidth:   30px;
-  @siteWidth:         1170px;
-
-  // Bring grid mixins to recalculate widths
-  .columns(@columnSpan: 1) {
-    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
-  }
-  .offset(@columnOffset: 1) {
-    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
-  }
-
-  .container {
-    width: @siteWidth;
-  }
-  .row {
-    margin-left: @gridGutterWidth * -1;
-  }
-  [class*="span"] {
-    margin-left: @gridGutterWidth;
-  }
-
-  // Default columns
-  .span1     { .columns(1); }
-  .span2     { .columns(2); }
-  .span3     { .columns(3); }
-  .span4     { .columns(4); }
-  .span5     { .columns(5); }
-  .span6     { .columns(6); }
-  .span7     { .columns(7); }
-  .span8     { .columns(8); }
-  .span9     { .columns(9); }
-  .span10    { .columns(10); }
-  .span11    { .columns(11); }
-  .span12    { .columns(12); }
-
-  // Offset column options
-  .offset1   { .offset(1); }
-  .offset2   { .offset(2); }
-  .offset3   { .offset(3); }
-  .offset4   { .offset(4); }
-  .offset5   { .offset(5); }
-  .offset6   { .offset(6); }
-  .offset7   { .offset(7); }
-  .offset8   { .offset(8); }
-  .offset9   { .offset(9); }
-  .offset10  { .offset(10); }
-  .offset11  { .offset(11); }
-  .offset12  { .offset(12); }
-
-}
-*/
\ No newline at end of file
diff --git a/bootstrap.min.css b/bootstrap.min.css
index cd155d561d..01342ea849 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -540,5 +540,3 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
 .hide{display:none;}
 .show{display:block;}
 .invisible{visibility:hidden;}
-.hidden{display:none;visibility:hidden;}
-@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"&darr;";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;} .modal{position:absolute;top:20px;left:20px;right:20px;width:auto;margin:0;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
diff --git a/docs/base-css.html b/docs/base-css.html
index 6b6bd5c51a..7902434268 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -14,6 +14,7 @@
 
     <!-- Le styles -->
     <link href="../bootstrap.css" rel="stylesheet">
+    <link href="../bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
diff --git a/docs/components.html b/docs/components.html
index c1cec739cd..e527801838 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -14,6 +14,7 @@
 
     <!-- Le styles -->
     <link href="../bootstrap.css" rel="stylesheet">
+    <link href="../bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
diff --git a/docs/download.html b/docs/download.html
index 1d74c4f78b..7c03675196 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -14,6 +14,7 @@
 
     <!-- Le styles -->
     <link href="../bootstrap.css" rel="stylesheet">
+    <link href="../bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
diff --git a/docs/index.html b/docs/index.html
index 83e65c97e6..4e3ecd038c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,6 +14,7 @@
 
     <!-- Le styles -->
     <link href="../bootstrap.css" rel="stylesheet">
+    <link href="../bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
diff --git a/docs/javascript.html b/docs/javascript.html
index c6682660f8..9ef609138c 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -14,6 +14,7 @@
 
     <!-- Le styles -->
     <link href="../bootstrap.css" rel="stylesheet">
+    <link href="../bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
diff --git a/docs/less.html b/docs/less.html
index e10c8899b0..1e6c48253e 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -14,6 +14,7 @@
 
     <!-- Le styles -->
     <link href="../bootstrap.css" rel="stylesheet">
+    <link href="../bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 3a903cf573..7f2bbc09f3 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -14,6 +14,7 @@
 
     <!-- Le styles -->
     <link href="../bootstrap.css" rel="stylesheet">
+    <link href="../bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
@@ -355,7 +356,7 @@
     <div class="span5">
       <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
       <ol>
-        <li>Use the compiled responsive version, bootstrap.reponsive.css</li>
+        <li>Use the compiled responsive version, bootstrap-reponsive.css</li>
         <li>Add @import "responsive.less" and recompile Bootstrap</li>
         <li>Modify and recompile responsive.less as a separate</li>
       </ol>
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 1fec7788ef..0bcfaeb63a 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -14,6 +14,7 @@
 
     <!-- Le styles -->
     <link href="../bootstrap.css" rel="stylesheet">
+    <link href="../bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index aea8002ad0..a89f93d8e1 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -292,7 +292,7 @@
     <div class="span5">
       <p>{{_i}}Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:{{/i}}</p>
       <ol>
-        <li>{{_i}}Use the compiled responsive version, bootstrap.reponsive.css{{/i}}</li>
+        <li>{{_i}}Use the compiled responsive version, bootstrap-reponsive.css{{/i}}</li>
         <li>{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}</li>
         <li>{{_i}}Modify and recompile responsive.less as a separate{{/i}}</li>
       </ol>
diff --git a/docs/upgrading.html b/docs/upgrading.html
index 75b8e7327b..33b4d939aa 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -14,6 +14,7 @@
 
     <!-- Le styles -->
     <link href="../bootstrap.css" rel="stylesheet">
+    <link href="../bootstrap-responsive.css" rel="stylesheet">
     <link href="assets/css/docs.css" rel="stylesheet">
     <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
 
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index 67642d1c45..8d307d4271 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -57,6 +57,3 @@
 
 // Utility classes
 @import "utilities.less"; // Has to be last to override when necessary
-
-// Responsive
-@import "responsive.less";
\ No newline at end of file
diff --git a/lib/responsive.less b/lib/responsive.less
index 416a8da7b7..452116ea0d 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -3,6 +3,14 @@
 // -------------------------------------------------------------
 
 
+// REPEAT VARIABLES & MIXINS
+// -------------------------
+// Required since we compile the responsive stuff separately
+
+@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+@import "mixins.less";
+
+
 // RESPONSIVE CLASSES
 // ------------------