Merge pull request #251 from ember-learn/redesign/wells

Image wells

Author: mansona

addon/styles/addon.css

@@ -14,6 +14,7 @@
 @import 'layout.css';
 @import 'grid.css';
 @import 'icon.css';
+@import 'well.css';
 @import 'background-shapes.css';
 
 /* Components */

addon/styles/global.css

@@ -149,6 +149,18 @@ strong {
   font-weight: var(--font-weight-3);
 }
 
+figure,
+figcaption {
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+figcaption {
+  margin-top: var(--spacing-1);
+  color: var(--color-gray-600);
+}
+
 /*
 @media (max-width: 1280px) and (min-width: 421px) {
   body,

addon/styles/well.css

@@ -0,0 +1,48 @@
+.well {
+  display: flex;
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  border: 2px solid var(--color-gray-200);
+  overflow: hidden;
+}
+
+a.well:focus {
+  border-color: var(--color-white);
+}
+
+a.well:hover {
+  border-color: var(--color-gray-300);
+}
+
+.well img {
+  display: block;
+  margin: auto;
+}
+
+[class*='well-'] {
+  position: relative;
+  height: 0;
+}
+
+.well-1\/1 {
+  padding: 0 0 100%;
+}
+
+.well-4\/3 {
+  padding: 0 0 75%;
+}
+
+.well-16\/9 {
+  padding: 0 0 56.25%;
+}
+
+[class*='well-'] img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: calc(100% - 2 * var(--spacing-3));
+  max-height: calc(100% - 2 * var(--spacing-3));
+  transform: translate(-50%, -50%);
+}

docs/concepts/wells.md

@@ -0,0 +1,63 @@
+# Wells
+
+Wells provide a box to wrap images that should be presented on a background, most likely because they have transparency.
+
+```html
+<!-- Note: p-2 and m-2 are spacer helpers and not relevant to the example -->
+<div class="well p-2 m-2">
+  Hello World
+</div>
+```
+
+They also come in multiple ratios and ensure that a contained image is resized to fill the space appropriatly.
+
+```html
+<div class="layout">
+  <div class="sm:col-2 lg:col-2 p-2">
+    <h3>Ratio 1:1</h3>
+    <div class="well well-1/1">
+      <img src="/ember-logo.png" alt="Ember.js" />
+    </div>
+  </div>
+  <div class="sm:col-2 lg:col-2 p-2">
+    <h3>Ratio 4:3</h3>
+    <div class="well well-4/3">
+      <img src="/ember-logo.png" alt="Ember.js" />
+    </div>
+  </div>
+  <div class="sm:col-2 lg:col-2 p-2">
+    <h3>Ratio 16:9</h3>
+    <div class="well well-16/9">
+      <img src="/ember-logo.png" alt="Ember.js" />
+    </div>
+  </div>
+</div>
+```
+
+Wells can be applied to anchors and work well with HTML `<figure>` elements.
+
+```html
+<div class="layout">
+  <div class="sm:col-2 lg:col-2 p-2">
+    <figure>
+      <div class="well well-16/9">
+        <img src="/ember-logo.png" alt="Ember.js" />
+      </div>
+      <figcaption>
+        A well thought out caption to add more information to the image above
+      </figcaption>
+    </figure>
+  </div>
+  <div class="sm:col-2 lg:col-2 p-2">
+    <figure>
+      <a href="#" class="well well-16/9">
+        <img src="/ember-logo.png" alt="Ember.js" />
+      </a>
+      <figcaption>
+        Using an anchor for the well works, too. You may want to add an additional link to the text
+        and or make sure this becomes clear from the context.
+      </figcaption>
+    </figure>
+  </div>
+</div>
+```