Merge pull request #15 from nhsevidence/feature/#62-responsive-embeds

Feature/#62 responsive embeds

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',

src/stylesheets/settings/_settings-colours.scss

@@ -85,14 +85,16 @@ $colour-base-purple: #82176f;
 $colour-base-red: #f00;
 
 /// Grey colour palette
-/// @prop {Color} x-light [#ddd] Extra ight grey
+/// @prop {Color} xx-light [#eee] Extra, extra light grey
+/// @prop {Color} x-light [#ddd] Extra light grey
 /// @prop {Color} light [#bbb] Light grey
 /// @prop {Color} mid-light [#999] Mid-light grey
 /// @prop {Color} base [$colour-base-grey] Base grey
 /// @prop {Color} mid-dark [#555] Mid-dark grey
 /// @prop {Color} dark [#333] Dark grey
 /// @prop {Color} x-dark [#111] Extra dark grey
 $palette-grey: (
+  xx-light: #eee,
   x-light: #ddd,
   light: #bbb,
   mid-light: #999,

src/stylesheets/typography/_typography-global.scss

@@ -80,11 +80,17 @@ p,
 }
 
 code {
-  background: get-colour(grey, x-light);
+  background: get-colour(grey, xx-light);
+  border: 1px solid get-colour(grey, x-light);
+  border-radius: 2px;
+  display: inline-block;
   font-family: font-family(mono);
-  padding: scut-em(4);
+  margin: scut-em(0 0 2);
+  padding: scut-em(0 4);
 
   pre & {
     background: transparent;
+    border: 0;
+    margin: 0;
   }
 }

web/server/views/components/_components-layout.njk

@@ -11,6 +11,7 @@
 			<li><a href="/components/breadcrumbs">Breadcrumbs</a></li>
 			<li><a href="/components/navigation">Navigation</a></li>
 			<li><a href="/components/tabs">Tabs</a></li>
+			<li><a href="/components/maintain-ratio">Maintain ratio</a></li>
 		</ul>
 	</nav>
 

web/server/views/components/index.njk

@@ -30,6 +30,8 @@
 
 			{{ item("Navigation", "/components/navigation", "Lorem ipsum dolor sit amet, consectetur adipisicing elit.") }}
 
+			{{ item("Maintain ratio", "/components/maintain-ratio", "Maintain an aspect ratio for responsive embedding") }}
+
 		</div>
 	</div>
 

web/server/views/components/maintain-ratio.njk

@@ -0,0 +1,33 @@
+{% extends "./_components-layout.njk" %}
+{% set title = "Maintain ratio" %}
+
+{% block main %}
+
+	<h1>Maintain ratio</h1>
+
+	<ul>
+		<li>Used for enforcing an aspect ratio for iframes, videos etc</li>
+		<li>Use modifiers for different ratios</li>
+	</ul>
+
+	<p>
+		<a class="btn" href="/sass/docs/components#css-.maintain-ratio">SASS docs for maintain ratio</a>
+	</p>
+
+	<h2>Basic usage - 16x9</h2>
+
+	{% example "html" -%}
+		<div class="maintain-ratio maintain-ratio--16-9">
+			<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
+		</div>
+	{%- endexample %}
+
+	<h3>Custom - with BEM element</h3>
+
+	{% example "html" -%}
+		<div class="maintain-ratio maintain-ratio--4-3">
+			<img class="maintain-ratio__item" src="http://placehold.it/400x300" alt="An example of an image with a ratio of 4:3" />
+		</div>
+	{%- endexample %}
+
+{% endblock %}

web/server/views/sass/includes/annotations/example.njk

@@ -1,11 +1,5 @@
 {# Describes a use case for the documented item, with a given language and description if specified #}
 
-{% macro renderExample(body, lang, heading = "Example") %}
-	{# Use our already defined source rendering partial #}
-	{% include "partials/source.njk" %}
-{% endmacro %}
-
-
 {% if item.example.length > 0 %}
 	{% for example in item.example %}
 		{% if example.description %}
@@ -14,8 +8,14 @@
 			<h5>Example</h5>
 		{% endif %}
 
-		{% source "scss", example.description | striptags -%}
-			{{ example.code }}
-		{%- endsource -%}
+		{% if example.type === "html" %}
+			{% example "html" -%}
+				{{ example.code | safe }}
+			{%- endexample -%}
+		{% else %}
+			{% source example.type, example.description | striptags -%}
+				{{ example.code | safe }}
+			{%- endsource -%}
+		{% endif %}
 	{% endfor %}
 {% endif %}