From 7f7b3c5ff80b2ba2d9b4676055363ca170e3f67b Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Wed, 8 Dec 2010 23:02:20 -0600 Subject: [PATCH] general typography improvements --- doc-src/Gemfile.lock | 2 +- .../help/tutorials/best_practices.markdown | 3 +++ doc-src/content/reference/compass.haml | 12 +++++------ .../stylesheets/core/_clearing-classes.sass | 6 +++++- .../content/stylesheets/core/_extensions.scss | 2 +- .../content/stylesheets/partials/_code.scss | 14 +++++++++---- .../content/stylesheets/partials/_layout.scss | 5 +++-- .../content/stylesheets/partials/_main.scss | 16 +++++++++++--- .../stylesheets/partials/_sidebar.scss | 1 + .../content/stylesheets/partials/_theme.scss | 21 ++++++++++++++----- .../stylesheets/partials/_typography.scss | 19 ++++++++++++----- .../partials/reference/import-few.haml | 4 ++++ .../layouts/partials/reference/import.haml | 15 +++++++------ .../layouts/partials/reference/imports.haml | 17 +++++++++------ doc-src/layouts/reference.haml | 10 ++++----- doc-src/layouts/site.haml | 2 +- 16 files changed, 99 insertions(+), 50 deletions(-) create mode 100644 doc-src/layouts/partials/reference/import-few.haml diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock index 8433b569..ef77142c 100644 --- a/doc-src/Gemfile.lock +++ b/doc-src/Gemfile.lock @@ -14,7 +14,7 @@ GIT PATH remote: /Users/bmathis/Documents/Workspace/compass-projects/compass specs: - compass (0.11.alpha.3.caafd96) + compass (0.11.alpha.3.4ab7a6c) chunky_png (~> 0.10.3) sass (>= 3.1.0.alpha.50) diff --git a/doc-src/content/help/tutorials/best_practices.markdown b/doc-src/content/help/tutorials/best_practices.markdown index c05d1e2c..55f2fe04 100644 --- a/doc-src/content/help/tutorials/best_practices.markdown +++ b/doc-src/content/help/tutorials/best_practices.markdown @@ -8,6 +8,9 @@ classnames: # Best Practices +Here are some best practices for making your projects easier to build and +simpler to maintain. + ## Use a Base stylesheet file Create a `_base.scss` [partial][1] to initialize your stylesheets with common diff --git a/doc-src/content/reference/compass.haml b/doc-src/content/reference/compass.haml index 68fc2253..09980732 100644 --- a/doc-src/content/reference/compass.haml +++ b/doc-src/content/reference/compass.haml @@ -1,4 +1,4 @@ ---- +--- title: Compass Core Framework crumb: Compass Core framework: compass @@ -16,10 +16,8 @@ layout: core other frameworks and extensions. %h2 Non Imported Modules - -%p - You can import these yourself if you want to use them. -%ul - = render "partials/reference/import", :import => "compass/_layout.scss" - = render "partials/reference/import", :import => "compass/_reset.scss" +%em You can import these yourself if you want to use them. +%ol + %li= render "partials/reference/import", :import => "compass/_layout.scss" + %li= render "partials/reference/import", :import => "compass/_reset.scss" diff --git a/doc-src/content/stylesheets/core/_clearing-classes.sass b/doc-src/content/stylesheets/core/_clearing-classes.sass index 8f31e0f4..9a60d248 100644 --- a/doc-src/content/stylesheets/core/_clearing-classes.sass +++ b/doc-src/content/stylesheets/core/_clearing-classes.sass @@ -10,4 +10,8 @@ .hide display: none .clear-box-shadow - +box-shadow(none) \ No newline at end of file + +box-shadow(none) +.clear-border-radius + @extend .clear-rounded-corners +.clear-rounded-corners + +border-radius(0) diff --git a/doc-src/content/stylesheets/core/_extensions.scss b/doc-src/content/stylesheets/core/_extensions.scss index 0b979edf..cd2fd5c4 100644 --- a/doc-src/content/stylesheets/core/_extensions.scss +++ b/doc-src/content/stylesheets/core/_extensions.scss @@ -7,4 +7,4 @@ @include reset-html5; } } -} \ No newline at end of file +} diff --git a/doc-src/content/stylesheets/partials/_code.scss b/doc-src/content/stylesheets/partials/_code.scss index 7893ee35..ba188e16 100644 --- a/doc-src/content/stylesheets/partials/_code.scss +++ b/doc-src/content/stylesheets/partials/_code.scss @@ -12,6 +12,12 @@ html .syntaxhighlighter { //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; } } +a[rel="github-source"] { + position: relative; + float: right; + top: 1.1em; +} + pre { margin: 1.5em 0; .code-block:first-child { padding: .6em; } @@ -44,12 +50,12 @@ h3.mixin { @include round-top-corners; margin-bottom: 2px;} padding: 0 2px; &[data-default-value] { font-style: italic; - &:before{ content: "[" ; } - &:after{ content: "]" ; } } - } + &:before { content: "[" ; } + &:after { content: "]" ; }} +} a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;} -h2 + a[rel="view source"]{ margin-top: 12px;} +h2 + a[rel="view source"]{ margin-top: 6px;} .syntaxhighlighter { a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea { diff --git a/doc-src/content/stylesheets/partials/_layout.scss b/doc-src/content/stylesheets/partials/_layout.scss index 720444ae..8cbbdabf 100644 --- a/doc-src/content/stylesheets/partials/_layout.scss +++ b/doc-src/content/stylesheets/partials/_layout.scss @@ -11,10 +11,11 @@ body { } #wrap { @extend .group; padding: 0 20px 20px; } -#page { @extend .group; padding-bottom: 30px; overflow: hidden;} +#page { @extend .group; padding-bottom: 30px; overflow: visible;} footer { @extend .group; clear: both; padding-top: 20px;} header { padding: 22px 0 0; position: relative; } #page aside + article { padding-left: $side-nav-width + 45px;} -aside { float: left; width: $side-nav-width; } +aside { float: left; width: $side-nav-width; position: relative; z-index: 2;} body#home #page article { padding-left: 0;} +body.site { max-width: 1024px; } diff --git a/doc-src/content/stylesheets/partials/_main.scss b/doc-src/content/stylesheets/partials/_main.scss index 288cfc3f..7b3717db 100644 --- a/doc-src/content/stylesheets/partials/_main.scss +++ b/doc-src/content/stylesheets/partials/_main.scss @@ -20,11 +20,14 @@ footer { .links { float: left; font-size: .9em; img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;} - span { position: relative; top: -1px; } - ul { @include horizontal-list(15px); overflow: visible; + span { position: relative; top: -1px; } + ul { @include horizontal-list(15px); overflow: visible; li {padding-top: 3px;} li:last-child {border: 0; @include box-shadow(none); } } } } +#page article h2 { + margin-top: 1.5em; +} h2 a.help { text-indent: -9999px; display: inline-block; @@ -41,4 +44,11 @@ h2 a.help { left: 0; font-size: .85em; } -} \ No newline at end of file +} +hr { + height: 0px; + border: 0; + border-bottom-width: 4px; + margin: 3em 0; + background: transparent; +} diff --git a/doc-src/content/stylesheets/partials/_sidebar.scss b/doc-src/content/stylesheets/partials/_sidebar.scss index ed36ff91..72caf244 100644 --- a/doc-src/content/stylesheets/partials/_sidebar.scss +++ b/doc-src/content/stylesheets/partials/_sidebar.scss @@ -8,6 +8,7 @@ aside { line-height: 1.45em; padding-bottom: .2em; margin-bottom: .4em; + @extend .clear-border-radius; } h3 { padding: 0 0 .5em; line-height: 1.1em; diff --git a/doc-src/content/stylesheets/partials/_theme.scss b/doc-src/content/stylesheets/partials/_theme.scss index d80efad0..9b6ebab1 100644 --- a/doc-src/content/stylesheets/partials/_theme.scss +++ b/doc-src/content/stylesheets/partials/_theme.scss @@ -20,11 +20,13 @@ strong { color: $main-nav-selected; } em { color: $code; } } - h2 { @extend .horizontal-rule-#{$theme}; } - + #page > article h2 { @extend .horizontal-rule-top-#{$theme}; } + hr { @extend .horizontal-rule-#{$theme}; + border-bottom-width: 8px} + body#home h2 { @extend .horizontal-rule-#{$theme}; } aside { @extend .vertical-rule-#{$theme}; h2 a { color: $strong-text; } - h3 { @extend .horizontal-rule-#{$theme}; }} + h2, h3 { @extend .horizontal-rule-#{$theme}; }} footer .links li { @extend .vertical-rule-#{$theme}; } code { @extend .code-block-#{$theme}; color: $code; } @@ -40,8 +42,13 @@ @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}; } } + h1 { @extend .horizontal-rule-#{$theme}; } + h2 { @extend .horizontal-rule-top-#{$theme}; } + h3 { @extend .heading-panel-#{$theme}; } + h1 + h2, hr + h2 { + @extend .clear-box-shadow; border-top: 0; + margin-top: 0;} + } #sub-nav { @extend .horizontal-rule-#{$theme}; } #docs-nav { @extend .vertical-rule-#{$theme}; } @@ -81,6 +88,10 @@ @include box-shadow(rgba(#fff, .07) 0 1px 0); border-bottom: 1px solid #121212; } +.horizontal-rule-top-dark { + @include box-shadow(rgba(#fff, .07) 0 1px 0 inset); + border-top: 1px solid #121212; } + .vertical-rule-dark { @include box-shadow(rgba(#fff, .07) 1px 0 0); border-right: 1px solid #121212; } diff --git a/doc-src/content/stylesheets/partials/_typography.scss b/doc-src/content/stylesheets/partials/_typography.scss index 50423ac1..ff5cb94f 100644 --- a/doc-src/content/stylesheets/partials/_typography.scss +++ b/doc-src/content/stylesheets/partials/_typography.scss @@ -18,14 +18,23 @@ ul, ol, dl { margin-bottom: 1.5em;} p { margin-bottom: 1.2em;} #{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; } - h1 { font-size: 30px; } - h2 { font-size: 22px; margin: 15px 0 8px; padding-bottom: 6px;} + h1 { font-size: 35px; margin-bottom: 15px; padding-bottom: 6px; } + h2 { font-size: 26px; margin: 1em 0 15px; padding-bottom: 6px; } h3 { font-size: 18px; } - h1 { padding-bottom: 6px; margin-bottom: 9px; } + h4 { font-size: 18px; margin: .4em 0; } ul { list-style: inside disc; } dt { font-weight: bold; } } #page aside { ul { list-style: none; margin-bottom: 1em;} - h2 { line-height: 1.4em; margin-top: 0;} -} \ No newline at end of file + h2 { line-height: 1.3em; margin-top: 0; padding-top: 3px;} +} +em { font-style: italic; } + +#page > article { + position: relative; + h2 { font-size: 26px; margin: .5em 0 .6em; + padding: 1em 0 6px;} + hr + h2 { padding-top: 0; } + hr + h3, h4, h5 { margin-top: 0; } +} diff --git a/doc-src/layouts/partials/reference/import-few.haml b/doc-src/layouts/partials/reference/import-few.haml new file mode 100644 index 00000000..fade486c --- /dev/null +++ b/doc-src/layouts/partials/reference/import-few.haml @@ -0,0 +1,4 @@ +- if path = reference_path(:stylesheet => import) + - imported_item = reference_item(:stylesheet => import) + #{imported_item[:crumb] || imported_item[:title]}#{"," unless @last} + diff --git a/doc-src/layouts/partials/reference/import.haml b/doc-src/layouts/partials/reference/import.haml index bc4a208c..0e649bd4 100644 --- a/doc-src/layouts/partials/reference/import.haml +++ b/doc-src/layouts/partials/reference/import.haml @@ -1,8 +1,7 @@ -%li - - if path = reference_path(:stylesheet => import) - - imported_item = reference_item(:stylesheet => import) - %a{:href => path, :title => "@import #{import}"}= imported_item[:crumb] || imported_item[:title] - - if imported_item[:meta_description] - – #{imported_item[:meta_description]} - - else - = import +- if path = reference_path(:stylesheet => import) + - imported_item = reference_item(:stylesheet => import) + %a{:href => path, :title => "@import #{import}"}= imported_item[:crumb] || imported_item[:title] + - if imported_item[:meta_description] + – #{imported_item[:meta_description]} +- else + = import diff --git a/doc-src/layouts/partials/reference/imports.haml b/doc-src/layouts/partials/reference/imports.haml index e29020ef..74b8dc3d 100644 --- a/doc-src/layouts/partials/reference/imports.haml +++ b/doc-src/layouts/partials/reference/imports.haml @@ -1,7 +1,12 @@ - if (imported_libs = imports(@item)).any? - %h2 Imports - %p - The following sass files are automatically imported when you import this file: - %ol - - imported_libs.each do |import| - = render "partials/reference/import", :import => import \ No newline at end of file + - if imported_libs.size == 1000 + %p + Automatically imports: + - imported_libs.each do |import| + = render "partials/reference/import-few", :import => import, :last => import == imported_libs.last + - else + %h2 Imports + %ol + - imported_libs.each do |import| + %li= render "partials/reference/import", :import => import + diff --git a/doc-src/layouts/reference.haml b/doc-src/layouts/reference.haml index ff2026a6..ef5cafe4 100644 --- a/doc-src/layouts/reference.haml +++ b/doc-src/layouts/reference.haml @@ -1,3 +1,7 @@ +- gh_url = "http://github.com/chriseppstein/compass/blob/stable/frameworks/" +- gh_url << "#{item[:framework]}/stylesheets/#{item[:stylesheet]}" +%a{:href => gh_url, :rel=>"github-source", :title=>"view source for this module on github"} Source on Github + %h1= item[:title] - if item[:beta] @@ -10,12 +14,6 @@ This file can be imported using: %code @import "#{departialize(item[:stylesheet][0..-6])}" -%p - - gh_url = "http://github.com/chriseppstein/compass/blob/stable/frameworks/" - - gh_url << "#{item[:framework]}/stylesheets/#{item[:stylesheet]}" - View the - %a{:href => gh_url} Source for this module on Github. - = render "partials/reference/examples" = render "partials/reference/imports" diff --git a/doc-src/layouts/site.haml b/doc-src/layouts/site.haml index 28fac5aa..5ac517fe 100644 --- a/doc-src/layouts/site.haml +++ b/doc-src/layouts/site.haml @@ -12,7 +12,7 @@ %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)} + %body.site{body_attributes(@item)} #wrap = render "partials/main-navigation" #sub-nav