cinnamon 0.0.1

data/stylesheets/_cinnamon.sass

@@ -0,0 +1,9 @@
+@import cinnamon/core_additions
+@import cinnamon/default_settings
+@import cinnamon/utilities
+@import cinnamon/type
+@import cinnamon/grid
+@import cinnamon/layout
+@import cinnamon/graphics
+@import cinnamon/fx
+@import cinnamon/reset

data/stylesheets/cinnamon/_base.sass

@@ -0,0 +1,29 @@
+$base_text_font:                Helvetica, Arial, Verdana, sans-serif !default
+$base_text_color:               hsl(0,0,10%) !default
+
+$base_text_size:                12px !default
+$unitless_base_text_size:       $base_text_size / 1px
+
+$px2em:                         1em / $base_text_size
+
+$base_leading:                  8px !default
+$unitless_base_leading:         $base_leading / 1px
+
+$base_line_height:              $base_text_size + $base_leading
+//$unitless_base_line_height: $base_line_height / 1px
+
+$vertical_rhythm:               $px2em * $base_line_height
+$unitless_vertical_rhythm:      $vertical_rhythm / 1em
+
+$grid:                          $base_line_height
+$gutter:                        $grid / 4 !default
+
+
+$faster:                        150ms !default
+$fast:                          250ms !default      
+$normal:                        500ms !default
+$slow:                          750ms !default
+
+
+$default_vertical_alignment: top
+$override_string: !important

data/stylesheets/cinnamon/_core_additions.sass

@@ -0,0 +1,2 @@
+@import core_additions/css3
+@import core_additions/reset

data/stylesheets/cinnamon/_fx.sass

@@ -0,0 +1,2 @@
+@import fx/hover
+@import fx/skin

data/stylesheets/cinnamon/_graphics.sass

@@ -0,0 +1 @@
+@import graphics/shapes

data/stylesheets/cinnamon/_grid.sass

@@ -0,0 +1,2 @@
+@import grid/sizing
+@import grid/translations

data/stylesheets/cinnamon/_layout.sass

@@ -0,0 +1,3 @@
+@import layout/utilities
+@import layout/effects
+@import layout/flow

data/stylesheets/cinnamon/_type.sass

@@ -0,0 +1 @@
+@import type/type

data/stylesheets/cinnamon/_utilities.sass

@@ -0,0 +1 @@
+@import utilities/misc

data/stylesheets/cinnamon/core_additions/_css3.sass

@@ -0,0 +1,2 @@
+=user-select($value)
+    +experimental("user-select",$value)

data/stylesheets/cinnamon/core_additions/_reset.sass

@@ -0,0 +1,21 @@
+a
+    +unstyled-link
+    cursor: pointer 
+
+p, h1, h2, h3, h4, h5, h6, ul
+    +flush("y")
+
+p,ul
+    +push-top(1)
+
+ul
+    list-style: square
+ol
+    list-style: decimal
+
+textarea
+    border: none
+*
+    outline: none !important
+mark
+    background: none

data/stylesheets/cinnamon/fx/_hover.sass

@@ -0,0 +1,84 @@
+@mixin fx-indirect-model($indirect_target,$property,$normal: false,$hover:false,$active:false,$speed:$fast)
+    #{$indirect_target} 
+        #{$property}: $normal
+
+    @if $speed
+        #{$indirect_target}
+            +transition($property,$speed)
+
+    @if $hover
+        &:hover
+            #{$indirect_target}
+                #{$property}: $hover
+
+    @if $active
+        &:active
+            #{$indirect_target}
+                #{$property}: $active
+
+@mixin fx-model($property,$normal: false,$hover:false,$active:false,$speed:$fast)
+    #{$property}: $normal
+
+    @if $speed
+        +transition($property,$speed)
+
+    @if $hover
+        &:hover
+            #{$property}: $hover
+
+    
+    @if $active
+        &:active
+            #{$property}: $active
+
+@mixin fx-block-color( $bg_color, $text_color ) 
+    color: $text_color
+    background-color: $bg_color 
+
+@mixin fx-text-decorate( $text_color, $decoration: "underline")
+    color: $text_color
+    text-decoration: $decoration
+
+@mixin fx-block-color-hover($bg_color,$text_color, $padding: 1/3, $radius: 1/10) //todo create option to animate padding or set left backward
+    display: block  
+    +transition("background-color, color",$faster)
+    +pad($padding, $padding*1.25)
+    +push(-$padding*1.25)
+    +border-radius($grid*$radius)
+    &:hover
+        +fx-block-color($bg_color,$text_color)
+
+@mixin decoration-hover($color, $decoration: underline)
+    color: $color
+    &:hover
+        text-decoration: $decoration
+                
+@mixin colored-hover($color, $speed: $faster)
+    +transition("color",$speed)
+    &:hover
+        color: $color!important
+
+@mixin colored-interaction($hover_color, $active_color, $speed: $faster)
+    +colored-hover($hover_color, $speed)
+    &:active
+        // a click occurs over a very short time, if you want to try to see the transition color to its climax then the duration should be no longer than what a click is
+        +transition("color",10ms)
+        color: $active_color!important
+
+@mixin colored-link($normal_color, $active_color, $speed: $faster)
+    color: $normal_color
+    +colored-interaction($active_color,$normal_color, $speed)
+
+@mixin fx-opacity($normal, $hover, $active: false, $speed:$fast)
+    +fx-model("opacity",$normal,$hover,$active,$speed)
+
+@mixin fx-indirect-opacity($indirect_target,$normal, $hover, $active: false, $speed:$fast)
+    +fx-indirect-model($indirect_target,"opacity",$normal,$hover,$active,$speed)
+
+@mixin fx($e, $aspect, $a, $b, $animate: false, $speed: $fast)
+    @if $animate
+        +transition($aspect, $speed)
+    #{$aspect}: $a
+    &:#{$e}
+        #{$aspect}: $b
+        

