[Docs] Better intro page.
This commit is contained in:
parent
ae231c7f6d
commit
c361229ef0
@ -6,7 +6,7 @@ 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
|
||||||
@ -14,16 +14,49 @@ body_id: home
|
|||||||
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.
|
|
||||||
|
|
||||||
<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&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4335944&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="660" height="371" /></object>
|
On any system with ruby installed, open your terminal and type:
|
||||||
|
|
||||||
%h2 Bugs Reports, Discussions, Support
|
gem install compass
|
||||||
|
|
||||||
|
This will install Compass and Sass too. Verify that compass is installed:
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
:markdown
|
|
||||||
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
13
doc-src/content/screencast.haml
Normal 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&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4335944&server=vimeo.com&show_title=1&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="660" height="371" /></object>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user