diff --git a/Gemfile b/Gemfile index 437c930e..b09845d8 100644 --- a/Gemfile +++ b/Gemfile @@ -9,3 +9,4 @@ gem "css_parser" gem "haml" gem "rcov" gem "rubyzip" +gem "livereload" \ No newline at end of file diff --git a/doc-src/.livereload b/doc-src/.livereload new file mode 100644 index 00000000..b185045d --- /dev/null +++ b/doc-src/.livereload @@ -0,0 +1,19 @@ +# Lines starting with pound sign (#) are ignored. + +# additional extensions to monitor +#config.exts << 'haml' + +# exclude files with NAMES matching this mask +#config.exclusions << '~*' +# exclude files with PATHS matching this mask (if the mask contains a slash) +#config.exclusions << '/excluded_dir/*' +# exclude files with PATHS matching this REGEXP +#config.exclusions << /somedir.*(ab){2,4}.(css|js)$/ + +# reload the whole page when .js changes +#config.apply_js_live = false +# reload the whole page when .css changes +#config.apply_css_live = false + +# wait 100ms for more changes before reloading a page +#config.grace_period = 0.1 diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index e74462c1..605c870d 100644 --- a/doc-src/Gemfile.lock +++ b/doc-src/Gemfile.lock @@ -8,8 +8,8 @@ GIT PATH remote: /Users/bmathis/Documents/Workspace/compass-projects/compass specs: - compass (0.11.alpha.0.c9a684c) - haml (>= 3.0.4) + compass (0.11.alpha.0.dabd4f6) + haml (~> 3.0.23) GEM remote: http://rubygems.org/ diff --git a/doc-src/assets/images/compass-logo-small.png b/doc-src/assets/images/compass-logo-small.png new file mode 100644 index 00000000..001ccfa2 Binary files /dev/null and b/doc-src/assets/images/compass-logo-small.png differ diff --git a/doc-src/content/.livereload b/doc-src/content/.livereload new file mode 100644 index 00000000..b185045d --- /dev/null +++ b/doc-src/content/.livereload @@ -0,0 +1,19 @@ +# Lines starting with pound sign (#) are ignored. + +# additional extensions to monitor +#config.exts << 'haml' + +# exclude files with NAMES matching this mask +#config.exclusions << '~*' +# exclude files with PATHS matching this mask (if the mask contains a slash) +#config.exclusions << '/excluded_dir/*' +# exclude files with PATHS matching this REGEXP +#config.exclusions << /somedir.*(ab){2,4}.(css|js)$/ + +# reload the whole page when .js changes +#config.apply_js_live = false +# reload the whole page when .css changes +#config.apply_css_live = false + +# wait 100ms for more changes before reloading a page +#config.grace_period = 0.1 diff --git a/doc-src/content/stylesheets/core/_base-classes.sass b/doc-src/content/stylesheets/core/_base-classes.sass new file mode 100644 index 00000000..c82e39ff --- /dev/null +++ b/doc-src/content/stylesheets/core/_base-classes.sass @@ -0,0 +1,67 @@ +$default-rounded-corner: 4 + +.group + +pie-clearfix + +.truncate + +ellipsis + +.border-box + +box-sizing(border-box) + +.round-corners-4 + +border-radius(4px) + +=round-corners($num: $default-rounded-corner) + @extend .round-corners-#{$num} + +=round-top-corners($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-bottom-right-corner + @extend .clear-bottom-left-corner +=round-bottom-corners($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-top-right-corner + @extend .clear-top-left-corner +=round-left-corners($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-top-right-corner + @extend .clear-bottom-right-corner +=round-right-corners($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-top-left-corner + @extend .clear-bottom-left-corner + +=round-top-left-corner($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-top-right-corner + @extend .clear-bottom-right-corner + @extend .clear-bottom-left-corner +=round-top-right-corner($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-top-left-corner + @extend .clear-bottom-right-corner + @extend .clear-bottom-left-corner +=round-bottom-left-corner($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-top-right-corner + @extend .clear-bottom-right-corner + @extend .clear-top-left-corner +=round-bottom-right-corner($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-top-right-corner + @extend .clear-top-left-corner + @extend .clear-bottom-left-corner + +=square-top-left-corner($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-top-left-corner +=square-top-right-corner($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-top-right-corner +=square-bottom-left-corner($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-bottom-left-corner +=square-bottom-right-corner($num: $default-rounded-corner) + +round-corners($num) + @extend .clear-bottom-right-corner \ No newline at end of file diff --git a/doc-src/content/stylesheets/core/_clearing-classes.sass b/doc-src/content/stylesheets/core/_clearing-classes.sass new file mode 100644 index 00000000..7a31d0d0 --- /dev/null +++ b/doc-src/content/stylesheets/core/_clearing-classes.sass @@ -0,0 +1,11 @@ +.clear-top-left-corner + +border-top-left-radius(0) +.clear-top-right-corner + +border-top-right-radius(0) +.clear-bottom-left-corner + +border-bottom-left-radius(0) +.clear-bottom-right-corner + +border-bottom-right-radius(0) + +.hide + display: none \ No newline at end of file diff --git a/doc-src/content/stylesheets/core/_extensions.scss b/doc-src/content/stylesheets/core/_extensions.scss new file mode 100644 index 00000000..0b979edf --- /dev/null +++ b/doc-src/content/stylesheets/core/_extensions.scss @@ -0,0 +1,10 @@ +@mixin reset($reset-type: false){ + @if($reset-type){ + @if($reset-type == global){ + @include global-reset; + } + @if($reset-type == html5){ + @include reset-html5; + } + } +} \ No newline at end of file diff --git a/doc-src/content/stylesheets/ie.sass b/doc-src/content/stylesheets/ie.sass index 67edc67a..e69de29b 100644 --- a/doc-src/content/stylesheets/ie.sass +++ b/doc-src/content/stylesheets/ie.sass @@ -1,7 +0,0 @@ -/* Welcome to Susy. Use this file to write IE specific override styles. - * Import this file using the following HTML or equivalent: - * - -@import base diff --git a/doc-src/content/stylesheets/partials/_layout.scss b/doc-src/content/stylesheets/partials/_layout.scss new file mode 100644 index 00000000..52756dd4 --- /dev/null +++ b/doc-src/content/stylesheets/partials/_layout.scss @@ -0,0 +1,15 @@ +$min-width: 530px; +$side-nav-width: 150px; +$main-min-width: $min-width - $side-nav-width; + +body { + max-width: 1500px; + min-width: $min-width; + margin: 0 auto; + @extend .sans-font; + line-height: 1.45em; +} +#wrap { @extend .group; padding: 0 20px;} +header { padding: 22px 0 0; position: relative; } +#page > article { padding-left: $side-nav-width + 40px; } +aside { float: left; width: $side-nav-width; } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_main.scss b/doc-src/content/stylesheets/partials/_main.scss new file mode 100644 index 00000000..077f0105 --- /dev/null +++ b/doc-src/content/stylesheets/partials/_main.scss @@ -0,0 +1,10 @@ +#page { + position: relative; + padding-top: 25px; + & > article { padding-top: 14px; font-size: 15px; + h1, h2 { padding-bottom: 6px; margin-bottom: 9px; }}} + +#version { @include round-bottom-corners; + font-size: .7em; + position: absolute; top: 0; right: 0; + padding: 2px 8px 4px; } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_nav.scss b/doc-src/content/stylesheets/partials/_nav.scss new file mode 100644 index 00000000..30396f6e --- /dev/null +++ b/doc-src/content/stylesheets/partials/_nav.scss @@ -0,0 +1,53 @@ +nav a { @include hover-link; } + +header { @extend .group; + font-size: 1.25em; font-family: "Museo Sans"; border-width: 4px;} +#main-nav { + width: 76%; + display: inline-block; + padding-bottom: 10px; + ul { + @include horizontal-list(10px); + line-height: 2em; } + a[rel=home] { + @include replace-text-with-dimensions("compass-logo-small.png"); + display: inline-block; }} + +#subnav { + @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: 15px; + a:last-child { + @extend .round-corners-4; }} + +#module-nav { + display: inline-block; + padding-left: 8px; + ul { + @include horizontal-list(10px);}} + +#search-docs { + display: inline-block; + width: 23%; + vertical-align: top; + float: right; + position: relative; + input { + @extend .sans-font; + @extend .round-corners-4; + position: relative; top: 6px; + margin: 0; padding: 5px 8px; + font-size: .8em; + float: right; + width: 100%; max-width: 200px; min-width: 80px; + @include box-sizing(border-box); + border: 0; }} \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_sidebar.scss b/doc-src/content/stylesheets/partials/_sidebar.scss new file mode 100644 index 00000000..167de6fa --- /dev/null +++ b/doc-src/content/stylesheets/partials/_sidebar.scss @@ -0,0 +1,18 @@ +aside { + padding-top: 20px; + text-align: right; + padding-right: 17px; + h2 { + text-align: left; + font-size: 1.3em; + line-height: 1.45em; + padding-bottom: .2em; + margin-bottom: .4em; + } + a { + font-size: .85em; + } + .deprecated { + text-decoration: line-through; + } +} \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_theme.scss b/doc-src/content/stylesheets/partials/_theme.scss new file mode 100644 index 00000000..54af9244 --- /dev/null +++ b/doc-src/content/stylesheets/partials/_theme.scss @@ -0,0 +1,60 @@ +$page-bg: #343434; +$link-color: #dadbb1; +$text-color: #b6b6b6; +$light-text: #dbdbdb; +$nav-link-color: #bfbfbf; +$current-main-nav: #fb292d; + +.dark-inset-panel { + @include background-image(linear-gradient(rgba(#000, .5), rgba(#000, 0))); + @include single-box-shadow(rgba(#fff, .1), 0, 1px, 0); + background-color: rgba(#000, .2); } + +.dark-horizontal-rule { + @include single-box-shadow(rgba(#fff, .07), 0, 1px, 0); + border-bottom: 1px solid #121212; } + +.dark-vertical-rule { + @include single-box-shadow(rgba(#fff, .07), 1px, 0, 0); + border-right: 1px solid #121212; } + +.dark-code-block { @extend .round-corners-4; @extend .inset-panel; + display: inline-block; + padding-left: 2px; + padding-right: 2px; } + + +// Dark Theme + +body { background: $page-bg; color: $text-color; + a { color: $link-color; }} + +header{ @extend .dark-horizontal-rule; } + +#main-nav { + a { color: $light-text; } + a[rel=documentation] { color: $current-main-nav; }} + +#search-docs { + input::-webkit-input-placeholder { color: #6e6e6e; } + input { @extend .dark-inset-panel; background-color: rgba(#000, .2); color: #6e6e6e;}} + +nav a { color: $nav-link-color; } +#subnav { @extend .dark-horizontal-rule; } +#version { + background: rgba(#fff, .03); + color: rgba(#fff, .4); + a { @include hover-link; color: rgba(#fff, .7);} + border: 1px solid rgba(#000, .3); border-top: 0; } + +aside { @extend .dark-vertical-rule; + h2 { @extend .dark-horizontal-rule; + a { color: $light-text; }}} +#page > article { + h1, h2 { @extend .dark-horizontal-rule; } + #{headings()}{ color: #fff; }} + +#docs-nav { @extend .dark-vertical-rule; + a:last-child { @extend .dark-inset-panel; color: $light-text; }} + +#module-nav .selected a { color: $link-color; } \ No newline at end of file diff --git a/doc-src/content/stylesheets/partials/_typography.scss b/doc-src/content/stylesheets/partials/_typography.scss new file mode 100644 index 00000000..356765b3 --- /dev/null +++ b/doc-src/content/stylesheets/partials/_typography.scss @@ -0,0 +1,14 @@ +@font-face { font-family: 'pictos-web'; src: url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.eot'); src: local('☺'), url('http://s3.imathis.com/shared-assets/pictos-font/http://pictos-web.woff') format('woff'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.ttf') format('truetype'), url('http://s3.imathis.com/shared-assets/pictos-font/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal;} + +.sans-font { font-family: 'Lucida Grande', Arial, sans-serif; } +.heading-font { font-family: 'Museo Sans', 'serif'; } +.pictos { font-family: pictos-web; } + +#page > article { + ol { list-style: outside decimal; padding-left: 2.5em;} + ul, ol { margin-bottom: 1.5em;} + p { margin-bottom: 1.2em;} + #{headings()}{ @extend .heading-font; line-height: 1.2em; } + h1 { font-size: 30px; } + h2 { font-size: 20px; } +} \ No newline at end of file diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass index 3a13856a..96c9c450 100644 --- a/doc-src/content/stylesheets/screen.sass +++ b/doc-src/content/stylesheets/screen.sass @@ -1,295 +1,15 @@ -/* Welcome to Susy. Use this file to define screen styles. - * Import this file using the following HTML or equivalent: - * -@charset "UTF-8" -@import defaults -@import slideshow -@import shared -@import compass/layout -@import compass/utilities +@import compass +@import core/extensions ++reset(global) ++reset(html5) +@import core/base-classes -/* @group STRUCTURE +@import partials/theme +@import partials/layout +@import partials/typography -+susy +@import partials/nav +@import partials/sidebar +@import partials/main -header[role="banner"] h1, #compass-nav - +columns(6) - -header[role="banner"] - background: #f9f9f9 - div - +container - h1 - +alpha - +adjust-font-size-to(18px) - text-transform: uppercase - a - display: block - +padding-leader(2, 18px) - +padding-trailer(1.5, 18px) - -header[role="banner"], -#page, -#docs-nav, -#module-nav, -footer[role="contentinfo"] - +pad(0.5,0.5) - +box-sizing(border-box) - +min-width(784px / $base-font-size * 1em) - -#compass-nav - +omega - text-align: right - ul - +inline-block-list - +padding-leader(2) - +trailer(1.5) - a - +inline-block - +adjust-font-size-to(14px) - padding: 0 1em - +border-top-left-radius(0.5em) - +border-bottom-right-radius(0.5em) - -=active-compass-nav($id, $url) - #{append-selector(body, $id)} - #compass-nav a[href="#{$url}"] - background: #cccccc - cursor: default - -#docs-nav - +pie-clearfix - +leading-border(1px, 0.25) - +trailing-border(1px, 0.25) - position: relative - // CE: the 1.5 here is because the padding is included - // in the height due to having box-sizing applied. - height: $base-rhythm-unit * 1.5 - border-color: #cccccc - background-color: #eeeeee - .container - +container - +pie-clearfix - overflow: visible - ul - +horizontal-list - overflow: visible - position: relative - li - top: -$base-rhythm-unit * 0.5 - margin-bottom: -$base-rhythm-unit * 0.5 - position: relative - a - &:link, &:visited - display: block - padding: 0 $side-gutter-width - border: 1px solid #eeeeee - +leading-border(1px, 0.5) - +trailing-border(1px, 0.25) - border-bottom: 0 - +border-top-radius(0.5em) - background: #dddddd - &:hover, &:focus, &:active - background-color: #eeeeee - border-color: #dddddd - -=active-docs($type, $url) - body#{$type} #docs-nav a[href="#{$url}"] - &:link, &:visited - +trailing-border(1px, 0.25) - cursor: default - background: white - border-color: #cccccc - border-bottom-color: white - -+active-docs("#home", "/docs/") -+active-docs(".core", "/docs/reference/compass/") -+active-docs(".blueprint", "/docs/reference/blueprint/") -+active-docs(".tutorial", "/docs/tutorials/") - - -#version - +adjust-font-size-to(14px) - +float(left) - margin-left: 1.5em - color: #999 - .number - color: #666 - -#search-docs - color: #999 - p - margin: 0 - +columns(3) - +omega - label - +float(left) - width: columns(1,3) + gutter(3)*.5 - margin: 0 - text-align: right - input - +columns(2,3) - +omega - -#page - +container - +leader(3) - -#comments - +columns(9) - +omega - -$footer-height: 5em + $base-rhythm-unit -+sticky-footer($footer-height, "#wrap", "#wrap-footer", "footer") - -footer[role="contentinfo"] - +container - // This height adjustment is because of the leading border - height: $footer-height - $base-rhythm-unit - color: #999999 - +leading-border(2px) - .legalese - +columns(3) - +alpha - +adjust-font-size-to(14px) - p - margin: 0 0 1em 0 - .links - +columns(9) - +omega - +adjust-font-size-to(14px) - ul - +horizontal-list - -/* @end - -/* @group COMPONENTS by type - -article - text-align: left - -article - > nav - border-top: $px2em*1px solid #ccc - margin-top: -$px2em*1px - color: #ccc - ul - +no-style-list - li - +columns(6,12) - &:last-child - +omega(12) - text-align: right - -/* @end - -/* @group OVERRIDES by content - -aside[role="sidebar"] + article - +columns(9) - +omega - h1 - +adjust-font-size-to(36px) - +trailer(1,36px) - .demo & - float: none - display: block - margin: 0 - width: auto - +full - h1 - text-align: center - -#module-nav - +leader(.25) - +trailing-border(1px,.25) - +trailer(.5) - border-color: #ccc - clear: both - ul - margin: 0 - padding: 0 - +container - li - +float(left) - margin-right: 1.5em - &:first-child - +alpha - a.selected:before - content: "▸" - + #page - +leader(1.5) - -=active-module($type, $url) - body#{$type} #module-nav a[href^="#{$url}"] - &:link, &:visited - text-decoration: underline - +text-shadow - -+active-module(".core.css3", "/docs/reference/compass/css3/") -+active-module(".core.layout", "/docs/reference/compass/layout/") -+active-module(".core.misc", "/docs/reference/compass/misc/") -+active-module(".core.reset", "/docs/reference/compass/reset/") -+active-module(".core.utilities", "/docs/reference/compass/utilities/") -+active-module(".core.helpers", "/docs/reference/compass/helpers/") - -#code - +full(12) - +pie-clearfix - +adjust-font-size-to(12px) - +h-borders(1px,1,12px) - +code-text - border-color: #ccc - nav - background: #eee - +trailer(1,12px) - ul - +inline-block-list(.4em) - text-align: right - section - position: relative - +columns(6,12) - +slideshow - &#styles - +omega(12) - .slides - li - overflow: auto - table - .lino - color: #666 - background: #ddd - padding: 0 .4em - .source - width: 100% - padding: 0 .4em - -#demo - +full(12) - +padding-leader - +trailing-border(1px) - border-color: #ccc - .gradient - margin: 1.5em 0 - height: 6em - +linear-gradient(color_stops(#fff, #ddd), "left top") - -/* @end - -@import reference -@import examples -@import sidebar -@import specifics - -/* @group OVERRIDES by page - - -/* @end - -/* @group DEBUG - -// Uncomment, adjust and use for debugging -// #page -// +show-grid("grid.png") - -/* @end +@import core/clearing-classes \ No newline at end of file diff --git a/doc-src/layouts/main.haml b/doc-src/layouts/main.haml index cc188771..715ea579 100644 --- a/doc-src/layouts/main.haml +++ b/doc-src/layouts/main.haml @@ -1,37 +1,31 @@ - render "basic" do #wrap %header#banner{:role => "banner"} - %div - %h1.vcard - %a.fn.org.url.uid{:href => "/", :rel => "home"} Compass - %nav#docs-nav{:role => "navigation"} - .container + %nav#main-nav{:role => "navigation"} %ul + %li.vcard + %a.fn.org.url.uid{:href => "/", :rel => "home"} Compass %li - %a{:href => "/docs/"} introduction + %a.here{:href => "/docs/reference/compass/", :rel => "documentation"} Docs %li - %a{:href => "/docs/reference/compass/"} core + %a{:href => "/help", :rel=> "help"} Get Help %li - %a{:href => "/docs/reference/blueprint/"} blueprint - %li - %a{:href => "/docs/tutorials/"} tutorials - / - %li - %a{:href => "/docs/plugins/"} plugins - #version - Current Version: - %a.number(href="/docs/CHANGELOG/")= compass_version - #search-docs - %form{:action => "/docs/search/", :method => "GET"} - %p - %label{:for => "search"} search - %input#search{:name => "q", :type => "text", :value => ""} - - if @item[:content_for_module_nav] - %nav#module-nav= @item[:content_for_module_nav] + %a{:href => "/get-involved", :rel=> "contribute"} Get Involved + + %form#search-docs{:action => "/docs/search/", :method => "GET"} + %input#search{:name => "q", :type => "text", :value => "", :placeholder => "Search the docs"} + #subnav + %nav#docs-nav{:role => "navigation"} + %a{:href => "/docs/reference/blueprint/"} Blueprint + %a{:href => "/docs/reference/compass/"} Core + - if @item[:content_for_module_nav] + %nav#module-nav= @item[:content_for_module_nav] #page + #version + Version: + %a.number(href="/docs/CHANGELOG/")= compass_version = yield - #comments= render "partials/disqus_comments" - #wrap-footer + -#comments= render "partials/disqus_comments" %footer(role="contentinfo")= render "partials/footer" %script(src="/docs/javascripts/jquery-1.3.2.min.js") %script(src="/docs/javascripts/fixups.js" deferred)