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

updated docs design and added a layout for site pages

Browse Source
This commit is contained in:
Brandon Mathis 2010-12-07 17:28:52 -06:00
parent caafd963a3
commit 4ab7a6ca9d
14 changed files with 192 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
doc-src/Gemfile.lock
View File

@ -12,9 +12,9 @@ GIT
sass (3.1.0.alpha.50)
PATH
remote: ..
remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
specs:
compass (0.11.alpha.3.d0c39f9)
compass (0.11.alpha.3.caafd96)
chunky_png (~> 0.10.3)
sass (>= 3.1.0.alpha.50)

66
doc-src/content/help/index.haml
View File

@ -3,65 +3,59 @@ title: Compass Help
crumb: Help
classnames:
- help
layout: main
- getting-started
layout: site
---
%article
%h1#logo Compass
%h1 Getting started with Compass
:markdown
Compass is a stylesheet authoring tool that uses the Sass stylesheet
language to make your stylesheets smaller and your web site easier to
maintain. Compass provides ports of the best of breed css frameworks
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
in action!
Compass is an open-source CSS authoring framework which uses the [Sass stylesheet
language](http://sass-lang.com) to make writing stylesheets powerful and easy. If you're
not familiar with Sass, you can take a look at [these simple tutorials](http://sass-lang.com/tutorial.html)
to get caught up.
<object width="700" height="438"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11671458&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=11671458&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="700" height="438"></embed></object><p><a href="http://vimeo.com/11671458">An introduction to Compass</a> from <a href="http://vimeo.com/ltackett">Lorin Tackett</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
## Installing
:markdown
## Installing Compass
Compass is a tool that runs on the command line.
On any system with ruby installed, open your terminal and type:
Compass is a tool that runs on the command line. On any system with ruby installed, open your terminal and type:
gem install compass
This will install Compass and Sass too. Verify that compass is installed:
This will install Compass and Sass too. If you want to verify that compass is installed:
compass version
## Creating a stand-alone project
## Manual Setup
compass create myproject
mate myproject
compass watch myproject
compass create /path/to/project
cd /path/to/project
compass watch
If you don't have TextMate, substitute the `mate myproject` part with the text
editor of your choice. Edit the `*.scss` files in the `sass` 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.
Now you can edit the `*.scss` files in the `sass` directory with the text editor of your choice.
the `compass watch` process will automatically compile your them into css in the stylesheets directory whenever they change.
The files in the `sass` directory are yours and you can change them, delete them, add new ones, etc.
## Rails Support
## Manual setup using the Blueprint Framework
compass init rails /path/to/myrailsproject
When starting a project from scrath:
## Installing a framework
When creating a new project:
compass create myproject --using blueprint/basic
compass create /path/to/project --using blueprint
When installing into an existing project:
cd myproject
compass install blueprint/semantic
cd /path/to/project
compass install blueprint
With Rails:
To read more about using the Blueprint framework with Compass, [see the docs](/reference/blueprint/)
compass init rails /path/to/myrailsproject --using blueprint/semantic
## Rails Setup
## Bugs Reports, Discussions, Support
compass init rails /path/to/myrailsproject
Using Blueprint with Rails:
compass init rails /path/to/myrailsproject --using blueprint
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).

15
doc-src/content/help/tutorials/best_practices.markdown
View File

@ -5,12 +5,15 @@ layout: tutorial
classnames:
- tutorial
---
### Use a Base stylesheet file
# Best Practices
## Use a Base stylesheet file
Create a `_base.scss` [partial][1] to initialize your stylesheets with common
variables and ([often][2]) the framework utilities you plan to use:
#### _base.scss
### _base.scss
$blueprint-grid-columns : 24;
$blueprint-grid-width : 30px;
@ -28,7 +31,7 @@ they’re available to any stylesheet that includes it.
Then you can include this file in all other stylesheets:
#### application.scss
### application.scss
@import "base";
@ -44,7 +47,7 @@ Constants][3] , for an example of where the number of grid columns for blueprint
is overridden/set to 32. Note that you can refer to `_base.scss` without the
leading underscore and without the extension, since it is a [partial][1].
### Write your own Custom Mixins
## Write your own Custom Mixins
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 [DRY][4] up your
@ -53,7 +56,7 @@ also make your stylesheet look like self-documented source code -- It’s much
more obvious to read something like `@include round-corners(6px, #f00)` than the whole
list of rules which define that appearance.
#### Presentation-free Markup
## Presentation-free Markup
CSS was created to extract the presentational concerns of a website from the
webpage content. Following this best practice theoretically results in a website
@ -87,7 +90,7 @@ Instead, ask yourself "what non-presentational quality do these pages share in
common?" In this case, they are all pages of content, so it's better to apply a
body class of "content" to these pages and then style against that class.
#### Nest selectors, but not too much.
## Nest selectors, but not too much.
It's easier to style a webpage from scratch or starting from some common base
point for your application than it is to contend with unwanted styles bleeding

