- 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:
parent
598d36682c
commit
4afca420c3
14
doc-src/content/reference/blueprint.haml
Normal file
14
doc-src/content/reference/blueprint.haml
Normal 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
|
||||||
|
|
6
doc-src/content/reference/blueprint.yaml
Normal file
6
doc-src/content/reference/blueprint.yaml
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: Blueprint Module
|
||||||
|
framework: blueprint
|
||||||
|
stylesheet: _blueprint.sass
|
||||||
|
classnames:
|
||||||
|
- reference
|
68
doc-src/content/tutorials/blueprint.haml
Normal file
68
doc-src/content/tutorials/blueprint.haml
Normal 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<> $
|
||||||
|
compass create my_project --using blueprint/semantic
|
||||||
|
%br>
|
||||||
|
%span.prompt<> $
|
||||||
|
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, you’ll 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<> $
|
||||||
|
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
|
||||||
|
|
||||||
|
|
4
doc-src/content/tutorials/blueprint.yaml
Normal file
4
doc-src/content/tutorials/blueprint.yaml
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: Blueprint Framework
|
||||||
|
classnames:
|
||||||
|
- tutorial
|
@ -5,7 +5,7 @@
|
|||||||
#{@item[:title]} - Compass
|
#{@item[:title]} - Compass
|
||||||
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
%meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
|
||||||
%link{ :href => "/stylesheets/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
|
%link{ :href => "/stylesheets/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
|
||||||
%body
|
%body{body_attributes(@item)}
|
||||||
#container
|
#container
|
||||||
#main
|
#main
|
||||||
= yield
|
= yield
|
||||||
|
@ -1,4 +1,19 @@
|
|||||||
# All files in the 'lib' directory will be loaded
|
# All files in the 'lib' directory will be loaded
|
||||||
# before nanoc starts compiling.
|
# 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
|
28
doc-src/lib/stylesheets.rb
Normal file
28
doc-src/lib/stylesheets.rb
Normal 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
|
14
doc-src/lib/stylesheets/sass_extensions.rb
Normal file
14
doc-src/lib/stylesheets/sass_extensions.rb
Normal 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
|
Loading…
Reference in New Issue
Block a user