diff --git a/doc-src/content/reference/blueprint.haml b/doc-src/content/reference/blueprint.haml new file mode 100644 index 00000000..64962e88 --- /dev/null +++ b/doc-src/content/reference/blueprint.haml @@ -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, +blueprint, that + can be used to generate the blueprint css styles. + +%h2 Imports + +%ol + - imports(@item).each do |import| + %li= import + diff --git a/doc-src/content/reference/blueprint.yaml b/doc-src/content/reference/blueprint.yaml new file mode 100644 index 00000000..ffc26779 --- /dev/null +++ b/doc-src/content/reference/blueprint.yaml @@ -0,0 +1,6 @@ +--- +title: Blueprint Module +framework: blueprint +stylesheet: _blueprint.sass +classnames: + - reference diff --git a/doc-src/content/tutorials/blueprint.haml b/doc-src/content/tutorials/blueprint.haml new file mode 100644 index 00000000..f5e78b70 --- /dev/null +++ b/doc-src/content/tutorials/blueprint.haml @@ -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 Basic + Blueprint Template. + +%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 + semantic selectors 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 + + diff --git a/doc-src/content/tutorials/blueprint.yaml b/doc-src/content/tutorials/blueprint.yaml new file mode 100644 index 00000000..8dfa9d03 --- /dev/null +++ b/doc-src/content/tutorials/blueprint.yaml @@ -0,0 +1,4 @@ +--- +title: Blueprint Framework +classnames: + - tutorial diff --git a/doc-src/layouts/default.haml b/doc-src/layouts/default.haml index ac2c3357..ac95383c 100644 --- a/doc-src/layouts/default.haml +++ b/doc-src/layouts/default.haml @@ -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 diff --git a/doc-src/lib/default.rb b/doc-src/lib/default.rb index 77f02e4c..4a07e045 100644 --- a/doc-src/lib/default.rb +++ b/doc-src/lib/default.rb @@ -1,4 +1,19 @@ # All files in the 'lib' directory will be loaded # before nanoc starts compiling. -include Nanoc3::Helpers::LinkTo \ No newline at end of file +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 \ No newline at end of file diff --git a/doc-src/lib/stylesheets.rb b/doc-src/lib/stylesheets.rb new file mode 100644 index 00000000..de27f083 --- /dev/null +++ b/doc-src/lib/stylesheets.rb @@ -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 diff --git a/doc-src/lib/stylesheets/sass_extensions.rb b/doc-src/lib/stylesheets/sass_extensions.rb new file mode 100644 index 00000000..5efbbc98 --- /dev/null +++ b/doc-src/lib/stylesheets/sass_extensions.rb @@ -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 \ No newline at end of file