vital 1.2.0

data/sass/vital/_header.sass

@@ -0,0 +1,134 @@
+@import variables
+
+// Header
+
+.header
+  background: $header
+  height: $header-height
+  transform: $translate
+  .section
+    padding: 0
+    position: relative
+  .logo
+    border: 0
+    color: $red
+    float: left
+    line-height: 1
+    padding: 0.6em 1em
+    max-height: $header-height
+    overflow: hidden
+    &:hover
+      background: none
+      i
+        color: $red-bright
+        transition: $all
+
+  nav
+    a
+      display: block
+      padding: 1.3em
+      &:hover
+        background: $header-link-hover
+    ul
+      padding: 0
+      margin: 0
+      li
+        background: $header
+        display: inline
+        float: left
+        position: relative
+        ul
+          left: 0
+          top: 100%
+      ul
+        display: none
+    li:hover > ul
+      display: block
+      position: absolute
+      width: 12.5em
+      z-index: 9000
+      li
+        width: 100%
+    ul ul li:hover > ul
+      left: auto
+      right: -12.5em
+      top: 0
+
+#menu-toggle, #menu-toggle-label
+  cursor: pointer
+  display: none
+  height: $header-height
+  position: absolute
+  right: 0
+  user-select: none
+  width: $header-height
+
+#menu-toggle
+  border-radius: 0
+  border: 0
+  box-shadow: none
+  margin: 0
+  outline: none
+  padding: 0
+  z-index: -1
+  &:hover
+    background: $header-link-hover
+  &:before
+    content: $font-icons-icon-menu
+    font-family: $icons
+    font-size: 2em
+    padding: 0.24em 0.5em
+    position: absolute
+    right: 0
+  &:checked
+    background: $header-link-hover
+    &:before
+      bottom: 0
+      color: $text
+      content: $font-icons-icon-close-empty
+      font-size: 3em
+      left: 0
+      line-height: 0
+      padding: 0.7em 0
+      position: absolute
+      right: 0
+      top: 0
+
+@media screen and (max-width: $phablet)
+
+  .header
+    .logo
+      padding: 0.6em
+
+    nav
+      a
+        border-top: 1px solid #eee
+        padding: 1em
+      ul
+        li ul
+          display: block
+        li
+          border-right: none
+          display: block
+          float: left
+          width: 100%
+          text-align: center
+          a
+            background: $header-link-hover
+      >
+        ul
+          clear: both
+          display: none
+        input:checked + ul
+          display: block
+      li:hover ul
+        position: relative
+        width: auto
+      ul ul
+        li:hover > ul
+          left: auto
+          right: auto
+          top: auto
+
+  #menu-toggle, #menu-toggle-label
+    display: block

data/sass/vital/_helpers.sass

