general typography improvements
This commit is contained in:
parent
4ab7a6ca9d
commit
7f7b3c5ff8
@ -14,7 +14,7 @@ GIT
|
|||||||
PATH
|
PATH
|
||||||
remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
|
remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
|
||||||
specs:
|
specs:
|
||||||
compass (0.11.alpha.3.caafd96)
|
compass (0.11.alpha.3.4ab7a6c)
|
||||||
chunky_png (~> 0.10.3)
|
chunky_png (~> 0.10.3)
|
||||||
sass (>= 3.1.0.alpha.50)
|
sass (>= 3.1.0.alpha.50)
|
||||||
|
|
||||||
|
@ -8,6 +8,9 @@ classnames:
|
|||||||
|
|
||||||
# Best Practices
|
# Best Practices
|
||||||
|
|
||||||
|
Here are some best practices for making your projects easier to build and
|
||||||
|
simpler to maintain.
|
||||||
|
|
||||||
## Use a Base stylesheet file
|
## 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
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
---
|
---
|
||||||
title: Compass Core Framework
|
title: Compass Core Framework
|
||||||
crumb: Compass Core
|
crumb: Compass Core
|
||||||
framework: compass
|
framework: compass
|
||||||
@ -16,10 +16,8 @@ layout: core
|
|||||||
other frameworks and extensions.
|
other frameworks and extensions.
|
||||||
|
|
||||||
%h2 Non Imported Modules
|
%h2 Non Imported Modules
|
||||||
|
%em You can import these yourself if you want to use them.
|
||||||
%p
|
%ol
|
||||||
You can import these yourself if you want to use them.
|
%li= render "partials/reference/import", :import => "compass/_layout.scss"
|
||||||
%ul
|
%li= render "partials/reference/import", :import => "compass/_reset.scss"
|
||||||
= render "partials/reference/import", :import => "compass/_layout.scss"
|
|
||||||
= render "partials/reference/import", :import => "compass/_reset.scss"
|
|
||||||
|
|
||||||
|
@ -10,4 +10,8 @@
|
|||||||
.hide
|
.hide
|
||||||
display: none
|
display: none
|
||||||
.clear-box-shadow
|
.clear-box-shadow
|
||||||
+box-shadow(none)
|
+box-shadow(none)
|
||||||
|
.clear-border-radius
|
||||||
|
@extend .clear-rounded-corners
|
||||||
|
.clear-rounded-corners
|
||||||
|
+border-radius(0)
|
||||||
|
@ -7,4 +7,4 @@
|
|||||||
@include reset-html5;
|
@include reset-html5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -12,6 +12,12 @@ html .syntaxhighlighter {
|
|||||||
//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; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a[rel="github-source"] {
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
top: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
margin: 1.5em 0;
|
margin: 1.5em 0;
|
||||||
.code-block:first-child { padding: .6em; }
|
.code-block:first-child { padding: .6em; }
|
||||||
@ -44,12 +50,12 @@ h3.mixin { @include round-top-corners; margin-bottom: 2px;}
|
|||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
&[data-default-value] {
|
&[data-default-value] {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
&:before{ content: "[" ; }
|
&:before { content: "[" ; }
|
||||||
&:after{ 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;}
|
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 {
|
.syntaxhighlighter {
|
||||||
a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {
|
a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {
|
||||||
|
@ -11,10 +11,11 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#wrap { @extend .group; padding: 0 20px 20px; }
|
#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;}
|
footer { @extend .group; clear: both; padding-top: 20px;}
|
||||||
header { padding: 22px 0 0; position: relative; }
|
header { padding: 22px 0 0; position: relative; }
|
||||||
#page aside + 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; position: relative; z-index: 2;}
|
||||||
|
|
||||||
body#home #page article { padding-left: 0;}
|
body#home #page article { padding-left: 0;}
|
||||||
|
body.site { max-width: 1024px; }
|
||||||
|
@ -20,11 +20,14 @@
|
|||||||
footer {
|
footer {
|
||||||
.links { float: left; font-size: .9em;
|
.links { float: left; font-size: .9em;
|
||||||
img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;}
|
img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;}
|
||||||
span { position: relative; top: -1px; }
|
span { position: relative; top: -1px; }
|
||||||
ul { @include horizontal-list(15px); overflow: visible;
|
ul { @include horizontal-list(15px); overflow: visible;
|
||||||
li {padding-top: 3px;}
|
li {padding-top: 3px;}
|
||||||
li:last-child {border: 0; @include box-shadow(none); } } }
|
li:last-child {border: 0; @include box-shadow(none); } } }
|
||||||
}
|
}
|
||||||
|
#page article h2 {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
h2 a.help {
|
h2 a.help {
|
||||||
text-indent: -9999px;
|
text-indent: -9999px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -41,4 +44,11 @@ h2 a.help {
|
|||||||
left: 0;
|
left: 0;
|
||||||
font-size: .85em;
|
font-size: .85em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
hr {
|
||||||
|
height: 0px;
|
||||||
|
border: 0;
|
||||||
|
border-bottom-width: 4px;
|
||||||
|
margin: 3em 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
@ -8,6 +8,7 @@ aside {
|
|||||||
line-height: 1.45em;
|
line-height: 1.45em;
|
||||||
padding-bottom: .2em;
|
padding-bottom: .2em;
|
||||||
margin-bottom: .4em;
|
margin-bottom: .4em;
|
||||||
|
@extend .clear-border-radius;
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
padding: 0 0 .5em; line-height: 1.1em;
|
padding: 0 0 .5em; line-height: 1.1em;
|
||||||
|
@ -20,11 +20,13 @@
|
|||||||
strong { color: $main-nav-selected; }
|
strong { color: $main-nav-selected; }
|
||||||
em { color: $code; } }
|
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};
|
aside { @extend .vertical-rule-#{$theme};
|
||||||
h2 a { color: $strong-text; }
|
h2 a { color: $strong-text; }
|
||||||
h3 { @extend .horizontal-rule-#{$theme}; }}
|
h2, 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; }
|
||||||
@ -40,8 +42,13 @@
|
|||||||
@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 { @extend .horizontal-rule-#{$theme}; }
|
||||||
h3 { @extend .heading-panel-#{$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}; }
|
#sub-nav { @extend .horizontal-rule-#{$theme}; }
|
||||||
#docs-nav { @extend .vertical-rule-#{$theme}; }
|
#docs-nav { @extend .vertical-rule-#{$theme}; }
|
||||||
@ -81,6 +88,10 @@
|
|||||||
@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; }
|
||||||
|
|
||||||
|
.horizontal-rule-top-dark {
|
||||||
|
@include box-shadow(rgba(#fff, .07) 0 1px 0 inset);
|
||||||
|
border-top: 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; }
|
||||||
|
@ -18,14 +18,23 @@
|
|||||||
ul, ol, dl { margin-bottom: 1.5em;}
|
ul, ol, dl { margin-bottom: 1.5em;}
|
||||||
p { margin-bottom: 1.2em;}
|
p { margin-bottom: 1.2em;}
|
||||||
#{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; }
|
#{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; }
|
||||||
h1 { font-size: 30px; }
|
h1 { font-size: 35px; margin-bottom: 15px; padding-bottom: 6px; }
|
||||||
h2 { font-size: 22px; margin: 15px 0 8px; padding-bottom: 6px;}
|
h2 { font-size: 26px; margin: 1em 0 15px; padding-bottom: 6px; }
|
||||||
h3 { font-size: 18px; }
|
h3 { font-size: 18px; }
|
||||||
h1 { padding-bottom: 6px; margin-bottom: 9px; }
|
h4 { font-size: 18px; margin: .4em 0; }
|
||||||
ul { list-style: inside disc; }
|
ul { list-style: inside disc; }
|
||||||
dt { font-weight: bold; }
|
dt { font-weight: bold; }
|
||||||
}
|
}
|
||||||
#page aside {
|
#page aside {
|
||||||
ul { list-style: none; margin-bottom: 1em;}
|
ul { list-style: none; margin-bottom: 1em;}
|
||||||
h2 { line-height: 1.4em; margin-top: 0;}
|
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; }
|
||||||
|
}
|
||||||
|
4
doc-src/layouts/partials/reference/import-few.haml
Normal file
4
doc-src/layouts/partials/reference/import-few.haml
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
- if path = reference_path(:stylesheet => import)
|
||||||
|
- imported_item = reference_item(:stylesheet => import)
|
||||||
|
<a href="#{path}" title="@import #{import}">#{imported_item[:crumb] || imported_item[:title]}</a>#{"," unless @last}
|
||||||
|
|
@ -1,8 +1,7 @@
|
|||||||
%li
|
- if path = reference_path(:stylesheet => import)
|
||||||
- if path = reference_path(:stylesheet => import)
|
- imported_item = reference_item(:stylesheet => import)
|
||||||
- imported_item = reference_item(:stylesheet => import)
|
%a{:href => path, :title => "@import #{import}"}= imported_item[:crumb] || imported_item[:title]
|
||||||
%a{:href => path, :title => "@import #{import}"}= imported_item[:crumb] || imported_item[:title]
|
- if imported_item[:meta_description]
|
||||||
- if imported_item[:meta_description]
|
– #{imported_item[:meta_description]}
|
||||||
– #{imported_item[:meta_description]}
|
- else
|
||||||
- else
|
= import
|
||||||
= import
|
|
||||||
|
@ -1,7 +1,12 @@
|
|||||||
- if (imported_libs = imports(@item)).any?
|
- if (imported_libs = imports(@item)).any?
|
||||||
%h2 Imports
|
- if imported_libs.size == 1000
|
||||||
%p
|
%p
|
||||||
The following sass files are automatically imported when you import this file:
|
Automatically imports:
|
||||||
%ol
|
- imported_libs.each do |import|
|
||||||
- imported_libs.each do |import|
|
= render "partials/reference/import-few", :import => import, :last => import == imported_libs.last
|
||||||
= render "partials/reference/import", :import => import
|
- else
|
||||||
|
%h2 Imports
|
||||||
|
%ol
|
||||||
|
- imported_libs.each do |import|
|
||||||
|
%li= render "partials/reference/import", :import => import
|
||||||
|
|
||||||
|
@ -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]
|
%h1= item[:title]
|
||||||
|
|
||||||
- if item[:beta]
|
- if item[:beta]
|
||||||
@ -10,12 +14,6 @@
|
|||||||
This file can be imported using:
|
This file can be imported using:
|
||||||
%code @import "#{departialize(item[:stylesheet][0..-6])}"
|
%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/examples"
|
||||||
|
|
||||||
= render "partials/reference/imports"
|
= render "partials/reference/imports"
|
||||||
|
@ -12,7 +12,7 @@
|
|||||||
%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/modernizr-1.6.min.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
|
#wrap
|
||||||
= render "partials/main-navigation"
|
= render "partials/main-navigation"
|
||||||
#sub-nav
|
#sub-nav
|
||||||
|
Loading…
Reference in New Issue
Block a user