cyaml 0.0.35 → 0.0.42

data/templates/project/application.html.haml

@@ -1,51 +1,71 @@
 !!!
-%html{:lang => "en", "xml:lang" => "en", :xmlns => "http://www.w3.org/1999/xhtml"}
+%html{:lang => "en"}
   %head
-    %meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-type"}/
-    %title Your Page Title
-    = stylesheet_link_tag 'basemod.css', :media => 'all'
-    /[if IE]
-      = stylesheet_link_tag 'patch_my_layout.css', :media => 'screen, projection'
-  %body
-    .page_margins
-      / start: skip link navigation
-      %a.skip{:href => "#navigation", :title => "skip link"} Skip to the navigation
-      %span.hideme .
-      %a.skip{:href => "#content", :title => "skip link"} Skip to the content
-      %span.hideme .
-      / end: skip link navigation
-      .page
-        #header
-        #nav
-          / skiplink anchor: navigation
-          %a#navigation{:name => "navigation"}
-          .hlist
-            / main navigation: horizontal list
-            %ul
-              %li.active
-                %strong Button 1
-              %li
-                %a{:href => "#"} Button 2
-              %li
-                %a{:href => "#"} Button 3
-              %li
-                %a{:href => "#"} Button 4
-              %li
-                %a{:href => "#"} Button 5
+    %meta{:charset => "utf-8"}/
+    %title Demo: Flexible Column Layout – YAML CSS Framework
+    / Mobile viewport optimisation
+    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
+    / (en) Add your meta data here
+    / (de) Fuegen Sie hier ihre Meta-Daten ein
+    /[if lte IE 7]
+    /[if lt IE 9]
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+  %body.demo-2col
+    %ul.ym-skiplinks
+      %li
+        %a.ym-skip{:href => "#nav"} Skip to navigation (Press Enter)
+      %li
+        %a.ym-skip{:href => "#main"} Skip to main content (Press Enter)
+    .ym-wrapper
+      .ym-wbox
+        %header
+        %h1 Project Name
+        </header>
+        %nav#nav
+        .ym-hlist
+          %ul
+            %li.active
+              %strong Active
+            %li
+              %a{:href => "#"} Link
+            %li
+              %a{:href => "#"} Link
+            %li
+              %a{:href => "#"} Link
+            %li
+              %a{:href => "#"} Link
+          %form.ym-searchform
+            %input.ym-searchfield{:placeholder => "Search...", :type => "search"}/
+            %input.ym-searchbutton{:type => "submit", :value => "Search"}/
+        </nav>
         #main
-          #col1
-            #col1_content.clearfix
-              / add your content here
-          #col2
-            #col2_content.clearfix
-              / add your content here
-              = yield
-          #col3
-            #col3_content.clearfix
-              / add your content here
-            / IE Column Clearing
-            #ie_clearing  
-        / begin: #footer
-        #footer
-          Layout based on
-          %a{:href => "http://www.yaml.de/"} YAML
+          .ym-column.linearize-level-1
+            .ym-col1
+              .ym-cbox
+            %aside.ym-col3
+            .ym-cbox
+              %h2 Sidebar
+              %h4 Widget A
+              %ul
+                %li Item 1
+                %li Item 2
+                %li Item 3
+                %li Item 4
+                %li Item 5
+              %h4 Widget B
+              %ul
+                %li Item 1
+                %li Item 2
+                %li Item 3
+              %h4 Widget C
+              %ul
+                %li Item 1
+                %li Item 2
+                %li Item 3
+            </aside>
+        %footer
+        %p
+          © Company 2011 &ndash; Layout based on
+          %a{:href => "http://www.yaml.de"} YAML
+        </footer>
+    / full skip link functionality in webkit browsers

data/templates/project/application_new.html.haml