@@ -0,0 +1,191 @@
+@import variables
+
+// Helpers
+// These helpers are here for quick adjustments. Add small reusable classes here.
+
+// Text, Typography
+
+ul, ol
+  &.list
+    margin-left: 1em
+    padding-left: 1em
+
+ul.list li
+  list-style: disc
+
+ol.list li
+  list-style: decimal
+
+.align-left
+  text-align: left
+
+.align-right
+  text-align: right
+
+.break-word
+  word-break: break-all
+
+.no-wrap
+  white-space: nowrap
+
+.thin
+  font-weight: 100
+
+.uppercase
+  text-transform: uppercase
+
+// Lighten all typography for dark backgrounds
+
+.light-text
+  *, a
+    color: white
+  a
+    text-decoration: underline
+
+// Alignment
+
+.auto
+  margin: 0 auto
+
+.block
+  display: block
+
+.center
+  text-align: center
+
+.clear
+  clear: both
+
+.float-left
+  float: left
+
+.float-right
+  float: right
+
+.inline
+  display: inline
+
+.inline-block
+  display: inline-block
+
+// Forms
+
+.checkbox, .radio
+  display: block
+  line-height: 2.2
+
+// Styled Elements
+
+.box
+  border-radius: $radius
+  border: $border-width solid #ddd
+  margin: 1em 0
+  padding: 1em
+
+.disabled
+  color: $gray-light
+
+.radius
+  border-radius: $radius
+
+.round
+  border-radius: $round
+
+// Opacities
+
+.opacity-half
+  opacity: 0.5
+
+// Colors
+
+.gray
+  color: $gray
+
+.gray-medium
+  color: $gray-medium
+
+.gray-light
+  color: $gray-light
+
+.gray-lighter
+  color: $gray-lighter
+
+.gray-lightest
+  color: $gray-lightest
+
+// Backgrounds
+
+.bg
+  background: $gray-lightest
+
+// Backgrounds (Gradients)
+
+.bg-black
+  background: $bg-black-fallback
+  background: $bg-black
+
+.bg-gray
+  background: $bg-gray-fallback
+  background: $bg-gray
+
+.bg-blue
+  background: $bg-blue-fallback
+  background: $bg-blue
+
+.bg-red
+  background: $bg-red-fallback
+  background: $bg-red
+
+.bg-green
+  background: $bg-green-fallback
+  background: $bg-green
+
+// Hide / Show
+
+.hide
+  display: none
+
+.show
+  display: block
+
+// Widths
+
+.full
+  width: 100%
+
+// Manually inserting a space into an empty element
+
+.space
+  &:after
+    content: $non-breaking-space
+
+// Font sizing
+
+.i2x
+  font-size: 2em
+.i3x
+  font-size: 3em
+.i4x
+  font-size: 4em
+.i5x
+  font-size: 5em
+
+.same-width
+  text-align: center
+  width: 2em
+  display: inline-block
+
+@media screen and (max-width: $handheld)
+
+  // Hide these classes on the $handheld breakpoint
+
+  .space, .hide-on-mobile
+    display: none
+
+  .responsive
+    width: 100%
+
+@media screen and (max-width: $handheld-portrait)
+
+  .responsive-portrait
+    width: 100%

data/sass/vital/_heroes.sass

@@ -0,0 +1,35 @@
+@import variables
+
+// Heroes
+
+.hero
+  color: $white
+  background: $bg-red-fallback
+  background: $bg-red
+
+  h1, h2, h3, h4, h5, h6
+    margin: 0
+    line-height: 1.3
+  h1
+    font-size: 3em
+  h2
+    font-size: 1.8em
+  h3
+    font-size: 1.6em
+  h4
+    font-size: 1.4em
+  h5
+    font-size: 1.2em
+  h6
+    font-size: 1.0em
+
+  .section
+    padding: 5em 1.5em
+
+@media screen and (max-width: $handheld)
+
+  .hero
+    .section
+      padding: 4em 1em
+    h1
+      font-size: 2.4em

data/sass/vital/_icons.sass

