Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.
This commit is contained in:
Johan Ronsse
parent
4bc02bc53e
commit
7dc9d66fbf
104
doc-src/content/best_practices.haml
Normal file
104
doc-src/content/best_practices.haml
Normal file
@ -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 )
|
||||||
205
doc-src/content/frameworks.haml
Normal file
205
doc-src/content/frameworks.haml
Normal file
@ -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.
|
||||||
@ -3,7 +3,7 @@ title: Compass Documentation
|
|||||||
crumb: Docs
|
crumb: Docs
|
||||||
body_id: home
|
body_id: home
|
||||||
---
|
---
|
||||||
%h1 Compass
|
%h1#logo Compass
|
||||||
|
|
||||||
%p
|
%p
|
||||||
Compass is a stylesheet authoring tool that uses the Sass stylesheet
|
Compass is a stylesheet authoring tool that uses the Sass stylesheet
|
||||||
|
|||||||
0
doc-src/content/stylesheets/main.css
Normal file
0
doc-src/content/stylesheets/main.css
Normal file
@ -29,6 +29,26 @@ body
|
|||||||
blockquote
|
blockquote
|
||||||
:font-style italic
|
: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
|
// Reference
|
||||||
|
|
||||||
body.reference
|
body.reference
|
||||||
@ -94,6 +114,6 @@ ol#breadcrumbs
|
|||||||
content: ""
|
content: ""
|
||||||
li.last
|
li.last
|
||||||
visibility: hidden
|
visibility: hidden
|
||||||
body#home h1
|
body#home #logo
|
||||||
+replace-text("compass.png", 0px)
|
+replace-text("compass.png", 0px)
|
||||||
height: 159px
|
height: 159px
|
||||||
@ -1,5 +1,23 @@
|
|||||||
%h2
|
%h2
|
||||||
Compass Documentation
|
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
|
%ul
|
||||||
= item_tree(reference_item(:stylesheet => "_blueprint.sass"))
|
= item_tree(reference_item(:stylesheet => "_blueprint.sass"))
|
||||||
= item_tree(reference_item(:stylesheet => "_compass.sass"))
|
= item_tree(reference_item(:stylesheet => "_compass.sass"))
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user