From b2a9eab211919e7065e6b134bfe9a7ecec00db51 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sat, 24 Apr 2010 10:03:34 -0700 Subject: [PATCH] Move the tutorials to the new layout. --- doc-src/Rules | 2 +- .../compass/css3/gradient/markup.haml | 2 +- doc-src/content/stylesheets/_base.sass | 4 +- doc-src/content/stylesheets/_reference.scss | 10 +++- doc-src/content/stylesheets/screen.sass | 17 ++++-- doc-src/content/tutorials.haml | 1 + doc-src/content/tutorials/best_practices.haml | 52 +++++++------------ doc-src/content/tutorials/blueprint.haml | 1 + .../tutorials/configurable-variables.haml | 22 ++++---- doc-src/layouts/blueprint.haml | 2 +- doc-src/layouts/main.haml | 7 +-- doc-src/layouts/partials/sidebar.haml | 2 +- doc-src/layouts/tutorial.haml | 5 ++ doc-src/lib/default.rb | 11 ++++ doc-src/lib/stylesheets.rb | 1 - 15 files changed, 81 insertions(+), 58 deletions(-) create mode 100644 doc-src/layouts/tutorial.haml diff --git a/doc-src/Rules b/doc-src/Rules index 8b1f4651..bf03f217 100644 --- a/doc-src/Rules +++ b/doc-src/Rules @@ -47,7 +47,7 @@ end compile '*' do filter :haml, :ugly => true - layout 'default' + layout item[:layout] || 'main' end (0..5).each do |i| diff --git a/doc-src/content/examples/compass/css3/gradient/markup.haml b/doc-src/content/examples/compass/css3/gradient/markup.haml index 06d2f545..ab893e81 100644 --- a/doc-src/content/examples/compass/css3/gradient/markup.haml +++ b/doc-src/content/examples/compass/css3/gradient/markup.haml @@ -9,7 +9,7 @@ #radial-gradient.gradient-example %p - This yields a linear gradient spanning from !start to !end coordinates + This yields a linear gradient spanning from $start to $end coordinates #linear-gradient.gradient-example diff --git a/doc-src/content/stylesheets/_base.sass b/doc-src/content/stylesheets/_base.sass index 78f8542f..d919d188 100644 --- a/doc-src/content/stylesheets/_base.sass +++ b/doc-src/content/stylesheets/_base.sass @@ -24,14 +24,14 @@ $side-gutter-width: 1em // OMEGA_FLOAT // By default, +omega elements are floated right. // You can override that globally here: -// !omega_float = "right" +// $omega_float = "right" // HACKS // Are you using hacks or conditional comments? Susy makes both possible. // Leave this as 'true' to use hacks, set it as false for conditional comments. // Conditional comments will require overrides for +omega, +inline-block and // several other mixins. -// !hacks = true +// $hacks = true // SUSY // Don't move this @import above the GRID and FONT-SIZE overrides. diff --git a/doc-src/content/stylesheets/_reference.scss b/doc-src/content/stylesheets/_reference.scss index e0407b6d..2e07cf5a 100644 --- a/doc-src/content/stylesheets/_reference.scss +++ b/doc-src/content/stylesheets/_reference.scss @@ -38,7 +38,15 @@ body.reference { span.color + span.swatch { margin: 0 3px 3px; border: 1px solid #333333; width: 1em; height: 1em; @include inline-block; } .color-snippet { width: 100px; height: 20px; @include border-radius(3px); } a.help { font-size: 75%; } - p code { border: 1px solid #ccc; padding: 2px; background-color: #e7e7e7;} +} + +body.docs { + p code, pre { + @include code-text; + border: 1px solid #ccc; + padding: 2px; + background-color: #e7e7e7; + } } table.constants { diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass index ea1a9660..05c992e6 100644 --- a/doc-src/content/stylesheets/screen.sass +++ b/doc-src/content/stylesheets/screen.sass @@ -40,11 +40,13 @@ header[role="banner"] +border-bottom-right-radius(0.5em) =active-compass-nav($id, $url) - body#{$id} #compass-nav a[href="#{$url}"] - background: #cccccc - cursor: default + #{append-selector(body, $id)} + #compass-nav a[href="#{$url}"] + background: #cccccc + cursor: default -+active-compass-nav(".docs", "/docs/") ++active-compass-nav("#home,.reference", "/docs/") ++active-compass-nav(".tutorial", "/docs/tutorials/") #docs-nav +pie-clearfix @@ -142,6 +144,8 @@ footer[role="contentinfo"] article text-align: left + +aside[role="sidebar"] + article +prefix(3) article @@ -224,13 +228,16 @@ article a.selected:after content: "«" +=code-text + font-family: monospace + #code +full(12) +pie-clearfix +adjust-font-size-to(12px) +h-borders(1px,1,12px) + +code-text border-color: #ccc - font-family: monospace nav background: #eee +trailer(1,12px) diff --git a/doc-src/content/tutorials.haml b/doc-src/content/tutorials.haml index a8772c29..c4c42a01 100644 --- a/doc-src/content/tutorials.haml +++ b/doc-src/content/tutorials.haml @@ -3,6 +3,7 @@ title: Compass Tutorials crumb: Tutorials classnames: - tutorial +layout: tutorial --- %h1 Compass Tutorials diff --git a/doc-src/content/tutorials/best_practices.haml b/doc-src/content/tutorials/best_practices.haml index 34540ff8..0aa111ec 100644 --- a/doc-src/content/tutorials/best_practices.haml +++ b/doc-src/content/tutorials/best_practices.haml @@ -1,6 +1,7 @@ --- title: Best practices crumb: Best practices +layout: tutorial --- %h3 @@ -18,10 +19,10 @@ crumb: Best practices %h4 _base.scss %pre - \!blueprint_grid_columns = 24 - \!blueprint_grid_width = 30px - \!blueprint_grid_margin = 10px - \!font_color = #333 + \$blueprint_grid_columns = 24 + \$blueprint_grid_width = 30px + \$blueprint_grid_margin = 10px + \$font_color = #333 \ @import compass/reset.scss @import compass/utilities.scss @@ -70,35 +71,22 @@ crumb: Best practices than the whole list of rules which define that appearance. %h4 Mixin Example -%pre - \// Mixin for the html element, so the footer stays at the bottom of the screen. - \// Relies on the following html structure, and a fixed-height #footer element: - \// - \// %body - \// #root - \// #root_footer - \// #footer - \ - \=attach_footer( !footer_height ) - \ :height 100% - \ - body - \ :height 100% - \ - \#root - \ :min-height 100% - \ :margin-bottom = -!footer_height - \ - \#root_footer - \ :clear both - \ :height = !footer_height - \ - \#footer - \ :clear both - \ :position relative - \ :height = !footer_height + +:markdown + Mixin for the html element, so the footer stays at the bottom of the screen. + Relies on the following html structure, and a fixed-height `#footer` element: + + +
+ +
+ + + %p A single line is all that’s needed to use the mixin, which moves the implementation details out of the way and replaces them with a clear and concise label: %pre \html - \ +attach_footer( 54px ) + \ @include attach_footer( 54px ) diff --git a/doc-src/content/tutorials/blueprint.haml b/doc-src/content/tutorials/blueprint.haml index 9cff0583..2b6b47fe 100644 --- a/doc-src/content/tutorials/blueprint.haml +++ b/doc-src/content/tutorials/blueprint.haml @@ -1,5 +1,6 @@ --- title: Blueprint Framework +layout: tutorial classnames: - tutorial --- diff --git a/doc-src/content/tutorials/configurable-variables.haml b/doc-src/content/tutorials/configurable-variables.haml index 616cb6f1..dacc08d7 100644 --- a/doc-src/content/tutorials/configurable-variables.haml +++ b/doc-src/content/tutorials/configurable-variables.haml @@ -1,5 +1,6 @@ --- title: Working with Configurable Variables +layout: tutorial classnames: - tutorial --- @@ -11,20 +12,21 @@ classnames: There are two ways of defining a variable in Sass. The first, most common, approach is simple assignment. For example: - !my_constant = #fedcba + $my-constant : #fedcba The second approach is called guarded assignment. In this case, the constant is only set if it does not already have a value. For example: - - !my_constant ||= #fedcba - + + $my-constant : #fedcba !default + Many compass modules use guarded assignment to allow you to set defaults for that module. In order for these configurable variables to work correctly, you must set the variables *before* you import the module. For example: - - !blueprint_grid_columns = 12 - @import blueprint/grid - + + $blueprint-grid-columns = 12 + @import "blueprint/grid" + Because of this, it is common to have one or more partials - that set the constants first and get imported before any other imports in your stylesheet(s). - This is commonly referred to as the "base" stylesheet and is usually named `_base.scss`. \ No newline at end of file + that set the constants first and get imported before any other + imports in your stylesheet(s). This is commonly referred to as + the "base" stylesheet and is usually named `_base.scss` or `_base.sass`. \ No newline at end of file diff --git a/doc-src/layouts/blueprint.haml b/doc-src/layouts/blueprint.haml index 88c41921..ac0d38fb 100644 --- a/doc-src/layouts/blueprint.haml +++ b/doc-src/layouts/blueprint.haml @@ -1,3 +1,3 @@ - render 'main' do - %aside(role="sidebar")= render 'partials/sidebar', :default_stylesheet => "_blueprint.scss" + %aside(role="sidebar")= render 'partials/sidebar', :default_stylesheet => "_blueprint.scss", :omit_self => false, :heading_level => 2 %article= yield \ No newline at end of file diff --git a/doc-src/layouts/main.haml b/doc-src/layouts/main.haml index 6c4d24a0..ba33dad1 100644 --- a/doc-src/layouts/main.haml +++ b/doc-src/layouts/main.haml @@ -26,7 +26,7 @@ %li %a{:href => "/", :rel => "home"} compass %li - %a{:href => "/docs/"} docs + %a{:href => "/docs/"} reference %li %a{:href => "/docs/tutorials/"} tutorials %nav#docs-nav{:role => "navigation"} @@ -37,8 +37,9 @@ %a{:href => "/docs/reference/compass/"} core %li %a{:href => "/docs/reference/blueprint/"} blueprint - %li - %a{:href => "/docs/plugins/"} plugins + / + %li + %a{:href => "/docs/plugins/"} plugins #search-docs %form %p diff --git a/doc-src/layouts/partials/sidebar.haml b/doc-src/layouts/partials/sidebar.haml index 7ab16f79..bebd3393 100644 --- a/doc-src/layouts/partials/sidebar.haml +++ b/doc-src/layouts/partials/sidebar.haml @@ -1,2 +1,2 @@ %nav#local-nav - %ul= item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => true) + %ul= item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => get_var(:omit_self){true}, :heading_level => get_var(:heading_level){1}) diff --git a/doc-src/layouts/tutorial.haml b/doc-src/layouts/tutorial.haml new file mode 100644 index 00000000..d8ff82b3 --- /dev/null +++ b/doc-src/layouts/tutorial.haml @@ -0,0 +1,5 @@ +- render 'main' do + %aside(role="sidebar") + %nav#local-nav + %ul= item_tree(tutorial_item(:root), :depth => 2, :omit_self => false, :heading_level => 2) + %article= yield \ No newline at end of file diff --git a/doc-src/lib/default.rb b/doc-src/lib/default.rb index 0e9c3c69..c69c20f4 100644 --- a/doc-src/lib/default.rb +++ b/doc-src/lib/default.rb @@ -55,6 +55,11 @@ def find(identifier) @items.find{|i| i.identifier == identifier} end +def get_var(instance_var) + instance_variable_defined?("@#{instance_var}") ? instance_variable_get("@#{instance_var}") : yield +end + + def item_tree(item, options = {}) crumb = item[:crumb] || item[:title] options[:heading_level] ||= 1 if options.fetch(:headings, true) @@ -91,4 +96,10 @@ def item_tree(item, options = {}) %Q{#{contents}#{child_html}} end +def tutorial_item(path) + path = "" if path == :root + @items.detect do |i| + i.identifier == "/tutorials/#{path}" + end +end diff --git a/doc-src/lib/stylesheets.rb b/doc-src/lib/stylesheets.rb index 1824c835..893ac12d 100644 --- a/doc-src/lib/stylesheets.rb +++ b/doc-src/lib/stylesheets.rb @@ -36,7 +36,6 @@ def reference_item(options) @items.detect do |i| i.identifier =~ /^\/reference/ && i[:stylesheet] == path - end end end