@@ -0,0 +1,80 @@
+//
+// Icon Font: icons
+//
+
+// https://github.com/sass/sass/issues/659#issuecomment-64819075
+@function char($character-code)
+  @if function-exists("selector-append")
+    @return unquote('"\\#{$character-code}"')
+
+  @return str-slice("x", 1, 1) + $character-code
+
+@font-face
+  font-family: "icons"
+  src: url(if($vital-sass-asset-helper, vital-font-path("icons.eot"), "../fonts/icons.eot"))
+  src: url(if($vital-sass-asset-helper, vital-font-path("icons.eot?#iefix"), "../fonts/icons.eot?#iefix")) format("embedded-opentype"), url(if($vital-sass-asset-helper, vital-font-path("icons.woff"), "../fonts/icons.woff")) format("woff"), url(if($vital-sass-asset-helper, vital-font-path("icons.ttf"), "../fonts/icons.ttf")) format("truetype"), url(if($vital-sass-asset-helper, vital-font-path("icons.svg#icons"), "../fonts/icons.svg#icons")) format("svg")
+  font-weight: normal
+  font-style: normal
+
+@media screen and (-webkit-min-device-pixel-ratio: 0)
+  @font-face
+    font-family: "icons"
+    src: url(if($vital-sass-asset-helper, vital-font-path("icons.svg#icons"), "../fonts/icons.svg#icons")) format("svg")
+
+[data-icon]:before
+  content: attr(data-icon)
+
+[data-icon]:before,
+.icon-arrow-updown:before,
+.icon-check:before,
+.icon-clock:before,
+.icon-close:before,
+.icon-close-empty:before,
+.icon-close-outline:before,
+.icon-menu:before,
+.icon-vital:before
+  display: inline-block
+  font-family: "icons"
+  font-style: normal
+  font-weight: normal
+  font-variant: normal
+  line-height: 1
+  text-decoration: inherit
+  text-rendering: optimizeLegibility
+  text-transform: none
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+  font-smoothing: antialiased
+
+.icon-arrow-updown:before
+  content: char("f100")
+
+.icon-check:before
+  content: char("f101")
+
+.icon-clock:before
+  content: char("f102")
+
+.icon-close:before
+  content: char("f103")
+
+.icon-close-empty:before
+  content: char("f104")
+
+.icon-close-outline:before
+  content: char("f105")
+
+.icon-menu:before
+  content: char("f106")
+
+.icon-vital:before
+  content: char("f107")
+
+$font-icons-icon-arrow-updown: char("f100")
+$font-icons-icon-check: char("f101")
+$font-icons-icon-clock: char("f102")
+$font-icons-icon-close: char("f103")
+$font-icons-icon-close-empty: char("f104")
+$font-icons-icon-close-outline: char("f105")
+$font-icons-icon-menu: char("f106")
+$font-icons-icon-vital: char("f107")

data/sass/vital/_loaders.sass

@@ -0,0 +1,82 @@
+@import variables
+
+// Loaders
+
+.load
+  -webkit-animation-duration: 1s
+  -webkit-animation-iteration-count: infinite
+  -webkit-animation-name: loading
+  -webkit-animation-timing-function: linear
+  -moz-animation-duration: 1s
+  -moz-animation-iteration-count: infinite
+  -moz-animation-name: loading
+  -moz-animation-timing-function: linear
+  animation-duration: 1s
+  animation-iteration-count: infinite
+  animation-name: loading
+  animation-timing-function: linear
+  border-radius: $round
+  border: $border-width * 3 solid #DDD
+  border-left-color: #666
+  display: inline-block
+  height: 2em
+  width: 2em
+  &.smallest
+    width: $loader-smallest
+    height: $loader-smallest
+    border-width: $border-width
+  &.small
+    width: $loader-small
+    height: $loader-small
+    border-width: $border-width * 2
+  &.large
+    width: $loader-large
+    height: $loader-large
+    border-width: $border-width * 4
+
+@keyframes loading
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(360deg)
+
+@-webkit-keyframes loading
+  from
+    -webkit-transform: rotate(0deg)
+  to
+    -webkit-transform: rotate(360deg)
+
+@-moz-keyframes loading
+  from
+    -moz-transform: rotate(0deg)
+  to
+    -moz-transform: rotate(360deg)
+
+// Adjustments for IE 8/9
+
+.ie8, .ie9
+
+  .load
+    border-color: transparent
+    line-height: 1
+    font-size: $loader
+    width: $loader
+    height: $loader
+    display: inline
+    &:after
+      content: $font-icons-icon-clock
+      font-family: $icons
+    &.smallest
+      font-size: $loader-smallest
+      width: $loader-smallest
+      height: $loader-smallest
+      border-width: 0.1em
+    &.small
+      font-size: $loader-small
+      width: $loader-small
+      height: $loader-small
+      border-width: 0.1em
+    &.large
+      font-size: $loader-large
+      width: $loader-large
+      height: $loader-large