Initial gem setup

.gitignore

@@ -0,0 +1,18 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+.DS_Store

Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in ustyle.gemspec
+gemspec

LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 David Annez
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,4 +1,29 @@
-ustyle
-======
+# Ustyle
 
-Styleguide gem
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'ustyle'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install ustyle
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

app/assets/stylesheets/_articles-ie.sass

@@ -0,0 +1,10 @@
+@import "bourbon"
+@import "basic/variables"
+@import "basic/mixins"
+@import "articles/articles-tablet"
+@import "articles/articles-desktop"
+@import "articles/articles-final"
+
+.js .featured .intro
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#95FFFFFF, endColorstr=#95FFFFFF)"
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#95FFFFFF, endColorstr=#95FFFFFF)

app/assets/stylesheets/_articles.sass

@@ -0,0 +1,13 @@
+@import "bourbon"
+@import "basic/variables"
+@import "basic/mixins"
+@import "articles/articles-common"
+
+@media all and (min-width: 500px)
+  @import "articles/articles-tablet"
+
+@media all and (min-width: 868px)
+  @import "articles/articles-desktop"
+
+@media all and (min-width: 962px)
+  @import "articles/articles-final"

app/assets/stylesheets/_buttons-ie.sass

@@ -0,0 +1,122 @@
+$dullblue: #D3DDFF
+$plum: #8A2166
+$magenta: #E10174
+
+@if $has-pie
+  .btn
+    box-shadow: inset 1px 10px 0 $white, 1px 1px 2px $grey-1
+    -pie-background: linear-gradient(white, #eaeaea)
+    text-shadow: none
+    behavior: url($pie)
+    &:hover
+      box-shadow: 1px 10px 1px $white inset, 1px 1px 1px $grey-14, 0 0 0 4px $yellow-2
+      behavior: url($pie)
+
+  .btn:active
+    box-shadow: 1px 2px 2px $grey-12 inset, -2px -2px 0 1px $yellow-3, 2px -2px 0 1px $yellow-3, -2px 2px 0 1px $yellow-3, 2px 2px 0 1px $yellow-3
+    behavior: url($pie)
+
+  .btn_big
+    box-shadow: 1px 17px 1px $white inset, 1px 1px 2px $grey-1
+    border-radius: 9px
+    behavior: url($pie)
+
+  .btn_red
+    box-shadow: inset 1px 10px 0 $lightRed, 1px 1px 2px $grey-1
+    -pie-background: linear-gradient($lightRed, $darkRed)
+    behavior: url($pie)
+    &:hover
+      box-shadow: inset 1px 10px 1px $lightRed, 1px 1px 1px $grey-1, -2px -2px 0 1px $yellow-3, 2px -2px 0 1px $yellow-3, -2px 2px 0 1px $yellow-3, 2px 2px 0 1px $yellow-3
+      behavior: url($pie)
+    &:active
+      box-shadow: inset 1px 2px 2px $darkRed, -2px -2px 1px 1px $yellow-3, 2px -2px 1px 1px $yellow-3, -2px 2px 1px 1px $yellow-3, 2px 2px 1px 1px $yellow-3
+      behavior: url($pie)
+
+  .btn_pink
+    box-shadow: inset 1px 10px 0 $lightPink	, 1px 1px 2px $grey-12
+    -pie-background: linear-gradient($lightPink, $darkPink)
+    behavior: url($pie)
+    &:hover
+      box-shadow: inset 1px 10px 1px $lightPink, 1px 1px 1px $grey-5, -2px -2px 0 1px $yellow-3, 2px -2px 0 1px $yellow-3, -2px 2px 0 1px $yellow-3, 2px 2px 0 1px $yellow-3
+      behavior: url($pie)
+    &:active
+      box-shadow: inset 1px 2px 2px $darkPink, -2px -2px 1px 1px $yellow-3, 2px -2px 1px 1px $yellow-3, -2px 2px 1px 1px $yellow-3, 2px 2px 1px 1px $yellow-3
+      behavior: url($pie)
+
+  .btn_purple
+    box-shadow: inset 1px 10px 0 $lightPurple	, 1px 1px 2px $grey-12
+    -pie-background: linear-gradient($lightPurple, $darkPurple)
+    behavior: url($pie)
+    &:hover
+      box-shadow: inset 1px 10px 1px $lightPurple, 1px 1px 1px $grey-5, -2px -2px 0 1px $yellow-3, 2px -2px 0 1px $yellow-3, -2px 2px 0 1px $yellow-3, 2px 2px 0 1px $yellow-3
+      behavior: url($pie)
+    &:active
+      box-shadow: inset 1px 2px 2px $darkPurple, -2px -2px 1px 1px $yellow-3, 2px -2px 1px 1px $yellow-3, -2px 2px 1px 1px $yellow-3, 2px 2px 1px 1px $yellow-3
+      behavior: url($pie)
+
+  .btn_midnightblue
+    box-shadow: inset 1px 10px 0 $lightMidnightBlue, 1px 1px 2px $grey-12
+    -pie-background: linear-gradient($lightMidnightBlue, $darkMidnightBlue)
+    behavior: url($pie)
+    &:hover
+      box-shadow: inset 1px 10px 1px $lightMidnightBlue, 1px 1px 1px $grey-5, -2px -2px 0 1px $yellow-3, 2px -2px 0 1px $yellow-3, -2px 2px 0 1px $yellow-3, 2px 2px 0 1px $yellow-3
+      behavior: url($pie)
+    &:active
+      box-shadow: inset 1px 2px 2px $darkMidnightBlue, -2px -2px 1px 1px $yellow-3, 2px -2px 1px 1px $yellow-3, -2px 2px 1px 1px $yellow-3, 2px 2px 1px 1px $yellow-3
+      behavior: url($pie)
+
+  .btn_skyblue
+    box-shadow: inset 1px 10px 0 $lightSkyBlue, 1px 1px 2px $grey-1
+    -pie-background: linear-gradient($lightSkyBlue, $darkSkyBlue)
+    behavior: url($pie)
+    &:hover
+      box-shadow: inset 1px 2px 1px $lightSkyBlue, 1px 1px 1px $grey-1, -2px -2px 0 1px $yellow-3, 2px -2px 0 1px $yellow-3, -2px 2px 0 1px $yellow-3, 2px 2px 0 1px $yellow-3
+      behavior: url($pie)
+    &:active
+      box-shadow: inset 1px 2px 2px $darkSkyBlue, -2px -2px 1px 1px $yellow-3, 2px -2px 1px 1px $yellow-3, -2px 2px 1px 1px $yellow-3, 2px 2px 1px 1px $yellow-3
+      behavior: url($pie)
+
+  .btn_orange
+    box-shadow: inset 1px 10px 0 $lightOrange, 1px 1px 2px $grey-1
+    -pie-background: linear-gradient($lightOrange, $darkOrange)
+    behavior: url($pie)
+    &:hover
+      box-shadow: inset 1px 2px 1px $lightOrange, 1px 1px 1px $grey-1, -2px -2px 0 1px $yellow-3, 2px -2px 0 1px $yellow-3, -2px 2px 0 1px $yellow-3, 2px 2px 0 1px $yellow-3
+      behavior: url($pie)
+    &:active
+      box-shadow: inset 1px 2px 2px $darkOrange, -2px -2px 1px 1px $yellow-3, 2px -2px 1px 1px $yellow-3, -2px 2px 1px 1px $yellow-3, 2px 2px 1px 1px $yellow-3
+      behavior: url($pie)
+
+  .btn_green
+    box-shadow: inset 1px 10px 0 $lightGreen, 1px 1px 2px $grey-12 !important
+    -pie-background: linear-gradient($lightGreen, $darkGreen)
+    behavior: url($pie)
+    &:hover
+      box-shadow: inset 1px 10px 1px $lightGreen, 1px 1px 1px $grey-5, -2px -2px 0 1px $yellow-3, 2px -2px 0 1px $yellow-3, -2px 2px 0 1px $yellow-3, 2px 2px 0 1px $yellow-3
+      behavior: url($pie)
+    &:active
+      box-shadow: inset 1px 2px 2px $darkGreen, -2px -2px 1px 1px $yellow-3, 2px -2px 1px 1px $yellow-3, -2px 2px 1px 1px $yellow-3, 2px 2px 1px 1px $yellow-3
+      behavior: url($pie)
+
+  .btn_magenta
+    background: $magenta
+    border-color: #8A2166
+    -pie-background: linear-gradient(#FF0184, #E10174)
+
+  .btn_plum
+    background: $plum
+    border-color: #8A2166
+    -pie-background: linear-gradient(#A55389, #8A2166)
+
+  .btn_dullblue
+    color: #0C1424 !important
+    background: $dullblue
+    border-color: #B3C7EB
+    -pie-background: linear-gradient(#D3DDFF, #B3C7EB)
+
+  // IE7
+  * + html 
+    .btn
+      padding: 3px 15px !important
+    .btn_big
+      padding: 5px 18px !important

app/assets/stylesheets/_crumb-nav-ie.css.sass

@@ -0,0 +1,23 @@
+@import "bourbon"
+@import "basic/variables"
+@import "basic/mixins"
+
+.main-content .crumb-nav, .crumb-nav
+  display: block
+  overflow: hidden
+  li
+    color: $grey-3
+    float: left
+    font-size: 12px
+    margin-right: 10px
+    padding-bottom: 5px
+    a
+      color: $grey-3
+      padding: 0 15px 0 0
+      background-image: url(../images/chevron.png)
+      background-position: 100% 50%
+      background-repeat: no-repeat
+      &:hover
+        color: $blue-10
+        &:visited
+          color: $blue-4

app/assets/stylesheets/_crumb-nav.sass

@@ -0,0 +1,36 @@
+@import "bourbon"
+@import "basic/variables"
+@import "basic/mixins"
+
+.main-content .crumb-nav, .crumb-nav
+  display: block
+  overflow: hidden
+  margin-bottom: 10px
+  ul
+    margin-left: 10px
+  li
+    color: $grey-3
+    float: left
+    font-size: 12px
+    margin-right: 10px
+    padding-bottom: 5px
+    a
+      color: $grey-3
+      padding: 0 15px 0 0
+      background-image: url(../images/chevron.png)
+      background-position: 100% 50%
+      background-repeat: no-repeat
+      &:hover
+        color: $blue-10
+        &:visited
+          color: $blue-4
+
+@media all and (min-width: 500px)
+  .main-content .crumb-nav, .crumb-nav
+    margin-bottom: 0
+
+@media all and (min-width: 868px)
+  .main-content .crumb-nav, .crumb-nav
+    ul
+      margin-left: auto
+

app/assets/stylesheets/_desktop-grid.sass

@@ -0,0 +1,18 @@
+@import "desktop"
+
+.main-content
+  margin: 0 10px
+
+.main-content, .secondary, .twelve-col, .comparison
+  margin: 0 auto
+
+.twelve-col, .comparison
+  margin-bottom: 20px
+
+.comparison
+  max-width: 992px
+  _width: 992px
+
+.twelve-col
+  max-width: 962px
+  _width: 962px

app/assets/stylesheets/_desktop.sass

@@ -0,0 +1,33 @@
+.for-desktop
+  display: inline-block
+
+.for-tablet, .non-desktop
+  display: none
+
+.seasonal-winter
+  background: url(../images/winter-bg.png) no-repeat center top
+  .twelve-col
+    // +linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 3%, rgba(255,255,255,1) 95%, rgba(255,255,255,0) 100%)
+    padding: 0 15px
+
+.seasonal-winter-bg-only
+  background: url(../images/winter-bg.png) no-repeat center top
+
+.main-content
+  padding-top: 20px
+  .progress
+    margin-top: 10px
+
+/* forms */
+.main-content
+  form
+    li
+      padding-top: 15px
+      padding-bottom: 25px
+
+.secondary h3, .secondary p, .secondary ul
+  margin-left: 0
+  margin-right: 0
+
+#help-content
+  width: 820px

app/assets/stylesheets/_final-grid.sass

@@ -0,0 +1,3 @@
+.twelve-col
+  width: 962px
+

app/assets/stylesheets/_forms.sass

@@ -0,0 +1,5 @@
+@import "bourbon"
+@import "basic/variables"
+@import "basic/mixins"
+@import "forms/inputs"
+@import "forms/selects"

app/assets/stylesheets/_secondary-tabs-ie.sass

@@ -0,0 +1,5 @@
+@import "bourbon"
+@import "basic/variables"
+@import "basic/mixins"
+@import "secondary-tabs/secondary-tabs-tablet"
+@import "secondary-tabs/secondary-tabs-desktop"

app/assets/stylesheets/_secondary-tabs.sass

@@ -0,0 +1,10 @@
+@import "bourbon"
+@import "basic/variables"
+@import "basic/mixins"
+@import "secondary-tabs/secondary-tabs-common"
+
+@media all and (min-width: 500px)
+  @import "secondary-tabs/secondary-tabs-tablet"
+
+@media all and (min-width: 868px)
+  @import "secondary-tabs/secondary-tabs-desktop"

app/assets/stylesheets/_social-icons.ie.sass

@@ -0,0 +1,5 @@
+@import "bourbon"
+@import "basic/variables"
+@import "basic/mixins"
+@import "social-icons/social-icons-tablet"
+@import "social-icons/social-icons-desktop"

app/assets/stylesheets/_social-icons.sass

@@ -0,0 +1,10 @@
+@import "bourbon"
+@import "basic/variables"
+@import "basic/mixins"
+@import "social-icons/social-icons-common"
+
+@media all and (min-width: 500px)
+  @import "social-icons/social-icons-tablet"
+
+@media all and (min-width: 868px)
+  @import "social-icons/social-icons-desktop"