Created
April 8, 2013 17:02
-
-
Save xasima/5338461 to your computer and use it in GitHub Desktop.
Declare closure-stylesheet mixins (3-typography.gss) and try to use them (in 5-main.gss)
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
| /* Typograph Vertical Rythms via http://drewish.com/tools/vertical-rhythm | |
| Initial params: | |
| Georgia - base font-family, | |
| 15px - base font, | |
| 22.5 - line height , | |
| 40, 35, 30 20 15 13 - target fonts rythms | |
| --------------------*/ | |
| @def _FNT_SIZE 15; | |
| @def _EM _FNT_SIZE; | |
| body { | |
| font-size: mult(1px,_FNT_SIZE); | |
| } | |
| p { | |
| font-size: 1em; /* 15px */ | |
| line-height: 1.4667em; /* 22px */ | |
| margin: 0 0 1.4667em 0; | |
| } | |
| @defmixin small() { | |
| font-size: 0.8667em; /* 13px */ | |
| line-height: 1.6923em; /* 22px */ | |
| margin-top: 1.6923em; | |
| margin-bottom: 0em; | |
| } | |
| .small { | |
| @mixin small(); | |
| } | |
| @defmixin normal() { | |
| font-size: 1em; /* 15px */ | |
| line-height: 1.4667em; /* 22px */ | |
| margin-top: 1.4667em; | |
| margin-bottom: 0em; | |
| } | |
| @defmixin big() { | |
| font-size: 1.3333em; /* 20px */ | |
| line-height: 1.1em; /* 22px */ | |
| margin-top: 1.1em; | |
| margin-bottom: 0em; | |
| } | |
| .big { | |
| @mixin big(); | |
| } | |
| @defmixin large() { | |
| font-size: 2em; /* 30px */ | |
| line-height: 1.4667em; /* 44px */ | |
| margin-top: 0.7333em; | |
| margin-bottom: 0em; | |
| } | |
| .large { | |
| @mixin large(); | |
| } | |
| @defmixin huge() { | |
| font-size: 2.3333em; /* 35px */ | |
| line-height: 1.2571em; /* 44px */ | |
| margin-top: 0.6286em; | |
| margin-bottom: 0em; | |
| } | |
| .huge{ | |
| @mixin huge(); | |
| } | |
| @defmixin gigantic() { | |
| font-size: 2.6667em; /* 40px */ | |
| line-height: 1.1em; /* 44px */ | |
| margin-top: 0.55em; | |
| margin-bottom: 0em; | |
| } | |
| .gigantic { | |
| @mixin gigantic(); | |
| } |
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
| h1 { | |
| @mixin large(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment