flutie 1.0.4 → 1.1

data/README.textile

@@ -12,7 +12,7 @@ Flutie is recommended to be run as a gem and included in your Gemfile.
 
 The installer will copy the Flutie stylesheets into public/flutie/stylesheets
 
-Once Flutie is installed, with your application running (not in production environment) you can browse to /styleguide.  This will present you with many standard markup elements that are present in a Rails application, in your default application layout.
+Once Flutie is installed, with your application running (not in production environment) you can browse to /styleguides.  This will present you with many standard markup elements that are present in a Rails application, in your default application layout.
 
 Click on the "Default styles" link to view the same markup with a barebones layout that only contains the Flutie stylesheets. Click on "Application styles" to view the markup in your application layout.
 
@@ -24,6 +24,14 @@ Flutie registers a :flutie shortcut for stylesheets, so in your layout you can d
 
 ...this will include all the flutie stylesheets, then the 'admin' stylesheet, and it will cache them all into one file.
 
+h3. Sass
+
+If you use Sass in your application, the flutie stylesheets are also available as scss files, installed in public/flutie/sass.  This location is automatically added to your Sass template load path.  These files can be imported into your own css files for use with the following:
+
+@import "flutie"
+
+h3. Custom Styles
+
 To add custom styles to the styleguide add partials to the app/views/styleguides directory. For example:
 
 bc. app/views/styleguides/_todo_item.erb:

data/config/initializers/expansion.rb

@@ -1,9 +1 @@
-ActionView::Helpers::AssetTagHelper.register_stylesheet_expansion :flutie => [
-  '/flutie/stylesheets/reset',
-  '/flutie/stylesheets/defaults',
-  '/flutie/stylesheets/type',
-  '/flutie/stylesheets/forms',
-  '/flutie/stylesheets/tables',
-  '/flutie/stylesheets/lists',
-  '/flutie/stylesheets/screen'
-]
+ActionView::Helpers::AssetTagHelper.register_stylesheet_expansion :flutie => [ '/flutie/stylesheets/flutie' ]

data/config/initializers/sass.rb

@@ -0,0 +1,3 @@
+if defined?(Sass::Plugin) && defined?(Rails)
+  Sass::Plugin.add_template_location(Rails.root.join('public', 'flutie', 'stylesheets', 'sass').to_s)
+end

data/public/stylesheets/flutie.css

