compass 0.8.16

data/examples/blueprint_default/parts/forms.html.haml

@@ -0,0 +1,190 @@
+!!!
+%html{ :lang => "en" }
+  %head
+    %meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
+    %title
+      Blueprint Forms Tests
+    /
+      Framework CSS
+    %link{ :href => "../stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
+    %link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
+    /
+      [if lt IE 8]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
+  %body
+    .container.showgrid
+      %h1
+        Forms
+      %hr
+      .span-12
+        %form#dummy{ :action => "", :method => "post" }
+          %fieldset
+            %legend
+              Simple sample form
+            %p
+              %label{ :for => "dummy0" }
+                Text input (title)
+              %br
+              %input#dummy0.title{ :name => "dummy0", :type => "text", :value => "Field with class .title" }
+            %p
+              %label{ :for => "dummy1" }
+                Another field
+              %br
+              %input#dummy1.text{ :name => "dummy1", :type => "text", :value => "Field with class .text" }
+            %p
+              %label{ :for => "dummy2" }
+                Textarea
+              %br
+              %textarea#dummy2{ :name => "dummy2", :rows => "5", :cols => "20" }
+            %p
+              %input{ :type => "submit", :value => "Submit" }
+              %input{ :type => "reset", :value => "Reset" }
+      .span-12.last
+        .error
+          This is a &lt;div&gt; with the class
+          %strong
+            \.error
+          \.
+          %a{ :href => "#" }
+            Link
+          \.
+        .notice
+          This is a &lt;div&gt; with the class
+          %strong
+            \.notice
+          \.
+          %a{ :href => "#" }
+            Link
+          \.
+        .success
+          This is a &lt;div&gt; with the class
+          %strong
+            \.success
+          \.
+          %a{ :href => "#" }
+            Link
+          \.
+        %fieldset
+          %legend
+            Select, checkboxes, lists
+          %p
+            %label{ :for => "dummy3" }
+              Select field
+            %br
+            %select#dummy3{ :name => "dummy3" }
+              %option{ :value => "1" }
+                Ottawa
+              %option{ :value => "2" }
+                Calgary
+              %option{ :value => "3" }
+                Moosejaw
+          %p
+            %label{ :for => "dummy4" }
+              Select with groups
+            %br
+            %select#dummy4{ :name => "dummy4" }
+              %option
+                Favorite pet
+              %optgroup{ :label => "mammals" }
+                %option
+                  dog
+                %option
+                  cat
+                %option
+                  rabbit
+                %option
+                  horse
+              %optgroup{ :label => "reptiles" }
+                %option
+                  iguana
+                %option
+                  snake
+          %p
+            %label
+              Radio buttons
+            %br
+            %input{ :name => "example", :type => "radio" }
+            Radio one
+            %br
+            %input{ :name => "example", :type => "radio" }
+            Radio two
+            %br
+            %input{ :name => "example", :type => "radio" }
+            Radio three
+            %br
+          %p
+            %label
+              Checkboxes
+            %br
+            %input{ :type => "checkbox" }
+            Check one
+            %br
+            %input{ :type => "checkbox" }
+            Check two
+            %br
+            %input{ :type => "checkbox" }
+            Check three
+            %br
+      .span-24.last
+        %fieldset
+          %legend
+            Alignment
+          %p
+            %label{ :for => "dummy5" }
+              Select field
+            %select#dummy5{ :name => "dummy5" }
+              %option{ :value => "1" }
+                Ottawa
+              %option{ :value => "2" }
+                Calgary
+              %option{ :value => "3" }
+                Moosejaw
+          %p
+            %label{ :for => "dummy6" }
+              Text input (title)
+            %input#dummy6.title{ :name => "dummy6", :type => "text", :value => "Field with class .title" }
+          %p
+            %label{ :for => "dummy7" }
+              Select field
+            %select#dummy7{ :name => "dummy7" }
+              %option{ :value => "1" }
+                Ottawa
+              %option{ :value => "2" }
+                Calgary
+              %option{ :value => "3" }
+                Moosejaw
+            %label{ :for => "dummy8" }
+              Another field
+            %input#dummy8.text{ :name => "dummy8", :type => "text", :value => "Field with class .text" }
+      .span-24.last
+        %form.inline{ :action => "", :method => "post" }
+          %fieldset
+            %legend
+              A form with class "inline"
+            .span-3
+              %label{ :for => "a" }
+                Label A:
+              %select#a{ :name => "a" }
+                %option{ :value => "0" }
+                  All
+            .span-2
+              some text
+            .span-3
+              %input#o.checkbox{ :type => "checkbox", :name => "o", :value => "true", :checked => "checked" }
+                checkbox one
+            .span-3
+              %label{ :for => "b" }
+                Label B:
+              %select#b{ :name => "b" }
+                %option{ :value => "0" }
+                  All
+            .span-2
+              %a{ :href => "" }
+                A Hyperlink
+            .span-8
+              %input#q.text{ :type => "text", :name => "q", :value => "Field with class .text" }
+            .span-2.last
+              %input.button{ :type => "submit", :value => "submit" }
+      %hr
+      %p
+        %a{ :href => "http://validator.w3.org/check?uri=referer" }
+          %img.top{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }

data/examples/blueprint_default/parts/grid.html.haml

@@ -0,0 +1,274 @@
+!!!
+%html{ :lang => "en" }
+  %head
+    %meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
+    %title
+      Blueprint Grid Tests
+    /
+      Framework CSS
+    %link{ :href => "../stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
+    %link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
+    /
+      [if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
+  %body
+    .container.showgrid
+      %h1
+        Blueprint Tests: grid.css
+      .span-8
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      .span-8
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      .span-8.last
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      .span-6.append-1
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      .span-6.append-2
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      .span-6.append-3.last
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      .span-6.prepend-1
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      .span-6.prepend-2
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      .span-6.prepend-3.last
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      %hr
+      .span-12.border
+        %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.
+      .span-12.last
+        %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.
+      %hr
+      .span-1.prepend-1
+        %p
+          1
+      .span-1.prepend-2
+        %p
+          2
+      .span-1.prepend-3
+        %p
+          3
+      .span-1.prepend-4
+        %p
+          4
+      .span-1.prepend-5
+        %p
+          5
+      .span-1.prepend-3.last
+        %p
+          3
+      .span-1.append-1
+        %p
+          1
+      .span-1.append-2
+        %p
+          2
+      .span-1.append-3
+        %p
+          3
+      .span-1.append-4
+        %p
+          4
+      .span-1.append-5
+        %p
+          5
+      .span-1.append-3.last
+        %p
+          3
+      .span-1.border
+        %p
+          1
+      .span-1.border
+        %p
+          2
+      .span-1.border
+        %p
+          3
+      .span-1.border
+        %p
+          4
+      .span-1.border
+        %p
+          5
+      .span-1.border
+        %p
+          6
+      .span-1.border
+        %p
+          7
+      .span-1.border
+        %p
+          8
+      .span-1.border
+        %p
+          9
+      .span-1.border
+        %p
+          10
+      .span-1.border
+        %p
+          11
+      .span-1.border
+        %p
+          12
+      .span-1.border
+        %p
+          13
+      .span-1.border
+        %p
+          14
+      .span-1.border
+        %p
+          15
+      .span-1.border
+        %p
+          16
+      .span-1.border
+        %p
+          17
+      .span-1.border
+        %p
+          18
+      .span-1.border
+        %p
+          19
+      .span-1.border
+        %p
+          20
+      .span-1.border
+        %p
+          21
+      .span-1.border
+        %p
+          22
+      .span-1.border
+        %p
+          23
+      .span-1.last
+        %p
+          24
+      .span-4
+        %p
+          1
+      .span-4
+        %p
+          2
+      .span-4
+        %p
+          3
+      .span-4
+        %p
+          4
+      .span-4
+        %p
+          5
+      .span-4.last
+        %p
+          6
+      .prepend-23.span-1.last
+        %p
+          24
+      .prepend-1.span-1
+        %p
+          2
+      .prepend-20.span-1.append-1.last
+        %p
+          23
+      %hr
+      .span-24
+        %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.
+      .span-12
+        .span-6
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
+        .span-6.last
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-12.last
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      .span-12.last
+        .span-6
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
+        .span-6.last
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-12.last
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      .span-14.prepend-5.append-5.last
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      %hr
+      .span-12
+        %h5
+          TESTING .PUSH-1 TO .PUSH-5
+        .span-2
+          %img.push-1{ :src => "test-small.jpg" }
+        .span-10.last
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-2
+          %img.push-2{ :src => "test-small.jpg" }
+        .span-10.last
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-2
+          %img.push-3{ :src => "test-small.jpg" }
+        .span-10.last
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-2
+          %img.push-4{ :src => "test-small.jpg" }
+        .span-10.last
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-2
+          %img.push-5{ :src => "test-small.jpg" }
+        .span-10.last
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      .span-12.last
+        %h5
+          TESTING .PULL-1 TO .PULL-5
+        .span-10
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-2.last
+          %img.top.pull-1{ :src => "test-small.jpg" }
+        .span-10
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-2.last
+          %img.top.pull-2{ :src => "test-small.jpg" }
+        .span-10
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-2.last
+          %img.top.pull-3{ :src => "test-small.jpg" }
+        .span-10
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-2.last
+          %img.top.pull-4{ :src => "test-small.jpg" }
+        .span-10
+          %p
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        .span-2.last
+          %img.top.pull-5{ :src => "test-small.jpg" }
+      .span-24
+        %p
+          %a{ :href => "http://validator.w3.org/check?uri=referer" }
+            %img.bottom{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }