Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adds Stylus and SCSS versions of vertical-rhythm.css
- Loading branch information
1 parent
89331b6
commit 75e0fa6
Showing
4 changed files
with
506 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,234 @@ | ||
| /* | ||
| // Vertical Rhythm | ||
| // -------------------------------------------------- */ | ||
|
|
||
|
|
||
| /* Variables | ||
| * ------------------------------------------- | ||
| * Put your custom variables here. If you use bootstrap, use those | ||
| * and add your own for vertical rhythm | ||
| */ | ||
|
|
||
| $font-size-base: 14px; | ||
| $line-height-base: 20px; | ||
|
|
||
|
|
||
| /* TYPOGRAPHY BASE | ||
| * ------------------------------------------- | ||
| * First, we establish a baseline to normalize typography. | ||
| * Credit: this BASE section is based on Twitter Bootstrap's type.less | ||
| * but with everything that isn't related to rhythm removed. | ||
| */ | ||
|
|
||
|
|
||
|
|
||
| /* Headings | ||
| * ------------------------------------------- | ||
| * normalize baselines for headings, remove | ||
| * this block if you use Twitter Bootstrap | ||
| */ | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| margin: ($line-height-base / 2) 0; | ||
| line-height: $line-height-base; | ||
| small { | ||
| line-height: 1; | ||
| } | ||
| } | ||
|
|
||
| h1, h2 { | ||
| margin-top: $line-height-base; | ||
| margin-bottom: ($line-height-base / 2); | ||
| line-height: ($line-height-base * 2); | ||
| } | ||
| h3, h4, h5, h6 { | ||
| margin-top: ($line-height-base / 2); | ||
| margin-bottom: ($line-height-base / 2); | ||
| } | ||
|
|
||
| h1 { font-size: $font-size-base * 2.75; font-size: 4rem; } // ~38px | ||
| h2 { font-size: $font-size-base * 2.25; font-size: 3rem; } // ~32px | ||
| h3 { font-size: $font-size-base * 1.75; font-size: 2.5rem; } // ~24px | ||
| h4 { font-size: $font-size-base * 1.25; font-size: 2rem; } // ~18px | ||
| h5 { font-size: $font-size-base; font-size: 1.6rem; } | ||
| h6 { font-size: $font-size-base * 0.85; font-size: 1.2rem; } // ~12px | ||
|
|
||
| h1 small { font-size: $font-size-base * 1.75; } // ~24px | ||
| h2 small { font-size: $font-size-base * 1.25; } // ~18px | ||
| h3 small { font-size: $font-size-base; } | ||
| h4 small { font-size: $font-size-base; } | ||
|
|
||
|
|
||
| /* Lists | ||
| * ------------------------------------------- | ||
| */ | ||
|
|
||
| // Unordered and Ordered lists | ||
| ul, ol { | ||
| padding: 0; | ||
| margin: 0 0 ($line-height-base / 2) 25px; | ||
| } | ||
| ul ul, | ||
| ul ol, | ||
| ol ol, | ||
| ol ul { | ||
| margin-bottom: 0; | ||
| } | ||
| li { | ||
| line-height: $line-height-base; | ||
| } | ||
|
|
||
| // Description Lists | ||
| dl { | ||
| margin-bottom: $line-height-base; | ||
| } | ||
| dt, dd { | ||
| line-height: $line-height-base; | ||
| } | ||
| dd { | ||
| margin-left: ($line-height-base / 2); | ||
| } | ||
|
|
||
|
|
||
| // MISC | ||
| // ---- | ||
|
|
||
| // Horizontal rules | ||
| hr { | ||
| margin: $line-height-base 0; | ||
| border: 0; | ||
| border-top: 1px solid $hr-border; | ||
| border-bottom: 1px solid #fff; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /* VERTICAL RHYTHM | ||
| * ------------------------------------------- | ||
| * Add .rhythm to parent elements when you | ||
| * wish to apply vertical rhythm to child elements | ||
| */ | ||
|
|
||
|
|
||
| /* Body text & Misc | ||
| * ------------------------------------------- | ||
| */ | ||
|
|
||
| .rhythm { | ||
| p, ul, ol, blockquote, address, pre, form { | ||
| margin-bottom: $line-height-base; | ||
|
|
||
| // And remove margin from last element | ||
| &:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /* Headings & paragraphs | ||
| * ------------------------------------------- | ||
| * Here we apply special spacing to certain | ||
| * typographical patterns. It is impossible to | ||
| * predict the patterns you require for your | ||
| * project, so this is only a starting point. | ||
| */ | ||
|
|
||
| .rhythm { | ||
| h1, h2, h3 { | ||
| margin-bottom: ($line-height-base / 4); | ||
| } | ||
| h1 + h2 { | ||
| margin-top: $line-height-base; | ||
| } | ||
| h4 { | ||
| margin-bottom: ($line-height-base / 6); | ||
| } | ||
| h1 + p, | ||
| p + h4 { | ||
| margin-top: ($line-height-base * 1.5); | ||
| } | ||
| h2 + h3, | ||
| h2 + h4 { | ||
| margin-top: $line-height-base; | ||
| } | ||
| h2 + p, | ||
| h3 + p { | ||
| margin-top: ($line-height-base / 2); | ||
| } | ||
| p + h2 { | ||
| margin-top: ($line-height-base * 3); | ||
| } | ||
| h3 + h4 { | ||
| margin-top: ($line-height-base * 2); | ||
| } | ||
| } | ||
|
|
||
| /* Lists | ||
| * ------------------------------------------- | ||
| * Special classes for numbered, bulleted, | ||
| * and alpha lists. | ||
| */ | ||
|
|
||
| .rhythm { | ||
|
|
||
| // | ||
| h3 + ul.bullet-list, | ||
| h3 + ul.numbered-list, | ||
| h3 + ul.alpha-list, | ||
| h3 + ol.numbered-list { | ||
| margin-top: ($line-height-base / 2); | ||
| } | ||
|
|
||
|
|
||
| ul.bullet-list + h3, | ||
| ul.numbered-list + h3, | ||
| ul.alpha-list + h3 { | ||
| margin-top: ($line-height-base * 2); | ||
| } | ||
| h4 + ul.bullet-list, | ||
| h4 + ul.numbered-list, | ||
| h4 + ul.alpha-list, | ||
| h4 + ol.numbered-list { | ||
| margin-top: ($line-height-base / 2); | ||
| } | ||
| .bullet-list { | ||
| list-style-type: disc; // bullets | ||
| padding-left: 1.25em; | ||
| } | ||
| .numbered-list { | ||
| list-style-type: decimal; // numbers | ||
| padding-left: 1.5em; | ||
| } | ||
| .alpha-list { | ||
| list-style-type: lower-alpha; // letters | ||
| padding-left: 1.5em; | ||
| } | ||
| .bullet-list li, | ||
| .numbered-list li, | ||
| .alpha-list li { | ||
| margin-bottom: ($line-height-base / 2); | ||
| } | ||
| .condensed-list li { | ||
| margin-bottom: 0; | ||
| } | ||
| .flush-list li { | ||
| padding-left: 0; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| /* Blockquotes | ||
| * ------------------------------------------- | ||
| */ | ||
|
|
||
| .rhythm blockquote { | ||
| padding: $line-height-base $line-height-base 0; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
Oops, something went wrong.