feathers 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: a0ccd12ae4fc12169f5f1ac52e257faed51e21d5
+  data.tar.gz: 6ace0f2507569e11f7f52015feb5a7cc8f8c997f
+SHA512:
+  metadata.gz: 7b9ddb790ed389adb4f901cd0b2cff1c35a1d8e504faf0145a18a1cafcbc87cb41911d7d8197580d11bce6d99a86b7687fe43a9580532d21c867d5e696b571b0
+  data.tar.gz: 8ac364a9e3159b060922f228d77d136f42b774f7b7d6741529ac63846c34efecf76619f866aa565ac5524adc17f57921cd7ca9924eec046b5ee19c6bc0646dd1

data/.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+feathers-*.gem

data/Gemfile

@@ -0,0 +1 @@
+gemspec

data/README.md

@@ -0,0 +1,141 @@
+Feathers
+====
+
+Feathers is a minimalist CSS reset and boilerplate with optional rules that can be 'layered in' to apply sensible defaults to common widgets, such as navigation, forms, buttons, and menus
+
+Feathers is a starting point, not an end to end solution. It does **not** contain a lot of layout rules, grid frameworks, or JavaScript libraries. It's not a replacement for Bootstrap or Foundation, etc. It's a lightweight alternative for people who want to start with  minimal, but sensible CSS and build from there.
+
+Getting Started
+----
+
+First, install Feathers.
+
+    gem install feathers
+
+Next, Feathers assumes you're using SASS instead of Sprockets, so start by renaming your `application.css` file to `application.css.scss` and removing the Sprockets directives.
+
+Now, simply `@import` the feathers you wish to use. They are:
+
+* `base` - This is the basic CSS reset and boilerplate. It does some normalization and gives you sensible defaults for some basic things like typography, tap highlights, touch scroll behavior, etc.
+* `buttons` - A collection of button styles; default, cancel, action, success, warning, delete
+* `flash-messages` - Styling for flash messages; success, warning, notice
+* `forms` - Nice defaults for form elements.
+* `menus` - A collection of different menu types; breadcrumbs, dropdowns, horizontal nav bar, vertical list menu, link list, icon bar (works great with Font Awesome).
+* `other-widgets` - This is a miscellaneous collection of other common widgets; pagination, avatars, progress bars, labels, notes, title bar, tag lines.
+* `tables` - A nice default for data tables
+
+CSS class names
+----
+
+I'm just going to make a list. Most are self-explanatory! Feathers tries to avid 'classitis' by applying CSS semantically within widgets.
+
+####Base
+
+* .align-center
+* .align-right
+* .align-left
+* .hidden
+
+####Buttons
+* .button
+* .button.cancel
+* .button.delete
+* .button.info
+* .button.large
+* .button.small
+* .button.success
+* .button.warning
+
+May be combined, e.g. `class="button large info"`.
+
+####Flash Messages
+
+For block level elements.
+
+* .notice
+* .error
+* .note
+* .warning
+
+####Forms
+
+* input.error
+* label.inline
+* label.horizontal
+* span.error-details
+
+####Menus
+
+* .breadcrumbs
+* .drop-menu
+* .drop-menu > ul
+* .icon-bar
+* ul.horizontal-menu
+* ul.link-list
+* ul.vertical-menu
+
+####Other Widgets
+
+* .avatar
+* .avatar.circle
+* .avatar.framed
+* .note {
+* .pagination
+* .progress-bar
+* span.label
+* span.label.danger
+* span.label.info
+* span.label.success
+* span.label.warning
+* .tag-line
+* .title-bar
+
+####Tables
+
+* table.data-table
+
+Customizing Feathers
+----
+
+You can of course override any Feathers CSS declartion inside your own stylesheet, and this is probably the most common and straightfoward path toward customization for a lot of people. However, if you would like to simply change Feathers' default colors, it's easy to do.
+
+First, create an initializer file.
+
+    touch config/initializers/feathers.rb
+
+Then simply override the Feathers color presets. You can change any or all values to your liking.
+
+    module Feathers
+      class Config
+
+        @light_1 = "#efefef"
+        @light_2 = "#ddd"
+        @medium_1 = "#ccc"
+        @medium_2 = "#aaa"
+        @dark_1 = "#777"
+        @dark_2 = "#444"
+        @highlight = "#ffe"
+        @notice_background = "#ecffd6"
+        @warning_background = "#fbefb9"
+        @error_background = "#ffebeb"
+        @note_background = "#d8f2ff"
+        @default_element = "#ccc"
+        @danger_element = "#cf0404"
+        @info_element = "#448ccb"
+        @success_element = "#7ba900"
+        @warning_element = "#f3a24d"
+        @black = "#000"
+        @white = "#fff"
+
+      end
+    end
+
+Borders and gradients are calculated automatically based on the defined values for their element.
+
+ToDo
+----
+
+* Currently checkbox, radio buttons, and select box stylings are currently webkit only
+* View Helpers for various Feathers elements
+* JavaScript for better handling of tap states for touch events (`:hover` isn't always accurate)
+* Add a demo and tests (tests don't really make sense until we have view helpers to test)

data/Rakefile

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

data/app/assets/stylesheets/base.css.scss.erb

@@ -0,0 +1,132 @@
+* {
+  box-sizing:border-box;
+  -moz-box-sizing:border-box;
+  -webkit-box-sizing:border-box;
+}
+
+::-moz-selection {
+  background:<%= Feathers::Config.dark_2 %>;
+  color:<%= Feathers::Config.white %>;
+  text-shadow:none;
+}
+
+::selection {
+  background:<%= Feathers::Config.dark_2 %>;
+  color:<%= Feathers::Config.white %>;
+  text-shadow:none;
+}
+
+a {
+  color:<%= Feathers::Config.dark_2 %>;
+  outline:none;
+  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
+  -moz-tap-highlight-color:rgba(0, 0, 0, 0);
+  -o-tap-highlight-color:rgba(0, 0, 0, 0);
+  tap-highlight-color:rgba(0, 0, 0, 0);
+  text-decoration:none;
+}
+
+a:hover {
+  color:<%= Feathers::Config.dark_1 %>;
+}
+
+.align-center {
+  text-align:center;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.align-left {
+  text-align:left;
+}
+
+blockquote {
+  border-left:3px solid <%= Feathers::Config.medium_1 %>;
+  color:<%= Feathers::Config.dark_2 %>;
+  margin:0 1em 0.5em 1em;
+  padding:1em;
+  cite {
+    display:block;
+    text-align:right;
+    font-style:italic;
+    font-weight:bold;
+  }
+}
+
+body {
+  background-color:<%= Feathers::Config.white %>;
+  font-family:helvetica, arial, sans-serif;
+  font-size:16px;
+  font-smoothing:antialiased;
+  -webkit-font-smoothing:antialiased;
+  line-height:150%;
+  margin:0;
+  overflow-scroll:touch;
+  -webkit-overflow-scroll:touch;
+  overflow-y:scroll;
+  -webkit-text-size-adjust:100%;
+  -ms-text-size-adjust:100%;
+}
+
+footer, header, nav, section {
+  display:block;
+}
+
+fieldset, img {
+  border:none;
+}
+
+form, legend, li {
+  margin:0;
+  padding:0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height:1.5rem;
+  margin:0 0 0.5em 0;
+  padding:0;
+}
+
+h1 { font-size:200%; }
+h2 { font-size:180%; }
+h3 { font-size:160%; }
+h4 { font-size:140%; }
+h5 { font-size:120%; }
+h6 { font-size:100%; }
+
+.hidden {
+  display:none;
+}
+
+hr {
+  border:none;
+  border-bottom:1px solid <%= Feathers::Config.medium_1 %>;
+  height:0;
+  margin:1em 0;
+  padding:0;
+}
+
+i {
+  color:<%= Feathers::Config.dark_2 %>;
+}
+
+input, select, textarea {
+  color:#444;
+  font-family:helvetica, arial, sans-serif;
+  font-size:0.8em;
+}
+
+p {
+  margin:0 0 1em 0;
+}
+
+small {
+  font-size:70%;
+}
+
+ul, ol {
+  margin:0 0 1em 0;
+  padding:0 0 0 2em;
+}

data/app/assets/stylesheets/buttons.css.scss.erb

@@ -0,0 +1,100 @@
+@import 'mixins';
+
+.button {
+  border:1px solid darken(<%= Feathers::Config.default_element %>, 30%);
+  display:inline-block;
+  line-height:1.5em;
+  padding:0.25em 0.5em;
+  @include background-gradient(lighten(<%= Feathers::Config.default_element %>, 10%), <%= Feathers::Config.default_element %>);
+  @include border-radius(0.25em);
+  i {
+    margin-right:0.5em;
+  }
+}
+
+.button:active {
+  @include box-shadow(0, 0, 0);
+}
+
+.button:hover {
+  @include background-gradient(darken(<%= Feathers::Config.default_element %>, 10%), darken(<%= Feathers::Config.default_element %>, 20%));
+  color:<%= Feathers::Config.white %>;
+  @include background-gradient(darken(<%= Feathers::Config.default_element %>, 10%), darken(<%= Feathers::Config.default_element %>, 20%));
+  i {
+    color:<%= Feathers::Config.white %>;
+  }
+}
+
+.button.cancel {
+  border:1px solid darken(<%= Feathers::Config.default_element %>, 30%);
+  @include background-gradient(lighten(<%= Feathers::Config.default_element %>, 10%), <%= Feathers::Config.default_element %>);
+}
+
+.button.cancel:hover {
+  color:<%= Feathers::Config.white %>;
+  @include background-gradient(darken(<%= Feathers::Config.default_element %>, 10%), darken(<%= Feathers::Config.default_element %>, 20%));
+  i {
+    color:<%= Feathers::Config.white %>;
+  }
+}
+
+.button.delete {
+  border:1px solid darken(<%= Feathers::Config.danger_element %>, 30%);
+  color:<%= Feathers::Config.white %>;
+  @include background-gradient(lighten(<%= Feathers::Config.danger_element %>, 10%), <%= Feathers::Config.danger_element %>);
+  i {
+    color:<%= Feathers::Config.white %>;
+  }
+}
+
+.button.delete:hover {
+  @include background-gradient(darken(<%= Feathers::Config.danger_element %>, 10%), darken(<%= Feathers::Config.danger_element %>, 20%));
+}
+
+.button.large {
+  font-size:125%;
+}
+
+.button.small {
+  font-size:80%;
+}
+
+.button.info {
+  border:1px solid darken(<%= Feathers::Config.info_element %>, 30%);
+  color:<%= Feathers::Config.white %>;
+  @include background-gradient(lighten(<%= Feathers::Config.info_element %>, 10%), <%= Feathers::Config.info_element %>);
+  i {
+    color:<%= Feathers::Config.white %>;
+  }
+}
+
+.button.info:hover {
+  @include background-gradient(darken(<%= Feathers::Config.info_element %>, 10%), darken(<%= Feathers::Config.info_element %>, 20%));
+}
+
+.button.success {
+  border:1px solid darken(<%= Feathers::Config.success_element %>, 30%);
+  color:<%= Feathers::Config.white %>;
+  @include background-gradient(lighten(<%= Feathers::Config.success_element %>, 10%), <%= Feathers::Config.success_element %>);
+  i {
+    color:<%= Feathers::Config.white %>;
+  }
+}
+
+.button.success:hover {
+  @include background-gradient(darken(<%= Feathers::Config.success_element %>, 10%), darken(<%= Feathers::Config.success_element %>, 20%));
+}
+
+.button.warning {
+  border:1px solid darken(<%= Feathers::Config.warning_element %>, 30%);
+  @include background-gradient(lighten(<%= Feathers::Config.warning_element %>, 10%), <%= Feathers::Config.warning_element %>);
+  color:<%= Feathers::Config.white %>;
+  i {
+    color:<%= Feathers::Config.white %>;
+  }
+}
+
+.button.warning:hover {
+  @include background-gradient(darken(<%= Feathers::Config.warning_element %>, 10%), darken(<%= Feathers::Config.warning_element %>, 20%));
+}
+

data/app/assets/stylesheets/flash-messages.css.scss.erb

@@ -0,0 +1,33 @@
+div.notice, div.error, div.note, div.warning {
+  margin:1em 0;
+  padding:1em;
+  @include border-radius(0.5em);
+  i {
+    margin-right:1em;
+  }
+}
+
+div.error {
+  background:<%= Feathers::Config.error_background %>;
+  border:2px solid darken(<%= Feathers::Config.error_background %>, 10%);
+  i {
+    color:darken(<%= Feathers::Config.error_background %>, 50%);
+  }
+}
+
+div.notice {
+  background: <%= Feathers::Config.notice_background %>;
+  border:2px solid darken(<%= Feathers::Config.notice_background %>, 40%);
+  i {
+    color:darken(<%= Feathers::Config.notice_background %>, 50%);
+  }
+}
+
+div.warning {
+  background:<%= Feathers::Config.warning_background %>;
+  border:2px solid darken(<%= Feathers::Config.warning_background %>, 30%);
+  i {
+    color:darken(<%= Feathers::Config.warning_background %>, 50%);
+  }
+}
+

data/app/assets/stylesheets/forms.css.scss.erb

@@ -0,0 +1,118 @@
+fieldset {
+  margin:0;
+
+  input[type=search] { -webkit-appearance:none; }
+  input[type=search]::-webkit-search-decoration,
+  input[type=search]::-webkit-search-cancel-button,
+  input[type=search]::-webkit-search-results-button,
+  input[type=search]::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  input[type=text],
+  input[type=email],
+  input[type=tel],
+  input[type=number],
+  input[type=date],
+  input[type=search],
+  input[type=password] {
+    background:<%= Feathers::Config.white %>;
+    border:1px solid <%= Feathers::Config.medium_1 %>;
+    padding:0.5em;
+    @include border-radius(0.25em);
+  }
+
+  input.error {
+    border:1px solid darken(<%= Feathers::Config.error_background %>, 20%);
+  }
+
+  label {
+    display:block;
+    line-height:2em;
+  }
+
+  label.horizontal {
+    display:inline-block;
+    min-width:16em;
+  }
+
+  label.inline {
+    display:inline-block;
+    margin-right:2em;
+    input {
+      -webkit-appearance:none;
+      -moz-appearance:none;
+      appearance:none;
+      border:none;
+      display:inline-block;
+      float:left;
+      height:20px;
+      margin-right:1em;
+      width:20px;
+    }
+    input[type=radio] {
+      background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjVJREFUeNrsVb1OAkEQ3uOfXCCQaAQsDBQ2xMLkOhtaH8CeR/A17HwEel9DOxILrSwgEH4DCQRy4Z9zvnXv3BPN6bGxYpIJw/x8Nzszu6NZlsVUUug7paZpQfo5IT4iThHrwmQSj4mHxH1KZuMJSGDH9HNWqVRuDMO4yOVy54lEIgvbdDrtdjqdt2q1+lIulx/It0GgAxcAjmwz0SlxqVarPVoeBB/4IsaFIYEhs1K/33+1fknwFaDHLkAi1Mz4TWY/ZGoAQwbMUc3uLJ+EWGAAKyBKeYQG+B0VEYuJcABT6KZfQBGbkgF1ezT8kIjVZUBlZAOaGFq/ICLWlAHHuAF+AUXsWAYc4jr5BRSxQ+fqKR9s5VdP5eOgfX1g//J8kWrn+dK+e7H3eWA11StA+U057JTdwV6v1xZlxhmy12DzLouaXdJX7/P5/JWdfa/XY6PRiM3nc/4/FouxdDrNMpmMc8J6vf5UKBRuSXxGTe0un6BmMliz2WSNRoO1Wi3Wbrc5Q4YONpsQg1jRRKcprp2CzLrdLhsMBsw0TUZH/ehgKMQWiwWXI5GIk6m0Uzo7O2Wz2fBjTiYTDrZarbgODBk62OADnedOmc1mvGbIBJltt1vneJChgw0+8P3/nRKPx3k3o9Eor1kg8PlNyNDBBh/4eu6UYDDIRyOZTDJd11k4HOY6MGToYIMPdF93SkjeKcVi8Rp/0L3lcskNyMbuLGSAZbNZ1yzKO0X5YCu/eoedsj+9CzAANMf9yP7GAVkAAAAASUVORK5CYII=) top left no-repeat;
+    }
+    input[type=radio]:checked {
+      background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjVJREFUeNrsVb1OAkEQ3uOfXCCQaAQsDBQ2xMLkOhtaH8CeR/A17HwEel9DOxILrSwgEH4DCQRy4Z9zvnXv3BPN6bGxYpIJw/x8Nzszu6NZlsVUUug7paZpQfo5IT4iThHrwmQSj4mHxH1KZuMJSGDH9HNWqVRuDMO4yOVy54lEIgvbdDrtdjqdt2q1+lIulx/It0GgAxcAjmwz0SlxqVarPVoeBB/4IsaFIYEhs1K/33+1fknwFaDHLkAi1Mz4TWY/ZGoAQwbMUc3uLJ+EWGAAKyBKeYQG+B0VEYuJcABT6KZfQBGbkgF1ezT8kIjVZUBlZAOaGFq/ICLWlAHHuAF+AUXsWAYc4jr5BRSxQ+fqKR9s5VdP5eOgfX1g//J8kWrn+dK+e7H3eWA11StA+U057JTdwV6v1xZlxhmy12DzLouaXdJX7/P5/JWdfa/XY6PRiM3nc/4/FouxdDrNMpmMc8J6vf5UKBRuSXxGTe0un6BmMliz2WSNRoO1Wi3Wbrc5Q4YONpsQg1jRRKcprp2CzLrdLhsMBsw0TUZH/ehgKMQWiwWXI5GIk6m0Uzo7O2Wz2fBjTiYTDrZarbgODBk62OADnedOmc1mvGbIBJltt1vneJChgw0+8P3/nRKPx3k3o9Eor1kg8PlNyNDBBh/4eu6UYDDIRyOZTDJd11k4HOY6MGToYIMPdF93SkjeKcVi8Rp/0L3lcskNyMbuLGSAZbNZ1yzKO0X5YCu/eoedsj+9CzAANMf9yP7GAVkAAAAASUVORK5CYII=) bottom left no-repeat;
+    }
+    input[type=checkbox] {
+      background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWtJREFUeNrslU2LglAUhl/lUou2LhWCdubGsk1B/oKZHzvTDwgEd4lFm0Aoog8XgpswXVjTvaD0Nc2YzjAMvosr5yIP77n33HO44/GIIkXownHcSxGwk7l3cha85YGdTL3SL4+CVQJLYAksgb8DJNf9LK+4okfAz6T8v2dKGIbFnOHhcIBlWRiNRvmBcRxjOBxiOp2iWq3er8MMB89g6/WaxZVKJZ9D6iqBUe33++eBruvCtu2bvadSjqIIhmHg/GU1Gg10Op2vHXqeh8FggOVyme5NJpOL9FRVRa/XuzlDcu2CloHjOCwej8eQJAm73Q6z2Sz9r91uo9lsPu42VNvtFpvNJo1938d8PsdqtWJ1RyXL8qewG2C9XocoijBNE4vFgu3R4k1SFQQBrVYrW7chhKDf70NRFBYHQcAughawruvgef659kWd0PQSdbtd1Gq173fse9I0LX239HIyjYBH0Cxd/e/PlA8BBgA6gpuyV9X9zQAAAABJRU5ErkJggg==) top left no-repeat;
+    }
+    input[type=checkbox]:checked {
+      background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWtJREFUeNrslU2LglAUhl/lUou2LhWCdubGsk1B/oKZHzvTDwgEd4lFm0Aoog8XgpswXVjTvaD0Nc2YzjAMvosr5yIP77n33HO44/GIIkXownHcSxGwk7l3cha85YGdTL3SL4+CVQJLYAksgb8DJNf9LK+4okfAz6T8v2dKGIbFnOHhcIBlWRiNRvmBcRxjOBxiOp2iWq3er8MMB89g6/WaxZVKJZ9D6iqBUe33++eBruvCtu2bvadSjqIIhmHg/GU1Gg10Op2vHXqeh8FggOVyme5NJpOL9FRVRa/XuzlDcu2CloHjOCwej8eQJAm73Q6z2Sz9r91uo9lsPu42VNvtFpvNJo1938d8PsdqtWJ1RyXL8qewG2C9XocoijBNE4vFgu3R4k1SFQQBrVYrW7chhKDf70NRFBYHQcAughawruvgef659kWd0PQSdbtd1Gq173fse9I0LX239HIyjYBH0Cxd/e/PlA8BBgA6gpuyV9X9zQAAAABJRU5ErkJggg==) bottom left no-repeat;
+    }
+  }
+
+  legend {
+    background:<%= Feathers::Config.light_1 %>;
+    color:<%= Feathers::Config.dark_1 %>;
+    padding:0.5em;
+    @include border-radius(0.25em);
+  }
+
+  select {
+    -webkit-appearance:none;
+    -moz-appearance:none;
+    appearance:none;
+    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH1JREFUeNqkUTsKwCAMNaGDk4qDoGcQZwdHj+1pHLyFpE6l1P5o3xRCHu8TICL2Fch+YNmmUkpr7fSIc55Scs4d9rC3PfMBwBjjvbfWIuIdeeYrpYam1vpV5pzzZk8IEUIY/KvMcNr20O+9xxillHeN0QVqrfQE+PPnVYABAAwmZGpbdzcOAAAAAElFTkSuQmCC) 100% 50% no-repeat <%= Feathers::Config.white %>;
+    border:1px solid <%= Feathers::Config.medium_1 %>;
+    line-height:1.25em;
+    min-width:16em;
+    padding:0.5em 3em 0.5em 0.5em;
+    @include border-radius(0.25em);
+  }
+
+  input[type=date] {
+    -webkit-appearance:none;
+    -moz-appearance:none;
+    appearance:none;
+    border:1px solid <%= Feathers::Config.medium_1 %>;
+    line-height:1.25em;
+    padding:0.5em;
+    @include border-radius(0.25em);
+  }
+
+  span.error-details {
+    color:darken(<%= Feathers::Config.error_background %>, 50%);
+    display:inline-block;
+    margin-left:1em;
+    i {
+      color:darken(<%= Feathers::Config.error_background %>, 50%);
+    }
+  }
+
+}
+
+fieldset > div {
+  overflow:hidden;
+  padding:0.5em;
+}
+
+input[type=reset], input[type=submit], input[type=button] {
+  display:inline-block;
+  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
+  -moz-tap-highlight-color:rgba(0, 0, 0, 0);
+  -o-tap-highlight-color:rgba(0, 0, 0, 0);
+  tap-highlight-color:rgba(0, 0, 0, 0);
+}

data/app/assets/stylesheets/menus.css.scss.erb

@@ -0,0 +1,184 @@
+.breadcrumbs {
+  background:<%= Feathers::Config.light_1 %>;
+  border:1px solid <%= Feathers::Config.light_2 %>;
+  color:<%= Feathers::Config.dark_1 %>;
+  padding:1em;
+  span {
+    color:<%= Feathers::Config.dark_2 %>;
+  }
+}
+
+.drop-menu {
+  background:<%= Feathers::Config.light_1 %>;
+  display:inline-block;
+  padding:0.5em 1em;
+  position:relative;
+  @include border-radius(0.5em);
+  ul {
+    background:<%= Feathers::Config.light_1 %>;
+    display:none;
+    left:0.5em;
+    margin:0;
+    min-width:12em;
+    padding:0;
+    position:absolute;
+    top:2.5em;
+    z-index:1000;
+    @include border-radius(0.5em);
+    li {
+      list-style:none;
+      margin:0;
+      padding:0;
+      a {
+        background:<%= Feathers::Config.light_1 %>;
+        display:block;
+        padding:0.5em;
+      }
+      a:hover {
+        color:<%= Feathers::Config.light_1 %>;
+        background:<%= Feathers::Config.dark_1 %>;
+        @include border-radius(0.5em);
+      }
+    }
+  }
+  ul:before {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-width: 12px;
+    border-style: solid;
+    border-color: transparent transparent <%= Feathers::Config.light_1 %> transparent;
+    top: -24px;
+    left: 1em;
+    z-index:1000;
+  }
+}
+.drop-menu:hover {
+  background:<%= Feathers::Config.medium_1 %>;
+  > a {
+    color:<%= Feathers::Config.dark_2 %>;
+    i {
+      color:<%= Feathers::Config.dark_2 %>;
+    }
+  }
+  ul {
+    display:block;
+  }
+}
+
+ul.horizontal-menu, ul.vertical-menu {
+  margin:0 0 1em 0;
+  padding:0;
+  li {
+    list-style:none;
+    margin:0;
+    padding:0;
+  }
+}
+
+ul.horizontal-menu {
+  background:<%= Feathers::Config.light_1 %>;
+  overflow:hidden;
+  padding:0.5em 0;
+  @include border-radius(0.5em);
+  li {
+    display:inline;
+    a {
+      display:inline-block;
+      float:left;
+      margin:0 0.5em;
+      padding:0 1em;
+    }
+    a:hover {
+      background:<%= Feathers::Config.dark_1 %>;
+      color:<%= Feathers::Config.white %>;
+      @include border-radius(0.5em);
+    }
+  }
+}
+
+ul.vertical-menu {
+  li {
+    margin:0;
+    padding:0;
+    a {
+      background:<%= Feathers::Config.light_1 %>;
+      display:block;
+      margin-bottom:0.5em;
+      padding:0.5em 1em;
+      @include border-radius(0.5em);
+      i {
+        display:inline-block;
+        float:right;
+        line-height:1.5em;
+        @include opacity(0.2);
+      }
+    }
+    a:hover {
+      background:<%= Feathers::Config.dark_1 %>;
+      color:<%= Feathers::Config.white %>;
+      i {
+        color:<%= Feathers::Config.white %>;
+        @include opacity(0.4);
+      }
+    }
+  }
+}
+
+.icon-bar {
+  border:1px solid <%= Feathers::Config.medium_1 %>;
+  display:block;
+  height:3em;
+  line-height:2em;
+  padding:0.5em;
+  text-align:center;
+  @include background-gradient(lighten(<%= Feathers::Config.light_2 %>, 10%), <%= Feathers::Config.light_2 %>);
+  a {
+    display:inline-block;
+    margin:0 2em;
+    i {
+      font-size:180%;
+      color:<%= Feathers::Config.dark_1 %>;
+      @include text-shadow(1px 1px 1px <%= Feathers::Config.white %>);
+    }
+  }
+  a:hover, a:active {
+    i {
+      color:#333;
+    }
+  }
+}
+
+ul.link-list {
+  margin:0;
+  padding:0;
+  overflow-scroll:touch;
+  -webkit-overflow-scroll:touch;
+  li {
+    list-style:none;
+    margin:0;
+    padding:0;
+    a {
+      display:block;
+      padding:0.5em;
+      margin:0;
+      border-bottom:1px solid <%= Feathers::Config.medium_1 %>;
+      i {
+        color:<%= Feathers::Config.dark_1 %>;
+        display:inline-block;
+        float:right;
+        line-height:1.5em;
+        @include opacity(0.2);
+      }
+    }
+    a:hover {
+      background:<%= Feathers::Config.light_2 %>;
+    }
+  }
+  li:last-child {
+    a {
+      border-bottom:none;
+    }
+  }
+}

data/app/assets/stylesheets/mixins.scss

@@ -0,0 +1,43 @@
+@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
+    background-color: $startColor;
+    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+    background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+    background-image:    -moz-linear-gradient(top, $startColor, $endColor);
+    background-image:     -ms-linear-gradient(top, $startColor, $endColor);
+    background-image:      -o-linear-gradient(top, $startColor, $endColor);
+    background-image:         linear-gradient(top, $startColor, $endColor);
+    filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr=$startColor, EndColorStr=$endColor);
+}
+
+@mixin background-size($width: 100%, $height: 100%) {
+     -moz-background-size: $width $height;
+  -webkit-background-size: $width $height;
+          background-size: $width $height;
+}
+
+@mixin border-radius($radius: 5px) {
+    -moz-border-radius:    $radius;
+    -webkit-border-radius: $radius;
+    border-radius:         $radius;
+}
+
+@mixin box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4), $inset: "") {
+    -webkit-box-shadow: $inset $x $y $blur $color;
+    -moz-box-shadow:    $inset $x $y $blur $color;
+    box-shadow:         $inset $x $y $blur $color;
+}
+
+@mixin opacity($opacity: 0.5) {
+    filter:         alpha(opacity=($opacity * 100));
+    -ms-filter:     "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + ($opacity * 100) + ")";
+    -moz-opacity:   $opacity;
+    -khtml-opacity: $opacity;
+    opacity:        $opacity;
+}
+
+@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
+    -moz-text-shadow: $x $y $blur $color;
+    -webkit-text-shadow: $x $y $blur $color;
+    text-shadow: $x $y $blur $color;
+}
+