@@ -0,0 +1,458 @@
+/* http://meyerweb.com/eric/tools/css/reset/ */
+/* v1.0 | 20080212 */
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
+blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
+font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent; }
+
+body {
+  line-height: 1; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+/* remember to define focus styles! */
+:focus {
+  outline: 0; }
+
+/* remember to highlight inserts somehow! */
+ins {
+  text-decoration: none; }
+
+del {
+  text-decoration: line-through; }
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+body {
+  color: #222;
+  font-size: 13px;
+  font-family: arial, "helvetica neue", helvetica, "lucida grande", sans-serif; }
+
+h1, h2, h3, h4, h5, h6 {
+  color: #111;
+  font-family: "helvetica neue", Helvetica, arial, sans-serif; }
+
+/* Success, error & notice boxes for messages and errors. */
+div.error, div.notice, div.success,
+#flash_failure, #flash_success, #flash_notice {
+  border: 1px solid #ddd;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  margin-bottom: 1em;
+  padding: 0.8em; }
+
+div.error,
+#flash_failure {
+  background: #FBE3E4;
+  border-color: #FBC2C4;
+  color: #D12F19; }
+
+div.error a,
+#flash_failure a {
+  color: #D12F19; }
+
+div.notice,
+#flash_notice {
+  background: #FFF6BF;
+  border-color: #FFD324;
+  color: #817134; }
+
+div.notice a,
+#flash_notice a {
+  color: #817134; }
+
+div.success,
+#flash_success {
+  background: #E6EFC2;
+  border-color: #C6D880;
+  color: #529214; }
+
+div.success a,
+#flash_success a {
+  color: #529214; }
+
+/* Misc classes and elements */
+/* Use a .box to create a padded box inside a column.  */
+.box {
+  background: #eee;
+  margin-bottom: 1.5em;
+  padding: 1.5em; }
+
+/* Use this to create a horizontal ruler across a column. */
+hr {
+  background: #ddd;
+  border: none;
+  clear: both;
+  color: #ddd;
+  float: none;
+  height: 1px;
+  margin: 0 0 1.4em;
+  width: 100%; }
+
+hr.space {
+  background: #fff;
+  color: #fff; }
+
+/* Clearfix hack I love you */
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden; }
+
+.clearfix {
+  display: inline-block; }
+
+/* Hide from IE Mac \*/
+.clearfix {
+  display: block; }
+
+/* End hide from IE Mac */
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold; }
+
+h1 {
+  font-size: 2.2em;
+  line-height: 1;
+  margin-bottom: 0.25em; }
+
+h2 {
+  font-size: 1.6em;
+  line-height: 1.1;
+  margin-bottom: 0.25em; }
+
+h3 {
+  font-size: 1.3em;
+  line-height: 1;
+  margin-bottom: 0.25em; }
+
+h4 {
+  font-size: 1.1em;
+  line-height: 1.25;
+  margin-bottom: 0.25em; }
+
+h5 {
+  font-size: 1em;
+  margin-bottom: 0.25em; }
+
+h6 {
+  font-size: 1em;
+  margin-bottom: 0.25em; }
+
+/* Text elements */
+p {
+  margin-bottom: 0.5em; }
+
+p.last {
+  margin-bottom: 0; }
+
+p img {
+  float: left;
+  margin: 1.5em 1.5em 1.5em 0;
+  padding: 0; }
+
+/* Use this if the image is at the top of the <p>. */
+p img.top {
+  margin-top: 0; }
+
+img {
+  margin: 0 0 1.5em; }
+
+abbr, acronym {
+  border-bottom: 1px dotted #666;
+  cursor: help; }
+
+address {
+  font-style: italic;
+  margin-top: 1.5em; }
+
+del {
+  color: #666; }
+
+a, a:link {
+  color: #1a4882;
+  text-decoration: underline; }
+
+a:visited {
+  color: #1a4882; }
+
+a:hover {
+  color: #052246; }
+
+a:active,
+a:focus {
+  color: #1a4882; }
+
+blockquote {
+  border-left: 4px solid #d1d1d1;
+  color: #666;
+  font-style: italic;
+  margin: 1.5em 0;
+  padding-left: 1em; }
+
+strong {
+  font-weight: bold; }
+
+em,
+dfn {
+  font-style: italic; }
+
+dfn {
+  font-weight: bold; }
+
+pre, code {
+  margin: 1.5em 0;
+  white-space: pre; }
+
+pre, code, tt {
+  font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace;
+  line-height: 1.5; }
+
+pre.code {
+  background: #000;
+  color: #fff;
+  padding: 20px; }
+
+tt {
+  display: block;
+  line-height: 1.5;
+  margin: 1.5em 0; }
+
+/* Forms */
+/*removes dotted outline on submit buttons when clicking in firefox */
+input[type="submit"]::-moz-focus-inner {
+  border: none; }
+
+form ol {
+  list-style: none;
+  margin: 0 0 1em 0; }
+
+form ol ol {
+  margin-left: 0; }
+
+form ol li {
+  list-style-position: outside;
+  margin: 0 0 1em 0; }
+
+/*list-style-position fixes IE label margin bug*/
+form ol ol li {
+  list-style-position: outside;
+  margin: 0 0 .25em 0; }
+
+form ol li.error input {
+  background: #FBE3E4; }
+
+p.inline-errors {
+  color: #D12F19; }
+
+form ol li.file {
+  background: #e1e1e1;
+  border: 1px solid #c8c8c8;
+  padding: 10px; }
+
+form abbr {
+  border-bottom: 0; }
+
+label {
+  display: block; }
+
+.required label {
+  font-weight: bold; }
+
+.checkbox_field label,
+.radio_field label {
+  font-weight: normal; }
+
+a.cancel {
+  color: #7d0d0d; }
+
+.inline-hints {
+  color: #666;
+  font-size: 0.8em;
+  margin-bottom: 0.25em; }
+
+/* Fieldsets */
+fieldset {
+  background: #f1f1f1;
+  border: 1px solid #e3e3e3;
+  margin: 0 0 1.5em 0;
+  padding: 1.5em 1.5em 1em 1.5em; }
+
+fieldset fieldset,
+fieldset fieldset fieldset {
+  border: 0;
+  padding: 0; }
+
+legend {
+  font-weight: bold; }
+
+fieldset.buttons {
+  background: inherit;
+  border: 0;
+  padding: 0; }
+
+fieldset.buttons li {
+  display: inline; }
+
+.radio fieldset {
+  margin: 0;
+  padding: 0; }
+
+/* Text fields */
+input[type="color"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"]
+input[type="range"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+  font-size: inherit;
+  padding: 3px 2px;
+  width: 300px; }
+
+input[disabled='disabled'] {
+  background-color: #fcfcfc;
+  cursor: default; }
+
+input[type="checkbox"] {
+  margin: 0 3px 0 0;
+  position: relative;
+  top: -2px;
+  vertical-align: middle; }
+
+input[type="radio"] {
+  margin: 0 3px 0 0;
+  position: relative;
+  top: -2px;
+  vertical-align: middle; }
+
+.check_boxes label {
+  display: inline;
+  padding: 0;
+  vertical-align: middle; }
+
+.radio label {
+  padding: 0; }
+
+/* Textareas */
+textarea {
+  font-size: inherit;
+  height: 200px;
+  margin: 0 0.5em 0.5em 0;
+  padding: 5px;
+  width: 440px; }
+
+/* Select fields */
+fieldset .select select {
+  width: 200px;
+  font-size: 0.9em; }
+
+optgroup {
+  margin: 0 0 .5em 0; }
+
+/* Date & Time */
+form ol li.date ol li,
+form ol li.time ol li {
+  display: inline; }
+
+form ol li.datetime ol li {
+  display: inline-block; }
+
+form ol li.datetime select,
+form ol li.date select,
+form ol li.time select {
+  display: inline;
+  width: auto; }
+
+form ol li.date label,
+form ol li.time label {
+  display: none; }
+
+/* Tables */
+table {
+  margin-bottom: 2em;
+  width: 100%; }
+
+th {
+  border-bottom: 2px solid #ccc;
+  font-weight: bold;
+  text-align: left; }
+
+td {
+  border-bottom: 1px solid #ddd; }
+
+caption, th, td {
+  padding: 4px 10px 4px 0; }
+
+caption {
+  background: #f1f1f1;
+  margin-bottom: 1em;
+  padding: 10px 0; }
+
+tr, td, th {
+  vertical-align: middle; }
+
+/* Use this if you use span-x classes on th/td. */
+table .last {
+  padding-right: 0; }
+
+/* Lists */
+ul, ol {
+  list-style-position: inside;
+  margin-bottom: 1.5em; }
+
+ul {
+  list-style-type: disc; }
+
+ol {
+  list-style-type: decimal; }
+
+dl {
+  line-height: 1.4;
+  margin-bottom: 1.5em; }
+
+dl dt {
+  font-weight: bold;
+  margin-top: 0.5em; }
+
+dl dd {
+  margin-bottom: 0em; }
+
+dd {
+  margin-left: 0.5em; }
+
+li {
+  line-height: 1.4; }
+
+ol ol, ol ul, ul ul, ul ol {
+  margin-left: 1em; }

data/public/stylesheets/{defaults.css → sass/_defaults.scss}

@@ -1,70 +1,80 @@
-body { 
-  color: #222; 
+body {
+  color: #222;
   font-size: 13px;
-  font-family: arial, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; 
+  font-family: arial, "helvetica neue", helvetica, "lucida grande", sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6 { 
-  color: #111; 
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
+h1, h2, h3, h4, h5, h6 {
+  color: #111;
+  font-family: "helvetica neue", Helvetica, arial, sans-serif;
 }
 
 /* Success, error & notice boxes for messages and errors. */
 div.error, div.notice, div.success,
 #flash_failure, #flash_success, #flash_notice {
-  padding: 0.8em;
-  margin-bottom: 1em;
   border: 1px solid #ddd;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
+  margin-bottom: 1em;
+  padding: 0.8em;
 }
+
 div.error,
 #flash_failure {
   background: #FBE3E4;
-  color: #D12F19;
   border-color: #FBC2C4;
+  color: #D12F19;
 }
+
 div.error a,
-#flash_failure a { color: #D12F19; }
+#flash_failure a {
+  color: #D12F19;
+}
 
 div.notice,
 #flash_notice {
   background: #FFF6BF;
-  color: #817134;
   border-color: #FFD324;
+  color: #817134;
 }
+
 div.notice a,
-#flash_notice a { color: #817134; }
+#flash_notice a {
+  color: #817134;
+}
 
 div.success,
 #flash_success {
   background: #E6EFC2;
-  color: #529214;
   border-color: #C6D880;
+  color: #529214;
 }
+
 div.success a,
-#flash_success a { color: #529214; }
+#flash_success a {
+  color: #529214;
+}
 
 /* Misc classes and elements */
-
-/* Use a .box to create a padded box inside a column.  */ 
+/* Use a .box to create a padded box inside a column.  */
 .box {
-  padding: 1.5em;
-  margin-bottom: 1.5em;
   background: #eee;
+  margin-bottom: 1.5em;
+  padding: 1.5em;
 }
 
 /* Use this to create a horizontal ruler across a column. */
 hr {
   background: #ddd;
-  color: #ddd;
+  border: none;
   clear: both;
+  color: #ddd;
   float: none;
-  width: 100%;
   height: 1px;
   margin: 0 0 1.4em;
-  border: none; 
+  width: 100%;
 }
+
 hr.space {
   background: #fff;
   color: #fff;

data/public/stylesheets/sass/_forms.scss

@@ -0,0 +1,191 @@
+/* Forms */
+
+/*removes dotted outline on submit buttons when clicking in firefox */
+input[type="submit"]::-moz-focus-inner {
+  border: none;
+}
+
+form ol {
+  list-style: none;
+  margin: 0 0 1em 0;
+}
+
+form ol ol {
+  margin-left: 0;
+}
+
+form ol li {
+  list-style-position: outside;
+  margin: 0 0 1em 0;
+}
+
+/*list-style-position fixes IE label margin bug*/
+form ol ol li {
+  list-style-position: outside;
+  margin: 0 0 .25em 0;
+}
+
+form ol li.error input {
+  background: #FBE3E4;
+}
+
+p.inline-errors {
+  color: #D12F19;
+}
+
+form ol li.file {
+  background: #e1e1e1;
+  border: 1px solid #c8c8c8;
+  padding: 10px;
+}
+
+form abbr {
+  border-bottom: 0;
+}
+
+label {
+  display: block;
+}
+
+.required label {
+  font-weight: bold;
+}
+
+.checkbox_field label,
+.radio_field label {
+  font-weight: normal;
+}
+
+a.cancel {
+  color: #7d0d0d;
+}
+
+.inline-hints {
+  color: #666;
+  font-size: 0.8em;
+  margin-bottom: 0.25em;
+}
+
+/* Fieldsets */
+fieldset {
+  background: #f1f1f1;
+  border: 1px solid #e3e3e3;
+  margin: 0 0 1.5em 0;
+  padding: 1.5em 1.5em 1em 1.5em;
+}
+
+fieldset fieldset,
+fieldset fieldset fieldset {
+  border: 0;
+  padding: 0;
+}
+
+legend {
+  font-weight: bold;
+}
+
+fieldset.buttons {
+  background: inherit;
+  border: 0;
+  padding: 0;
+}
+
+fieldset.buttons li {
+  display: inline;
+}
+
+.radio fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+/* Text fields */
+input[type="color"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"]
+input[type="range"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+  font-size: inherit;
+  padding: 3px 2px;
+  width: 300px;
+}
+
+input[disabled='disabled'] {
+  background-color: #fcfcfc;
+  cursor:default;
+}
+
+input[type="checkbox"] {
+  margin: 0 3px 0 0;
+  position: relative;
+  top: -2px;
+  vertical-align: middle;
+}
+
+input[type="radio"] {
+  margin: 0 3px 0 0;
+  position: relative;
+  top: -2px;
+  vertical-align: middle;
+}
+
+.check_boxes label {
+  display: inline;
+  padding: 0;
+  vertical-align: middle;
+}
+
+.radio label {
+  padding: 0;
+}
+
+/* Textareas */
+textarea {
+  font-size: inherit;
+  height: 200px;
+  margin: 0 0.5em 0.5em 0;
+  padding: 5px;
+  width: 440px;
+}
+
+/* Select fields */
+fieldset .select select {
+  width: 200px;
+  font-size: 0.9em;
+}
+
+optgroup {
+  margin: 0 0 .5em 0;
+}
+
+/* Date & Time */
+form ol li.date ol li,
+form ol li.time ol li {
+  display: inline;
+}
+
+form ol li.datetime ol li {
+  display: inline-block;
+}
+
+form ol li.datetime select,
+form ol li.date select,
+form ol li.time select {
+  display: inline;
+  width: auto;
+}
+
+form ol li.date label,
+form ol li.time label {
+  display: none;
+}

data/public/stylesheets/{lists.css → sass/_lists.scss}

@@ -1,24 +1,39 @@
 /* Lists */
 
 ul, ol {
-  margin-bottom:  1.5em;
   list-style-position: inside;
+  margin-bottom:  1.5em;
+}
+
+ul {
+  list-style-type: disc;
+}
+
+ol {
+  list-style-type: decimal;
 }
-ul { list-style-type: disc; }
-ol { list-style-type: decimal; }
 
 dl {
-  margin-bottom: 1.5em;
   line-height: 1.4;
+  margin-bottom: 1.5em;
 }
+
 dl dt {
   font-weight: bold;
   margin-top: 0.5em;
 }
-dl dd { margin-bottom: 0em;}
-dd { margin-left: 0.5em; }
 
-li { line-height: 1.4; }
+dl dd {
+  margin-bottom: 0em;
+}
+
+dd {
+  margin-left: 0.5em;
+}
+
+li {
+  line-height: 1.4;
+}
 
 ol ol, ol ul, ul ul, ul ol {
   margin-left: 1em;

data/public/stylesheets/{reset.css → sass/_reset.scss}

@@ -1,10 +1,9 @@
 /* http://meyerweb.com/eric/tools/css/reset/ */
 /* v1.0 | 20080212 */
-
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
-blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
-font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
-b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, 
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
+blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
+font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
 caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
@@ -14,15 +13,19 @@ caption, tbody, tfoot, thead, tr, th, td {
   vertical-align: baseline;
   background: transparent;
 }
+
 body {
   line-height: 1;
 }
+
 ol, ul {
   list-style: none;
 }
+
 blockquote, q {
   quotes: none;
 }
+
 blockquote:before, blockquote:after,
 q:before, q:after {
   content: '';
@@ -38,6 +41,7 @@ q:before, q:after {
 ins {
   text-decoration: none;
 }
+
 del {
   text-decoration: line-through;
 }

data/public/stylesheets/{tables.css → sass/_tables.scss}

@@ -4,24 +4,32 @@ table {
   margin-bottom: 2em;
   width: 100%;
 }
+
 th {
   border-bottom: 2px solid #ccc;
   font-weight: bold;
   text-align: left;
 }
-td { border-bottom: 1px solid #ddd; }
+
+td {
+  border-bottom: 1px solid #ddd;
+}
+
 caption, th, td {
   padding: 4px 10px 4px 0;
 }
+
 caption {
   background: #f1f1f1;
-  padding: 10px 0;
   margin-bottom: 1em;
+  padding: 10px 0;
 }
 
-tr,td,th {
+tr, td, th {
   vertical-align: middle;
 }
 
 /* Use this if you use span-x classes on th/td. */
-table .last { padding-right: 0; } 
+table .last {
+  padding-right: 0;
+}

data/public/stylesheets/{type.css → sass/_type.scss}

@@ -1,90 +1,137 @@
 /* Headings */
-
-h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+}
 
 h1 {
   font-size: 2.2em;
   line-height: 1;
   margin-bottom: 0.25em;
 }
+
 h2 {
   font-size: 1.6em;
-  margin-bottom: 0.25em;
   line-height: 1.1;
+  margin-bottom: 0.25em;
 }
+
 h3 {
   font-size: 1.3em;
   line-height: 1;
   margin-bottom: 0.25em;
 }
+
 h4 {
   font-size: 1.1em;
   line-height: 1.25;
   margin-bottom: 0.25em;
 }
+
 h5 {
   font-size: 1em;
   margin-bottom: 0.25em;
 }
+
 h6 {
   font-size: 1em;
   margin-bottom: 0.25em;
 }
 
 /* Text elements */
-p { margin-bottom: 0.5em; }
-p.last { margin-bottom: 0; }
+p {
+  margin-bottom: 0.5em;
+}
+
+p.last {
+  margin-bottom: 0;
+}
+
 p img {
   float: left;
   margin: 1.5em 1.5em 1.5em 0;
   padding: 0;
 }
-p img.top { margin-top: 0; } /* Use this if the image is at the top of the <p>. */
-img { margin: 0 0 1.5em; }
+
+/* Use this if the image is at the top of the <p>. */
+p img.top {
+  margin-top: 0;
+}
+
+img {
+  margin: 0 0 1.5em;
+}
 
 abbr, acronym {
   border-bottom: 1px dotted #666;
   cursor: help;
 }
+
 address {
-  margin-top: 1.5em;
   font-style: italic;
+  margin-top: 1.5em;
+}
+
+del {
+  color:#666;
 }
-del { color:#666; }
 
 a, a:link {
   color: #1a4882;
   text-decoration: underline;
 }
-a:visited { color: #1a4882; }
-a:hover { color: #052246; }
-a:active, a:focus { color: #1a4882; }
+
+a:visited {
+  color: #1a4882;
+}
+
+a:hover {
+  color: #052246;
+}
+
+a:active,
+a:focus {
+  color: #1a4882;
+}
 
 blockquote {
-  margin: 1.5em 0;
+  border-left: 4px solid #d1d1d1;
   color: #666;
   font-style: italic;
+  margin: 1.5em 0;
   padding-left: 1em;
-  border-left: 4px solid #d1d1d1;
 }
-strong { font-weight: bold; }
-em, dfn { font-style: italic;  }
-dfn { font-weight: bold; }
+
+strong {
+  font-weight: bold;
+}
+
+em,
+dfn {
+  font-style: italic;
+}
+
+dfn {
+  font-weight: bold;
+}
+
 pre, code {
   margin: 1.5em 0;
   white-space: pre;
 }
+
 pre, code, tt {
   font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace;
   line-height: 1.5;
 }
+
 pre.code {
-  background: #000; 
+  background: #000;
   color: #fff;
   padding: 20px;
 }
+
 tt {
   display: block;
-  margin: 1.5em 0;
   line-height: 1.5;
-}
+  margin: 1.5em 0;
+}

data/public/stylesheets/sass/flutie.scss

@@ -0,0 +1,7 @@
+@import 'reset';
+@import 'defaults';
+@import 'type';
+@import 'forms';
+@import 'tables';
+@import 'lists';
+@import 'screen';

metadata

@@ -1,13 +1,12 @@
 --- !ruby/object:Gem::Specification 
 name: flutie
 version: !ruby/object:Gem::Version 
-  hash: 31
+  hash: 13
   prerelease: false
   segments: 
   - 1
-  - 0
-  - 4
-  version: 1.0.4
+  - 1
+  version: "1.1"
 platform: ruby
 authors: 
 - Chad Pytel
@@ -21,8 +20,21 @@ cert_chain: []
 
 date: 2010-09-05 00:00:00 -04:00
 default_executable: 
-dependencies: []
-
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: haml
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 3
+        segments: 
+        - 0
+        version: "0"
+  type: :development
+  version_requirements: *id001
 description: Flutie is a starting point for personal discovery
 email: support@thoughtbot.com
 executables: []
@@ -38,17 +50,20 @@ files:
 - app/views/flutie/styleguides/show.erb
 - app/views/layouts/flutie.erb
 - config/initializers/expansion.rb
+- config/initializers/sass.rb
 - config/routes.rb
 - lib/flutie/engine.rb
 - lib/flutie.rb
 - lib/tasks/flutie.rake
-- public/stylesheets/defaults.css
-- public/stylesheets/forms.css
-- public/stylesheets/lists.css
-- public/stylesheets/reset.css
-- public/stylesheets/screen.css
-- public/stylesheets/tables.css
-- public/stylesheets/type.css
+- public/stylesheets/flutie.css
+- public/stylesheets/sass/_defaults.scss
+- public/stylesheets/sass/_forms.scss
+- public/stylesheets/sass/_lists.scss
+- public/stylesheets/sass/_reset.scss
+- public/stylesheets/sass/_screen.scss
+- public/stylesheets/sass/_tables.scss
+- public/stylesheets/sass/_type.scss
+- public/stylesheets/sass/flutie.scss
 has_rdoc: true
 homepage: http://github.com/thoughtbot/flutie
 licenses: []

data/public/stylesheets/forms.css

@@ -1,117 +0,0 @@
-/* Forms */
-
-input[type="submit"]::-moz-focus-inner {
-  border: none;
-  } /*removes dotted outline on submit buttons when clicking in firefox */
-
-  form ol {
-    list-style: none;
-    margin: 0 0 1em 0;
-  }
-  form ol ol { margin-left: 0; }
-  form ol li { margin: 0 0 1em 0; list-style-position: outside; }
-  form ol ol li { margin: 0 0 .25em 0; list-style-position: outside; } /*list-style-position fixes IE label margin bug*/
-
-  form ol li.error input { background: #FBE3E4; }
-  p.inline-errors { color: #D12F19; }
-  form ol li.file {
-    background: #e1e1e1;
-    border: 1px solid #c8c8c8;
-    padding: 10px;
-  }
-
-  form abbr { border-bottom: 0; }
-
-  label { display: block; }
-  .required label { font-weight: bold; }
-  .checkbox_field label, .radio_field label { font-weight: normal; }
-
-  a.cancel { color: #7d0d0d; }
-  .inline-hints {
-    font-size: 0.8em;
-    color: #666;
-    margin-bottom: 0.25em;
-  }
-
-/* Fieldsets */
-fieldset {
-  margin: 0 0 1.5em 0;
-  background: #f1f1f1;
-  padding: 1.5em 1.5em 1em 1.5em;
-  border: 1px solid #e3e3e3;
-}
-fieldset fieldset, fieldset fieldset fieldset {
-  padding: 0;
-  border: 0;
-}
-legend { font-weight: bold; }
-fieldset.buttons {
-  background: inherit;
-  border: 0;
-  padding: 0;
-}
-fieldset.buttons li { display: inline; }
-.radio fieldset {
-  padding: 0;
-  margin: 0;
-}
-
-/* Text fields */
-input[type="text"], input[type="password"] {
-  width: 300px;
-  padding: 3px 2px;
-  font-size: inherit;
-}
-input[disabled='disabled'] {
-  background-color: #fcfcfc;
-  cursor:default;
-}
-input[type="checkbox"] {
-  margin: 0 3px 0 0;
-  vertical-align: middle;
-  position: relative;
-  top: -2px;
-}
-input[type="radio"] {
-  margin: 0 3px 0 0;
-  vertical-align: middle;
-  position: relative;
-  top: -2px;
-}
-.check_boxes label {
-  vertical-align: middle;
-  padding: 0;
-  display: inline;
-}
-.radio label { padding: 0; }
-
-/* Textareas */
-textarea {
-  width: 440px;
-  height: 200px;
-  margin: 0 0.5em 0.5em 0;
-  padding: 5px;
-  font-size: inherit;
-}
-
-/* Select fields */
-fieldset .select select {
-  width:200px;
-  font-size: 0.9em;
-} 
-optgroup { margin: 0 0 .5em 0; }
-
-/* Date & Time */
-form ol li.date ol li, form ol li.time ol li {
-  display: inline;
-}
-form ol li.datetime ol li {
-  display: inline-block;
-}
-form ol li.datetime select, form ol li.date select, form ol li.time select {
-  display: inline;
-  width: auto;
-}
-form ol li.date label, form ol li.time label {
-  display: none;
-}