express_ui 0.1.0.rc1

data/app/assets/stylesheets/express_ui/atoms/_headings.sass

@@ -0,0 +1,51 @@
+@mixin h1
+  @include font-size(22px, 24px)
+
+@mixin h2
+  @include font-size(20px, 20px)
+
+@mixin h3
+  @include font-size(18px, 18px)
+
+@mixin h4
+  @include font-size(16px, 16px)
+
+@mixin h5
+  @include font-size(14px, 14px)
+
+@mixin h6
+  @include font-size(12px, 12px)
+
+@mixin heading($border-color, $casing)
+  text-transform: $casing
+  border-bottom: 1px solid $border-color
+  padding-bottom: 0.5em
+
+  // $casing: uppercase, default
+
+h1, h2, h3, h4, h5, h6
+  padding-top: 1.25em
+  margin-bottom: 0.25em
+  font-weight: bold
+  color: $heading-color
+
+h1
+  @include h1
+
+h2
+  @include h2
+
+h3
+  @include h3
+
+h4
+  @include h4
+
+h5
+  @include h5
+
+h6
+  @include h6
+
+.ae-heading-bottom-border
+  @include heading($border-light, uppercase)

data/app/assets/stylesheets/express_ui/atoms/_icons.sass

@@ -0,0 +1,3 @@
+.fa
+  @include font-size(16px, 16px)
+  color: $icon-color

data/app/assets/stylesheets/express_ui/atoms/_images.sass

@@ -0,0 +1,37 @@
+[class*="ae-avatar"]
+  display: inline-block
+  margin-right: 12px
+
+.ae-avatar-sm
+  width: 24px
+  height: 24px
+
+.ae-avatar-md
+  width: 34px
+  height: 34px
+
+.ae-avatar-lg
+  width: 50px
+  height: 50px
+
+.ae-avatar-auto
+  width: 100%
+  height: 100%
+  margin-right: 0
+
+.ae-favicon
+  width: 32px
+  height: 32px
+
+img
+  display: block
+  text-align: center
+  position: relative
+  margin-bottom: 1.25em
+  margin-left: auto
+  margin-right: auto
+
+.ae-img-responsive
+  max-width: 100%
+  text-align: center
+  display: block

data/app/assets/stylesheets/express_ui/atoms/_media_queries.sass

@@ -0,0 +1,27 @@
+@mixin smartphone
+  @media only screen and (min-width: $smartphone)
+    @content
+
+@mixin smartphone-max
+  @media only screen and (max-width: $smartphone)
+    @content
+
+@mixin tablet
+  @media only screen and (min-width: $tablet)
+    @content
+
+@mixin tablet-max
+  @media only screen and (max-width: $tablet)
+    @content
+
+@mixin laptop
+  @media only screen and (min-width: $laptop)
+    @content
+
+@mixin laptop-max
+  @media only screen and (max-width: $laptop)
+    @content
+
+@mixin desktop
+  @media only screen and (min-width: $desktop)
+    @content

data/app/assets/stylesheets/express_ui/atoms/_mixins.sass

@@ -0,0 +1,33 @@
+// Global mixins are mixins that don't quite fall in a specific category.
+// These are used by any element
+
+@mixin border-radius($n)
+  -moz-border-radius: $n
+  -webkit-border-radius: $n
+  border-radius: $n
+
+@mixin box-shadow($top, $left, $blur, $color, $inset:"")
+  -webkit-box-shadow: $top $left $blur $color #{$inset}
+  -moz-box-shadow: $top $left $blur $color #{$inset}
+  box-shadow: $top $left $blur $color #{$inset}
+
+@mixin well
+  margin: 0
+  background: $gray-background
+  @include border-radius(2px)
+  @include box-shadow(inset 0, 0, 3px, $border-dark)
+  @include animate(0.5s)
+
+  &:hover
+    background: rgba($primary-color, 0.1)
+
+    *
+      color: #333
+
+@mixin clearfix
+  overflow: auto
+
+  &:before, &:after
+    content: ""
+    display: table
+

data/app/assets/stylesheets/express_ui/atoms/_reset.sass

@@ -0,0 +1,11 @@
+*
+  box-sizing: border-box
+  margin: 0
+  padding: 0
+
+html, body
+  line-height: 1.4
+  height: 100%
+
+body
+  width: 100%

data/app/assets/stylesheets/express_ui/atoms/_typography.sass