data/app/assets/stylesheets/other-widgets.css.scss.erb

@@ -0,0 +1,101 @@
+.avatar {
+  width:64px;
+  height:64px;
+}
+
+.avatar.circle {
+  @include border-radius(100%);
+}
+
+.avatar.framed {
+  background:<%= Feathers::Config.white %>;
+  border:1px solid <%= Feathers::Config.medium_1 %>;
+  padding:3px;
+}
+
+.pagination {
+  overflow:hidden;
+  a {
+    border:1px solid <%= Feathers::Config.light_2 %>;
+    display:inline-block;
+    float:left;
+    margin-right:0.5em;
+    padding:0.25em 0.5em;
+  }
+  a.current {
+    background:#f6f6f6;
+    color:<%= Feathers::Config.dark_1 %>;
+  }
+  a.disabled {
+    border:none;
+    color:<%= Feathers::Config.medium_1 %>;
+  }
+  a:hover {
+    background:<%= Feathers::Config.dark_2 %>;
+    color:<%= Feathers::Config.white %>;
+  }
+  a.disabled:hover {
+    background:<%= Feathers::Config.medium_1 %>;
+    color:<%= Feathers::Config.white %>;
+  }
+}
+
+.progress-bar {
+  background:<%= Feathers::Config.light_1 %>;
+  height:16px;
+  margin:1em 0;
+  @include border-radius(1em);
+  b {
+    background:<%= Feathers::Config.success_element %>;
+    color:<%= Feathers::Config.white %>;
+    display:block;
+    font-size:80%;
+    height:16px;
+    line-height:16px;
+    text-align:center;
+    @include border-radius(1em);
+  }
+}
+
+span.label {
+  background:<%= Feathers::Config.default_element %>;
+  color:<%= Feathers::Config.white %>;
+  font-size:80%;
+  font-weight:bold;
+  margin-right:0.5em;
+  padding:0.25em 0.5em;
+  text-transform:lowercase;
+  white-space:nowrap;
+  @include border-radius(0.25em);
+}
+
+span.label.danger  { background:<%= Feathers::Config.danger_element %>; }
+span.label.info    { background:<%= Feathers::Config.info_element %>; }
+span.label.success { background:<%= Feathers::Config.success_element %>; }
+span.label.warning { background:<%= Feathers::Config.warning_element %>; }
+
+div.note {
+  background:<%= Feathers::Config.note_background %>;
+  border:2px solid darken(<%= Feathers::Config.note_background %>, 30%);
+  color:darken(<%= Feathers::Config.note_background %>, 75%);
+  margin:1em 0;
+  padding:0.5em;
+}
+
+.tag-line {
+  color:<%= Feathers::Config.dark_1 %>;
+  font-size:125%;
+}
+
+.title-bar {
+  border:1px solid <%= Feathers::Config.medium_2 %>;
+  padding:0.5em;
+  text-align:center;
+  @include background-gradient(lighten(<%= Feathers::Config.default_element %>, 10%), <%= Feathers::Config.default_element %>);
+  h1 {
+    color:<%= Feathers::Config.dark_1 %>;
+    font-size:180%;
+    margin:0;
+    @include text-shadow(1px 1px 1px <%= Feathers::Config.white %>);
+  }
+}