8
doc-src/content/help/tutorials/blueprint.haml
View File

@ -22,8 +22,8 @@ classnames:
Once you get Compass installed, you are ready to create a new
blueprint project. In your terminal enter the following commands:
%code.shell
%pre
%pre.shell
%code
%span.prompt<> $&nbsp;
compass create my_project --using blueprint/semantic
%br>
@ -54,8 +54,8 @@ classnames:
Once you get Compass installed, you are ready to create a new
blueprint project. In your terminal enter the following commands:
%code.shell
%pre
%pre.shell
%code
%span.prompt<> $&nbsp;
compass create my_project --using blueprint/basic

2
doc-src/content/stylesheets/partials/_code.scss
View File

@ -14,7 +14,7 @@ html .syntaxhighlighter {
pre {
margin: 1.5em 0;
.code-block { padding: .6em; }
.code-block:first-child { padding: .6em; }
}
.code-block { @extend .round-corners-4; @extend .fixed-font;

2
doc-src/content/stylesheets/partials/_layout.scss
View File

@ -14,7 +14,7 @@ body {
#page { @extend .group; padding-bottom: 30px; overflow: hidden;}
footer { @extend .group; clear: both; padding-top: 20px;}
header { padding: 22px 0 0; position: relative; }
#page article { padding-left: $side-nav-width + 45px;}
#page aside + article { padding-left: $side-nav-width + 45px;}
aside { float: left; width: $side-nav-width; }
body#home #page article { padding-left: 0;}

19
doc-src/content/stylesheets/partials/_nav.scss
View File

@ -9,7 +9,7 @@ nav a { @include hover-link; }
nav .selected a:hover { text-decoration: none;}
header { @extend .group;
font-size: 1.25em; font-family: "Museo Sans"; border-width: 4px;}
font-size: 1.3em; @extend .heading-font; border-width: 4px;}
#main-nav {
width: 79%;
display: inline-block;
@ -29,14 +29,23 @@ header { @extend .group;
padding: 2px 10px;
display: inline-block; }}
#docs-nav { padding-right: 20px; }
#docs-nav { padding-right: 20px;
& + #module-nav {
padding-left: 10px;
}}
#module-nav {
display: inline-block;
padding-left: 10px;
ul { @include horizontal-list(false); }}
#module-nav li.selected { position: relative;
body.getting-started #module-nav li.getting-started,
body.tutorial #module-nav li.tutorials,
body.support #module-nav li.support,
#module-nav li.selected {
position: relative;
a {
text-decoration: none;
}
a:before{ @extend .triangle-marker;
border-width: 0 8px 8px;
z-index: 2;
@ -78,7 +87,7 @@ header { @extend .group;
}
input { @extend .sans-font; @include round-corners;
@include box-sizing(border-box);
max-width: 200px; min-width: 75px; border: 0; margin: 0; padding: 5px 8px 5px 23px;
max-width: 200px; min-width: 75px; border: 0; margin: 0; padding: 5px 8px 5px 26px;
font-size: .8em;
float: right;
position: relative; } }

7
doc-src/content/stylesheets/partials/_sidebar.scss
View File

