feat(embeds): add docs for responsive embeds

[finishes #80657568]

Signed-off-by: Geoff Pleiss <gpleiss@pivotal.io>

src/pivotal-ui/components/embeds.css.scss

@@ -0,0 +1,66 @@
+/*doc
+---
+title: Embeds
+name: embeds
+categories:
+  - All
+  - Elements
+---
+*/
+
+/*doc
+---
+title: Responsive Embeds
+name: embeds_responsive
+parent: embeds
+---
+
+Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
+
+Rules are directly applied to `<iframe>`, `<embed>`, and `<object>` elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
+
+**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
+
+```html_example
+<h1 class="h2">16-by-9</h1>
+<div class="row">
+  <div class="col-md-5">
+    <div class="embed-responsive embed-responsive-16by9">
+      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/JOCtdw9FG-s"></iframe>
+    </div>
+  </div>
+  <div class="col-md-7">
+    <div class="embed-responsive embed-responsive-16by9">
+      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/JOCtdw9FG-s"></iframe>
+    </div>
+  </div>
+  <div class="col-md-12">
+    <div class="embed-responsive embed-responsive-16by9">
+      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/JOCtdw9FG-s"></iframe>
+    </div>
+  </div>
+</div>
+```
+
+```html_example
+<h1 class="h2">4-by-3</h1>
+<div class="row">
+  <div class="col-md-5">
+    <div class="embed-responsive embed-responsive-4by3">
+      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/Awf45u6zrP0"></iframe>
+    </div>
+  </div>
+  <div class="col-md-7">
+    <div class="embed-responsive embed-responsive-4by3">
+      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/Awf45u6zrP0"></iframe>
+    </div>
+  </div>
+  <div class="col-md-12">
+    <div class="embed-responsive embed-responsive-4by3">
+      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/Awf45u6zrP0"></iframe>
+    </div>
+  </div>
+</div>
+```
+
+*/

src/pivotal-ui/pivotal-ui.scss

@@ -44,4 +44,5 @@
 @import "components/scale.css.scss";
 @import "components/map.css.scss";
 @import "components/labels.css.scss";
-@import "components/ribbons.css.scss";
+@import "components/ribbons.css.scss";
+@import "components/embeds.css.scss";