github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Docs] Better intro page.

Browse Source
This commit is contained in:
Chris Eppstein 2010-05-09 23:17:49 -07:00
parent ae231c7f6d
commit c361229ef0
2 changed files with 59 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
doc-src/content/index.haml
View File

@ -6,24 +6,57 @@ body_id: home
%article %article
%h1#logo Compass %h1#logo Compass
%p :markdown
Compass is a stylesheet authoring tool that uses the Sass stylesheet Compass is a stylesheet authoring tool that uses the Sass stylesheet
language to make your stylesheets smaller and your web site easier to language to make your stylesheets smaller and your web site easier to
maintain. Compass provides ports of the best of breed css frameworks maintain. Compass provides ports of the best of breed css frameworks
that you can use without forcing you to use their presentational class that you can use without forcing you to use their presentational class
names. It’s a new way of thinking about stylesheets that must be seen names. It’s a new way of thinking about stylesheets that must be seen
in action! in action!
%h2 Screencast Tutorial ## Installing
%p Compass is a tool that runs on the command line.
This screencast will walk you through getting set up,
learning Sass, and then how to use Compass to style a webpage. On any system with ruby installed, open your terminal and type:
<object width="660" height="371"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4335944&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4335944&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="660" height="371" /></object> gem install compass
%h2 Bugs Reports, Discussions, Support This will install Compass and Sass too. Verify that compass is installed:
:markdown compass version
## Creating a stand-alone project
compass create myproject
mate myproject
compass watch myproject
If you don't have TextMate, substitute the `mate myproject` part with the text
editor of your choice. Edit the `*.scss` files in the `src` directory.
These files are yours and you can change them as you see fit, delete them,
make new ones, etc. Compass will automatically compile them into css in the
`stylesheets` directory whenever they change.
## Rails Support
compass init rails /path/to/myrailsproject
## Installing a framework
When creating a new project:
compass create myproject --using blueprint/basic
When installing into an existing project:
compass install myproject --using blueprint/semantic
With Rails:
compass init rails /path/to/myrailsproject --using blueprint/semantic
## Bugs Reports, Discussions, Support
Send a note to the [mailing list](http://groups.google.com/group/compass-users) Send a note to the [mailing list](http://groups.google.com/group/compass-users)
and/or [File a bug](http://github.com/chriseppstein/compass/issues). and/or [File a bug](http://github.com/chriseppstein/compass/issues).

13
doc-src/content/screencast.haml Normal file
View File

@ -0,0 +1,13 @@
---
title: Compass Documentation
crumb: Docs
body_id: home
---
%h1 Screencast Tutorial
%p
This screencast will walk you through getting set up,
learning Sass, and then how to use Compass to style a webpage.
<object width="660" height="371"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4335944&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4335944&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="660" height="371" /></object>