data/app/assets/stylesheets/tables.css.scss.erb

@@ -0,0 +1,30 @@
+@import 'mixins';
+
+table.data-table {
+  thead {
+    th {
+      border-bottom:1px solid <%= Feathers::Config.medium_1 %>;
+      border-right:1px solid <%= Feathers::Config.medium_1 %>;
+      border-top:1px solid <%= Feathers::Config.medium_1 %>;
+      color:<%= Feathers::Config.dark_2 %>;
+      font-weight:bold;
+      text-align:left;
+      @include background-gradient(lighten(<%= Feathers::Config.default_element %>, 10%), <%= Feathers::Config.default_element %>);
+    }
+    th:first-child {
+      border-left:1px solid <%= Feathers::Config.medium_1 %>;
+    }
+  }
+  tbody {
+    td {
+      border-bottom:1px solid <%= Feathers::Config.light_2 %>;
+    }
+    tr:hover {
+      background:<%= Feathers::Config.highlight %>;
+    }
+  }
+  tfoot {
+    background:<%= Feathers::Config.light_2 %>;
+    color:<%= Feathers::Config.dark_1 %>;
+  }
+}

data/feathers.gemspec

@@ -0,0 +1,23 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "feathers/version"
+
+Gem::Specification.new do |s|
+  s.name        = "feathers"
+  s.version     = Feathers::VERSION
+  s.authors     = ["Kelli Shaver"]
+  s.email       = ["kelli@kellishaver.com"]
+  s.homepage    = "https://github.com/kellishaver/feathers"
+  s.summary     = %q{Lightweight CSS boilerplate with sensible defaults}
+  s.description = %q{Feathers is a minimalist CSS reset and boilerplate with optional rules that can be 'layered in' to apply sensible defaults to common widgets, such as navigation, forms, buttons, and menus}
+  s.license     = "MIT"
+
+  s.rubyforge_project = "feathers"
+
+  s.files         = `git ls-files`.split("\n")
+  s.require_paths = ["lib"]
+
+  s.add_dependency "rails", ">= 3.0", "< 4.1.0"
+  #s.add_development_dependency "bundler", "~> 1.3"
+  #s.add_development_dependency "rake"
+end

