From 208ecbbb437df870804db03feae7b2f9d2bc62bd Mon Sep 17 00:00:00 2001
From: mrmrs <hi@mrmrs.cc>
Date: Tue, 22 Apr 2014 14:45:22 -0700
Subject: [PATCH] Adds vertical align.

---
 css/i.css                 | 58 +++++++++++++++++++++++++++++++++------
 sass/_utilities.scss      | 18 ++++++------
 sass/_vertical_align.scss | 46 +++++++++++++++++++++++++++++++
 sass/i.scss               |  1 +
 4 files changed, 106 insertions(+), 17 deletions(-)
 create mode 100644 sass/_vertical_align.scss

diff --git a/css/i.css b/css/i.css
index 0048d5f..7c84d18 100644
--- a/css/i.css
+++ b/css/i.css
@@ -1531,18 +1531,18 @@ table { border-collapse: collapse; border-spacing: 0; }
 
 */
 /* The Media Object Built by @stubornella http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/  <div class="media attribution">  <a href="http://twitter.com/stubbornella" class="img"> <img src="http://stubbornella.com/profile_image.jpg" alt="me" /> </a>  <div class="bd"> @Stubbornella 14 minutes ago </div>  </div> */
-/* The Flag Object Built by @csswizzrdry http://csswizardry.com/2013/05/the-flag-object/   Use to vertically center text against an image.  <div class="flag"> <div class="flag__image"> <img src="" alt=""> </div> <div class="flag__body"> <p></p> </div> </div>  */
+/* The Flag Object Built by @csswizzrdry http://csswizardry.com/2013/05/the-flag-object/   Use to vertically center text against an image.  <div class="dt wi-100"> <div class="dtc"> <img src="" alt=""> </div> <div class="flag--body"> <p></p> </div> </div>  */
 .flag { display: table; width: 100%; }
 
-.flag__image, .flag__body { display: table-cell; vertical-align: middle; }
-.flag--top .flag__image, .flag--top .flag__body { vertical-align: top; }
-.flag--bottom .flag__image, .flag--bottom .flag__body { vertical-align: bottom; }
+.flag--image, .flag--body { display: table-cell; vertical-align: middle; }
+.flag--top .flag--image, .flag--top .flag--body { vertical-align: top; }
+.flag--bottom .flag--image, .flag--bottom .flag--body { vertical-align: bottom; }
 
-.flag__image { padding-right: 10px; }
-.flag__image > img { display: block; max-width: none; }
-.flag--rev .flag__image { padding-right: 0; padding-left: 10px; }
+.flag--image { padding-right: 10px; }
+.flag--image > img { display: block; max-width: none; }
+.flag--rev .flag--image { padding-right: 0; padding-left: 10px; }
 
-.flag__body { width: 100%; }
+.flag--body { width: 100%; }
 
 /*
  VISIBILITY
@@ -1710,3 +1710,45 @@ table { border-collapse: collapse; border-spacing: 0; }
  Add custom styles here.
 
 */
+/* VERTICAL ALIGN
+*/
+.v-base { vertical-align: baseline; }
+
+.v-sub { vertical-align: sub; }
+
+.v-sup { vertical-align: super; }
+
+.v-txt-top { vertical-align: text-top; }
+
+.v-txt-btm { vertical-align: text-bottom; }
+
+.v-mid { vertical-align: middle; }
+
+.v-top { vertical-align: top; }
+
+.v-btm { vertical-align: bottom; }
+
+@media screen and (min-width: 48em) { .v-base-ns { vertical-align: baseline; }
+  .v-sub-ns { vertical-align: sub; }
+  .v-sup-ns { vertical-align: super; }
+  .v-txt-top-ns { vertical-align: text-top; }
+  .v-txt-btm-ns { vertical-align: text-bottom; }
+  .v-mid-ns { vertical-align: middle; }
+  .v-top-ns { vertical-align: top; }
+  .v-btm-ns { vertical-align: bottom; } }
+@media screen and (min-width: 48em) and (max-width: 64em) { .v-base-m { vertical-align: baseline; }
+  .v-sub-m { vertical-align: sub; }
+  .v-sup-m { vertical-align: super; }
+  .v-txt-top-m { vertical-align: text-top; }
+  .v-txt-btm-m { vertical-align: text-bottom; }
+  .v-mid-m { vertical-align: middle; }
+  .v-top-m { vertical-align: top; }
+  .v-btm-m { vertical-align: bottom; } }
+@media screen and (min-width: 64em) { .v-base-l { vertical-align: baseline; }
+  .v-sub-l { vertical-align: sub; }
+  .v-sup-l { vertical-align: super; }
+  .v-txt-top-l { vertical-align: text-top; }
+  .v-txt-btm-l { vertical-align: text-bottom; }
+  .v-mid-l { vertical-align: middle; }
+  .v-top-l { vertical-align: top; }
+  .v-btm-l { vertical-align: bottom; } }
diff --git a/sass/_utilities.scss b/sass/_utilities.scss
index bf53278..00f7776 100644
--- a/sass/_utilities.scss
+++ b/sass/_utilities.scss
@@ -32,11 +32,11 @@
  *
  * Use to vertically center text against an image.
  *
