Responsive embed (#128)

grega · web-flow · commit a88f93c2c92c · 2020-02-18T12:06:49.000Z
* Add responsive embed/iframe utility

* Add release notes

* Improve use of modifier

* CSS build

* Include the file and build

* Correct changelog example

* Add docs for responsive embeds

* Build css
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,7 @@ _The format of this document is based on [Keep a Changelog](http://keepachangelo
 
 ### Changed
 
-- Added support for responsive iframe / video embeds via `.responsive-embed__container--video` and `.responsive-embed__iframe`
+- Added support for responsive iframe / video embeds via `.responsive-embed`, `.responsive-embed--video` and `.responsive-embed__iframe`
 
 ## [v1.3.2](https://github.com/RaspberryPiFoundation/Bits/compare/v1.3.1...v1.3.2) - 2020-02-17
 
diff --git a/doc/styles/embeds.md b/doc/styles/embeds.md
@@ -0,0 +1,13 @@
+Embedded iframes can be made responsive using the following classes:
+
+- `.responsive-embed` (for the container)
+- `.responsive-embed--video` (for the container)
+- `.responsive-embed__iframe` (for the iframe)
+
+The `--video` modifier assumes an aspect ratio of 16:9 (further modifiers should be added as needed).
+
+```
+<div class="responsive-embed responsive-embed--video">
+  <iframe class="responsive-embed__iframe" src="https://www.youtube.com/embed/56B0P5WdAGQ"></iframe>
+</div>
+```
diff --git a/lib/Bits.css b/lib/Bits.css
@@ -11768,12 +11768,12 @@ strong {
     margin-left: 0 !important;
   }
 }
-.responsive_embed {
+.responsive-embed {
   position: relative;
   overflow: hidden;
   padding-top: 100%;
 }
-.responsive_embed--video {
+.responsive-embed--video {
   padding-top: 56.25%;
 }
 
diff --git a/lib/Bits.min.css b/lib/Bits.min.css
diff --git a/src/styles/utilities/_responsive-embed.scss b/src/styles/utilities/_responsive-embed.scss
@@ -1,4 +1,4 @@
-.responsive_embed {
+.responsive-embed {
   position: relative;
   overflow: hidden;
   padding-top: 100%;
diff --git a/styleguide.config.js b/styleguide.config.js
@@ -17,6 +17,10 @@ module.exports = {
           name: 'Responsive Breakpoints',
           content: 'doc/styles/breakpoints.md',
         },
+        {
+          name: 'Responsive Embeds',
+          content: 'doc/styles/embeds.md',
+        },
         {
           name: 'Fonts',
           content: 'doc/styles/fonts.md',

Original file line number	Diff line number	Diff line change
`@@ -11768,12 +11768,12 @@ strong {`
`11768`	`11768`	`margin-left: 0 !important;`
`11769`	`11769`	`}`
`11770`	`11770`	`}`
`11771`		`-.responsive_embed {`
	`11771`	`+.responsive-embed {`
`11772`	`11772`	`position: relative;`
`11773`	`11773`	`overflow: hidden;`
`11774`	`11774`	`padding-top: 100%;`
`11775`	`11775`	`}`
`11776`		`-.responsive_embed--video {`
	`11776`	`+.responsive-embed--video {`
`11777`	`11777`	`padding-top: 56.25%;`
`11778`	`11778`	`}`
`11779`	`11779`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.responsive_embed {`
	`1`	`+.responsive-embed {`
`2`	`2`	`position: relative;`
`3`	`3`	`overflow: hidden;`
`4`	`4`	`padding-top: 100%;`