Created
July 27, 2012 21:04
-
-
Save erikjung/3190467 to your computer and use it in GitHub Desktop.
Using modular-scale Compass plugin
This file contains hidden or 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
| require "modular-scale" | |
| http_path = "/" | |
| css_dir = "" | |
| sass_dir = "" | |
| images_dir = "" | |
| javascripts_dir = "" | |
| output_style = :expanded | |
| line_comments = false | |
| preferred_syntax = :scss |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Welcome to Example Co.</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Welcome to Example Co.</h1> | |
| </header> | |
| <div role="main"> | |
| <h2>Nulla Facilisi. Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate, Ligula Lacinia Scelerisque</h2> | |
| <h3>Nulla At Nulla Justo, Eget Luctus Tortor. Nulla Facilisi</h3> | |
| <p>Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et.</p> | |
| </div> | |
| <footer> | |
| <p>©2012 Example Co.</p> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or 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
| * { | |
| margin: 0; | |
| } | |
| html { | |
| font-size: 17px; | |
| background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.2)), color-stop(5%, rgba(0, 0, 0, 0))); | |
| background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0) 5%); | |
| background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0) 5%); | |
| background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0) 5%); | |
| background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.2) 5%, rgba(0, 0, 0, 0) 5%); | |
| -webkit-background-size: 100% 14px; | |
| -moz-background-size: 100% 14px; | |
| -o-background-size: 100% 14px; | |
| background-size: 100% 14px; | |
| background-position: left top; | |
| } | |
| body { | |
| font-size: 1em; | |
| line-height: 1.64706em; | |
| } | |
| p { | |
| margin-top: 1.64706em; | |
| } | |
| h3 { | |
| font-size: 1em; | |
| line-height: 1.64706em; | |
| margin-top: 1.64706em; | |
| } | |
| h3 + p { | |
| margin-top: 0; | |
| } | |
| h2 { | |
| font-size: 1.64706em; | |
| line-height: 1.5em; | |
| margin-top: 1.5em; | |
| } | |
| h1 { | |
| font-size: 2.64706em; | |
| line-height: 1.24444em; | |
| margin-top: 1.24444em; | |
| } |
This file contains hidden or 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
| /* !Compass Includes */ | |
| @import 'compass/typography/vertical_rhythm'; | |
| @import 'modular-scale'; | |
| /* !Configuration */ | |
| $base-font-size: 17px; | |
| $base-line-height: round($base-font-size * $ratio); // $ratio defaults to golden via modular-scale | |
| $round-to-nearest-half-line: true; | |
| $grid-background-baseline-color: rgba(0, 0, 0, .2); | |
| // Short for font-size. Returns a pixel value based on modular scale. | |
| @function fs($unit) { | |
| @return ms($unit, $base-font-size); | |
| } | |
| // Shortcut for using fs() and adjust-font-size-to() to set font-size and line-height | |
| @mixin type-size($unit: 0) { | |
| @include adjust-font-size-to(fs($unit)); | |
| } | |
| // Shortcut for using fs() and lines-for-font-size() to set margin-top | |
| @mixin type-margin($unit: 0) { | |
| $fs: fs($unit); | |
| @include leader(lines-for-font-size($fs), $fs); | |
| } | |
| * { | |
| margin: 0; | |
| } | |
| html { | |
| font-size: $base-font-size; | |
| @include baseline-grid-background($base-line-height / 2); // adds baseline grid background | |
| } | |
| body { | |
| @include type-size(); | |
| } | |
| p { | |
| @include type-margin(); | |
| } | |
| h3 { | |
| @include type-size(); | |
| @include type-margin(); | |
| + p { | |
| margin-top: 0; | |
| } | |
| } | |
| h2 { | |
| @include type-size(1); | |
| @include type-margin(1); | |
| } | |
| h1 { | |
| @include type-size(2); | |
| @include type-margin(2); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment