Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

10 files changed, 432 insertions, 248 deletions

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index e9b20ad6c..c434c8ab4 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -8,7 +8,6 @@
 
 .btn {
   display: inline-block;
-  margin-bottom: 0; // For input.btn
   font-weight: $btn-font-weight;
   text-align: center;
   white-space: nowrap;
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 7c045a1e9..90aee7ad9 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -21,7 +21,7 @@
     // Account for jankitude on images
     > img,
     > a > img {
-      // @extend .img-responsive;
+      @extend .img-responsive;
       line-height: 1;
     }
 
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 8b58835a7..235cabff2 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -2,36 +2,21 @@
 // Forms
 // --------------------------------------------------
 
-
-// Normalize non-controls
-//
-// Restyle and baseline non-control form elements.
-
-fieldset {
-  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
-  // so we reset that to ensure it behaves more like a standard block element.
-  // See https://github.com/twbs/bootstrap/issues/12359.
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-legend {
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin-bottom: $line-height-computed;
-  font-size: ($font-size-base * 1.5);
-  line-height: inherit;
-  color: $legend-color;
-  border: 0;
-  border-bottom: 1px solid $legend-border-color;
-}
-
+// legend {
+//   display: block;
+//   width: 100%;
+//   padding: 0;
+//   margin-bottom: $line-height-computed;
+//   font-size: ($font-size-base * 1.5);
+//   line-height: inherit;
+//   color: $legend-color;
+//   border: 0;
+//   border-bottom: 1px solid $legend-border-color;
+// }
+
+// todo: turn this into a class
 label {
-  display: inline-block;
-  margin-bottom: 5px;
+  margin-bottom: .5rem;
 }
 
 
@@ -41,10 +26,10 @@ label {
 // is required to ensure optimum display with or without those classes to better
 // address browser inconsistencies.
 
-// Override content-box in Normalize (* isn't specific enough)
-input[type="search"] {
-  box-sizing: border-box;
-}
+// // Override content-box in Normalize (* isn't specific enough)
+// input[type="search"] {
+//   box-sizing: border-box;
+// }
 
 // Position radios and checkboxes better
 input[type="radio"],
@@ -54,22 +39,22 @@ input[type="checkbox"] {
   line-height: normal;
 }
 
-// Set the height of file controls to match text inputs
-input[type="file"] {
-  display: block;
-}
+// // Set the height of file controls to match text inputs
+// input[type="file"] {
+//   display: block;
+// }
 
-// Make range inputs behave like textual form controls
-input[type="range"] {
-  display: block;
-  width: 100%;
-}
+// // Make range inputs behave like textual form controls
+// input[type="range"] {
+//   display: block;
+//   width: 100%;
+// }
 
-// Make multiple select elements height not fixed
-select[multiple],
-select[size] {
-  height: auto;
-}
+// // Make multiple select elements height not fixed
+// select[multiple],
+// select[size] {
+//   height: auto;
+// }
 
 // Focus for file, radio, and checkbox
 input[type="file"]:focus,
@@ -80,7 +65,7 @@ input[type="checkbox"]:focus {
 
 // Adjust output element
 output {
-  display: block;
+  // display: block;
   padding-top: ($padding-base-vertical + 1);
   font-size: $font-size-base;
   line-height: $line-height-base;
diff --git a/scss/_images.scss b/scss/_images.scss
new file mode 100644
index 000000000..283ee875f
--- /dev/null
+++ b/scss/_images.scss
@@ -0,0 +1,28 @@
+// Responsive images (ensure images don't scale beyond their parents)
+.img-responsive {
+  @include img-responsive();
+}
+
+// Rounded corners
+.img-rounded {
+  @include border-radius($border-radius-lg);
+}
+
+// Image thumbnails
+.img-thumbnail {
+  padding: $thumbnail-padding;
+  line-height: $line-height-base;
+  background-color: $thumbnail-bg;
+  border: 1px solid $thumbnail-border;
+  border-radius: $thumbnail-border-radius;
+  transition: all .2s ease-in-out;
+  @include box-shadow(0 1px 2px rgba(0,0,0,.075));
+
+  // Keep them at most 100% wide
+  @include img-responsive(inline-block);
+}
+
+// Perfect circle
+.img-circle {
+  border-radius: 50%; // set radius in percents
+}
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
new file mode 100644
index 000000000..02f749fd7
--- /dev/null
+++ b/scss/_reboot.scss
@@ -0,0 +1,284 @@
+// Reboot
+//
+// Global resets to common HTML elements and more for easier usage by Bootstrap.
+// Builds on the resets of Normalize.css.
+
+
+// Reset the box-sizing
+//
+// Change from `box-sizing: content-box` to `border-box` so that when you add
+// `padding` or `border`s to an element, the overall declared `width` does not
+// change. For example, `width: 100px;` will always be `100px` despite the
+// `border: 10px solid red;` and `padding: 20px;`.
+//
+// Heads up! This reset may cause conflicts with some third-party widgets. For
+// recommendations on resolving such conflicts, see
+// http://getbootstrap.com/getting-started/#third-box-sizing.
+//
+// Credit: shttp://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+
+// Make viewport responsive
+//
+// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
+// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
+// Eventually @viewport will replace <meta name="viewport">. It's been manually
+// prefixed for forward-compatibility.
+//
+// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
+// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
+// and the fix for that involves a snippet of JavaScript to sniff the user agent
+// and apply some conditional CSS.
+//
+// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
+
+@-moz-viewport      { width: device-width; }
+@-ms-viewport       { width: device-width; }
+@-o-viewport        { width: device-width; }
+@-webkit-viewport   { width: device-width; }
+@viewport           { width: device-width; }
+
+
+//
+// Reset HTML, body, and more
+//
+
+html {
+  // Sets a specific default `font-size` for user with `rem` type scales.
+  font-size: $font-size-root;
+  // Changes the default tap highlight to be completely transparent in iOS.
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+body {
+  // Make the `body` use the `font-size-root`
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  // Go easy on the eyes and use something other than `#000` for text
+  color: $text-color;
+  // By default, `<body>` has no `background-color` so we set one as a best practice.
+  background-color: $body-bg;
+}
+
+
+//
+// Typography
+//
+
+// Remove top margins from headings
+//
+// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+// margin for easier control within type scales as it avoids margin collapsing.
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: .5rem;
+}
+
+// Reset margins on paragraphs
+//
+// Similarly, the top margin on `<p>`s get reset. However, we also reset the
+// bottom margin to use `rem` units instead of `em`.
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title] {
+  cursor: help;
+  border-bottom-color: #ccc;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 0; // Undo browser default
+  margin-bottom: .5rem;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+
+//
+// Links
+//
+
+a {
+  color: $link-color;
+  text-decoration: none;
+
+  @include hover-focus {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:focus {
+    @include tab-focus();
+  }
+}
+
+
+//
+// Code
+//
+
+pre {
+  // Remove browser default top margin
+  margin-top: 0;
+  // Reset browser default of `1em` to use `rem`s
+  margin-bottom: 1rem;
+}
+
+
+//
+// Figures
+//
+
+figure {
+  // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
+  // We reset that to create a better flow in-page.
+  margin: 0 0 1rem;
+}
+
+
+
+//
+// Images
+//
+
+img {
+  // By default, `<img>`s are `inline-block`. This assumes that, and vertically
+  // centers them. This won't apply should you reset them to `block` level.
+  vertical-align: middle;
+}
+
+
+// iOS "clickable elements" fix for role="button"
+//
+// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
+// for traditionally non-focusable elements with role="button"
+// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged
+
+[role="button"] {
+  cursor: pointer;
+}
+
+
+//
+// Tables
+//
+
+table {
+  // Reset for nesting within parents with `background-color`.
+  background-color: $table-bg;
+}
+
+caption {
+  caption-side: bottom;
+  padding-top: $table-cell-padding;
+  padding-bottom: $table-cell-padding;
+  color: $text-muted;
+  text-align: left;
+}
+
+th {
+  // Centered by default, but left-align-ed to match the `td`s below.
+  text-align: left;
+}
+
+
+//
+// Forms
+//
+
+label {
+  // Allow labels can use `margin` for spacing.
+  display: inline-block;
+}
+
+input,
+button,
+select,
+textarea {
+  // Remove all `margin`s so our classes don't have to do it themselves.
+  margin: 0;
+  // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
+  // properly inherited. However, `line-height` isn't addressed there. Using this
+  // ensures we don't need to unnessarily redeclare the global font stack.
+  line-height: inherit;
+}
+
+textarea {
+  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
+  resize: vertical;
+}
+
+fieldset {
+  // Reset the default outline behavior of fieldsets so they don't affect page layout.
+  padding: 0;
+  margin: 0;
+  border: 0;
+  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
+  // so we reset that to ensure it behaves more like a standard block element.
+  // See https://github.com/twbs/bootstrap/issues/12359.
+  min-width: 0;
+}
+
+legend {
+  // Reset the entire legend element to match the `fieldset`
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+//  border: 0;
+}
+
+input[type="search"] {
+  // Under the `content-box` in Normalize as `*` isn't specific enough.
+  box-sizing: border-box;
+}
+
+// todo: needed?
+output {
+  display: block;
+//  font-size: $font-size-base;
+//  line-height: $line-height-base;
+//  color: $input-color;
+}
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
deleted file mode 100644
index 6f6650b77..000000000
--- a/scss/_scaffolding.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-//
-// Scaffolding
-// --------------------------------------------------
-
-
-// Reset the box-sizing
-//
-// Heads up! This reset may cause conflicts with some third-party widgets.
-// For recommendations on resolving such conflicts, see
-// http://getbootstrap.com/getting-started/#third-box-sizing
-// Credit: Jon Neal & CSS-Tricks
-// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
-html {
-  box-sizing: border-box;
-}
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-
-// Make viewport responsive
-//
-// @viewport is supposed to eventually replace <meta name="viewport">. It's manually prefixed for forward-compatibility.
-//
-// @viewport is also needed because IE 10+ doesn't honor <meta name="viewport"> in some cases.
-// (See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/)
-//
-// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
-// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
-// and https://github.com/twbs/bootstrap/issues/10497)
-// and the fix for that involves a snippet of JavaScript to sniff the user agent and apply some conditional CSS.
-// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
-
-@-moz-viewport      { width: device-width; }
-@-ms-viewport       { width: device-width; }
-@-o-viewport        { width: device-width; }
-@-webkit-viewport   { width: device-width; }
-@viewport           { width: device-width; }
-
-
-// Body reset
-
-html {
-  font-size: $font-size-root;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
-body {
-  font-family: $font-family-base;
-  font-size: $font-size-base;
-  line-height: $line-height-base;
-  color: $text-color;
-  background-color: $body-bg;
-}
-
-// Reset fonts for relevant elements
-input,
-button,
-select,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-
-// Links
-
-a {
-  color: $link-color;
-  text-decoration: none;
-
-  @include hover-focus {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-  }
-
-  &:focus {
-    @include tab-focus();
-  }
-}
-
-
-// Images
-
-img {
-  // Make them responsive with `max-width` and `height`
-  max-width: 100%;
-  height: auto;
-  // Match vertical alignment of most other Bootstrapped elements
-  vertical-align: middle;
-}
-
-// Rounded corners
-.img-rounded {
-  @include border-radius($border-radius-lg);
-}
-
-// Image thumbnails
-.img-thumbnail {
-  padding: $thumbnail-padding;
-  line-height: $line-height-base;
-  background-color: $thumbnail-bg;
-  border: 1px solid $thumbnail-border;
-  border-radius: $thumbnail-border-radius;
-  transition: all .2s ease-in-out;
-  @include box-shadow(0 1px 2px rgba(0,0,0,.075));
-
-  // Keep them at most 100% wide
-  // @include img-responsive(inline-block);
-}
-
-// Perfect circle
-.img-circle {
-  border-radius: 50%; // set radius in percents
-}
-
-
-// Horizontal rules
-
-hr {
-  margin-top: $spacer;
-  margin-bottom: $spacer;
-  border: 0;
-  border-top: .0625rem solid $hr-border;
-}
-
-
-// iOS "clickable elements" fix for role="button"
-//
-// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
-// for traditionally non-focusable elements with role="button"
-// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged
-
-[role="button"] {
-  cursor: pointer;
-}
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 1548b826e..fc9c83edf 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -2,20 +2,20 @@
 // Reset tabular elements
 //
 
-table {
-  background-color: $table-bg;
-}
-
-caption {
-  padding-top: $table-cell-padding;
-  padding-bottom: $table-cell-padding;
-  color: $text-muted;
-  text-align: left;
-}
-
-th {
-  text-align: left;
-}
+// table {
+//   background-color: $table-bg;
+// }
+
+// caption {
+//   padding-top: $table-cell-padding;
+//   padding-bottom: $table-cell-padding;
+//   color: $text-muted;
+//   text-align: left;
+// }
+
+// th {
+//   text-align: left;
+// }
 
 
 //
diff --git a/scss/_type.scss b/scss/_type.scss
index 5bbbf5873..a0b0f2fac 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -8,7 +8,6 @@
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-top: 0;
   font-family: $headings-font-family;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
@@ -54,10 +53,10 @@ h6, .h6 { font-size: $font-size-h6; }
 // Body text
 // -------------------------
 
-p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
+// p {
+//   margin-top: 0;
+//   margin-bottom: 1rem;
+// }
 
 .lead {
   font-size: 1.25rem;
@@ -65,6 +64,17 @@ p {
 }
 
 
+// Horizontal rules
+// -------------------------
+
+hr {
+  margin-top: $spacer;
+  margin-bottom: $spacer;
+  border: 0;
+  border-top: .0625rem solid $hr-border;
+}
+
+
 // Emphasis & misc
 // -------------------------
 
@@ -95,16 +105,16 @@ mark,
 // -------------------------
 
 // Unordered and Ordered lists
-ul,
-ol {
-  margin-top: 0;
-  margin-bottom: ($line-height-computed / 2);
-
-  ul,
-  ol {
-    margin-bottom: 0;
-  }
-}
+// ul,
+// ol {
+//   margin-top: 0;
+//   margin-bottom: ($line-height-computed / 2);
+
+//   ul,
+//   ol {
+//     margin-bottom: 0;
+//   }
+// }
 
 // List options
 
@@ -127,20 +137,20 @@ ol {
 }
 
 // Description Lists
-dl {
-  margin-top: 0; // Remove browser default
-  margin-bottom: $line-height-computed;
-}
-dt,
-dd {
-  line-height: $line-height-base;
-}
-dt {
-  font-weight: bold;
-}
-dd {
-  margin-left: 0; // Undo browser default
-}
+// dl {
+//   margin-top: 0; // Remove browser default
+//   margin-bottom: $line-height-computed;
+// }
+// dt,
+// dd {
+//   line-height: $line-height-base;
+// }
+// dt {
+//   font-weight: bold;
+// }
+// dd {
+//   margin-left: 0; // Undo browser default
+// }
 
 // Horizontal description lists w/ grid classes
 .dl-horizontal {
@@ -153,13 +163,14 @@ dd {
 // Misc
 // -------------------------
 
-// Abbreviations and acronyms
-abbr[title],
-// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
-abbr[data-original-title] {
-  cursor: help;
-  border-bottom: 1px dotted $abbr-border-color;
-}
+// // Abbreviations and acronyms
+// abbr[title],
+// // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
+// abbr[data-original-title] {
+//   cursor: help;
+//   border-bottom: 1px dotted $abbr-border-color;
+// }
+
 .initialism {
   font-size: 90%;
   text-transform: uppercase;
@@ -168,7 +179,7 @@ abbr[data-original-title] {
 // Blockquotes
 blockquote {
   padding: ($spacer / 2) $spacer;
-  margin: 0 0 $spacer;
+  margin-bottom: $spacer;
   font-size: $blockquote-font-size;
   border-left: .25rem solid $blockquote-border-color;
 
@@ -209,9 +220,9 @@ blockquote {
   }
 }
 
-// Addresses
-address {
-  margin-bottom: $line-height-computed;
-  font-style: normal;
-  line-height: $line-height-base;
-}
+// // Addresses
+// address {
+//   margin-bottom: $line-height-computed;
+//   font-style: normal;
+//   line-height: $line-height-base;
+// }
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index b19aa2dda..24c60d976 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -7,8 +7,9 @@
 @import "print";
 
 // Core CSS
-@import "scaffolding";
+@import "reboot";
 @import "type";
+@import "images";
 @import "code";
 @import "grid";
 @import "tables";
diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss
index 9ff91370d..bec9626f6 100644
--- a/scss/mixins/_image.scss
+++ b/scss/mixins/_image.scss
@@ -1,3 +1,19 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+@mixin img-responsive($display: block) {
+  display: $display;
+  max-width: 100%; // Part 1: Set a maximum relative to the parent
+  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+
 // Retina image
 //
 // Short retina mixin for setting background-image and -size.