github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move the tutorials to the new layout.

Browse Source
This commit is contained in:
Chris Eppstein 2010-04-24 10:03:34 -07:00
parent 99f797127f
commit b2a9eab211
15 changed files with 81 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc-src/Rules
View File

@ -47,7 +47,7 @@ end
compile '*' do compile '*' do
filter :haml, :ugly => true filter :haml, :ugly => true
layout 'default' layout item[:layout] || 'main'
end end
(0..5).each do |i| (0..5).each do |i|

2
doc-src/content/examples/compass/css3/gradient/markup.haml
View File

@ -9,7 +9,7 @@
#radial-gradient.gradient-example #radial-gradient.gradient-example
%p %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 #linear-gradient.gradient-example

4
doc-src/content/stylesheets/_base.sass
View File

@ -24,14 +24,14 @@ $side-gutter-width: 1em
// OMEGA_FLOAT // OMEGA_FLOAT
// By default, +omega elements are floated right. // By default, +omega elements are floated right.
// You can override that globally here: // You can override that globally here:
// !omega_float = "right" // $omega_float = "right"
// HACKS // HACKS
// Are you using hacks or conditional comments? Susy makes both possible. // 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. // Leave this as 'true' to use hacks, set it as false for conditional comments.
// Conditional comments will require overrides for +omega, +inline-block and // Conditional comments will require overrides for +omega, +inline-block and
// several other mixins. // several other mixins.
// !hacks = true // $hacks = true
// SUSY // SUSY
// Don't move this @import above the GRID and FONT-SIZE overrides. // Don't move this @import above the GRID and FONT-SIZE overrides.

10
doc-src/content/stylesheets/_reference.scss
View File

