Move the tutorials to the new layout.
This commit is contained in:
parent
99f797127f
commit
b2a9eab211
@ -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|
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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.
|
||||||
|
@ -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 {
|
||||||
|
@ -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)}
|
||||||
|
#compass-nav a[href="#{$url}"]
|
||||||
background: #cccccc
|
background: #cccccc
|
||||||
cursor: default
|
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)
|
||||||
|
@ -3,6 +3,7 @@ title: Compass Tutorials
|
|||||||
crumb: Tutorials
|
crumb: Tutorials
|
||||||
classnames:
|
classnames:
|
||||||
- tutorial
|
- tutorial
|
||||||
|
layout: tutorial
|
||||||
---
|
---
|
||||||
%h1 Compass Tutorials
|
%h1 Compass Tutorials
|
||||||
|
|
||||||
|
@ -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,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Blueprint Framework
|
title: Blueprint Framework
|
||||||
|
layout: tutorial
|
||||||
classnames:
|
classnames:
|
||||||
- tutorial
|
- tutorial
|
||||||
---
|
---
|
||||||
|
@ -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`.
|
@ -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
|
@ -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,6 +37,7 @@
|
|||||||
%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
|
%li
|
||||||
%a{:href => "/docs/plugins/"} plugins
|
%a{:href => "/docs/plugins/"} plugins
|
||||||
#search-docs
|
#search-docs
|
||||||
|
@ -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
5
doc-src/layouts/tutorial.haml
Normal 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
|
@ -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
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user