@@ -0,0 +1,167 @@
+@mixin body-font
+  font-family: 'Lato', sans-serif
+
+@mixin header-font
+  font-family: 'Lato', sans-serif
+
+@function rem($size)
+  $remSize: $size / 16px
+  @return #{$remSize}rem
+
+@mixin font-size($size, $large_size)
+  font-size: rem($size)
+
+  @include tablet
+    font-size: rem($large_size)
+
+  @include desktop
+    font-size: rem($large_size/1.4)
+
+@mixin p
+  @include font-size(12px, 14px)
+  font-weight: normal
+
+.ae-u-text-left
+  text-align: left
+
+.ae-u-text-right
+  text-align: right
+
+.ae-u-text-center
+  text-align: center
+
+.ae-u-text-justify
+  text-align: justify
+
+.ae-u-float-right
+  float: right
+
+.ae-u-float-left
+  float: left
+
+.ae-code-block
+  white-space: pre-wrap
+
+@mixin ae-margin-left
+  margin-left: 0.25em
+
+@mixin ae-margin-right
+  margin-right: 0.25em
+
+@mixin status
+  @include border-radius(2px)
+  padding: 4px 10px
+  font-weight: bold
+  text-transform: uppercase
+
+@mixin status-success
+  background: $success
+  color: #fff !important
+
+@mixin status-error
+  background: $cancelled
+  color: #fff !important
+
+@mixin status-pending
+  background: $pending
+  color: darken($pending, 60%)
+
+@mixin status-deleted
+  background: $deleted
+  color: #999
+
+
+html
+  font-size: $font-size-root
+
+body
+  @include body-font
+  font-size: 1.6rem
+  color: $body-color
+
+// The type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using :root:. Now that you've set the :root pseudo-class to calculate font-size based on viewport height and width, the body will utilize the root em that's based on the value calculated by :root. Notice when you resize the window that the root font size for all elements stays relative no matter viewport size?
+\:root
+  font-size: calc(1vw + 1vh + .5vmin)
+
+p
+  @include body-font
+  @include p
+  line-height: 1.4
+  padding-top: 1.25rem
+  margin-bottom: 0.25rem
+
+code
+  @include border-radius(2px)
+  background: rgba($primary-color, 0.2)
+  color: $body-color
+  padding: 0 0.25em
+  display: inline-block
+
+button
+  @include p
+  @include body-font
+
+
+a:link
+  color: $link-color
+
+a:visited
+  color: darken($link-color, 10%)
+
+a:hover
+  text-decoration: none
+
+.ae-status
+  @include status
+
+  &-success
+    @include status-success
+
+  &-cancelled, &-error
+    @include status-error
+
+  &-pending
+    @include status-pending
+
+  &-deleted
+    @include status-deleted
+
+@mixin badge
+  background: $primary-color
+  color: #fff
+  @include border-radius(20px)
+  margin-left: 10px
+  padding: 4px 10px
+  font-weight: bold
+  text-transform: uppercase
+
+@mixin badge-success
+  background: $success
+  color: #fff !important
+
+@mixin badge-error
+  background: $cancelled
+  color: #fff !important
+
+@mixin badge-pending
+  background: $pending
+  color: darken($pending, 60%) !important
+
+@mixin badge-deleted
+  background: $deleted
+  color: #999 !important
+
+.ae-badge
+  @include badge
+
+  &-success
+    @include badge-success
+
+  &-cancelled, &-error
+    @include badge-error
+
+  &-pending
+    @include badge-pending
+
+  &-deleted
+    @include badge-deleted

data/app/assets/stylesheets/express_ui/atoms/_variables.sass

@@ -0,0 +1,52 @@
+$primary-color: #6699CC
+
+$primary-active-color: #477db0
+
+$secondary-color: #999999
+
+$success: #3c763d
+
+$cancelled: #a94442
+
+$pending: #faf2cc
+
+$deleted: lighten($secondary-color, 30%)
+
+$border-dark: $secondary-color
+
+$border-light: #eaeaea
+
+$body-color: #666
+
+$heading-color: #333
+
+$link-color: $primary-color
+
+$body-lighter: #999
+
+$icon-color: #333
+
+$smartphone: 480px
+
+$tablet: 768px
+
+$laptop: 1024px
+
+$desktop: 1440px
+
+$gray-background: #F7F7F7
+
+$thead-color: #888
+
+$dark-gray-background: rgba(#ccc, 0.1)
+
+$container: 960px
+
+$line-height: 14px
+
+$font-size-root: 62.5%
+
+$header-max-height: 3.5em
+
+$container-padding: 0.25em
+// Because all browsers have a default font-size of 16px, setting the font-size to 62.5% on the html element gives it a font-size of 10px (10 / 16 * 100 = 62.5)

data/app/assets/stylesheets/express_ui/molecules/_button_group.sass

@@ -0,0 +1,54 @@
+.ae-btn-group
+  position: relative
+  vertical-align: middle
+  margin: 1em 0
+
+.ae-btn-group-left
+  text-align: left
+
+.ae-btn-group-center
+  text-align: center
+
+.ae-btn-group-right
+  text-align: right
+
+.ae-btn-group-justified
+  @include tablet-max
+    .ae-btn
+      display: block
+      width: 100%
+
+  @include tablet
+    display: table
+    width: 100%
+    table-layout: fixed
+    border-collapse: separate
+
+    .ae-btn-group
+      display: table-cell
+      float: none
+      width: 1%
+      position: relative
+
+      &:not(:last-of-type)
+        padding-right: 1%
+
+
+    .ae-btn
+      width: 100%
+
+.ae-btn-group-full-width
+  width: 100%
+  @include clearfix
+
+  @include tablet
+    .ae-btn
+      width: auto
+
+    .ae-btn-left
+      float: left
+      display: inline-block
+
+    .ae-btn-right
+      float: right
+      display: inline-block