@ -1,14 +1,17 @@
aside {
padding-top: 16px;
padding-top: 15px;
text-align: right;
padding-right: 22px;
h2 {
h2, h3 {
text-align: left;
font-size: 1.3em;
line-height: 1.45em;
padding-bottom: .2em;
margin-bottom: .4em;
}
h3 {
padding: 0 0 .5em; line-height: 1.1em;
}
a {
font-size: .85em;
}

14
doc-src/content/stylesheets/partials/_theme.scss
View File

@ -23,7 +23,8 @@
h2 { @extend .horizontal-rule-#{$theme}; }
aside { @extend .vertical-rule-#{$theme};
h2 a { color: $strong-text; } }
h2 a { color: $strong-text; }
h3 { @extend .horizontal-rule-#{$theme}; }}
footer .links li { @extend .vertical-rule-#{$theme}; }
code { @extend .code-block-#{$theme}; color: $code; }
@ -48,9 +49,12 @@
#main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }
#module-nav {
ul { overflow: visible; }
li.selected { @extend .selected-marker-#{$theme};
a { color: $module-nav-selected; } } }
ul { overflow: visible; }}
body.getting-started #module-nav li.getting-started,
body.tutorial #module-nav li.tutorials,
body.support #module-nav li.support,
#module-nav li.selected { @extend .selected-marker-#{$theme};
a { color: $module-nav-selected; } }
a[rel=sass], a[rel=scss] { @extend .syntax-switch-#{$theme}; }
&.sass a[rel=sass], &.scss a[rel=scss] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
@ -129,7 +133,7 @@
$nav-link: #bfbfbf;
$link: saturate(lighten(#85AFC9, 4), 19);
$main-nav: $strong-text;
$main-nav: white;
$main-nav-selected: #fb292d;
$docs-nav-selected: $strong-text;
$module-nav-selected: $link;

2
doc-src/content/stylesheets/screen.scss
View File

@ -15,7 +15,7 @@
@import "partials/main";
@import "partials/code";
@import "syntax/syntax-theme";
//@import "syntax/syntax-theme";
@import "core/clearing-classes";

4
doc-src/content/stylesheets/syntax/_syntax-theme.scss
View File

@ -1,6 +1,6 @@
// Default Syntax Highlighter theme.
@import "shCore.scss";
@import "shThemeRDark.scss";
//@import "shCore.scss";
//@import "shThemeRDark.scss";
/*.syntaxhighlighter {
.keyword { font-weight: bold !important; }

2
doc-src/layouts/basic.haml
View File

@ -13,7 +13,7 @@
%script(src="/javascripts/jquery.cookie.js" type="text/javascript")
%script(src="/javascripts/site.js" type="text/javascript")
%script(src="/javascripts/shCore.js" type="text/javascript" deferred)
%script(src="/javascripts/shBrushSass.js" type="text/javascript" deferred)
-#%script(src="/javascripts/shBrushSass.js" type="text/javascript" deferred)
%script(src="/javascripts/fixups.js" type="text/javascript" deferred)
/[if lte IE 8]
%link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}

35
doc-src/layouts/site.haml Normal file
View File

@ -0,0 +1,35 @@
!!!5
- # This template is just the stuff until the body tag.
%html.no-js{:dir => "ltr", :lang => "en"}
%head
%meta{:charset => "utf-8"}/
%meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
%link(rel="shortcut icon" type="image/png" href="/images/compass_icon.png")
%title
#{@item[:title]} | Compass Documentation
%link{:charset => "utf-8", :href => "/stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
%script(src="/javascripts/jquery-1.3.2.min.js" type="text/javascript")
%script(src="/javascripts/jquery.cookie.js" type="text/javascript")
%script(src="/javascripts/site.js" type="text/javascript")
%script(src="/javascripts/modernizr-1.6.min.js" type="text/javascript")
%body{body_attributes(@item)}
#wrap
= render "partials/main-navigation"
#sub-nav
%nav#module-nav
%ul
%li.getting-started
%a{:href => "/help/", :rel => "getting started"} <span>Getting Started</span>
%li.tutorials
%a{:href => "/help/tutorials/", :rel => "getting started"} <span>Tutorials</span>
%li.support
%a{:href => "http://groups.google.com/group/compass-users", :rel => "support"} <span>Support</span>
%li
%a{:href => "http://github.com/chriseppstein/compass/issues", :rel => "bugs"} <span>Bugs</span>
#page
#docs_panel
#theme_pref
%a{:href => "#", :rel => "theme", :title => "switch theme" } Q
= yield
%footer(role="contentinfo")= render "partials/footer"
= render "partials/analytics"

2
doc-src/layouts/tutorial.haml
View File

@ -1,4 +1,4 @@
- render 'main' do
- render 'site' do
%aside(role="sidebar")
%nav#local-nav
%ul= item_tree(tutorial_item(:root), :depth => 2, :omit_self => false, :heading_level => 2)