roots-rails 0.0.1.alpha

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

@@ -0,0 +1,205 @@
+// -----------------------------------------------------
+// UI
+// -----------------------------------------------------
+
+// Mixin: Area
+// Just a nice little area for you to put content in. Rounded corners, box with light
+// grey background by default. You can pass it a different color if you'd like.
+// ex. +area
+// ex. +area($red) -- not recommended
+
+=area($color: #F5F5F5)
+  +box-shadow(inset 0 0 6px rgba(#000,.05))
+  background-color: $color
+  padding: 15px
+  border-radius: 4px
+  behavior: asset-url('pie.htc', javascript)
+  margin: 20px 0
+
+// Mixin: Notice
+// A notice for you. Best used for flash alerts, this was originally an internal
+// mixin, but you can use it if you'd like. Give it a color and a width and it will
+// output a nice lightly gradiented box for your notice to reside in.
+// ex. +notice
+// ex. +notice(500px, $blue)
+
+=notice($width: false, $color: #EEEEEE)
+  +simple-gradient($color, 3%)
+  +group
+  border-radius: 5px
+  padding: 15px
+  border: 1px solid darken($color, 10%)
+  -webkit-box-shadow: 1px 1px 3px rgba(#000,.05)
+  position: relative
+
+  @if $width
+    width: $width
+
+// Mixin: Flash
+// This is really great for rails flash messages, or really any little notifications like
+// 'logged in!', 'logged out!', or 'errarrrr!'. Takes one of four types and colors them nicely
+// for you - notice, success, warning, or error. Defaults to notice
+// ex. +flash
+// ex. +flash(error )
+
+=flash($type: notice)
+  @if $type == notice
+    +notice($color: #6CC5FA)
+    color: #fff
+    font-weight: bold
+    text-shadow: 1px 1px 1px rgba(#000,.2)
+  @if $type == success
+    +notice($color: #7BDEA3)
+    color: #fff
+    font-weight: bold
+    text-shadow: 1px 1px 1px rgba(#000,.2) 
+  @if $type == warning
+    +notice($color: #FAE677)
+    font-weight: bold
+    text-shadow: 1px 1px 1px rgba(#fff,.2)
+  @if $type == error
+    +notice($color: #E77C70)
+    color: #fff
+    font-weight: bold
+    text-shadow: 1px 1px 1px rgba(#000,.2)
+
+// Mixin: Breadcrumb
+// Lay this one down on a list and it will turn the list into a breadcrumb-y thing. By default
+// separates with a slash, but you can feed it any character. Second param is spacing between the
+// list items, and the third is the color of the divider. All are optional.
+// ex. +breadcrumb
+// ex. +breadcrumb(">")
+// ex. +breadcrumb("-", 25px, $red)
+
+=breadcrumb($character: "/", $spacing: 10px, $divider-color: #CDCDCD)
+  +inline-list($spacing)
+  li:after
+    content: $character
+    margin-left: $spacing
+    color: $divider-color
+  li:last-child:after
+    content: ""
+
+// Mixin: Bubble
+// If you're anything like me, you always seem to find your designers putting little bubbles in things.
+// This mixin takes care of that problem, and makes a nice bubble with 100% css.
+// All parameters optional - accepts width, pointer position (left, center, or right), and a color.
+// ex. +bubble
+// ex. +bubble($color: $blue)
+// ex. +bubble(center, #57777E)
+// ex. +bubble(right, #5740A1, 500px)
+
+=bubble($pointer: left, $color: #EEEEEE, $width: false)
+  +notice($width, $color)
+
+  &:after
+    +triangle(down, 10px, darken($color, 3%))
+    position: absolute
+    bottom: -9px
+    @if $pointer == center
+      @if $width == false
+        @warn "you must specify a width to center the pointer"
+      left: $width/2
+    @else if $pointer == right
+      right: 15px
+  
+  &:before
+    +triangle(down, 10px, darken($color, 10%))
+    position: absolute
+    bottom: -11px
+    @if $pointer == center
+      @if $width == false
+        @warn "you must specify a width to center the pointer"
+      left: $width/2
+    @else if $pointer == right
+      right: 15px
+
+// Mixin: Figure
+// For when you want to *semantically* show an image. Put this on your <figure /> element and it will style
+// the nested image and figcaption in a wonderfully pleasing manner. Takes a color (for the thin outline), and
+// if you want, dimensions of the image as a space separated list.
+// ex. +figure
+// ex. +figure($blue)
+// ex. +figure(#D29E78, 100px 250px)
+// ex. +figure($dimensions: 100px 250px)
+
+=figure($color: $default, $dimensions: false)
+  @if type-of($dimensions) == list
+    display: block
+    width: nth($dimensions, 1)
+    height: nth($dimensions, 2)
+  @else if $dimensions == false
+    +inline-block
+  @else
+    @warn "Pass dimensions as false or a space-spearated list, as such: +figure($dimensions: 100px 250px) or +figure($blue, 100px 250px)"
+  img
+    display: block
+    padding: 4px
+    +round-corners(3px)
+    border: 1px solid rgba($color, .6)
+  figcaption
+    padding: 10px 0
+    text-align: center
+    font-style: italic
+
+// Mixin: Nav
+// Makes a fantastic nav bar for you that doesn't look exactly like bootstrap's and you can
+// customize it as well. Params: fixed (boolean), color (recommend something dark), link color,
+// and size, which is an integer from one up, and scales every aspect of the nav bar for you.
+// All have defaults.
+// This mixin is meant to be placed on a <nav> element that contains a ul.
+// ex. +nav
+// ex. +nav(false, #444, $red, 3)
+
+=nav($fixed: true, $color: #222, $link-color: #fff, $size: 1)
+  display: block
+  z-index: 10
+  +simple-noise-gradient($color, 5%)
+  +group
+  +box-shadow(0 3px 3px rgba(0,0,0,.15))
+  border-bottom: 1px solid rgba(darken($color, 15%),.7)
+  height: #{round(($size + 14)*2.866)}px
+  width: 100%
+  font-size: #{$size + 14}px
+  @if $fixed
+    position: fixed
+  @else
+    position: relative
+
+  ul
+    float: right
+    margin: 0
+    padding: #{($size + 14)*.8}px
+    color: $link-color
+
+    li
+      list-style-type: none
+      margin-right: 30px
+      float: left
+
+      a
+        color: $link-color
+        border: none
+        cursor: pointer
+
+        &:hover
+          color: darken($link-color, 20%)
+          border: none
+
+// Additive Mixin: Flash Notices
+// WARNING: Creates classes in your css and styles them - not to be used inside an element.
+// Super convenient flash notices. Anything with .flash on it will display as a notice, and if
+// you add the additional class .error, .warning, .notice, or .success, it will display the
+// appropriate color background for the message.
+// ex. +flash-notices
+
+=flash-notices
+  .flash
+    &.error
+      +flash(error)
+    &.warning
+      +flash(warning)
+    &.notice
+      +flash(notice)
+    &.success
+      +flash(success)

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

@@ -0,0 +1,372 @@
+// -----------------------------------------------------
+// Utilities
+// -----------------------------------------------------
+
+// Mixin: Prefix
+// Pass this a key and a value and it will put all the browser prefixes on it.
+// ex. +prefix(box-shadow, 0 0 3px #000)
+// ex. +prefix(transition, all .3s ease)
+
+=prefix($prop, $val)
+  -webkit-#{$prop}: $val
+  -moz-#{$prop}: $val
+  -o-#{$prop}: $val
+  -ms-#{$prop}: $val
+  #{$prop}: $val
+
+// Mixin: Transition
+// A shortcut for prefixed transitions with an intelligent default. If you want to pass it multiple
+// comma-separated transitions you must put your parameters in quotes (or the commas get confused)
+// ex. +transition
+// ex. +transition(color 1s ease)
+// ex. +transition("color, background 1s ease")
+  
+=transition($params: all .3s ease-in-out)
+  +prefix(transition, unquote($params))
+
+// Mixin: Text Shadow
+// A shortcut for prefixed text-shadows with an intelligent default. If you want to pass it multiple
+// comma-separated shadows you must put your parameters in quotes (or the commas get confused)
+// ex. +text-shadow
+// ex. +text-shadow(1px 1px 3px $blue)
+// ex. +text-shadow("1px 1px 3px $blue, inset 2px 0 5px rgba(0,0,0,.5)")
+
+=text-shadow($params:0 0 1px rgba(0,0,0,.1))
+  +prefix(text-shadow, unquote($params))
+
+// Mixin: Box Shadow
+// A shortcut for prefixed box-shadows with an intelligent default. If you want to pass it multiple
+// comma-separated shadows you must put your parameters in quotes (or the commas get confused)
+// ex. +box-shadow
+// ex. +box-shadow(1px 1px 3px $blue)
+// ex. +box-shadow("1px 1px 3px $blue, inset 2px 0 5px rgba(0,0,0,.5)")
+
+=box-shadow($params)
+  +prefix(box-shadow, unquote($params))
+  behavior: asset-url('test.htc', javascript)
+
+// Mixin: Opacity
+// I know, it seems silly. But every time you go to IE testing you will be thanking yourself for
+// using this instead of the normal opacity declaration. Takes the same params as opacity would normally
+// ex. +opacity(.6)
+
+=opacity($opacity)
+  filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})")
+  opacity: $opacity
+
+// Mixin: Rotate
+// Prefixed rotation with IE compatibility. Takes a degree value followed by "deg"
+// ex. +rotate(45deg)
+
+=rotate($params)
+  +prefix(transform, rotate($params))
+  behavior: asset-url('pie.htc', javascript)
+
+// Mixin: Rounded
+// Unless you are working with a ridiculously large element, this will round the corners
+// as much as css will allow. Even in IE.
+// ex. +rounded
+
+=rounded
+  border-radius: 999px
+  behavior: asset-url('pie.htc', javascript)
+
+// Mixin: Round Corners
+// Take a guess what this does. Aliases border-radius, works in IE.
+// ex. +round-corners(5px)
+
+=round-corners($px)
+  border-radius: $px
+  behavior: asset-url('pie.htc', javascript)
+
+// Mixin: Round
+// Take a guess what this does. Aliases border-radius, works in IE.
+// ex. +round(5px)
+
+=round($px)
+  +round-corners($px)
+
+// Mixin: Border
+// Alias of border, but with an intelligent default
+
+=border($params: 1px solid)
+  border: $params
+
+// Mixin: B
+// Alias of border, but with an intelligent default. Intended for quick debugging use.
+// I used to spend a lot of time typing "border: 1px solid", but no more!
+// ex. +b
+
+=b
+  +border
+
+// Mixin: Bg
+// Alias for background (with images), makes it a little quicker. Takes three arguments, the first is
+// the image path, second is background-position if you want, third is background repeat.
+// ex. +bg(../img/test.png)
+// ex. +bg(../img/other.jpg, center center, repeat)
+
+=bg($path, $position: unquote(""), $repeat: no-repeat)
+  background: url(unquote($path)) $position $repeat
+
+// Mixin: Bold
+// It's just faster to type +bold than font-weight: bold
+// ex. +bold
+
+=bold
+  font-weight: bold
+
+// Mixin: Italic
+// It's just faster to type +italic than font-style: italic
+// ex. +bold
+
+=italic
+  font-style: italic
+
+// Mixin: Columns
+// For css3 columns. Takes column count (int), column gap (px, em), column width (px, em), and
+// a border-like declaration if you want a column rule. This follows exactly with the css3 spec,
+// it's just quicker, prefixed, and shortened.
+// ex. +columns
+// ex. +columns(5)
+// ex. +columns(8, 15px, 200px, 1px solid $red)
+
+=columns($count: 3, $gap: 30px, $width: false, $rule: false)
+  +prefix(column-count, $count)
+  +prefix(column-gap, $gap)
+  @if $width
+    +prefix(column-width, $width)
+  @if $rule
+    +prefix(column-rule, $rule)
+
+// Mixin: Avoid Column Break
+// If you have a list that is broken into columns, this will make sure that the list item
+// is not split across columns awkwardly. Works only in webkit at the moment.
+
+=avoid-column-break
+  +prefix(column-break-inside, avoid)
+
+// Mixin: Triangle
+// One of my favorites. Makes a little css triangle for you. Pass it a direction (up, down, left, right),
+// size (in pixels), and a color.
+// ex. +triangle
+// ex. +triangle(down, 15px, $blue)
+
+=triangle($direction: up, $size: 10px, $color: #000)
+  width: 0
+  height: 0
+  @if $direction == up
+    border-left: $size solid transparent
+    border-right: $size solid transparent
+    border-bottom: $size solid $color
+  @else if $direction == down
+    border-left: $size solid transparent
+    border-right: $size solid transparent
+    border-top: $size solid $color
+  @else if $direction == left
+    border-top: $size solid transparent
+    border-bottom: $size solid transparent
+    border-right: $size solid $color
+  @else if $direction == right
+    border-top: $size solid transparent
+    border-bottom: $size solid transparent
+    border-left: $size solid $color
+
+// Mixin: Ir
+// Image replacement. Pass it an image path and the image's dimensions and any text will be hidden
+// in the div and it will show an image instead. Uses the fanciest new method, props to Paul Irish
+// Avoid any possibility of an error by quoting the image path. Also looks cleaner.
+// ex. +ir("../img/test.jpg", 200px 400px)
+
+=ir($img-path: false, $dimensions: false)
+  font: 0/0 a
+  text-shadow: none
+  color: transparent
+  @if $img-path
+    +bg(unquote($img-path))
+  @if type-of($dimensions) == list
+    width: nth($dimensions, 1)
+    height: nth($dimensions, 3)
+  @else if $dimensions == false
+    // all is well
+  @else
+    @warn "Dimenions takes a space-separated list of values - order: width, height. Ex: +ir('img.jpg', 100px 150px)"
+
+
+// Mixin: Group
+// This is the clearfix with a better name. I use this mixin like there's no tomorrow. It's like using
+// overflow: hidden, except it doesn't hide the overflow. Awesome for wrangling floats, and really quick now.
+// ex. +group
+
+=group
+  zoom: 1
+  &:before, &:after
+    content: ""
+    display: table
+  &:after
+    clear: both
+
+// Mixin: Clearfix
+// In case you can't leave this crazy word in the past. This is an alias for group.
+// ex. +clearfix
+
+=clearfix
+  +group
+
+// Mixin: Inline Block
+// Cross browser inline block display. Saves many IE headaches.
+// ex. +inline-block
+
+=inline-block
+  display: -moz-inline-stack
+  display: inline-block
+  vertical-align: top
+  zoom: 1
+  *display: inline
+
+// Mixin: Media
+// Based on Nicole Sullivan's media class, made famous by Facebook
+// http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
+
+// Put this on a parent and it will split the first two children left and right, like you would with perhaps
+// a comment with an avatar to the left. Pass it a margin between the two.
+// Explained fully here: http://carrotblog.com/css-patterns-evolved/
+
+// This mixin works right when the element you apply it to has two or three direct children
+// The first one will float to the left, the second one will be to the right of the first, and third will go farthest right
+// ex. +split
+// ex. +split(15px)
+// ex. +split(15px 10px)
+
+=media($margin: 10px)
+  
+  $left: $margin
+  $right: $margin
+
+  @if type-of($margin) == list
+    $left:  nth($margin, 1)
+    $right: nth($margin, 2)
+
+  overflow: hidden
+  zoom: 1
+
+  & > *
+    overflow: hidden
+    zoom: 1
+  & > *:first-child
+    float: left
+    margin-right: $right
+  & > *:nth-child(3)
+    float: right
+    margin-left: $left
+
+// Mixin: Raquo
+// Because technically raquo is not semantic, it's easier to add it like this.
+// ex. +raquo
+
+=raquo
+  &:after
+    content: " \00BB"
+
+// Mixin: D
+// I find myself writing "width: blah blah px, height: blah px" all the time. This makes it so so
+// much faster. The arguments it accepts are very flexible. You can pass it one number and it will set that
+// to the width and height. You can give it units, and if you don't it will assume pixels. You can pass
+// it two numbers and it will set the first to width and the second to height. It's very convenient.
+// ex. +d(50) => width: 50px; height: 50px;
+// ex. +d(1.5em 2em) => width: 1.5em; height: 2em
+
+=dimensions($numbers)
+  @if type-of($numbers) == list
+    @if unitless(nth($numbers, 1))
+      width: #{nth($numbers, 1)}px
+      height: #{nth($numbers, 2)}px
+    @else
+      width: nth($numbers, 1)
+      height: nth($numbers, 2)
+  @else if type-of($numbers) == number
+    @if unitless($numbers)
+      width: #{$numbers}px
+      height: #{$numbers}px
+    @else
+      width: $numbers
+      height: $numbers
+  @else
+    @warn "Please pass in a value or list of two values"
+
+// Mixin: D
+// A shorter alias for +dimensions, because I use it so so often.
+
+=d($arg)
+  +dimensions($arg)
+
+// Mixin: Debug
+// Debugging tool - drop this at root level in your css and it will put borders on every element so
+// you can see what's up. It will also flag them if you made mistakes like put in inline styles, forgot
+// an alt on an image, left the alt blank, etc. For god's sake don't use this in production.
+
+// all credit for this goes to intuit.css, from which I adapted it (and improved it a bit)
+// https://github.com/csswizardry/inuit.css
+
+=debug
+  html
+    
+    div
+      border: 1px solid green
+
+    [style], style
+      border: 5px solid yellow
+
+    style
+      border: block
+
+    img
+      border: 5px solid red
+
+    img[alt]
+      border-color: green
+
+    img[alt=""]
+      border-color: yellow
+
+    a
+      border: 5px solid yellow
+
+    a[title]
+      border-color: green
+
+    a[href="#"]
+      outline-color: yellow
+
+    a[target]
+      border-color: red
+
+    [class=""], [id=""]
+      border: 5px solid yellow
+
+// Mixin: Keyframes
+// An easier way to do keyframe animations cross browser. Accepts an animation name
+// and a block.
+// ex. +keyframes(fade-out)
+//        0%
+//          opacity: 1
+//        100%
+//          opacity: 0
+
+// Check out the animations module for a bunch of sweet presets you can load if you want.
+
+=keyframes($name)
+  @-moz-keyframes #{$name}
+    @content
+  @-webkit-keyframes #{$name}
+    @content
+  @-ms-keyframes #{$name}
+    @content
+
+// Mixin: Animation
+// How you actually implement the animation. Takes animation name, duration, and how to handle
+// looping. works the same way as the official, just prefixes it.
+// ex. +animation(fade-out, 5s, infinite)
+
+=animation($params)
+  +prefix(animation, $params)