@@ -0,0 +1,97 @@
+!!!
+%html{:lang => "en"}
+  %head
+    %meta{:charset => "utf-8"}/
+    %title Demo: Flexible Column Layout – YAML CSS Framework
+    / Mobile viewport optimisation
+    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
+    / (en) Add your meta data here
+    / (de) Fuegen Sie hier ihre Meta-Daten ein
+    = stylesheet_link_tag 'basemod.css', :media => 'all'
+    /[if lte IE 7]
+      = stylesheet_link_tag 'iehacks.css', :media => 'all'
+    /[if lt IE 9]
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+  %body.demo-2col
+    %ul.ym-skiplinks
+      %li
+        %a.ym-skip{:href => "#nav"} Skip to navigation (Press Enter)
+      %li
+        %a.ym-skip{:href => "#main"} Skip to main content (Press Enter)
+    .ym-wrapper
+      .ym-wbox
+        %header
+          %h1 Project Name
+        %nav#nav
+          .ym-hlist
+            %ul
+              %li.active
+                %strong Active
+              %li
+                %a{:href => "#"} Link
+              %li
+                %a{:href => "#"} Link
+              %li
+                %a{:href => "#"} Link
+              %li
+                %a{:href => "#"} Link
+            %form.ym-searchform
+              %input.ym-searchfield{:placeholder => "Search...", :type => "search"}/
+              %input.ym-searchbutton{:type => "submit", :value => "Search"}/
+        #main
+          .ym-column.linearize-level-1
+            .ym-col1
+              .ym-cbox
+                = yield
+                %section.box.info
+                  %h2 Main Content
+                  %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                  %a.ym-button.ym-next{:href => "#"} Read More
+                %section.ym-grid.linearize-level-2
+                  %article.ym-g50.ym-gl
+                    .ym-gbox
+                      / content
+                      %h3 Heading
+                      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                  %article.ym-g50.ym-gr
+                    .ym-gbox
+                      / content
+                      %h3 Heading
+                      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                %section.ym-grid.linearize-level-2
+                  %article.ym-g50.ym-gl
+                    .ym-gbox
+                      / content
+                      %h3 Heading
+                      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                  %article.ym-g50.ym-gr
+                    .ym-gbox
+                      / content
+                      %h3 Heading
+                      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+            %aside.ym-col3
+              .ym-cbox
+                %h2 Sidebar
+                %h4 Widget A
+                %ul
+                  %li Item 1
+                  %li Item 2
+                  %li Item 3
+                  %li Item 4
+                  %li Item 5
+                %h4 Widget B
+                %ul
+                  %li Item 1
+                  %li Item 2
+                  %li Item 3
+                %h4 Widget C
+                %ul
+                  %li Item 1
+                  %li Item 2
+                  %li Item 3
+        %footer
+          %p
+            © Company 2011 &ndash; Layout based on
+            %a{:href => "http://www.yaml.de"} YAML
+    / full skip link functionality in webkit browsers
+    %script{:src => "/javascripts/yaml/core/yaml-focusfix.js"}

data/templates/project/basemod.scss

@@ -1,67 +1,11 @@
-@charset "UTF-8";
+@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700);
 
-@import "config";
 @import "default_includes";
 
-/**
-  Template for creating a YAML Layout.
- */
+@import "cyaml/navigation/hlist";
 
-  body {
-    overflow-y: scroll;
-    padding: 10px 0; }
-  .page_margins {
-    margin: 0 auto;
-    width: auto;
-    min-width: $layout_min_width;
-    max-width: $layout_max_width;
-    background: #fff; }
-  .page {
-    padding: 10px; }
-  #header {
-    padding: 45px 2em 1em 20px;
-    height: $header_height;
-    color: #000;
-    background: #fff; }
-  #nav {
-    overflow: hidden; }
-  div.hlist {}
-  #main {
-    margin: 10px 0;
-    height: $content_height;
-    background: #fff; }
-  #footer {
-    padding: 10px 20px;
-    color: #666;
-    height: $footer_height;
-    background: #f9f9f9;
-    border-top: 5px #efefef solid; }
-  #nav ul {
-    margin-left: 20px; }
-  #col1 {
-    float: left;
-    width: $width_c1;
-    margin: 0; }
-  #col2 {
-    float: right;
-    width: $width_c2;
-    display: $display_3rd_column;
-    margin: 0; }
-  #col3 {
-    width: $width_c3;
-    margin: 0 0 0 75%;
-  }
-  #col1_content {
-    padding: 0 10px 0 20px; }
-  #col2_content {
-    padding: 0 10px; }
-  #col3_content {
-    padding: 0 20px 0 10px; }
+@import "cyaml/forms/gray-theme";
 
