Last active
August 29, 2015 14:06
-
-
Save craigmdennis/cffdb057ea892d218881 to your computer and use it in GitHub Desktop.
Scoped Typography
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
| .context__flourish { | |
| ul { | |
| list-style: disc; | |
| margin-left: 1.5em; /* Left and right margins are allowed here */ | |
| } | |
| } |
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
| .context__rhythm { | |
| // Add a context just for adding margins but only allow it | |
| // to be used when we're already maintaining a rhythm with line-heights | |
| .context__margins, | |
| &.context__margins { | |
| p, ul, ol { | |
| margin-bottom: 1.5em; | |
| } | |
| .class-for-24px { | |
| margin-bottom: 0.75em; | |
| } | |
| .class-for-18px { | |
| margin-bottom: 1em; | |
| } | |
| } | |
| } |
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
| // Quick and dirty reset | |
| // For full reset see https://gist.github.com/craigmdennis/5648dfc7c3b769f09016 | |
| html, body, h1, h2, h3, h4, h5, h6, p, ul, li { | |
| border: 0; | |
| margin: 0; | |
| padding: 0; | |
| font-size: 100%; | |
| } | |
| // Strip styling from lists | |
| ol, ul { | |
| list-style: none; | |
| } |
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
| // Vertical rhythm generated at https://drewish.com/tools/vertical-rhythm/ | |
| body { | |
| font-size: 12px; | |
| font-family: Georgia, serif; | |
| line-height: 1.5; // 18px as vertical rhythm base | |
| max-width: 600px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .context__rhythm { | |
| p { | |
| font-size: 1em; // 12px | |
| line-height: 1.5; // 18px | |
| } | |
| .class-for-24px { | |
| font-size: 2em; // 24px | |
| line-height: 1.5; // 36px | |
| } | |
| .class-for-18px { | |
| font-size: 1.5em; // 18px | |
| line-height: 1; // 18px | |
| } | |
| } |
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
| <html> | |
| <head> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <h2 class="class-for-24px">Reset Browser Styles</h2> | |
| <ul> | |
| <li><b>The ul has:</b> | |
| <li>inherited line-height from body | |
| <li>no margin</li> | |
| <li>no bullets</li> | |
| </ul> | |
| <hr> | |
| <div class="context__rhythm"> | |
| <h2 class="class-for-24px">24px with line-height but no margin</h2> | |
| <h2 class="class-for-18px">18px with line-height but no margin</h2> | |
| <ul> | |
| <li><b>The ul has:</b> | |
| <li>inherited line-height from body | |
| <li>no margin</li> | |
| <li>no bullets</li> | |
| </ul> | |
| <hr> | |
| <div class="context__margins"> | |
| <h2 class="class-for-24px">24px with line-hight and margin</h2> | |
| <h2 class="class-for-18px">18px with line-hight and margin</h2> | |
| <ul> | |
| <li><b>The ul has:</b> | |
| <li>inherited line-height from body | |
| <li>margin</li> | |
| <li>no bullets</li> | |
| </ul> | |
| <hr> | |
| <div class="context__flourish"> | |
| <h2 class="class-for-24px">24px with line-height, margin and optional styles</h2> | |
| <h2 class="class-for-18px">18px with line-height, margin and optional styles</h2> | |
| <ul> | |
| <li><b>The ul has:</b> | |
| <li>inherited line-height from body | |
| <li>margin</li> | |
| <li>bullets</li> | |
| </ul> | |
| <hr> | |
| </div> | |
| </div> | |
| <div class="context__flourish"> | |
| <h2 class="class-for-24px">24px with line-heights, no margin but optional styles</h2> | |
| <h2 class="class-for-18px">18px with line-heights, no margin but optional styles</h2> | |
| <ul> | |
| <li><b>The ul has:</b> | |
| <li>inherited line-height from body | |
| <li>no margin</li> | |
| <li>bullets</li> | |
| </ul> | |
| <hr> | |
| </div> | |
| </div> | |
| <div class="context__rhythm context__margins context__flourish"> | |
| <h2 class="class-for-24px">24px You can include all contexts on the same element</h2> | |
| <h2 class="class-for-18px">18px You can include all contexts on the same element</h2> | |
| <ul> | |
| <li>The ul has: | |
| <li>inherited line-height from body | |
| <li>margin</li> | |
| <li>bullets</li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
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
| @import "reset"; | |
| @import "rhythm"; | |
| @import "margins"; | |
| @import "flourish"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment