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)

104
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!
<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
Compass is a tool that runs on the command line.
On any system with ruby installed, open your terminal and type:
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>
:markdown
## Installing Compass
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
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 `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.
## Rails Support
compass init rails /path/to/myrailsproject
## Installing a framework
When creating a new project:
compass create myproject --using blueprint/basic
## Manual Setup
compass create /path/to/project
cd /path/to/project
compass watch
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.
## Manual setup using the Blueprint Framework
When starting a project from scrath:
compass create /path/to/project --using blueprint
When installing into an existing project:
cd myproject
compass install 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)
and/or [File a bug](http://github.com/chriseppstein/compass/issues).
cd /path/to/project
compass install blueprint
To read more about using the Blueprint framework with Compass, [see the docs](/reference/blueprint/)
## Rails Setup
compass init rails /path/to/myrailsproject
Using Blueprint with Rails:
compass init rails /path/to/myrailsproject --using blueprint

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

@ -5,22 +5,25 @@ 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;
$blueprint-grid-margin : 10px;
$font-color : #333;
@import "compass/reset";
@import "compass/utilities";
@import "blueprint";
// etc.
The `_base.scss` file is also a great place to keep your own custom mixins, so
@ -28,14 +31,14 @@ 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";
#wrapper {
@include container;
}
// etc.
It is important to define any compass/framework constants that you want to override
@ -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

12
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>
@ -46,16 +46,16 @@ classnames:
If you want to get started with the Basic Template because it feels
more familiar to you, that's fine. It's very easy to transition to
<a href="#semantic-blueprint">semantic selectors</a> when you're ready.
%h2 Getting Started with Basic Blueprint
%p
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

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

@ -7,14 +7,14 @@ html .syntaxhighlighter {
text-shadow: none;
.code-block { background: none; @extend .clear-box-shadow; }
&, table td.code .container { position: static !important; }
table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
.toolbar { display: none; }
//a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
}
pre {
margin: 1.5em 0;
.code-block { padding: .6em; }
.code-block:first-child { padding: .6em; }
}
.code-block { @extend .round-corners-4; @extend .fixed-font;
@ -25,12 +25,12 @@ pre {
}
.source-documentation {
@extend .round-corners-4;
@extend .round-corners-4;
padding: 10px 15px;
@include round-bottom-corners
}
h3 { @include round-corners;
h3 { @include round-corners;
padding: 10px 15px;
margin: 20px 0 20px;
font-weight: bold;
@ -66,18 +66,18 @@ h2 + a[rel="view source"]{ margin-top: 12px;}
}
.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;
// set up bold and italic
.bold { font-weight: bold; }
.italic { font-style: italic; }
.line { white-space: pre; }
// main table and columns
table { width: 100%;
td.code { width: 100%;
.line { padding: 0 .6em; } }
.line { padding: 0 .6em; } }
td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines
// Styles for the toolbar
.toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
span.title { display: inline; }
@ -86,4 +86,4 @@ h2 + a[rel="view source"]{ margin-top: 12px;}
&::-webkit-scrollbar { width: 12px; height: 12px; }
&::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
&::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
}
}

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

@ -2,7 +2,7 @@ $min-width: 530px;
$side-nav-width: 150px;
$main-min-width: $min-width - $side-nav-width;
body {
body {
max-width: 1500px;
min-width: $min-width;
margin: 0 auto;
@ -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;}
body#home #page article { padding-left: 0;}

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

@ -4,12 +4,12 @@
height: 0; width: 0;
position: absolute;
border-style: solid; }
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;
@ -21,22 +21,31 @@ header { @extend .group;
#sub-nav {
@extend .group;
padding: 8px 0; }
#docs-nav, #module-nav {
display: inline-block;
float: left;
a {
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;
@ -62,7 +71,7 @@ header { @extend .group;
margin-left: -5px;
}
}
#search-docs {
position: absolute; top: 29px; right: 0;
&:before {
@ -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; } }
position: relative; } }

9
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;
}
@ -18,4 +21,4 @@ aside {
.beta span:after {
content: " (\3B2)";
}
}
}

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

@ -1,86 +1,90 @@
@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg){
body { background: $page-bg; color: $text;
a { color: $link; } }
#page { @extend .horizontal-rule-#{$theme}; }
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
nav a { color: $nav-link; }
#main-nav a { color: $main-nav;}
body#home #main-nav a[rel=home],
body#help #main-nav a[rel=help],
body.reference #main-nav a[rel=documentation],
body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
#search-docs input {
@extend .inset-panel-#{$theme}; color: $search;
@extend .inset-panel-#{$theme}; color: $search;
&::-webkit-input-placeholder { color: $search; } }
#{headings()}{ color: $heading;
strong { color: $main-nav-selected; }
em { color: $code; } }
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; }
#theme_pref { @extend .theme-switch-#{$theme}; }
#docs_panel div { background: $option-panel-bg; border: 1px solid $option-panel-border; border-top: 0; }
body#home .overview div { @extend .inset-panel-#{$theme};
h4 { @extend .horizontal-rule-#{$theme}; } }
#featured_sites li { @extend .inset-panel-#{$theme}; }
}
@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
#page > article {
h1, h2 { @extend .horizontal-rule-#{$theme}; }
h3 { @extend .heading-panel-#{$theme}; } }
#sub-nav { @extend .horizontal-rule-#{$theme}; }
#docs-nav { @extend .vertical-rule-#{$theme}; }
body.core a[rel=core], body.blueprint a[rel=blueprint]{ @extend .inset-panel-#{$theme}; color: $docs-nav-selected; @extend .round-corners-4;}
#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}; }
#version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
.mixin-source { @extend .mixin-panel-#{$theme}; }
h2 a.help { color: $heading;}
.source-documentation { @extend .doc-panel-#{$theme}; }
.arg { color: $code; }
.arg[data-default-value] { color: rgba($code, .7); }
a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} }
}
// Dark theme
.inset-panel-dark {
@include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
background: darken(#2f2f2f, 4); background-color: rgba(#000, .3); }
.horizontal-rule-dark {
.horizontal-rule-dark {
@include box-shadow(rgba(#fff, .07) 0 1px 0);
border-bottom: 1px solid #121212; }
.vertical-rule-dark {
@include box-shadow(rgba(#fff, .07) 1px 0 0);
border-right: 1px solid #121212; }
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
.heading-panel-dark {
@ -124,22 +128,22 @@
$strong-text: #dbdbdb;
$search: #6e6e6e;
$code: #dadbb1;
$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;
$option-panel-border: rgba(#000, .3);
$option-panel-bg: rgba(#fff, .03);
@include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
@if($docs){
@if($docs){
@include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
.syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
.syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
@ -151,15 +155,15 @@
@include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
text-shadow: 0 1px 1px #fff;
background-color: rgba(#000, .04); }
.horizontal-rule-light {
.horizontal-rule-light {
@include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
border-bottom: 1px solid #bbb; }
.vertical-rule-light {
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
border-right: 1px solid #bbb; }
.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); }
.syntax-switch-light {
@ -218,7 +222,7 @@
$option-panel-bg: #fff;
@include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
@if($docs){
@include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
.syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }

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

@ -15,10 +15,10 @@
@import "partials/main";
@import "partials/code";
@import "syntax/syntax-theme";
//@import "syntax/syntax-theme";
@import "core/clearing-classes";
html.dark { @include dark-theme(true); }
html.light { @include light-theme(true); }
html.light { @include light-theme(true); }

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; }

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

@ -13,10 +13,10 @@
%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"}
- if @item[:content_for_additional_css]
%style(type="text/css")= @item[:content_for_additional_css]
%body{body_attributes(@item)}= yield
%body{body_attributes(@item)}= yield

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"

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

@ -1,5 +1,5 @@
- 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)
%article= yield
%article= yield