data/lib/feathers.rb

@@ -0,0 +1,8 @@
+require "rails"
+
+module Feathers
+  require "feathers/config"
+  require "feathers/rails/engine"
+  require "feathers/rails/railtie"
+  require "feathers/version"
+end

data/lib/feathers/config.rb

@@ -0,0 +1,67 @@
+module Feathers
+  class Config
+    class << self
+
+      attr_reader :light_1,
+                  :light_2,
+                  :medium_1,
+                  :medium_2,
+                  :dark_1,
+                  :dark_2,
+                  :highlight,
+                  :notice_background,
+                  :warning_background,
+                  :error_background,
+                  :note_background,
+                  :default_element,
+                  :danger_element,
+                  :info_element,
+                  :success_element,
+                  :warning_element,
+                  :black,
+                  :white
+
+      attr_writer :light_1,
+                  :light_2,
+                  :medium_1,
+                  :medium_2,
+                  :dark_1,
+                  :dark_2,
+                  :highlight,
+                  :notice_background,
+                  :warning_border,
+                  :warning_background,
+                  :error_background,
+                  :note_background,
+                  :default_element,
+                  :danger_element,
+                  :info_element,
+                  :success_element,
+                  :warning_element,
+                  :black,
+                  :white
+
+      def set_defaults
+        @light_1 = "#efefef"
+        @light_2 = "#ddd"
+        @medium_1 = "#ccc"
+        @medium_2 = "#aaa"
+        @dark_1 = "#777"
+        @dark_2 = "#444"
+        @highlight = "#ffe"
+        @notice_background = "#ecffd6"
+        @warning_background = "#fbefb9"
+        @error_background = "#ffebeb"
+        @note_background = "#d8f2ff"
+        @default_element = "#ccc"
+        @danger_element = "#cf0404"
+        @info_element = "#448ccb"
+        @success_element = "#7ba900"
+        @warning_element = "#f3a24d"
+        @black = "#000"
+        @white = "#fff"
+      end
+
+    end
+  end
+end

