- Some helpers for the body attributes

- Move the blueprint reference content to the blueprint tutorial
- Made new blueprint reference content that is actually reference
  content.
- Some basic helpers for accessing a sass stylesheet and extracting info
  from it.
This commit is contained in:
Chris Eppstein 2010-01-21 11:54:47 -08:00
parent 598d36682c
commit 4afca420c3
8 changed files with 151 additions and 2 deletions

View File

@ -0,0 +1,14 @@
%h1= item[:title]
%p
The blueprint module is a simple way of importing all of the most
commonly used blueprint modules. In addition, it provides
a single mixin, <code class="mixin">+blueprint</code>, that
can be used to generate the blueprint css styles.
%h2 Imports
%ol
- imports(@item).each do |import|
%li= import

View File

@ -0,0 +1,6 @@
---
title: Blueprint Module
framework: blueprint
stylesheet: _blueprint.sass
classnames:
- reference

View File

@ -0,0 +1,68 @@
%h1= item[:title]
%h2#semantic-blueprint Semantic Blueprint Template
%p
The semantic template assumes that you will write your own selectors
and apply the blueprint mixins to them to achieve a design that does
not use any presentational classes. This is the preferred approach for
using Blueprint with compass, but if you want a more traditional
approach, consider the <a href="#basic-blueprint">Basic
Blueprint Template</a>.
%h2 Getting Started with Semantic Blueprint
%p
Once you get Compass installed, you are ready to create a new
blueprint project. In your terminal enter the following commands:
%code.shell
%pre
%span.prompt<> $&nbsp;
compass create my_project --using blueprint/semantic
%br>
%span.prompt<> $&nbsp;
cd my_project
%hr
%h2#basic-blueprint Basic Blueprint Template
%p
The basic template is the starting point for working with blueprint
in compass. It can be used to generate CSS that is virtually identical
to the Blueprint CSS. If all you want is an easy way to customize the
grid or typography, youll be using these libraries. Since the basic
library is built on top of the blueprint modules, customization will
require that you refer to the particular module you want to customize.
%p
If you want to get started with the Basic Template because it feels
more familiar to you, that's fine. It's very easy to transition to
<a href="#semantic-blueprint">semantic selectors</a> when you're ready.
%h2 Getting Started with Basic Blueprint
%p
Once you get Compass installed, you are ready to create a new
blueprint project. In your terminal enter the following commands:
%code.shell
%pre
%span.prompt<> $&nbsp;
compass create my_project --using blueprint/basic
%h2 Blueprint Plugins
%p
The core blueprint plugins are available, but must be installed
into your project. Follow the instructions below:
%ul
%li
%a(href="#") Blueprint Buttons
%li
%a(href="#") Blueprint Link Icons

View File

@ -0,0 +1,4 @@
---
title: Blueprint Framework
classnames:
- tutorial

View File

@ -5,7 +5,7 @@
#{@item[:title]} - Compass
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
%link{ :href => "/stylesheets/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
%body
%body{body_attributes(@item)}
#container
#main
= yield

View File

@ -1,4 +1,19 @@
# All files in the 'lib' directory will be loaded
# before nanoc starts compiling.
include Nanoc3::Helpers::LinkTo
include Nanoc3::Helpers::LinkTo
def body_class(item)
(item[:classnames] || []).join(" ")
end
def body_id(item)
item.identifier.chop[1..-1].gsub(/\/|_/, "-")
end
def body_attributes(item)
{
:id => body_id(item),
:class => body_class(item)
}
end

View File

@ -0,0 +1,28 @@
def stylesheets_dir(framework)
Compass::Frameworks[framework].stylesheets_directory
end
def stylesheet_key(item)
[item[:framework], item[:stylesheet]].join("/")
end
def tree(item)
@stylesheets ||= {}
@stylesheets[stylesheet_key(item)] ||= begin
file = File.join(stylesheets_dir(item[:framework]), item[:stylesheet])
contents = File.read(file)
Sass::Engine.new(contents).send :to_tree
end
end
def imports(item)
sass_tree = tree(item)
imports = []
sass_tree.children.each do |child|
if child.is_a?(Sass::Tree::ImportNode)
imports << child.imported_filename
end
end
imports
end

View File

@ -0,0 +1,14 @@
module Sass
module Tree
class VariableNode < Node
attr_accessor :name unless method_defined? :name
end
class MixinDefNode < Node
attr_accessor :name unless method_defined? :name
attr_accessor :args unless method_defined? :args
end
class ImportNode < Node
attr_accessor :imported_filename unless method_defined? :imported_filename
end
end
end