compass 0.8.16

data/examples/yui/templates.html.haml

@@ -0,0 +1,54 @@
+!!! Transitional
+%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
+  %head
+    %title YUI Template Presets Example
+    %link{:rel=>"stylesheet", :href=>"stylesheets/screen.css", :type=>"text/css", :media=>"screen, projection"}
+    :javascript
+      function changeTemplate() {
+        var templateClass = document.getElementById("current-template").value;
+        document.getElementById("doc4").className = templateClass;
+      }
+    %style{:type => "text/css"}
+      :sass
+        .yui-b
+          border: 1px dotted #ccc
+  %body
+    #doc4.yui-t2
+      #hd
+        %h1 Yahoo Template Presets Example
+      #bd
+        .yui-b
+          %h3 YUI Examples
+          %ul
+            %li
+              %a{:href=>"templates.html"} Template Presets
+            %li
+              %a{:href=>"typography.html"} Typography
+        #yui-main
+          .yui-b
+            %h2 Main Content
+            %label{:for => "current-template"} Select Template Preset
+            %select{:id=>"current-template", :onchange => "changeTemplate()"}
+              %option{:value => "yui-t1"}= ".yui-t1"
+              %option{:value => "yui-t2", :selected => "selected"}= ".yui-t2"
+              %option{:value => "yui-t3"}= ".yui-t3"
+              %option{:value => "yui-t4"}= ".yui-t4"
+              %option{:value => "yui-t5"}= ".yui-t5"
+              %option{:value => "yui-t6"}= ".yui-t6"
+            %hr
+            %p
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            .yui-g
+              .yui-u.first
+                %h3 50/50 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 50/50 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                %p
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      #ft
+        Copyright © 2008. All Rights Reserved. 
+        

data/examples/yui/typography.html.haml

@@ -0,0 +1,132 @@
+!!! Transitional
+%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
+  %head
+    %title YUI Typography Demo
+    %link{:rel=>"stylesheet", :href=>"stylesheets/screen.css", :type=>"text/css", :media=>"screen, projection"}
+  %body
+    #doc4.yui-t2
+      #yui-main
+        .yui-b
+          %h1 Typography Demo
+          %h2 This is a Sub Title.
+
+          %p
+            Lorem ipsum dolor sit amet,
+            %em emphasized adipisicing
+            elit, sed do
+            %strong strong tempor
+            incididunt ut labore et
+            %b bold magna
+            aliqua. Ut enim ad
+            %i<
+              italic veniam,
+            quis nostrud exercitation ullamco
+            %a{:href=>'#'} link nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in
+            %abbr abbreviation repre
+            in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+          %h3 Third Level Header
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          %p
+            Subsequent paragraph, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+          %h4 Fourth Level Header
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est quotation:
+          %blockquote
+            Block Quotem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+          %h5 Fifth Level Header
+          %img{:src => "test.jpg", :style => 'float: right;'}
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+            %span.bigger<
+              voluptate velit esse
+              %span.biggest cillum dolore
+              eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+            %h6 Sixth Level Header
+            %p
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+          %table
+            %caption
+              This is the table caption
+            %thead
+              %tr
+                %th
+                %th Table Header 1
+                %th Table Header 2
+                %th Table Header 3
+            %tbody
+              %tr
+                %th Row Header 1
+                %td Lorem ipsum dolor sit amet.
+                %td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                %td Lorem ipsum dolor sit amet.
+              %tr
+                %th Row Header 2
+                %td Lorem ipsum dolor sit amet.
+                %td Lorem ipsum dolor sit amet.
+                %td Lorem ipsum dolor sit amet.
+              %tr
+                %th Row Header 3
+                %td Lorem ipsum dolor sit amet.
+                %td Lorem ipsum dolor sit amet.
+                %td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              %tr
+                %th Row Header 4
+                %td Lorem ipsum dolor sit amet.
+                %td Lorem ipsum dolor sit amet.
+                %td Lorem ipsum dolor sit amet.
+              %tr
+                %th Row Header 5
+                %td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                %td Lorem ipsum dolor sit amet.
+                %td Lorem ipsum dolor sit amet.
+
+          %h3 Unordered Lists
+          %ul
+            %li List Element #1
+            %li<
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            %li List Element #3
+            %li<
+              Nested List
+              %ul
+                %li Nested 1
+                %li Nested 2
+                %li Nested 3
+
+          %h3 Ordered Lists
+          %ol
+            %li List Element #1
+            %li<
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            %li List Element #3
+            %li<
+              Nested List
+              %ol
+                %li Nested 1
+                %li Nested 2
+                %li Nested 3
+
+          %h3 Definition Lists
+          %dl
+            %dt Term 1
+            %dd Definition 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            %dd Definition 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            %dt Term 2
+            %dd Another Definition
+      .yui-b
+        %h3 YUI Examples
+        %ul
+          %li
+            %a{:href=>"templates.html"} Template Presets
+          %li
+            %a{:href=>"typography.html"} Typography