data/stylesheets/cinnamon/fx/_skin.sass

@@ -0,0 +1,27 @@
+@mixin unstyled-list
+    margin: 0
+    padding: 0
+    li
+        list-style: none
+
+@mixin unstyled-button
+    border: none
+    background: none
+    padding: 0
+    +box-sizing("content-box")
+
+@mixin frame($bg_color: $base_tone, $pady:1, $padx: false)
+    background-color: $bg_color
+    @if $padx == false
+        +pad($pady)
+    @else
+        +pad($pady,$padx)
+
+@mixin overlay($z: 100 )
+    z-index: $z
+    position: absolute
+
+@mixin overlay-container($selector, $z:100)
+    position: relative
+    #{$selector}
+        +overlay($z)

data/stylesheets/cinnamon/graphics/_shapes.sass

@@ -0,0 +1,20 @@
+=rect($x, $y:false, $override:"")
+    @if $y == $override_string
+        $override: $y
+        $y: $x        
+    @else if not $y
+        $y: $x
+
+    +span($x, $override)
+    +peak($y, $override)
+
+=circ($x, $y:false, $override:"")
+    @if $y == $override_string
+        $override: $y
+        $y: $x        
+    @else if not $y
+        $y: $x
+
+    +span($x, $override)
+    +peak($y, $override)
+    +border-radius($x,$y)

data/stylesheets/cinnamon/grid/_sizing.sass

@@ -0,0 +1,14 @@
+=grid-unit-base($type,$side,$n,$override:"")
+    $property: $type
+    @if $side
+        $property: #{$type}-#{$side}
+    @if unitless($n)
+        #{$property}: ($grid * $n) + ( ($n * $gutter) - $gutter ) #{$override}
+    @else
+        #{$property}: $n #{$override}
+        
+=span($n, $override:"")
+    +grid-unit-base("width",false,$n,$override)
+
+=peak($n, $override:"")
+    +grid-unit-base("height",false,$n,$override)

data/stylesheets/cinnamon/grid/_translations.sass