@ -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; } 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); } .color-snippet { width: 100px; height: 20px; @include border-radius(3px); }
a.help { font-size: 75%; } 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 { table.constants {

17
doc-src/content/stylesheets/screen.sass
View File

@ -40,11 +40,13 @@ header[role="banner"]
+border-bottom-right-radius(0.5em) +border-bottom-right-radius(0.5em)
=active-compass-nav($id, $url) =active-compass-nav($id, $url)
body#{$id} #compass-nav a[href="#{$url}"] #{append-selector(body, $id)}
background: #cccccc #compass-nav a[href="#{$url}"]
cursor: default background: #cccccc
cursor: default
+active-compass-nav(".docs", "/docs/") +active-compass-nav("#home,.reference", "/docs/")
+active-compass-nav(".tutorial", "/docs/tutorials/")
#docs-nav #docs-nav
+pie-clearfix +pie-clearfix
@ -142,6 +144,8 @@ footer[role="contentinfo"]
article article
text-align: left text-align: left
aside[role="sidebar"] + article
+prefix(3) +prefix(3)
article article
@ -224,13 +228,16 @@ article
a.selected:after a.selected:after
content: "«" content: "«"
=code-text
font-family: monospace
#code #code
+full(12) +full(12)
+pie-clearfix +pie-clearfix
+adjust-font-size-to(12px) +adjust-font-size-to(12px)
+h-borders(1px,1,12px) +h-borders(1px,1,12px)
+code-text
border-color: #ccc border-color: #ccc
font-family: monospace
nav nav
background: #eee background: #eee
+trailer(1,12px) +trailer(1,12px)

1
doc-src/content/tutorials.haml
View File

@ -3,6 +3,7 @@ title: Compass Tutorials
crumb: Tutorials crumb: Tutorials
classnames: classnames:
- tutorial - tutorial
layout: tutorial
--- ---
%h1 Compass Tutorials %h1 Compass Tutorials

52
doc-src/content/tutorials/best_practices.haml
View File

@ -1,6 +1,7 @@
--- ---
title: Best practices title: Best practices
crumb: Best practices crumb: Best practices
layout: tutorial
--- ---
%h3 %h3
@ -18,10 +19,10 @@ crumb: Best practices
%h4 %h4
_base.scss _base.scss
%pre %pre
\!blueprint_grid_columns = 24 \$blueprint_grid_columns = 24
\!blueprint_grid_width = 30px \$blueprint_grid_width = 30px
\!blueprint_grid_margin = 10px \$blueprint_grid_margin = 10px
\!font_color = #333 \$font_color = #333
\ \
@import compass/reset.scss @import compass/reset.scss
@import compass/utilities.scss @import compass/utilities.scss
@ -70,35 +71,22 @@ crumb: Best practices
than the whole list of rules which define that appearance. than the whole list of rules which define that appearance.
%h4 %h4
Mixin Example Mixin Example
%pre
\// Mixin for the html element, so the footer stays at the bottom of the screen. :markdown
\// Relies on the following html structure, and a fixed-height #footer element: 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 <body>
\// #root_footer <div id="root">
\// #footer <div id="root_footer"></div>
\ </div>
\=attach_footer( !footer_height ) <div id="footer">
\ :height 100% Footer content goes here.
\ </div>
body </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
%p %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: 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 %pre
\html \html
\ +attach_footer( 54px ) \ @include attach_footer( 54px )

1
doc-src/content/tutorials/blueprint.haml
View File

@ -1,5 +1,6 @@
--- ---
title: Blueprint Framework title: Blueprint Framework
layout: tutorial
classnames: classnames:
- tutorial - tutorial
--- ---

14
doc-src/content/tutorials/configurable-variables.haml
View File

@ -1,5 +1,6 @@
--- ---
title: Working with Configurable Variables title: Working with Configurable Variables
layout: tutorial
classnames: classnames:
- tutorial - tutorial
--- ---
@ -11,20 +12,21 @@ classnames:
There are two ways of defining a variable in Sass. The first, most common, approach is There are two ways of defining a variable in Sass. The first, most common, approach is
simple assignment. For example: simple assignment. For example:
!my_constant = #fedcba $my-constant : #fedcba
The second approach is called guarded assignment. In this case, the constant is only 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: 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. 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 In order for these configurable variables to work correctly, you must set the variables
*before* you import the module. For example: *before* you import the module. For example:
!blueprint_grid_columns = 12 $blueprint-grid-columns = 12
@import blueprint/grid @import "blueprint/grid"
Because of this, it is common to have one or more partials 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). that set the constants first and get imported before any other
This is commonly referred to as the "base" stylesheet and is usually named `_base.scss`. imports in your stylesheet(s). This is commonly referred to as
the "base" stylesheet and is usually named `_base.scss` or `_base.sass`.

2
doc-src/layouts/blueprint.haml
View File

@ -1,3 +1,3 @@
- render 'main' do - 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 %article= yield

7
doc-src/layouts/main.haml
View File

@ -26,7 +26,7 @@
%li %li
%a{:href => "/", :rel => "home"} compass %a{:href => "/", :rel => "home"} compass
%li %li
%a{:href => "/docs/"} docs %a{:href => "/docs/"} reference
%li %li
%a{:href => "/docs/tutorials/"} tutorials %a{:href => "/docs/tutorials/"} tutorials
%nav#docs-nav{:role => "navigation"} %nav#docs-nav{:role => "navigation"}
@ -37,8 +37,9 @@
%a{:href => "/docs/reference/compass/"} core %a{:href => "/docs/reference/compass/"} core
%li %li
%a{:href => "/docs/reference/blueprint/"} blueprint %a{:href => "/docs/reference/blueprint/"} blueprint
%li /
%a{:href => "/docs/plugins/"} plugins %li
%a{:href => "/docs/plugins/"} plugins
#search-docs #search-docs
%form %form
%p %p

2
doc-src/layouts/partials/sidebar.haml
View File

@ -1,2 +1,2 @@
%nav#local-nav %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})

5
doc-src/layouts/tutorial.haml Normal file
View File

@ -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

11
doc-src/lib/default.rb
View File

@ -55,6 +55,11 @@ def find(identifier)
@items.find{|i| i.identifier == identifier} @items.find{|i| i.identifier == identifier}
end end
def get_var(instance_var)
instance_variable_defined?("@#{instance_var}") ? instance_variable_get("@#{instance_var}") : yield
end
def item_tree(item, options = {}) def item_tree(item, options = {})
crumb = item[:crumb] || item[:title] crumb = item[:crumb] || item[:title]
options[:heading_level] ||= 1 if options.fetch(:headings, true) options[:heading_level] ||= 1 if options.fetch(:headings, true)
@ -91,4 +96,10 @@ def item_tree(item, options = {})
%Q{#{contents}#{child_html}} %Q{#{contents}#{child_html}}
end end
def tutorial_item(path)
path = "" if path == :root
@items.detect do |i|
i.identifier == "/tutorials/#{path}"
end
end

1
doc-src/lib/stylesheets.rb
View File

@ -36,7 +36,6 @@ def reference_item(options)
@items.detect do |i| @items.detect do |i|
i.identifier =~ /^\/reference/ && i.identifier =~ /^\/reference/ &&
i[:stylesheet] == path i[:stylesheet] == path
end end
end end
end end