data/frameworks/blueprint.rb

@@ -0,0 +1,2 @@
+blueprint_dir = File.join(Compass.base_directory, 'frameworks', 'blueprint')
+Compass::Frameworks.register('blueprint', blueprint_dir)

data/frameworks/blueprint/stylesheets/_blueprint.sass

@@ -0,0 +1,3 @@
+@import blueprint/screen.sass
+@import blueprint/print.sass
+@import blueprint/ie.sass

data/frameworks/blueprint/stylesheets/blueprint/_ie.sass

@@ -0,0 +1,93 @@
+// The blueprint IE mixins should be mixed into a stylesheet that gets conditionally included
+// into IE like so:
+// <!--[if IE]><link rel="stylesheet" href="ie.css"
+//                   type="text/css" media="screen, projection"><![endif]-->
+
+// The +blueprint-ie mixin must be mixed into the top level of your stylesheet.
+// However, you can customize the body selector if you wish to control the scope
+// of this mixin. Examples:
+// Apply to any page including the stylesheet:
+//   +blueprint-ie
+// Scoped by a single presentational body class:
+//   +blueprint-ie("body.blueprint")
+// Semantically:
+//   +blueprint-ie("body#page-1, body#page-2, body.a-special-page-type")
+//   Alternatively, you can use the +blueprint-ie-body and +blueprint-ie-defaults
+//   mixins to construct your own semantic style rules.
+
+=blueprint-ie(!body_selector = "body")
+  #{!body_selector}
+    +blueprint-ie-body
+    @if !body_selector != "body"
+      +blueprint-ie-defaults
+  @if !body_selector == "body"
+    +blueprint-ie-defaults
+
+=blueprint-ie-body
+  :text-align center
+  +blueprint-ie-hacks
+  
+=blueprint-ie-hacks
+  * html &
+    legend
+      :margin 0px -8px 16px 0
+      :padding 0
+  html>&
+    p code
+      :*white-space normal
+
+// Fixes for Blueprint "inline" forms in IE
+=blueprint-inline-form-ie
+  div, p
+    :vertical-align middle
+  label
+    :position relative
+    :top -0.25em
+  input
+    &.checkbox, &.radio, &.button, button
+      :margin 0.5em 0
+
+=blueprint-ie-defaults
+  .container
+    :text-align left
+  ol
+    :margin-left 2em
+  sup
+    :vertical-align text-top
+  sub
+    :vertical-align text-bottom
+  hr
+    :margin -8px auto 11px
+  img
+    :-ms-interpolation-mode bicubic
+  fieldset
+    :padding-top 0
+  input
+    &.text
+      :margin 0.5em 0
+      :background-color #fff
+      :border 1px solid #bbb
+      &:focus
+        :border 1px solid #666
+    &.title
+      :margin 0.5em 0
+      :background-color #fff
+      :border 1px solid #bbb
+      &:focus
+        :border 1px solid #666
+    &.checkbox
+      :position relative
+      :top 0.25em
+    &.radio
+      :position relative
+      :top 0.25em
+    &.button
+      :position relative
+      :top 0.25em
+  textarea
+    :margin 0.5em 0
+  select
+    :margin 0.5em 0
+  button
+    :position relative
+    :top 0.25em

data/frameworks/blueprint/stylesheets/blueprint/_print.sass

@@ -0,0 +1,83 @@
+@import modules/typography.sass
+@import compass/utilities/general/float.sass
+
+// The +blueprint-print mixin must be mixed into the top level of your stylesheet.
+// However, you can customize the body selector if you wish to control the scope
+// of this mixin. Examples:
+// Apply to any page including the stylesheet:
+//   +blueprint-print
+// Scoped by a single presentational body class:
+//   +blueprint-print("body.blueprint")
+// Semantically:
+//   +blueprint-print("body#page-1, body#page-2, body.a-special-page-type")
+//   Alternatively, you can use the +blueprint-print-body and +blueprint-print-defaults
+//   mixins to construct your own semantic style rules.
+
+=blueprint-print(!body_selector = "body")
+  #{!body_selector}
+    +blueprint-print-body
+    @if !body_selector != "body"
+      +blueprint-print-defaults
+  @if !body_selector == "body"
+    +blueprint-print-defaults
+
+// This style is in blueprint, but I think it's annoying and it doesn't work in all browsers.
+// Feel free to mix it into anchors where you want it.
+=blueprint-show-link-urls
+  &:after
+    :content " (" attr(href) ")"
+    :font-size 90%
+
+=blueprint-print-body
+  :line-height 1.5
+  :font-family= !blueprint_font_family
+  :color #000
+  :background none
+  :font-size 10pt
+
+=blueprint-print-defaults
+  .container
+    :background none
+  hr
+    :background #ccc
+    :color #ccc
+    :width 100%
+    :height 2px
+    :margin 2em 0
+    :padding 0
+    :border none
+    &.space
+      :background #fff
+      :color #fff
+  h1, h2, h3, h4, h5, h6
+    :font-family= !blueprint_font_family
+  code
+    :font
+      :size .9em
+      :family= !blueprint_fixed_font_family
+  img
+    +float-left
+    :margin 1.5em 1.5em 1.5em 0
+  a
+    img
+      :border none
+    &:link,
+    &:visited
+      :background transparent
+      :font-weight 700
+      :text-decoration underline
+  p img.top
+    :margin-top 0
+  blockquote
+    :margin 1.5em
+    :padding 1em
+    :font-style italic
+    :font-size .9em
+  .small
+    :font-size .9em
+  .large
+    :font-size 1.1em
+  .quiet
+    :color #999
+  .hide
+    :display none

