roots-rails 0.0.1.alpha → 1.0.0

data/lib/generators/templates/sass/modules/_interaction.sass

@@ -1,89 +0,0 @@
-@import 'utilities'
-
-// -----------------------------------------------------
-// Interaction
-// -----------------------------------------------------
-
-// Mixin: Hover Darken
-// Pass this a color and it will darken it. Defaults to text color, pass $bg makes the bgcolor darken.
-// Optional percentage as the second param.
-// ex. +darken($red)
-// ex. +darken(#D45D86, 30%)
-// ex. +darken($blue, $bg: true)
-
-=hover-darken($color, $percentage: 15%, $bg: false)
-  &:hover
-    @if $bg
-      background-color: darken($color, $percentage)
-    @else
-      color: darken($color, $percentage)
-
-// Mixin: Hover Lighten
-// Works the same way as hover darken but lightens the color
-
-=hover-lighten($color, $percentage: 15%, $bg: false)
-  &:hover
-    @if $bg
-      background-color: lighten($color, $percentage)
-    @else
-      color: lighten($color, $percentage)
-
-// Mixin: Hover Underline
-// This one is interesting, and may need tweaking to get it to work right on the
-// intended element. Works very nicely for text, like in a span, and can animate.
-// ex. +hover-underline
-
-=hover-underline
-  border-bottom: 1px solid transparent
-  &:hover
-    border-bottom: 1px solid
-
-// Mixin: Hover Pop
-// On hover, your element pops out from the page. For scale, it takes an integer or float,
-// 1 represents 100%, 2 is 200%, etc. Optionally can also rotate, pass it a number followed by
-// "deg", like 180deg. If you pass true for shadow, it will animate in a drop shadow to add to
-// the effect
-// ex. +hover-pop(1.5)
-// ex. +hover-pop(2.6, 90deg)
-// ex. +hover-pop(1.2, 45deg, true)
-// ex. +hover-pop(1.7, $shadow: true)
-
-=hover-pop($scale, $rotate: false, $shadow: false)
-  @if $shadow
-    +box-shadow(0 0 1px transparent)
-  &:hover
-    position: relative
-    z-index: 10
-    -webkit-transform: scale($scale)
-    @if $shadow
-      +box-shadow(0 0 5px rgba(#000, .3))
-    @if $rotate
-      -webkit-transform: scale($scale) rotate($rotate)
-
-// Mixin: Hover Fade
-// On hover, fades the element's opacity down. Takes an amount as an integer between
-// 0 and 1, like opacity normally does. Recommended to be used with transition.
-// ex. +hover-fade(.5)
-
-=hover-fade($amount)
-  &:hover
-    opacity: $amount
-
-// Mixin: Hover Color
-// Will swap an elements color or background color on hover. Takes a color in any format
-// as the first argument, and a boolean indicating if you want it to be the background color
-// as the second. Also recommended to be used with transition.
-// ex. +hover-color(#D45D86)
-// ex. +hover-color($red, true)
-
-=hover-color($color, $bg: false)
-  &:hover
-    @if $bg
-      background-color: $color
-    @else
-      color: $color
-
-// To add:
-// *+click-down(pixels)* 
-// *+click-shadow(radius)* 
-// *+button-interaction(color)* 

data/lib/generators/templates/sass/modules/_reset.sass

@@ -1,238 +0,0 @@
-// ---------------------------------------
-// COMPLETE RESET
-// ---------------------------------------
-
-// This should be used as the last mixin, +global-reset, almost exclusively.
-// This is ported from Eric Meyer's html5 reset.
-
-=reset-box-model
-  margin: 0
-  padding: 0
-  border: 0
-
-=reset-font
-  font-size: 100%
-  font: inherit
-  vertical-align: baseline
-
-=reset-focus
-  outline: 0
-
-=reset-body
-  line-height: 1
-
-=reset-list-style
-  list-style: none
-
-=reset-table
-  border-collapse: collapse
-  border-spacing: 0
-
-=reset-table-cell
-  text-align: left
-  font-weight: normal
-  vertical-align: middle
-
-=reset-quotation
-  quotes: none
-  &:before, &:after
-    content: ""
-    content: none
-
-=reset-image-anchor-border
-  border: none
-
-=global-reset
-  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, 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,
-  article, aside, canvas, details, embed, 
-  figure, figcaption, footer, header, hgroup, 
-  menu, nav, output, ruby, section, summary,
-  time, mark, audio, video
-    +reset-box-model
-    +reset-font
-  body
-    +reset-body
-  ol, ul
-    +reset-list-style
-  table
-    +reset-table
-  caption, th, td
-    +reset-table-cell
-  q, blockquote
-    +reset-quotation
-  a img
-    +reset-image-anchor-border
-
-// ---------------------------------------
-// NORMALIZE
-// ---------------------------------------
-
-// Direct port from http://github.com/necolas/normalize.css
-
-=normalize
-  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
-    display: block
-
-  audio, canvas, video
-    display: inline-block
-    *display: inline
-    *zoom: 1
-
-  audio:not([controls])
-    display: none
-
-  [hidden]
-    display: none
-
-  html
-    font-size: 100%
-    overflow-y: scroll
-    -webkit-text-size-adjust: 100%
-    -ms-text-size-adjust: 100%
-
-  body
-    margin: 0
-
-  body, button, input, select, textarea
-    font-family: sans-serif
-
-  a
-    &:focus
-      outline: thin dotted
-
-    &:hover, &:active
-      outline: 0
-
-  h1
-    font-size: 2em
-
-  abbr[title]
-    border-bottom: 1px dotted
-
-  b, strong
-    font-weight: bold
-
-  blockquote
-    margin: 1em 40px
-
-  dfn
-    font-style: italic
-
-  mark
-    background: #ff0
-    color: #000
-
-  pre, code, kbd, samp
-    font-family: monospace, serif
-    _font-family: 'Courier New', monospace
-    font-size: 1em
-
-  pre
-    white-space: pre
-    white-space: pre-wrap
-    word-wrap: break-word
-
-  q
-    quotes: none
-
-    &:before, &:after
-      content: ''
-      content: none
-
-  small
-    font-size: 75%
-
-  sub, sup
-    font-size: 75%
-    line-height: 0
-    position: relative
-    vertical-align: baseline
-
-  sup
-    top: -0.5em
-
-  sub
-    bottom: -0.25em
-
-  ul, ol
-    margin-left: 0
-    padding: 0 0 0 40px
-
-  dd
-    margin: 0 0 0 40px
-
-  nav
-    ul, ol
-      list-style: none
-      list-style-image: none
-
-
-  img
-    border: 0
-    -ms-interpolation-mode: bicubic
-
-  svg:not(:root)
-    overflow: hidden
-
-  figure
-    margin: 0
-
-  form
-    margin: 0
-
-  fieldset
-    border: 1px solid #c0c0c0
-    margin: 0 2px
-    padding: 0.35em 0.625em 0.75em
-
-  legend
-    border: 0
-    *margin-left: -7px
-
-  button, input, select, textarea
-    font-size: 100%
-    margin: 0
-    vertical-align: baseline
-    *vertical-align: middle
-
-  button, input
-    line-height: normal
-
-  button, input[type='button'], input[type='reset'], input[type='submit']
-    cursor: pointer
-    -webkit-appearance: button
-    *overflow: visible
-
-  input
-    &[type="checkbox"], &[type="radio"]
-      box-sizing: border-box
-      padding: 0
-
-    &[type="search"]
-      -webkit-appearance: textfield
-      -moz-box-sizing: content-box
-      -webkit-box-sizing: content-box
-      box-sizing: content-box
-
-      &::-webkit-search-decoration
-        -webkit-appearance: none
-
-  button::-moz-focus-inner, input::-moz-focus-inner
-    border: 0
-    padding: 0
-
-  textarea
-    overflow: auto
-    vertical-align: top
-
-  table
-    border-collapse: collapse
-    border-spacing: 0

data/lib/generators/templates/sass/modules/_tables.sass

@@ -1,76 +0,0 @@
-// Mixin: Table
-// Ported directly from Twitter Bootstrap, as they did an excellent job with the tables.
-// Take three fairly self-explanitory arguments, all boolean. 1st makes the table bordered,
-// 2nd adds zebra striping, and the 3rd indiated whether the table is condensed or not.
-
-// TODO: Add options to customize colors
-
-=table($border: true, $striped: true, $condensed: false)
-
-  max-width: 100%
-  border-collapse: collapse 
-  border-spacing: 0
-  width: 100%
-  margin-bottom: 18px
-
-  th, td
-    padding: 8px
-    line-height: 18px
-    text-align: left
-    vertical-align: top
-    border-top: 1px solid #ddd
-
-  th
-    font-weight: bold
-
-  thead th
-    vertical-align: bottom
-
-  thead:first-child tr th, thead:first-child tr td
-    border-top: 0
-
-  tbody + tbody
-    border-top: 2px solid #ddd
-  
-  @if $condensed
-    th, td
-      padding: 4px 5px
-  
-  @if $border
-    border: 1px solid #ddd
-    border-collapse: separate
-    *border-collapse: collapsed
-    +round(4px)
-
-    th + th, td + td, th + td, td + th
-      border-left: 1px solid #ddd
-
-    thead:first-child tr:first-child th, tbody:first-child tr:first-child th, tbody:first-child tr:first-child td
-      border-top: 0
-
-    thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child
-      +round(4px 0 0 0)
-
-    thead:first-child tr:first-child th:last-child, tbody:first-child tr:first-child td:last-child
-      +round(0 4px 0 0)
-
-    thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child
-      +round(0 0 0 4px)
-
-    thead:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child
-      +round(0 0 4px 0)
-  
-  @if $striped
-    tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th
-      background-color: #f9f9f9
-
-    tbody tr:hover td, tbody tr:hover th
-      background-color: #f5f5f5
-
-// Additive Mixin: Tables
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Makes tables look awesome by default. Highly recommended if you have tables on your site at all.
-
-=tables
-  table
-    +table

data/lib/generators/templates/sass/modules/_typography.sass

@@ -1,367 +0,0 @@
-// -----------------------------------------------------
-// Typography
-// -----------------------------------------------------
-
-// Mixin: Text Margin
-// Pass this guy a font size (pixels - no units) and he will apply margins to the element at a ratio
-// most pleasing to the gods.
-// ex. +text-margin(14)
-
-=text-margin($size)
-  margin: #{$size/1.2}px 0
-
-// Mixin: P
-// Takes care of all your paragraph needs. Pass it an optional size and it will
-// do some golden ratio math and give you a nice line height. Pass it a width and it will
-// be even more accurate. And you can turn off margins if you'd like too.
-
-// math via http://www.pearsonified.com/2011/12/golden-ratio-typography.php
-
-// ex. +p
-// ex. +p(18)
-// ex. +p(14, true, 500px)
-
-=p($size: $font-size, $margins: true, $width: false)
-
-  $gr: 1.61803399
-  $height: $size * $gr
-
-  @if $width
-    $height: $gr - (1 / (2 * $gr)) * (1 - $width / ($width * $gr))
-    width: $width
-
-  @if $margins
-    +text-margin($size)
-  
-  line-height: #{round($height)}px
-  font-size: $size + px
-  font-size: $size*.0615384 + rem // this is questionable, so be careful
-
-// Mixin: Size
-// An alias for 'font-size'
-// ex. +size(16px)
-
-=size($size)
-  font-size: $size
-
-// Mixin: Fs
-// An alias for 'font-size'
-// ex. +size(16px)
-
-=fs($size)
-  font-size: $size
-
-// Mixin: Uppercase
-// An alias for 'text-transform: uppercase'
-// ex. +uppercase
-
-=uppercase
-  text-transform: uppercase
-
-// Mixin: Upcase
-// An alias for 'text-transform: uppercase'
-// ex. +upcase
-
-=upcase
-  +uppercase
-
-// Mixin: Lowercase
-// An alias for 'text-transform: lowercase'
-// ex. +lowercase
-
-=lowercase
-  text-transform: lowercase
-
-// Mixin: Downcase
-// An alias for 'text-transform: lowercase'
-// ex. +downcase
-
-=downcase
-  +lowercase
-
-// Mixin: Small
-// Makes your text smaller and a little lighter. Great on <small /> tags.
-// ex. +small
-
-=small
-  font-size: 55%
-  opacity: .6
-  font-weight: normal
-
-// Internal Mixin: Heading
-// For internal use within headings
-
-=heading($color: #333)
-  color: $color
-  text-rendering: optimizelegibility
-  font-weight: bold
-
-// Internal Mixin: Heading Size
-// Gives your headings ratios custom crafted in house from the finest stock of mathematics.
-// Feed it a size and it will get you rem and some nice header-y margins.
-
-=heading-size($size)
-  font-size: $size + px
-  font-size: $size*.0615384 + rem // this is questionable
-  +text-margin($size/2)
-
-// Mixin Set: h1, h2, h3, h4, h5, h6
-// These provide nice defaults for headings based off the default font size.
-// The can scale infinitely, and work best when matched to their corresponding html elements.
-// ex. +h3
-
-=h1
-  +heading
-  +heading-size($font-size*2.4)
-  line-height: 1.2em
-
-=h2
-  +heading
-  +heading-size($font-size*1.8)
-  line-height: 1.2em
-
-=h3
-  +heading
-  +heading-size($font-size*1.5)
-  line-height: 1.2em
-
-=h4
-  +heading
-  +heading-size($font-size*1.3)
-  line-height: 1.2em
-
-=h5
-  +heading
-  +heading-size($font-size)
-  line-height: 1.2em
-
-=h6
-  +heading
-  +heading-size($font-size*.9)
-  text-transform: uppercase
-  line-height: 1.2em
-
-// Mixin: Link
-// A nice default style for links. Accepts a color and a style. Color can be anything,
-// style can be underline, darken, lighten, or glow, each giving it a different style
-// of interaction when hovered. More suggestions here welcome.
-// ex. +link
-// ex. +link($green)
-// ex. +link(#57777E, glow)
-
-=link($color: $blue, $style: underline)
-  color: $color
-  text-decoration: none
-  +transition
-  @if $style == underline
-    +hover-darken($color)
-    +hover-underline
-  @else if $style == darken
-    +hover-darken($color, 20%)
-  @else if $style == lighten
-    +hover-lighten($color)
-  @else if $style == glow
-    &:hover
-      text-shadow: 0 0 7px rgba($color, .6)
-  &:visited
-    opacity: .8
-
-// Mixin: Reset Link
-// Sometimes my link mixin of the browser defaults will give you questionable link defaults
-// that you don't want on certain elements. This guy gets rid of that.
-// ex. +reset-link
-
-=reset-link
-  color: inherit
-  border: none
-  text-decoration: none
-  &:hover
-    color: inherit
-    border: none
-    text-decoration: none
-  &:visited
-    opacity: 1
-
-// Mixin: Text Selection
-// This guy sets the text select color intelligently based on the $hilight-color variable
-// found in _roots.sass. If you really want, you can pass it a color override too
-// ex. +text-selection()
-
-=text-selection($color: $hilight-color)
-  
-  $dark-text: if( lightness($color) < 60%, true, false )
-  $text-color: if( $dark-text, $white, #494949 )
-  
-  ::-moz-selection
-    background: $color
-    color: $text-color
-  ::selection
-    background: $color
-    color: $text-color
-
-// Mixin: Ul
-// A nice default for list styles. More or less the same as browser defaults, scales nicely.
-// You can pass it any style that list-style-type would normally take. Defaults to disc.
-// Use this on a ul element por favor.
-// ex. +ul
-// ex. +ul(square)
-
-=ul($style: disc)
-  margin: 5px 15px
-  padding-left: 1em
-  li
-    list-style-type: $style
-    padding: 2px 0
-
-// Mixin: Ol
-// A nice default for list styles. More or less the same as browser defaults, scales nicely.
-// You can pass it any style that list-style-type would normally take. Defaults to decimal.
-// Use this on a ol element por favor.
-// ex. +ol
-// ex. +ol(upper-roman)
-
-=ol($style: decimal)
-  margin: 5px 18px
-  padding-left: 1em
-  li
-    list-style-type: $style
-    padding: 2px 0
-
-// Mixin: Inline List
-// For when you need your list to be horizontal. Pass it the spacing you want between list
-// elements, whatever units you'd like. Defaults to 20px
-// ex. +inline-list
-// ex. +inline-list(15px)
-
-=inline-list($spacing: 20px)
-  +group
-  margin: 0
-  padding: 0
-  li
-    float: left
-    margin-right: $spacing
-    list-style-type: none
-  li:last-child
-    margin-right: 0
-
-// Mixin: Reset List
-// If you're tired of all the list shenanigans and want to get rid of them for this special
-// list you're working on, this is your guy. Resets the margins, padding, and style.
-// ex. +reset-list
-
-=reset-list
-  margin: 0
-  padding: 0
-  li
-    list-style-type: none
-    padding: 0
-    margin: 0
-
-// Mixin: Blockquote
-// Nice styles for a blockquote, and even puts a nice hyphen in before your citation.
-// Use with a <p> and <cite> inside for best results.
-// ex. +blockquote
-
-// TODO: Add a couple different styles here
-
-=blockquote
-  p
-    font-weight: 300
-    font-size: 127%
-    line-height: 127%
-  cite
-    color: #888888
-    &:before
-      content: '\2014'
-
-// -----------------------------------------------------
-// Mixins that add styles to tags on your page actively
-// -----------------------------------------------------
-
-// Additive Mixin: Base
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// This is an essential mixin. You want this on your page. Sets your font stack,
-// size, and colors based on the settings file and makes sure that your text is a great looking
-// as possible. You can override any of the params, but there is really no reason to.
-// ex. +base
-
-=base($fonts: $font-stack, $size: $font-size, $color: $font-color)
-  body
-    font-family: $fonts
-    font-size: #{$size*6.46}unquote("%")
-    font-size: #{$size}px
-    color: $color
-    -webkit-font-smoothing: antialiased
-    -webkit-text-size-adjust: 100%
-    -ms-text-size-adjust: 100%
-
-// Additive Mixin: Headers
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Adds roots' wonderful scaling header styles to your <hx> tags.
-// ex. +headers
-
-=headers
-  h1
-    +h1
-
-  h2
-    +h2
-
-  h3
-    +h3
-
-  h4
-    +h4
-
-  h5
-    +h5
-
-  h6
-    +h6
-
-// Additive Mixin: Lists
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Adds roots styles to ul and ols.
-// ex. +lists
-
-=lists
-  ul
-    +ul
-  ol
-    +ol
-
-// Additive Mixin: Bold-Italic
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Adds in bold and italic styles to the right tags if you did a page reset.
-// ex. +bold-italic
-
-=bold-italic
-  b
-    +bold
-  i
-    +italic
-  strong
-    +bold
-  em
-    +italic
-
-// Additive Mixin: Typography
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Adds roots styles to bold and italic elements, headers, paragrapgs, small text, links, lists,
-// and blockquotes. Got all your basic elements covered.
-// ex. +typography
-
-=typography
-  +bold-italic
-  +headers
-  +text-selection
-  +lists
-
-  p
-    +p($font-size)
-  small
-    +small
-  a
-    +link
-  blockquote
-    +blockquote