From 88d13f0a425be528f702dbbd6b172da9f029e554 Mon Sep 17 00:00:00 2001
From: Bebe Peng <bpeng@pivotal.io>
Date: Tue, 14 Oct 2014 15:15:31 -0400
Subject: [PATCH] feat(embeds): add docs for responsive embeds

[finishes #80657568]

Signed-off-by: Geoff Pleiss <gpleiss@pivotal.io>
---
 src/pivotal-ui/components/embeds.css.scss | 66 +++++++++++++++++++++++
 src/pivotal-ui/pivotal-ui.scss            |  3 +-
 2 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 src/pivotal-ui/components/embeds.css.scss

diff --git a/src/pivotal-ui/components/embeds.css.scss b/src/pivotal-ui/components/embeds.css.scss
new file mode 100644
index 000000000..aadac6f4a
--- /dev/null
+++ b/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>
+```
+
+*/
\ No newline at end of file
diff --git a/src/pivotal-ui/pivotal-ui.scss b/src/pivotal-ui/pivotal-ui.scss
index 114867f28..cc4476929 100644
--- a/src/pivotal-ui/pivotal-ui.scss
+++ b/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";
\ No newline at end of file
+@import "components/ribbons.css.scss";
+@import "components/embeds.css.scss";
\ No newline at end of file