data/frameworks/blueprint/stylesheets/blueprint/_reset.sass

@@ -0,0 +1,3 @@
+@import modules/reset.sass
+
++blueprint-global-reset

data/frameworks/blueprint/stylesheets/blueprint/_screen.sass

@@ -0,0 +1,15 @@
+@import modules/colors.sass
+@import modules/grid.sass
+@import modules/typography.sass
+@import modules/utilities.sass
+@import modules/form.sass
+@import modules/interaction.sass
+@import modules/debug.sass
+
+=blueprint(!body_selector = "body")
+  +blueprint-typography(!body_selector)
+  +blueprint-utilities
+  +blueprint-grid
+  +blueprint-debug
+  +blueprint-interaction
+  +blueprint-form

data/frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass

@@ -0,0 +1,84 @@
+@import compass/utilities/general/inline_block.sass
+@import compass/utilities/general/float.sass
+
+// Button Font
+!blueprint_button_font_family ||= "\"Lucida Grande\", Tahoma, Arial, Verdana, sans-serif"
+
+// Default Button Colors
+!blueprint_button_border_color ||= #DEDEDE
+!blueprint_button_background_color ||= #F5F5F5
+!blueprint_button_font_color ||= #565656
+
+// Default Button Hover Colors
+!blueprint_button_hover_border_color ||= #C2E1EF
+!blueprint_button_hover_background_color ||= #DFF4FF
+!blueprint_button_hover_font_color ||= #336699
+
+// Default Button Active Colors
+!blueprint_button_active_border_color ||= #6299C5
+!blueprint_button_active_background_color ||= #6299C5
+!blueprint_button_active_font_color ||= #FFF
+
+//**
+  Sets the colors for a button
+  @param border_highlight_color
+    The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
+=button-colors(!font_color = !blueprint_button_font_color, !bg_color = !blueprint_button_background_color, !border_color = !blueprint_button_border_color, !border_highlight_color = !border_color + #101010)
+  :background-color= !bg_color
+  :border-color= !border_highlight_color !border_color !border_color !border_highlight_color
+  :color= !font_color
+
+//**
+  Sets the colors for a button in the active state
+  @param border_highlight_color
+    The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
+=button-active-colors(!font_color = !blueprint_button_active_font_color, !bg_color = !blueprint_button_active_background_color, !border_color = !blueprint_button_active_border_color, !border_highlight_color = !border_color + #101010)
+  &:active
+    +button-colors(!font_color, !bg_color, !border_color, !border_highlight_color)
+
+//**
+  Sets the colors for a button in the hover state.
+  @param border_highlight_color
+    The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
+=button-hover-colors(!font_color = !blueprint_button_hover_font_color, !bg_color = !blueprint_button_hover_background_color, !border_color = !blueprint_button_hover_border_color, !border_highlight_color = !border_color + #101010)
+  &:hover
+    +button-colors(!font_color, !bg_color, !border_color, !border_highlight_color)
+
+=button-base(!float = false)
+  @if !float
+    :display block
+    +float(!float)
+  @else
+    +inline-block
+  :margin 0.7em 0.5em 0.7em 0
+  :border-width 1px
+  :border-style solid
+  :font-family= !blueprint_button_font_family
+  :font-size 100%
+  :line-height 130%
+  :text-decoration none
+  :font-weight bold
+  :cursor pointer
+  img
+    :margin 0 3px -3px 0 !important
+    :padding 0
+    :border none
+    :width 16px
+    :height 16px
+    :float none
+    
+
+=anchor-button(!float = false)
+  +button-base(!float)
+  :padding 5px 10px 5px 7px
+
+=button-button(!float = false)
+  +button-base(!float)
+  :width auto
+  :overflow visible
+  :padding 4px 10px 3px 7px
+  &[type]
+    :padding 4px 10px 4px 7px
+    :line-height 17px
+  *:first-child+html &[type]
+    :padding 4px 10px 3px 7px