@@ -0,0 +1,103 @@
+=translate-base($type, $t:false, $r: false, $b: false, $l: false, $override: "")
+    @if $t
+        +grid-unit-base($type, top, $t, $override)
+    @if $r
+        +grid-unit-base($type, right, $r, $override)
+    @if $b
+        +grid-unit-base($type, bottom, $b, $override)
+    @if $l
+        +grid-unit-base($type, left, $l, $override)
+                                                          
+=translate-corner($type, $corner, $m, $n:false, $override: "")
+    @if not $n
+        $n: $m
+    @else if $n == $override_string
+        $override: $n
+        $n: $m
+
+    @if $corner == tl
+        +translate-base($type, $m,false,false,$n,$override)
+    @if $corner == tr
+        +translate-base($type, $m,$n,false,false,$override)
+    @if $corner == bl
+        +translate-base($type, false,$n,$m,false,$override)
+    @if $corner == bl
+        +translate-base($type, false,false,$m,$n,$override)
+
+=translate-group($type, $t, $r:false, $b:false, $l:false, $override: "")
+    @if $r == $override_string
+        $override: $r
+        $r: $t
+        $b: $t
+        $l: $t        
+    @else if not $r and not $b and not $l
+        $r: $t
+        $b: $t
+        $l: $t
+    @else if $b == $override_string
+        $override: $b
+        $b: $t
+        $l: $r
+    @else if not $b and not $l
+        $b: $t
+        $l: $r
+    +translate-base($type,$t,$r,$b,$l,$override)
+
+
+// PUSH INTERFACE
+
+=push-top($n, $override:"")
+    +grid-unit-base("margin","top",$n,$override)
+
+=push-right($n, $override: "")
+    +grid-unit-base("margin","right",$n,$override)
+
+=push-bottom($n, $override: "")
+    +grid-unit-base("margin","bottom",$n,$override)
+
+=push-left($n, $override: "")
+    +grid-unit-base("margin","left",$n,$override)
+
+=push-tr($m, $n:false, $override: "")
+    +translate-corner("margin","tr",$m,$n,$override)
+
+=push-tl($m, $n:false, $override: "")
+    +translate-corner("margin","tl",$m,$n,$override)
+
+=push-br($m, $n:false, $override: "")
+    +translate-corner("margin","br",$m,$n,$override)
+
+=push-bl($m, $n:false, $override: "")
+    +translate-corner("margin","bl",$m,$n,$override)
+
+=push($t, $r:false, $b:false, $l:false, $override: "")
+    +translate-group("margin",$t,$r,$b,$l,$override)
+
+// PADDING INTERFACE
+
+=pad-top($n, $override: "")
+    +grid-unit-base("padding", "top",$n,$override)
+
+=pad-right($n, $override: "")
+    +grid-unit-base("padding", "right",$n,$override)
+
+=pad-bottom($n, $override: "")
+    +grid-unit-base("padding", "bottom",$n,$override)
+
+=pad-left($n, $override: "")
+    +grid-unit-base("padding", "left",$n,$override)    
+
+=pad-tr($m, $n:false, $override: "")
+    +translate-corner("padding","tr",$m,$n,$override)
+
+=pad-tl($m, $n:false, $override: "")
+    +translate-corner("padding","tl",$m,$n,$override)
+
+=pad-br($m, $n:false, $override: "")
+    +translate-corner("padding","br",$m,$n,$override)
+
+=pad-bl($m, $n:false, $override: "")
+    +translate-corner("padding","bl",$m,$n,$override)
+
+=pad($t, $r:false, $b:false, $l:false, $override:"")
+    +translate-group("padding",$t,$r,$b,$l,$override)

data/stylesheets/cinnamon/layout/_effects.sass

@@ -0,0 +1,6 @@
+=hang($side, $x:false, $y:false)
+    float: $side
+    @if $x
+        +push-left($x)
+    @if $y
+        +push-top($y)

data/stylesheets/cinnamon/layout/_flow.sass

@@ -0,0 +1,88 @@
+// SPACING
+
+=flush($axis:"x",$type:"margin",$override: "")
+    $side_a: "left"
+    $side_b: "right"
+    @if $axis == "y"
+        $side_a: "top"
+        $side_b: "bottom"
+
+    &:first-child
+        +grid-unit-base($type,$side_a,0px,$override)
+    &:last-child
+        +grid-unit-base($type,$side_b,0px,$override)
+
+=flush-queue($type: "margin", $override:"")
+    +flush("x", $type, $override)
+
+=flush-stack($type: "margin", $override:"")
+    +flush("y", $type, $override)
+
+=space($axis, $type, $side, $spacing, $is_flush:true, $override:"")
+    +grid-unit-base($type,$side,$spacing, $override)
+    @if is_flush
+        +flush($axis,$type, $override)
+
+=space-stack($spacing, $is_flush: true, $override:"")
+    +space("y","margin","top",$spacing,$is_flush,$override)
+
+=space-queue($spacing)
+    +space("x","margin","left",$spacing,$is_flush,$override)
+
+=matrix-container($col,$x_space,$y_space, $child: false)
+    +inblock-container
+    $all: "> *"
+    $first_row: "> *:nth-child(-n+#{$col})"
+    $first_column: "> *:nth-child(#{$col}n+1)"
+    @if $child
+        $all: "#{$all} #{$child}"
+        $first_row: "#{$first_row} #{$child}"
+        $first_column: "#{$first_column} #{$child}"
+
+    #{$all}
+        +push-top($y_space)
+        +push-left($x_space)        
+    #{$first_row}
+        margin-top: 0
+    #{$first_column}    
+        margin-left: 0
+
+// LAYOUTS
+
+=stack-container($spacing, $is_flush, $override)
+    +inblock-container
+    > *
+        +space-stack($spacing,$is_flush, $override)
+
+=queue-container($spacing, $is_flush, $override)
+    +inblock-container
+    > *
+        +space-queue($spacing, $is_flush, $override)
+
+=two-column-container($a, $b, $flush_top: true)
+    +inblock-container
+    > *
+        @if $flush_top
+            &:first-child, &:nth-child(2)
+                margin-top: 0
+        &:nth-child(odd)
+            +span($a)
+        &:nth-child(even)
+            +span($b)
+
+
+=three-columns-container($a, $b, $c, $flush_top: true)
+    +inblock-container
+    > *
+        &:first-child
+            +span($a)
+            @if $flush_top
+                margin-top: 0
+        &:nth-child(2)
+            +span($b)
+            @if $flush_top
+                margin-top: 0
+        &:last-child
+            +span($c)
+            @if $flush_top
+                margin-top: 0