-  #skiplinks a.skip {
-    &:focus, &:active {
-      color: #fff;
-      background: #333;
-      border-bottom: 1px #000 solid;
-      padding: 10px 0;
-      text-decoration: none; } }
+@import "cyaml/screen/typography";
+
+@import "cyaml/screen/screen-PAGE-layout";

data/templates/project/default_includes.scss

@@ -2,12 +2,10 @@
 @import "cyaml/core/base";
 
 /* import print layout | Druck-Layout einbinden */
-@import "cyaml/print/print_draft";
+@import "cyaml/print/print";
 
 // possible imports
 // @import "cyaml/core/iehacks";
-// @import "cyaml/core/slim_base";
-// @import "cyaml/core/slim_iehacks";
 
 
 // @import "cyaml/add-ons/accessible-tabs/tabs";
@@ -15,29 +13,16 @@
 // @import "cyaml/add-ons/microformats/microformats";
 
 // @import "cyaml/add-ons/rtl-support/core/base-rtl";
-// @import "cyaml/add-ons/rtl-support/core/iehacks-rtl";
-// @import "cyaml/add-ons/rtl-support/core/slim_base-rtl";
-// @import "cyaml/add-ons/rtl-support/core/slim_iehacks-rtl";
-// @import "cyaml/add-ons/rtl-support/navigation/nav_shinybuttons-rtl";
-// @import "cyaml/add-ons/rtl-support/navigation/nav_slidingdoor-rtl";
-// @import "cyaml/add-ons/rtl-support/navigation/nav_vlist-rtl";
-
-// @import "cyaml/navigation/nav_shinybuttons";
-// @import "cyaml/navigation/nav_slidingdoor";
-// @import "cyaml/navigation/nav_vlist";
-
-// @import "cyaml/patches/patch_nav_vlist";
-
-// @import "cyaml/print/print_103_draft";
-// @import "cyaml/print/print_120_draft";
-// @import "cyaml/print/print_003_draft";
-// @import "cyaml/print/print_draft";
-// @import "cyaml/print/print_020_draft";
-// @import "cyaml/print/print_123_draft";
-// @import "cyaml/print/print_100_draft";
-// @import "cyaml/print/print_023_draft";
-
-
-// @import "cyaml/screen/content";
-// @import "cyaml/screen/content_tables";
-// @import "cyaml/screen/forms";
+// @import "cyaml/add-ons/rtl-support/navigation/hlist-rtl";
+// @import "cyaml/add-ons/rtl-support/navigation/vlist-rtl.sass";
+// @import "cyaml/add-ons/rtl-support/screen/typography-rtl";
+
+// @import "cyaml/navigation/vlist";
+// @import "cyaml/navigation/hlist";
+
+// @import "cyaml/screen/grid-960-12";
+// @import "cyaml/screen/grid-960-16";
+// @import "cyaml/screen/screen-PAGE-layout";
+// @import "cyaml/screen/typography";
+// @import "cyaml/screen/screen-FULLPAGE-layout";
+// @import "cyaml/forms/gray-theme";

data/templates/project/index.html.haml

@@ -1,49 +1,96 @@
 !!!
-%html{:lang => "en", "xml:lang" => "en", :xmlns => "http://www.w3.org/1999/xhtml"}
+%html{:lang => "en"}
   %head
-    %meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-type"}/
-    %title Your Page Title
+    %meta{:charset => "utf-8"}/
+    %title Demo: Flexible Column Layout – YAML CSS Framework
+    / Mobile viewport optimisation
+    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
     / (en) Add your meta data here