- *  <div class="flag">
- *      <div class="flag__image">
+ *  <div class="dt wi-100">
+ *      <div class="dtc">
  *          <img src="" alt="">
  *      </div>
- *      <div class="flag__body">
+ *      <div class="flag--body">
  *          <p></p>
  *      </div>
  *  </div>
@@ -44,12 +44,12 @@
  */
 
 .flag {
-    display: table;
-    width: 100%;
+  display: table;
+  width: 100%;
 }
 
-.flag__image,
-.flag__body {
+.flag--image,
+.flag--body {
     display: table-cell;
     vertical-align: middle;
 
@@ -63,7 +63,7 @@
 
 }
 
-.flag__image {
+.flag--image {
     padding-right: 10px;
 
     > img {
@@ -78,7 +78,7 @@
 
 }
 
-.flag__body {
+.flag--body {
     width: 100%;
 }
 
diff --git a/sass/_vertical_align.scss b/sass/_vertical_align.scss
new file mode 100644
index 0000000..c425f78
--- /dev/null
+++ b/sass/_vertical_align.scss
@@ -0,0 +1,46 @@
+/*
+   VERTICAL ALIGN
+*/
+
+.v-base     { vertical-align: baseline; }
+.v-sub      { vertical-align: sub; }
+.v-sup      { vertical-align: super; }
+.v-txt-top  { vertical-align: text-top; }
+.v-txt-btm  { vertical-align: text-bottom; }
+.v-mid      { vertical-align: middle; }
+.v-top      { vertical-align: top; }
+.v-btm      { vertical-align: bottom; }
+
+@include break(not-small) {
+  .v-base-ns     { vertical-align: baseline; }
+  .v-sub-ns      { vertical-align: sub; }
+  .v-sup-ns      { vertical-align: super; }
+  .v-txt-top-ns  { vertical-align: text-top; }
+  .v-txt-btm-ns  { vertical-align: text-bottom; }
+  .v-mid-ns      { vertical-align: middle; }
+  .v-top-ns      { vertical-align: top; }
+  .v-btm-ns      { vertical-align: bottom; }
+}
+
+@include break(medium) {
+  .v-base-m     { vertical-align: baseline; }
+  .v-sub-m      { vertical-align: sub; }
+  .v-sup-m      { vertical-align: super; }
+  .v-txt-top-m  { vertical-align: text-top; }
+  .v-txt-btm-m  { vertical-align: text-bottom; }
+  .v-mid-m      { vertical-align: middle; }
+  .v-top-m      { vertical-align: top; }
+  .v-btm-m      { vertical-align: bottom; }
+}
+
+@include break(large) {
+  .v-base-l     { vertical-align: baseline; }
+  .v-sub-l      { vertical-align: sub; }
+  .v-sup-l      { vertical-align: super; }
+  .v-txt-top-l  { vertical-align: text-top; }
+  .v-txt-btm-l  { vertical-align: text-bottom; }
+  .v-mid-l      { vertical-align: middle; }
+  .v-top-l      { vertical-align: top; }
+  .v-btm-l      { vertical-align: bottom; }
+}
+
diff --git a/sass/i.scss b/sass/i.scss
index 56e44f4..d603795 100644
--- a/sass/i.scss
+++ b/sass/i.scss
@@ -36,5 +36,6 @@
 @import "widths";
 @import "word_spacing";
 @import "styles";
+@import "vertical_align";
 
 @import "debug";