data/lib/feathers/rails/engine.rb

@@ -0,0 +1,6 @@
+module Feathers
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/feathers/rails/railtie.rb

@@ -0,0 +1,9 @@
+require 'feathers'
+
+class Railtie < Rails::Railtie
+  initializer "Configure Feathers" do
+    Feathers::Config.set_defaults
+    filename = File.join(Rails.root.to_s, 'config/initializers/feathers.rb')
+    load filename if File.exists?(filename)
+  end
+end

data/lib/feathers/version.rb

@@ -0,0 +1,3 @@
+module Feathers
+  VERSION = "0.1.1"
+end

metadata

@@ -0,0 +1,84 @@
+--- !ruby/object:Gem::Specification
+name: feathers
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+platform: ruby
+authors:
+- Kelli Shaver
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-11-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - <
+      - !ruby/object:Gem::Version
+        version: 4.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - <
+      - !ruby/object:Gem::Version
+        version: 4.1.0
+description: Feathers is a minimalist CSS reset and boilerplate with optional rules
+  that can be 'layered in' to apply sensible defaults to common widgets, such as navigation,
+  forms, buttons, and menus
+email:
+- kelli@kellishaver.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- README.md
+- Rakefile
+- app/assets/stylesheets/base.css.scss.erb
+- app/assets/stylesheets/buttons.css.scss.erb
+- app/assets/stylesheets/flash-messages.css.scss.erb
+- app/assets/stylesheets/forms.css.scss.erb
+- app/assets/stylesheets/menus.css.scss.erb
+- app/assets/stylesheets/mixins.scss
+- app/assets/stylesheets/other-widgets.css.scss.erb
+- app/assets/stylesheets/tables.css.scss.erb
+- feathers.gemspec
+- lib/feathers.rb
+- lib/feathers/config.rb
+- lib/feathers/rails/engine.rb
+- lib/feathers/rails/railtie.rb
+- lib/feathers/version.rb
+homepage: https://github.com/kellishaver/feathers
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: feathers
+rubygems_version: 2.0.3
+signing_key: 
+specification_version: 4
+summary: Lightweight CSS boilerplate with sensible defaults
+test_files: []