-    / (de) Fügen Sie hier Ihre Meta-Daten ein
-    %head
-      %link{:href => "./stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
-      /[if IE]                                                                   
-        %link{:href => "./stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
-  %body
-    / skip link navigation
-    %ul#skiplinks
+    / (de) Fuegen Sie hier ihre Meta-Daten ein
+    %link{:href => "./stylesheets/basemod.css", :rel => "stylesheet", :type => "text/css"}/
+    /[if lte IE 7]
+      <link href="./stylesheets/iehacks.css" rel="stylesheet" type="text/css" />
+    /[if lt IE 9]
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+  %body.demo-2col
+    %ul.ym-skiplinks
       %li
-        %a.skip{:href => "#nav"} Skip to navigation (Press Enter).
+        %a.ym-skip{:href => "#nav"} Skip to navigation (Press Enter)
       %li
-        %a.skip{:href => "#col3"} Skip to main content (Press Enter).
-    .page_margins
-      .page
-        #header{:role => "banner"}
-          #topnav{:role => "contentinfo"}
-            %span #topnav is here
-          %h1 H1 Heading
-        #nav{:role => "navigation"}
-          .hlist
+        %a.ym-skip{:href => "#main"} Skip to main content (Press Enter)
+    .ym-wrapper
+      .ym-wbox
+        %header
+          %h1 Project Name
+        %nav#nav
+          .ym-hlist
             %ul
               %li.active
-                %a{:href => "#"} Button 1
+                %strong Active
               %li
-                %a{:href => "#"} Button 2
+                %a{:href => "#"} Link
               %li
-                %a{:href => "#"} Button 3
+                %a{:href => "#"} Link
               %li
-                %a{:href => "#"} Button 4
+                %a{:href => "#"} Link
               %li
-                %a{:href => "#"} Button 5
+                %a{:href => "#"} Link
+            %form.ym-searchform
+              %input.ym-searchfield{:placeholder => "Search...", :type => "search"}/
+              %input.ym-searchbutton{:type => "submit", :value => "Search"}/
         #main
-          #col1{:role => "complementary"}
-            #col1_content.clearfix
-          #col2{:role => "complementary"}
-            #col2_content.clearfix
-          #col3{:role => "main"}
-            #col3_content.clearfix
-            #ie_clearing &nbsp;
-        #footer{:role => "contentinfo"}
-          Layout based on
-          %a{:href => "http://www.yaml.de/"} YAML
-    %script{:src => "/yaml/core/js/webkit-focusfix.js", :type => "text/javascript"}
+          .ym-column.linearize-level-1
+            .ym-col1
+              .ym-cbox
+                %section.box.info
+                  %h2 Main Content
+                  %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                  %a.ym-button.ym-next{:href => "#"} Read More
+                %section.ym-grid.linearize-level-2
+                  %article.ym-g50.ym-gl
+                    .ym-gbox
+                      / content
+                      %h3 Heading
+                      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                  %article.ym-g50.ym-gr
+                    .ym-gbox
+                      / content
+                      %h3 Heading
+                      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                %section.ym-grid.linearize-level-2
+                  %article.ym-g50.ym-gl
+                    .ym-gbox
+                      / content
+                      %h3 Heading
+                      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                  %article.ym-g50.ym-gr
+                    .ym-gbox
+                      / content
+                      %h3 Heading
+                      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+            %aside.ym-col3
+              .ym-cbox
+                %h2 Sidebar
+                %h4 Widget A
+                %ul
+                  %li Item 1
+                  %li Item 2
+                  %li Item 3
+                  %li Item 4
+                  %li Item 5
+                %h4 Widget B
+                %ul
+                  %li Item 1
+                  %li Item 2
+                  %li Item 3
+                %h4 Widget C
+                %ul
+                  %li Item 1
+                  %li Item 2
+                  %li Item 3
+        %footer
+          %p
+            © Company 2011 &ndash; Layout based on
+            %a{:href => "http://www.yaml.de"} YAML
+    / full skip link functionality in webkit browsers
+    %script{:src => "../yaml/core/js/yaml-focusfix.js"}