data/stylesheets/cinnamon/layout/_utilities.sass

@@ -0,0 +1,13 @@
+=inblock($vertical_alignment: $default_vertical_alignment)
+    +inline-block
+    vertical-align: $vertical_alignment
+
+=inblock-container($vertical_alignment: $default_vertical_alignment)
+    > *
+        +inblock( $vertical_alignment )
+
+=pos($x,$y:false,$override:"")
+    @if not $y
+        $y: $x
+    +grid-unit-base("left",false,$x,$override)
+    +grid-unit-base("top",false,$y,$override)    

data/stylesheets/cinnamon/type/_type.sass

@@ -0,0 +1,25 @@
+/* 
+• 6pt  nonpareil
+• 7pt  minion
+• 8pt  brevier or small text
+• 9pt  bourgeois or galliard
+• 10pt long primer or garamond
+• 12pt pica
+• 14pt english or augustin
+• 18pt great primer
+• 21pt double small pica or double pica
+• 24pt double pica or two-line pica
+• 36pt double great primer or 2-line great primer
+*///
+
+=text-size( $text_size: $base_text_size, $line_height: false)
+    @if not $line_height
+        $line_height: $base_line_height * ceil($text_size / $base_line_height)
+
+    font-size: $px2em * $text_size      
+    line-height: $line_height
+
+=apply-base-typography
+    +text-size
+    font-family: $base_text_font
+    color: $base_text_color

data/stylesheets/cinnamon/utilities/_misc.sass

@@ -0,0 +1,28 @@
+@mixin no-cascade-align($alignment, $cascade_alignment: left)
+    +no-cascade("text-align", $alignment, $cascade_alignment)
+
+@mixin no-cascade($property,$value,$cascade_value)
+    #{$property}: $value
+    *
+        #{$property}: $cascade_value
+
+
+@mixin add-space-flow($items, $space: 1, $override:"")
+    #{unquote($items)}
+        +push-top($space, $override)
+        +flush("y", "margin", $override)
+        
+
+@mixin safe-rgba($property,$color,$fallback: false)
+    @if $fallback == false
+        #{$property}: rgb(red($color),green($color),blue($color))
+    @else
+        #{$property}: $fallback
+    #{$property}: $color
+
+@mixin safe-hsla($property,$color,$fallback: false)
+    @if $fallback == false
+        #{$property}: hsl(hue($color),saturation($color),lightness($color))
+    @else
+        #{$property}: $fallback
+    #{$property}: $color

metadata

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification 
+name: cinnamon
+version: !ruby/object:Gem::Version 
+  hash: 29
+  prerelease: false
+  segments: 
+  - 0
+  - 0
+  - 1
+  version: 0.0.1
+platform: ruby
+authors: 
+- Jason Kuhrt
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2010-10-07 00:00:00 -04:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 977940508
+        segments: 
+        - 0
+        - 10
+        - 0
+        - rc3
+        version: 0.10.0.rc3
+  type: :runtime
+  version_requirements: *id001
+description: A framework for grid-driven construction in the browser.
+email: jasonkuhrt@me.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- stylesheets/_cinnamon.sass
+- stylesheets/cinnamon/_base.sass
+- stylesheets/cinnamon/_core_additions.sass
+- stylesheets/cinnamon/_fx.sass
+- stylesheets/cinnamon/_graphics.sass
+- stylesheets/cinnamon/_grid.sass
+- stylesheets/cinnamon/_layout.sass
+- stylesheets/cinnamon/_type.sass
+- stylesheets/cinnamon/_utilities.sass
+- stylesheets/cinnamon/core_additions/_css3.sass
+- stylesheets/cinnamon/core_additions/_reset.sass
+- stylesheets/cinnamon/fx/_hover.sass
+- stylesheets/cinnamon/fx/_skin.sass
+- stylesheets/cinnamon/graphics/_shapes.sass
+- stylesheets/cinnamon/grid/_sizing.sass
+- stylesheets/cinnamon/grid/_translations.sass
+- stylesheets/cinnamon/layout/_effects.sass
+- stylesheets/cinnamon/layout/_flow.sass
+- stylesheets/cinnamon/layout/_utilities.sass
+- stylesheets/cinnamon/type/_type.sass
+- stylesheets/cinnamon/utilities/_misc.sass
+has_rdoc: true
+homepage: http://www.jasonkuhrt.com/
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.3.7
+signing_key: 
+specification_version: 3
+summary: A framework for grid-driven construction in the browser.
+test_files: []
+