updated docs design and added a layout for site pages
This commit is contained in:
parent
caafd963a3
commit
4ab7a6ca9d
@ -12,9 +12,9 @@ GIT
|
|||||||
sass (3.1.0.alpha.50)
|
sass (3.1.0.alpha.50)
|
||||||
|
|
||||||
PATH
|
PATH
|
||||||
remote: ..
|
remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
|
||||||
specs:
|
specs:
|
||||||
compass (0.11.alpha.3.d0c39f9)
|
compass (0.11.alpha.3.caafd96)
|
||||||
chunky_png (~> 0.10.3)
|
chunky_png (~> 0.10.3)
|
||||||
sass (>= 3.1.0.alpha.50)
|
sass (>= 3.1.0.alpha.50)
|
||||||
|
|
||||||
|
@ -3,65 +3,59 @@ title: Compass Help
|
|||||||
crumb: Help
|
crumb: Help
|
||||||
classnames:
|
classnames:
|
||||||
- help
|
- help
|
||||||
layout: main
|
- getting-started
|
||||||
|
layout: site
|
||||||
---
|
---
|
||||||
%article
|
%article
|
||||||
%h1#logo Compass
|
%h1 Getting started with Compass
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
Compass is a stylesheet authoring tool that uses the Sass stylesheet
|
Compass is an open-source CSS authoring framework which uses the [Sass stylesheet
|
||||||
language to make your stylesheets smaller and your web site easier to
|
language](http://sass-lang.com) to make writing stylesheets powerful and easy. If you're
|
||||||
maintain. Compass provides ports of the best of breed css frameworks
|
not familiar with Sass, you can take a look at [these simple tutorials](http://sass-lang.com/tutorial.html)
|
||||||
that you can use without forcing you to use their presentational class
|
to get caught up.
|
||||||
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&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=11671458&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="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>
|
||||||
|
|
||||||
<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&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=11671458&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="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
|
||||||
## Installing
|
|
||||||
|
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
|
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
|
compass version
|
||||||
|
|
||||||
## Creating a stand-alone project
|
## Manual Setup
|
||||||
|
|
||||||
compass create myproject
|
compass create /path/to/project
|
||||||
mate myproject
|
cd /path/to/project
|
||||||
compass watch myproject
|
compass watch
|
||||||
|
|
||||||
If you don't have TextMate, substitute the `mate myproject` part with the text
|
Now you can edit the `*.scss` files in the `sass` directory with the text editor of your choice.
|
||||||
editor of your choice. Edit the `*.scss` files in the `sass` directory.
|
the `compass watch` process will automatically compile your them into css in the stylesheets directory whenever they change.
|
||||||
These files are yours and you can change them as you see fit, delete them,
|
The files in the `sass` directory are yours and you can change them, delete them, add new ones, etc.
|
||||||
make new ones, etc. Compass will automatically compile them into css in the
|
|
||||||
`stylesheets` directory whenever they change.
|
## Manual setup using the Blueprint Framework
|
||||||
|
|
||||||
## Rails Support
|
When starting a project from scrath:
|
||||||
|
|
||||||
compass init rails /path/to/myrailsproject
|
compass create /path/to/project --using blueprint
|
||||||
|
|
||||||
## Installing a framework
|
|
||||||
|
|
||||||
When creating a new project:
|
|
||||||
|
|
||||||
compass create myproject --using blueprint/basic
|
|
||||||
|
|
||||||
When installing into an existing project:
|
When installing into an existing project:
|
||||||
|
|
||||||
cd myproject
|
cd /path/to/project
|
||||||
compass install blueprint/semantic
|
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
|
||||||
|
|
||||||
Send a note to the [mailing list](http://groups.google.com/group/compass-users)
|
Using Blueprint with Rails:
|
||||||
and/or [File a bug](http://github.com/chriseppstein/compass/issues).
|
|
||||||
|
compass init rails /path/to/myrailsproject --using blueprint
|
||||||
|
|
||||||
|
@ -5,22 +5,25 @@ layout: tutorial
|
|||||||
classnames:
|
classnames:
|
||||||
- tutorial
|
- 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
|
Create a `_base.scss` [partial][1] to initialize your stylesheets with common
|
||||||
variables and ([often][2]) the framework utilities you plan to use:
|
variables and ([often][2]) the framework utilities you plan to use:
|
||||||
|
|
||||||
#### _base.scss
|
### _base.scss
|
||||||
|
|
||||||
$blueprint-grid-columns : 24;
|
$blueprint-grid-columns : 24;
|
||||||
$blueprint-grid-width : 30px;
|
$blueprint-grid-width : 30px;
|
||||||
$blueprint-grid-margin : 10px;
|
$blueprint-grid-margin : 10px;
|
||||||
$font-color : #333;
|
$font-color : #333;
|
||||||
|
|
||||||
@import "compass/reset";
|
@import "compass/reset";
|
||||||
@import "compass/utilities";
|
@import "compass/utilities";
|
||||||
@import "blueprint";
|
@import "blueprint";
|
||||||
|
|
||||||
// etc.
|
// etc.
|
||||||
|
|
||||||
The `_base.scss` file is also a great place to keep your own custom mixins, so
|
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:
|
Then you can include this file in all other stylesheets:
|
||||||
|
|
||||||
#### application.scss
|
### application.scss
|
||||||
|
|
||||||
@import "base";
|
@import "base";
|
||||||
|
|
||||||
#wrapper {
|
#wrapper {
|
||||||
@include container;
|
@include container;
|
||||||
}
|
}
|
||||||
|
|
||||||
// etc.
|
// etc.
|
||||||
|
|
||||||
It is important to define any compass/framework constants that you want to override
|
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
|
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].
|
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
|
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
|
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
|
more obvious to read something like `@include round-corners(6px, #f00)` than the whole
|
||||||
list of rules which define that appearance.
|
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
|
CSS was created to extract the presentational concerns of a website from the
|
||||||
webpage content. Following this best practice theoretically results in a website
|
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
|
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.
|
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
|
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
|
point for your application than it is to contend with unwanted styles bleeding
|
||||||
|
@ -22,8 +22,8 @@ classnames:
|
|||||||
Once you get Compass installed, you are ready to create a new
|
Once you get Compass installed, you are ready to create a new
|
||||||
blueprint project. In your terminal enter the following commands:
|
blueprint project. In your terminal enter the following commands:
|
||||||
|
|
||||||
%code.shell
|
%pre.shell
|
||||||
%pre
|
%code
|
||||||
%span.prompt<> $
|
%span.prompt<> $
|
||||||
compass create my_project --using blueprint/semantic
|
compass create my_project --using blueprint/semantic
|
||||||
%br>
|
%br>
|
||||||
@ -46,16 +46,16 @@ classnames:
|
|||||||
If you want to get started with the Basic Template because it feels
|
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
|
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.
|
<a href="#semantic-blueprint">semantic selectors</a> when you're ready.
|
||||||
|
|
||||||
|
|
||||||
%h2 Getting Started with Basic Blueprint
|
%h2 Getting Started with Basic Blueprint
|
||||||
|
|
||||||
%p
|
%p
|
||||||
Once you get Compass installed, you are ready to create a new
|
Once you get Compass installed, you are ready to create a new
|
||||||
blueprint project. In your terminal enter the following commands:
|
blueprint project. In your terminal enter the following commands:
|
||||||
|
|
||||||
%code.shell
|
%pre.shell
|
||||||
%pre
|
%code
|
||||||
%span.prompt<> $
|
%span.prompt<> $
|
||||||
compass create my_project --using blueprint/basic
|
compass create my_project --using blueprint/basic
|
||||||
|
|
||||||
|
@ -7,14 +7,14 @@ html .syntaxhighlighter {
|
|||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
.code-block { background: none; @extend .clear-box-shadow; }
|
.code-block { background: none; @extend .clear-box-shadow; }
|
||||||
&, table td.code .container { position: static !important; }
|
&, 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; }
|
.toolbar { display: none; }
|
||||||
//a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
|
//a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
margin: 1.5em 0;
|
margin: 1.5em 0;
|
||||||
.code-block { padding: .6em; }
|
.code-block:first-child { padding: .6em; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-block { @extend .round-corners-4; @extend .fixed-font;
|
.code-block { @extend .round-corners-4; @extend .fixed-font;
|
||||||
@ -25,12 +25,12 @@ pre {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.source-documentation {
|
.source-documentation {
|
||||||
@extend .round-corners-4;
|
@extend .round-corners-4;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
@include round-bottom-corners
|
@include round-bottom-corners
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 { @include round-corners;
|
h3 { @include round-corners;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
margin: 20px 0 20px;
|
margin: 20px 0 20px;
|
||||||
font-weight: bold;
|
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;
|
.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;
|
||||||
|
|
||||||
// set up bold and italic
|
// set up bold and italic
|
||||||
.bold { font-weight: bold; }
|
.bold { font-weight: bold; }
|
||||||
.italic { font-style: italic; }
|
.italic { font-style: italic; }
|
||||||
.line { white-space: pre; }
|
.line { white-space: pre; }
|
||||||
|
|
||||||
// main table and columns
|
// main table and columns
|
||||||
table { width: 100%;
|
table { width: 100%;
|
||||||
td.code { 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
|
td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines
|
||||||
|
|
||||||
// Styles for the toolbar
|
// Styles for the toolbar
|
||||||
.toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
|
.toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
|
||||||
span.title { display: inline; }
|
span.title { display: inline; }
|
||||||
@ -86,4 +86,4 @@ h2 + a[rel="view source"]{ margin-top: 12px;}
|
|||||||
&::-webkit-scrollbar { width: 12px; height: 12px; }
|
&::-webkit-scrollbar { width: 12px; height: 12px; }
|
||||||
&::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
|
&::-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; }
|
&::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,7 @@ $min-width: 530px;
|
|||||||
$side-nav-width: 150px;
|
$side-nav-width: 150px;
|
||||||
$main-min-width: $min-width - $side-nav-width;
|
$main-min-width: $min-width - $side-nav-width;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
max-width: 1500px;
|
max-width: 1500px;
|
||||||
min-width: $min-width;
|
min-width: $min-width;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@ -14,7 +14,7 @@ body {
|
|||||||
#page { @extend .group; padding-bottom: 30px; overflow: hidden;}
|
#page { @extend .group; padding-bottom: 30px; overflow: hidden;}
|
||||||
footer { @extend .group; clear: both; padding-top: 20px;}
|
footer { @extend .group; clear: both; padding-top: 20px;}
|
||||||
header { padding: 22px 0 0; position: relative; }
|
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; }
|
aside { float: left; width: $side-nav-width; }
|
||||||
|
|
||||||
body#home #page article { padding-left: 0;}
|
body#home #page article { padding-left: 0;}
|
||||||
|
@ -4,12 +4,12 @@
|
|||||||
height: 0; width: 0;
|
height: 0; width: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-style: solid; }
|
border-style: solid; }
|
||||||
|
|
||||||
nav a { @include hover-link; }
|
nav a { @include hover-link; }
|
||||||
nav .selected a:hover { text-decoration: none;}
|
nav .selected a:hover { text-decoration: none;}
|
||||||
|
|
||||||
header { @extend .group;
|
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 {
|
#main-nav {
|
||||||
width: 79%;
|
width: 79%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -21,22 +21,31 @@ header { @extend .group;
|
|||||||
#sub-nav {
|
#sub-nav {
|
||||||
@extend .group;
|
@extend .group;
|
||||||
padding: 8px 0; }
|
padding: 8px 0; }
|
||||||
|
|
||||||
#docs-nav, #module-nav {
|
#docs-nav, #module-nav {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
a {
|
a {
|
||||||
padding: 2px 10px;
|
padding: 2px 10px;
|
||||||
display: inline-block; }}
|
display: inline-block; }}
|
||||||
|
|
||||||
#docs-nav { padding-right: 20px; }
|
#docs-nav { padding-right: 20px;
|
||||||
|
& + #module-nav {
|
||||||
|
padding-left: 10px;
|
||||||
|
}}
|
||||||
|
|
||||||
#module-nav {
|
#module-nav {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-left: 10px;
|
|
||||||
ul { @include horizontal-list(false); }}
|
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;
|
a:before{ @extend .triangle-marker;
|
||||||
border-width: 0 8px 8px;
|
border-width: 0 8px 8px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@ -62,7 +71,7 @@ header { @extend .group;
|
|||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-docs {
|
#search-docs {
|
||||||
position: absolute; top: 29px; right: 0;
|
position: absolute; top: 29px; right: 0;
|
||||||
&:before {
|
&:before {
|
||||||
@ -78,7 +87,7 @@ header { @extend .group;
|
|||||||
}
|
}
|
||||||
input { @extend .sans-font; @include round-corners;
|
input { @extend .sans-font; @include round-corners;
|
||||||
@include box-sizing(border-box);
|
@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;
|
font-size: .8em;
|
||||||
float: right;
|
float: right;
|
||||||
position: relative; } }
|
position: relative; } }
|
||||||
|
@ -1,14 +1,17 @@
|
|||||||
aside {
|
aside {
|
||||||
padding-top: 16px;
|
padding-top: 15px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 22px;
|
padding-right: 22px;
|
||||||
h2 {
|
h2, h3 {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
line-height: 1.45em;
|
line-height: 1.45em;
|
||||||
padding-bottom: .2em;
|
padding-bottom: .2em;
|
||||||
margin-bottom: .4em;
|
margin-bottom: .4em;
|
||||||
}
|
}
|
||||||
|
h3 {
|
||||||
|
padding: 0 0 .5em; line-height: 1.1em;
|
||||||
|
}
|
||||||
a {
|
a {
|
||||||
font-size: .85em;
|
font-size: .85em;
|
||||||
}
|
}
|
||||||
@ -18,4 +21,4 @@ aside {
|
|||||||
.beta span:after {
|
.beta span:after {
|
||||||
content: " (\3B2)";
|
content: " (\3B2)";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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){
|
@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;
|
body { background: $page-bg; color: $text;
|
||||||
a { color: $link; } }
|
a { color: $link; } }
|
||||||
|
|
||||||
#page { @extend .horizontal-rule-#{$theme}; }
|
#page { @extend .horizontal-rule-#{$theme}; }
|
||||||
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
|
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
|
||||||
|
|
||||||
nav a { color: $nav-link; }
|
nav a { color: $nav-link; }
|
||||||
#main-nav a { color: $main-nav;}
|
#main-nav a { color: $main-nav;}
|
||||||
|
|
||||||
body#home #main-nav a[rel=home],
|
body#home #main-nav a[rel=home],
|
||||||
body#help #main-nav a[rel=help],
|
body#help #main-nav a[rel=help],
|
||||||
body.reference #main-nav a[rel=documentation],
|
body.reference #main-nav a[rel=documentation],
|
||||||
body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
|
body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
|
||||||
|
|
||||||
#search-docs input {
|
#search-docs input {
|
||||||
@extend .inset-panel-#{$theme}; color: $search;
|
@extend .inset-panel-#{$theme}; color: $search;
|
||||||
&::-webkit-input-placeholder { color: $search; } }
|
&::-webkit-input-placeholder { color: $search; } }
|
||||||
#{headings()}{ color: $heading;
|
#{headings()}{ color: $heading;
|
||||||
strong { color: $main-nav-selected; }
|
strong { color: $main-nav-selected; }
|
||||||
em { color: $code; } }
|
em { color: $code; } }
|
||||||
|
|
||||||
h2 { @extend .horizontal-rule-#{$theme}; }
|
h2 { @extend .horizontal-rule-#{$theme}; }
|
||||||
|
|
||||||
aside { @extend .vertical-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}; }
|
footer .links li { @extend .vertical-rule-#{$theme}; }
|
||||||
code { @extend .code-block-#{$theme}; color: $code; }
|
code { @extend .code-block-#{$theme}; color: $code; }
|
||||||
|
|
||||||
#theme_pref { @extend .theme-switch-#{$theme}; }
|
#theme_pref { @extend .theme-switch-#{$theme}; }
|
||||||
#docs_panel div { background: $option-panel-bg; border: 1px solid $option-panel-border; border-top: 0; }
|
#docs_panel div { background: $option-panel-bg; border: 1px solid $option-panel-border; border-top: 0; }
|
||||||
|
|
||||||
body#home .overview div { @extend .inset-panel-#{$theme};
|
body#home .overview div { @extend .inset-panel-#{$theme};
|
||||||
h4 { @extend .horizontal-rule-#{$theme}; } }
|
h4 { @extend .horizontal-rule-#{$theme}; } }
|
||||||
#featured_sites li { @extend .inset-panel-#{$theme}; }
|
#featured_sites li { @extend .inset-panel-#{$theme}; }
|
||||||
|
|
||||||
}
|
}
|
||||||
@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
|
@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
|
||||||
|
|
||||||
#page > article {
|
#page > article {
|
||||||
h1, h2 { @extend .horizontal-rule-#{$theme}; }
|
h1, h2 { @extend .horizontal-rule-#{$theme}; }
|
||||||
h3 { @extend .heading-panel-#{$theme}; } }
|
h3 { @extend .heading-panel-#{$theme}; } }
|
||||||
|
|
||||||
#sub-nav { @extend .horizontal-rule-#{$theme}; }
|
#sub-nav { @extend .horizontal-rule-#{$theme}; }
|
||||||
#docs-nav { @extend .vertical-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;}
|
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; }
|
#main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }
|
||||||
|
|
||||||
#module-nav {
|
#module-nav {
|
||||||
ul { overflow: visible; }
|
ul { overflow: visible; }}
|
||||||
li.selected { @extend .selected-marker-#{$theme};
|
body.getting-started #module-nav li.getting-started,
|
||||||
a { color: $module-nav-selected; } } }
|
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}; }
|
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}; }
|
&.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); } }
|
#version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
|
||||||
.mixin-source { @extend .mixin-panel-#{$theme}; }
|
.mixin-source { @extend .mixin-panel-#{$theme}; }
|
||||||
h2 a.help { color: $heading;}
|
h2 a.help { color: $heading;}
|
||||||
|
|
||||||
|
|
||||||
.source-documentation { @extend .doc-panel-#{$theme}; }
|
.source-documentation { @extend .doc-panel-#{$theme}; }
|
||||||
|
|
||||||
.arg { color: $code; }
|
.arg { color: $code; }
|
||||||
.arg[data-default-value] { color: rgba($code, .7); }
|
.arg[data-default-value] { color: rgba($code, .7); }
|
||||||
a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} }
|
a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dark theme
|
// Dark theme
|
||||||
.inset-panel-dark {
|
.inset-panel-dark {
|
||||||
@include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
|
@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); }
|
background: darken(#2f2f2f, 4); background-color: rgba(#000, .3); }
|
||||||
|
|
||||||
.horizontal-rule-dark {
|
.horizontal-rule-dark {
|
||||||
@include box-shadow(rgba(#fff, .07) 0 1px 0);
|
@include box-shadow(rgba(#fff, .07) 0 1px 0);
|
||||||
border-bottom: 1px solid #121212; }
|
border-bottom: 1px solid #121212; }
|
||||||
|
|
||||||
.vertical-rule-dark {
|
.vertical-rule-dark {
|
||||||
@include box-shadow(rgba(#fff, .07) 1px 0 0);
|
@include box-shadow(rgba(#fff, .07) 1px 0 0);
|
||||||
border-right: 1px solid #121212; }
|
border-right: 1px solid #121212; }
|
||||||
|
|
||||||
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
|
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
|
||||||
|
|
||||||
.heading-panel-dark {
|
.heading-panel-dark {
|
||||||
@ -124,22 +128,22 @@
|
|||||||
$strong-text: #dbdbdb;
|
$strong-text: #dbdbdb;
|
||||||
|
|
||||||
$search: #6e6e6e;
|
$search: #6e6e6e;
|
||||||
|
|
||||||
$code: #dadbb1;
|
$code: #dadbb1;
|
||||||
$nav-link: #bfbfbf;
|
$nav-link: #bfbfbf;
|
||||||
$link: saturate(lighten(#85AFC9, 4), 19);
|
$link: saturate(lighten(#85AFC9, 4), 19);
|
||||||
|
|
||||||
$main-nav: $strong-text;
|
$main-nav: white;
|
||||||
$main-nav-selected: #fb292d;
|
$main-nav-selected: #fb292d;
|
||||||
$docs-nav-selected: $strong-text;
|
$docs-nav-selected: $strong-text;
|
||||||
$module-nav-selected: $link;
|
$module-nav-selected: $link;
|
||||||
|
|
||||||
$option-panel-border: rgba(#000, .3);
|
$option-panel-border: rgba(#000, .3);
|
||||||
$option-panel-bg: rgba(#fff, .03);
|
$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);
|
@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);
|
@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-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; }
|
.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);
|
@include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
|
||||||
text-shadow: 0 1px 1px #fff;
|
text-shadow: 0 1px 1px #fff;
|
||||||
background-color: rgba(#000, .04); }
|
background-color: rgba(#000, .04); }
|
||||||
|
|
||||||
.horizontal-rule-light {
|
.horizontal-rule-light {
|
||||||
@include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
|
@include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
|
||||||
border-bottom: 1px solid #bbb; }
|
border-bottom: 1px solid #bbb; }
|
||||||
|
|
||||||
.vertical-rule-light {
|
.vertical-rule-light {
|
||||||
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
|
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
|
||||||
border-right: 1px solid #bbb; }
|
border-right: 1px solid #bbb; }
|
||||||
|
|
||||||
.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); }
|
.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); }
|
||||||
|
|
||||||
.syntax-switch-light {
|
.syntax-switch-light {
|
||||||
@ -218,7 +222,7 @@
|
|||||||
$option-panel-bg: #fff;
|
$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);
|
@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){
|
@if($docs){
|
||||||
@include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
|
@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); }
|
.syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }
|
||||||
|
@ -15,10 +15,10 @@
|
|||||||
@import "partials/main";
|
@import "partials/main";
|
||||||
@import "partials/code";
|
@import "partials/code";
|
||||||
|
|
||||||
@import "syntax/syntax-theme";
|
//@import "syntax/syntax-theme";
|
||||||
|
|
||||||
@import "core/clearing-classes";
|
@import "core/clearing-classes";
|
||||||
|
|
||||||
|
|
||||||
html.dark { @include dark-theme(true); }
|
html.dark { @include dark-theme(true); }
|
||||||
html.light { @include light-theme(true); }
|
html.light { @include light-theme(true); }
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
// Default Syntax Highlighter theme.
|
// Default Syntax Highlighter theme.
|
||||||
@import "shCore.scss";
|
//@import "shCore.scss";
|
||||||
@import "shThemeRDark.scss";
|
//@import "shThemeRDark.scss";
|
||||||
|
|
||||||
/*.syntaxhighlighter {
|
/*.syntaxhighlighter {
|
||||||
.keyword { font-weight: bold !important; }
|
.keyword { font-weight: bold !important; }
|
||||||
|
@ -13,10 +13,10 @@
|
|||||||
%script(src="/javascripts/jquery.cookie.js" type="text/javascript")
|
%script(src="/javascripts/jquery.cookie.js" type="text/javascript")
|
||||||
%script(src="/javascripts/site.js" type="text/javascript")
|
%script(src="/javascripts/site.js" type="text/javascript")
|
||||||
%script(src="/javascripts/shCore.js" type="text/javascript" deferred)
|
%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)
|
%script(src="/javascripts/fixups.js" type="text/javascript" deferred)
|
||||||
/[if lte IE 8]
|
/[if lte IE 8]
|
||||||
%link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
|
%link{:charset => "utf-8", :href => "/stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
|
||||||
- if @item[:content_for_additional_css]
|
- if @item[:content_for_additional_css]
|
||||||
%style(type="text/css")= @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
35
doc-src/layouts/site.haml
Normal 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"
|
@ -1,5 +1,5 @@
|
|||||||
- render 'main' do
|
- render 'site' do
|
||||||
%aside(role="sidebar")
|
%aside(role="sidebar")
|
||||||
%nav#local-nav
|
%nav#local-nav
|
||||||
%ul= item_tree(tutorial_item(:root), :depth => 2, :omit_self => false, :heading_level => 2)
|
%ul= item_tree(tutorial_item(:root), :depth => 2, :omit_self => false, :heading_level => 2)
|
||||||
%article= yield
|
%article= yield
|
||||||
|
Loading…
Reference in New Issue
Block a user