#62 Implement responsive embed component

src/stylesheets/components/_components-maintain-ratio.scss

@@ -0,0 +1,76 @@
+////
+/// @group components
+////
+
+/// Maintains the aspect ratio of an embedded item, useful for responsive embedding, e.g.
+/// YouTube videos in iframes or video tags. Also useful when you know the ratio of an image
+/// and want to avoid the 'pop' for slow loading images.
+///
+/// Automatically applies to `iframe`, `embed`, `object` and `video` tags.
+/// Alternatively, you can use the `__item` selector to specify the element directly.
+///
+/// Modifiers:
+///   - `--21-9`
+///   - `--16-9`
+///   - `--4-3`
+///   - `--square`
+///
+/// Elements:
+///   - `__item`
+///
+/// @example html - Sixteen by nine example
+///   <div class="maintain-ratio maintain-ratio--16-9">
+///     <iframe src="https://www.youtube.com/embed/FTQbiNvZqaY" allowfullscreen></iframe>
+///   </div>
+///
+/// @example html - Using element
+///   <div class="maintain-ratio maintain-ratio--4-3">
+///     <div style="background: #ddd; text-align: center;" class="maintain-ratio__item">
+///       <div style="display: inline-block; font-size: 300%;">
+///         4:3
+///       </div>
+///       <div style="display: inline-block; height: 100%; vertical-align: middle;"></div>
+///     </div>
+///   </div>
+///
+.maintain-ratio {
+  display: block;
+  height: 0;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+
+  &__item,
+  iframe,
+  embed,
+  object,
+  video {
+    border: 0;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  // Modifier class for 21:9 aspect ratio
+  &--21-9 {
+    padding-bottom: percentage(9 / 21);
+  }
+
+  // Modifier class for 16:9 aspect ratio
+  &--16-9 {
+    padding-bottom: percentage(9 / 16);
+  }
+
+  // Modifier class for 4:3 aspect ratio
+  &--4-3 {
+    padding-bottom: percentage(3 / 4);
+  }
+
+  // Modifier class for square aspect ratio
+  &--square {
+    padding-bottom: 100%;
+  }
+}

src/stylesheets/components/_components.scss

@@ -5,6 +5,7 @@
 'components-buttons',
 'components-footer',
 'components-phase',
+'components-maintain-ratio',
 'components-navbar',
 'components-nav',
 'components-breadcrumbs',