diff --git a/doc-src/content/best_practices.haml b/doc-src/content/best_practices.haml new file mode 100644 index 00000000..8f9f1a2a --- /dev/null +++ b/doc-src/content/best_practices.haml @@ -0,0 +1,104 @@ +--- +title: Best practices +crumb: Best practices +--- + +%h3 + Use a Base stylesheet file +%p + Create a + %code + _base.sass + %a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" } + partial + to initialize your stylesheets with common variables and ( + %a{ :href => "http://groups.google.com/group/compass-users/browse_frm/thread/0ed216d409476f88" } + often + ) the framework utilities you plan to use: +%h4 + _base.sass +%pre + \!blueprint_grid_columns = 24 + \!blueprint_grid_width = 30px + \!blueprint_grid_margin = 10px + \!font_color = #333 + \ + @import compass/reset.sass + @import compass/utilities.sass + @import blueprint/screen.sass + \ + \// etc. +%p + The + %code + _base.sass + file is also a great place to keep your own custom mixins, so they’re available to any stylesheet that includes it. +%p + Then you can include this file in all other stylesheets: +%h4 + application.sass +%pre + @import base.sass + \ + \#wrapper + \ +container + \ + \// etc. +%p + It is important to define any compass/framework constants that you want to override in base.sass first, before @import-ing the framework files. See + %a{ :href => "http://wiki.github.com/chriseppstein/compass/overriding-constants" } + Overriding Constants + , for an example of where the number of grid columns for blueprint is overridden/set to 32. + %br + Note that you can refer to + %code + _base.sass + without the leading underscore, since it is a + %a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" } + partial + \. +%h3 + Write your own Custom Mixins +%p + Mixins let you insert any number of style rules into a selector (and its descendants!) with a single line. This is a great way to + %a{ :href => "http://c2.com/cgi/wiki?DontRepeatYourself" } + %span.caps + DRY + up your stylesheet source code and make it much more maintainable. Using mixins will also make your stylesheet look like self-documented source code — like using descriptive method names in a programming language. It’s much more obvious to read something like + %code + +round_corners(6px, #f00) + than the whole list of rules which define that appearance. +%h4 + Mixin Example +%pre + \// 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 + \// #root_footer + \// #footer + \ + \=attach_footer( !footer_height ) + \ :height 100% + \ + 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 + 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 + \html + \ +attach_footer( 54px ) diff --git a/doc-src/content/frameworks.haml b/doc-src/content/frameworks.haml new file mode 100644 index 00000000..08530864 --- /dev/null +++ b/doc-src/content/frameworks.haml @@ -0,0 +1,205 @@ +--- +title: Plugins and frameworks +crumb: Plugins and frameworks +--- + +%h3 + Adding Frameworks to Compass + +%ul + %li + Add a folder under + %code + compass/frameworks + %li + Register it by creating a file in + %code + compass/lib/compass/frameworks/ + %li + Require it in + %code + compass/lib/compass/frameworks.rb + \. + +%h3 + Supported Frameworks + +%table.datagrid + %tr + %th Framework + %th Version + %th Status + %th Homepage + %th Documentation + %tr + %td Compass Core + %td 0.10 + %td pre5 + %td + %a + http://compass-style.org + %td + You are currently vising the Compass docs. + %tr + %td Blueprint + %td 0.8.0 + %td Stable + %td + %a + http://blueprintcss.org/ + %td + %a{:href => "/docs/reference/blueprint/"} + Blueprint docs + %tr + %td YUI + %td 2.5.2 + %td Beta + %td + %a + http://developer.yahoo.com/yui/grids/ + %td + %a{:href => "/docs/reference/yui/"} + YUI docs + %tr + %td 960 + %td 1.0 + %td Stable + %td + %a + http://960.gs/ + %td + %a{:href => "http://github.com/chriseppstein/compass-960-plugin"} + Compass960 plugin on Github + +%h3 + Compass plugins + +%p + Compass allows you to easily download, install, and upgrade plugins that share design and design elements between users and projects. + +%p + For instructions on how to install a plugin, please refer to the individual plugin's instructions. + +%h3 Released Plugins + +%h4 Frameworks + +%ul + %li + %a{ :href => "http://github.com/chriseppstein/compass-960-plugin" } + 960.gs + – a lightweight CSS framework for producing fixed-width grid-based layouts + %li + %a{ :href => "http://github.com/adamstac/grid-coordinates" } + Grid Coordinates + – a lightweight CSS framework for producing fixed-width grid-based layouts, based on + %a{ :href => "http://1kbgrid.com/" } + 1KB CSS Grid + (which was loosely based on 960.gs). Supports nested grids. + %li + %a{ :href => "http://github.com/alexcabrera/graphpaper" } + GraphPaper + – a lightweight CSS framework for producing fixed-width grid-based layouts + %li + %a{ :href => "http://github.com/tdreyno/compass-baseline" } + Baseline + – a CSS framework for producing grid-based layouts (up to 8 columns) with typography. See + %a{ :href => "http://baselinecss.com/" } + http://baselinecss.com/ + %li + %a{ :href => "http://github.com/bangpound/compass-drupal-zen-plugin" } + Drupal Zen + – adds the Drupal Zen theme STARTERKIT to Compass + %li + %a{ :href => "http://github.com/ericam/compass-susy-plugin" } + Susy + – a semantic CSS framework creator. Susy is an expert at fluid grids in an elastic (or fluid, or fixed) shell that will never activate the horizontal scroll bar. + +%h3 + Colors +%ul + %li + %a{ :href => "http://github.com/chriseppstein/compass-colors" } + Compass Colors + – for working with colors in Sass, and generating color themes + +%h3 + Widgets +%ul + %li + %a{ :href => "http://github.com/imathis/fancy-buttons" } + Fancy Buttons + – + %a{ :href => "http://sass-lang.com/tutorial.html#mixins" } + mixins + to get beautiful buttons with + %span.caps + CSS + gradients that degrade nicely. Uses Compass Colors. + +%h3 + Misc +%ul + %li + %a{ :href => "http://github.com/tdreyno/compass-slickmap" } + Slickmap + – plugin for + %a{ :href => "http://astuteo.com/slickmap/" } + slickmap + sitemaps + +%h3 + Sass Libraries +%p + Libraries are simply Sass stylesheets or + %a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" } + partials + \. +%ul + %li + %a{ :href => "http://github.com/handcrafted/handcrafted-compass-mixins/blob/master/_border-radius.sass" } + Handcrafted Rounded Corners + %li + %a{ :href => "http://github.com/ntreadway/JQuery.tools.tabs.sass" } + Ntreadway JQuery tools tabs +%h3 + Plugins that are Works-In-Progress +%ul + %li + %a{ :href => "http://github.com/hpoydar/compass-aristo-plugin" } + Aristo + %li + %a{ :href => "http://github.com/marnen/compass-elastic-plugin" } + Elastic + %li + %a{ :href => "http://github.com/jtoy/compass-fluid960-plugin" } + Fluid 960 + %li + %a{ :href => "http://github.com/kosmas58/compass-jquery-plugin" } + jQuery + %li + %a{ :href => "http://github.com/djmaze/compass-yaml-plugin" } + %span.caps + YAML + +%h3 + Other Sass-based Projects +%ul + %li + %a{ :href => "http://github.com/jazen/css" } + Jazen’s + %span.caps + CSS + Framework + – Sass library that + %em + should + be a compass plugin. + %li + %a{ :href => "http://github.com/teejayvanslyke/sassafras" } + Sassafras + – Color Scheme Generator for Sass + %li + %a{ :href => "http://github.com/danboy/tenplate" } + Tenplate + – Another Sass library with rails helpers. diff --git a/doc-src/content/index.haml b/doc-src/content/index.haml index cfe0d09f..4174ff4d 100644 --- a/doc-src/content/index.haml +++ b/doc-src/content/index.haml @@ -3,7 +3,7 @@ title: Compass Documentation crumb: Docs body_id: home --- -%h1 Compass +%h1#logo Compass %p Compass is a stylesheet authoring tool that uses the Sass stylesheet diff --git a/doc-src/content/stylesheets/main.css b/doc-src/content/stylesheets/main.css new file mode 100644 index 00000000..e69de29b diff --git a/doc-src/content/stylesheets/main.sass b/doc-src/content/stylesheets/main.sass index 87f09946..a61af886 100644 --- a/doc-src/content/stylesheets/main.sass +++ b/doc-src/content/stylesheets/main.sass @@ -29,6 +29,26 @@ body blockquote :font-style italic +hr + :background none + :height 0 + :font-size 0 + :line-height 0 + :border none + :border-top 2px solid #CCC + +// Regular data tables +table.datagrid + border-collapse: collapse + th + :background #EEE + td, + th + border: 1px solid #CCC + text-align: left + padding: 5px + cell-spacing: 0 + // Reference body.reference @@ -94,6 +114,6 @@ ol#breadcrumbs content: "" li.last visibility: hidden -body#home h1 +body#home #logo +replace-text("compass.png", 0px) height: 159px \ No newline at end of file diff --git a/doc-src/layouts/partials/sidebar.haml b/doc-src/layouts/partials/sidebar.haml index cb290885..fb2f6a4d 100644 --- a/doc-src/layouts/partials/sidebar.haml +++ b/doc-src/layouts/partials/sidebar.haml @@ -1,5 +1,23 @@ %h2 Compass Documentation + +%h3 + General + +%ul + %li + %a{:href => "/docs/"} + Home + %li + %a{:href => "/docs/best_practices/"} + Best practices + %li + %a{:href => "/docs/frameworks/"} + Working with plugins and frameworks + +%h3 + Frameworks + %ul = item_tree(reference_item(:stylesheet => "_blueprint.sass")) = item_tree(reference_item(:stylesheet => "_compass.sass"))