cyclist 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (148) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +52 -0
  4. data/_includes/footer.html +4 -0
  5. data/_includes/head.html +6 -0
  6. data/_includes/header.html +20 -0
  7. data/_layouts/default.html +13 -0
  8. data/_layouts/home.html +39 -0
  9. data/_layouts/link.html +21 -0
  10. data/_layouts/page.html +15 -0
  11. data/_layouts/post.html +22 -0
  12. data/_sass/crimson.scss +41 -0
  13. data/_sass/fira-mono.scss +14 -0
  14. data/_sass/fonts.scss +4 -0
  15. data/_sass/lato.scss +144 -0
  16. data/_sass/layout.scss +80 -0
  17. data/_sass/playfair-display.scss +83 -0
  18. data/_sass/typography.scss +84 -0
  19. data/assets/fonts/crimson/LICENSE.txt +93 -0
  20. data/assets/fonts/crimson/crimson-bold-webfont.woff +0 -0
  21. data/assets/fonts/crimson/crimson-bold-webfont.woff2 +0 -0
  22. data/assets/fonts/crimson/crimson-bolditalic-webfont.woff +0 -0
  23. data/assets/fonts/crimson/crimson-bolditalic-webfont.woff2 +0 -0
  24. data/assets/fonts/crimson/crimson-italic-webfont.woff +0 -0
  25. data/assets/fonts/crimson/crimson-italic-webfont.woff2 +0 -0
  26. data/assets/fonts/crimson/crimson-roman-webfont.woff +0 -0
  27. data/assets/fonts/crimson/crimson-roman-webfont.woff2 +0 -0
  28. data/assets/fonts/crimson/crimson-semibold-webfont.woff +0 -0
  29. data/assets/fonts/crimson/crimson-semibold-webfont.woff2 +0 -0
  30. data/assets/fonts/crimson/crimson-semibolditalic-webfont.woff +0 -0
  31. data/assets/fonts/crimson/crimson-semibolditalic-webfont.woff2 +0 -0
  32. data/assets/fonts/fira-mono/FiraMono-Bold.woff +0 -0
  33. data/assets/fonts/fira-mono/FiraMono-Bold.woff2 +0 -0
  34. data/assets/fonts/fira-mono/FiraMono-Medium.woff +0 -0
  35. data/assets/fonts/fira-mono/FiraMono-Medium.woff2 +0 -0
  36. data/assets/fonts/fira-mono/FiraMono-Regular.woff +0 -0
  37. data/assets/fonts/fira-mono/FiraMono-Regular.woff2 +0 -0
  38. data/assets/fonts/fira-mono/LICENSE +94 -0
  39. data/assets/fonts/lato/Lato-Black.woff +0 -0
  40. data/assets/fonts/lato/Lato-Black.woff2 +0 -0
  41. data/assets/fonts/lato/Lato-BlackItalic.woff +0 -0
  42. data/assets/fonts/lato/Lato-BlackItalic.woff2 +0 -0
  43. data/assets/fonts/lato/Lato-Bold.woff +0 -0
  44. data/assets/fonts/lato/Lato-Bold.woff2 +0 -0
  45. data/assets/fonts/lato/Lato-BoldItalic.woff +0 -0
  46. data/assets/fonts/lato/Lato-BoldItalic.woff2 +0 -0
  47. data/assets/fonts/lato/Lato-Hairline.woff +0 -0
  48. data/assets/fonts/lato/Lato-Hairline.woff2 +0 -0
  49. data/assets/fonts/lato/Lato-HairlineItalic.woff +0 -0
  50. data/assets/fonts/lato/Lato-HairlineItalic.woff2 +0 -0
  51. data/assets/fonts/lato/Lato-Heavy.woff +0 -0
  52. data/assets/fonts/lato/Lato-Heavy.woff2 +0 -0
  53. data/assets/fonts/lato/Lato-HeavyItalic.woff +0 -0
  54. data/assets/fonts/lato/Lato-HeavyItalic.woff2 +0 -0
  55. data/assets/fonts/lato/Lato-Italic.woff +0 -0
  56. data/assets/fonts/lato/Lato-Italic.woff2 +0 -0
  57. data/assets/fonts/lato/Lato-Light.woff +0 -0
  58. data/assets/fonts/lato/Lato-Light.woff2 +0 -0
  59. data/assets/fonts/lato/Lato-LightItalic.woff +0 -0
  60. data/assets/fonts/lato/Lato-LightItalic.woff2 +0 -0
  61. data/assets/fonts/lato/Lato-Medium.woff +0 -0
  62. data/assets/fonts/lato/Lato-Medium.woff2 +0 -0
  63. data/assets/fonts/lato/Lato-MediumItalic.woff +0 -0
  64. data/assets/fonts/lato/Lato-MediumItalic.woff2 +0 -0
  65. data/assets/fonts/lato/Lato-Regular.woff +0 -0
  66. data/assets/fonts/lato/Lato-Regular.woff2 +0 -0
  67. data/assets/fonts/lato/Lato-Semibold.woff +0 -0
  68. data/assets/fonts/lato/Lato-Semibold.woff2 +0 -0
  69. data/assets/fonts/lato/Lato-SemiboldItalic.woff +0 -0
  70. data/assets/fonts/lato/Lato-SemiboldItalic.woff2 +0 -0
  71. data/assets/fonts/lato/Lato-Thin.woff +0 -0
  72. data/assets/fonts/lato/Lato-Thin.woff2 +0 -0
  73. data/assets/fonts/lato/Lato-ThinItalic.woff +0 -0
  74. data/assets/fonts/lato/Lato-ThinItalic.woff2 +0 -0
  75. data/assets/fonts/lato/OFL.txt +94 -0
  76. data/assets/fonts/playfair-display/OFL.txt +93 -0
  77. data/assets/fonts/playfair-display/PlayfairDisplay-Black.woff +0 -0
  78. data/assets/fonts/playfair-display/PlayfairDisplay-Black.woff2 +0 -0
  79. data/assets/fonts/playfair-display/PlayfairDisplay-BlackItalic.woff +0 -0
  80. data/assets/fonts/playfair-display/PlayfairDisplay-BlackItalic.woff2 +0 -0
  81. data/assets/fonts/playfair-display/PlayfairDisplay-Bold.woff +0 -0
  82. data/assets/fonts/playfair-display/PlayfairDisplay-Bold.woff2 +0 -0
  83. data/assets/fonts/playfair-display/PlayfairDisplay-BoldItalic.woff +0 -0
  84. data/assets/fonts/playfair-display/PlayfairDisplay-BoldItalic.woff2 +0 -0
  85. data/assets/fonts/playfair-display/PlayfairDisplay-Italic.woff +0 -0
  86. data/assets/fonts/playfair-display/PlayfairDisplay-Italic.woff2 +0 -0
  87. data/assets/fonts/playfair-display/PlayfairDisplay-Regular.woff +0 -0
  88. data/assets/fonts/playfair-display/PlayfairDisplay-Regular.woff2 +0 -0
  89. data/assets/fonts/playfair-display/PlayfairDisplaySC-Black.woff +0 -0
  90. data/assets/fonts/playfair-display/PlayfairDisplaySC-Black.woff2 +0 -0
  91. data/assets/fonts/playfair-display/PlayfairDisplaySC-BlackItalic.woff +0 -0
  92. data/assets/fonts/playfair-display/PlayfairDisplaySC-BlackItalic.woff2 +0 -0
  93. data/assets/fonts/playfair-display/PlayfairDisplaySC-Bold.woff +0 -0
  94. data/assets/fonts/playfair-display/PlayfairDisplaySC-Bold.woff2 +0 -0
  95. data/assets/fonts/playfair-display/PlayfairDisplaySC-BoldItalic.woff +0 -0
  96. data/assets/fonts/playfair-display/PlayfairDisplaySC-BoldItalic.woff2 +0 -0
  97. data/assets/fonts/playfair-display/PlayfairDisplaySC-Italic.woff +0 -0
  98. data/assets/fonts/playfair-display/PlayfairDisplaySC-Italic.woff2 +0 -0
  99. data/assets/fonts/playfair-display/PlayfairDisplaySC-Regular.woff +0 -0
  100. data/assets/fonts/playfair-display/PlayfairDisplaySC-Regular.woff2 +0 -0
  101. data/assets/main.scss +11 -0
  102. data/vendor/raster/.gitignore +2 -0
  103. data/vendor/raster/README.md +173 -0
  104. data/vendor/raster/dist/raster.css +131 -0
  105. data/vendor/raster/dist/raster.js +164 -0
  106. data/vendor/raster/dist/raster.scss +5 -0
  107. data/vendor/raster/dist/sass/_guidelines.scss +33 -0
  108. data/vendor/raster/dist/sass/_layout.scss +9 -0
  109. data/vendor/raster/dist/sass/_reset.scss +51 -0
  110. data/vendor/raster/dist/sass/_setup.scss +25 -0
  111. data/vendor/raster/dist/sass/_typography.scss +75 -0
  112. data/vendor/raster/examples/build/css/typography.css +139 -0
  113. data/vendor/raster/examples/src/sass/typography.scss +10 -0
  114. data/vendor/raster/examples/typography.html +117 -0
  115. data/vendor/raster/gulpfile.js +94 -0
  116. data/vendor/raster/package.json +20 -0
  117. data/vendor/raster/test/build/css/test-default.css +229 -0
  118. data/vendor/raster/test/build/css/test-em.css +232 -0
  119. data/vendor/raster/test/build/css/test-percent.css +232 -0
  120. data/vendor/raster/test/build/css/test-pixel.css +232 -0
  121. data/vendor/raster/test/build/css/test-rem.css +232 -0
  122. data/vendor/raster/test/build/html/test-default.html +67 -0
  123. data/vendor/raster/test/build/html/test-em.html +67 -0
  124. data/vendor/raster/test/build/html/test-percent.html +67 -0
  125. data/vendor/raster/test/build/html/test-pixel.html +67 -0
  126. data/vendor/raster/test/build/html/test-rem.html +67 -0
  127. data/vendor/raster/test/lib/js/test-helper.js +131 -0
  128. data/vendor/raster/test/lib/tests/test-custom.js +20 -0
  129. data/vendor/raster/test/lib/tests/test-default.js +34 -0
  130. data/vendor/raster/test/scripts/run_tests.js +20 -0
  131. data/vendor/raster/test/src/html/mocha.html +6 -0
  132. data/vendor/raster/test/src/jade/includes/baseline.jade +12 -0
  133. data/vendor/raster/test/src/jade/includes/content.jade +2 -0
  134. data/vendor/raster/test/src/jade/includes/head.jade +11 -0
  135. data/vendor/raster/test/src/jade/includes/layout.jade +26 -0
  136. data/vendor/raster/test/src/jade/includes/mocha.jade +1 -0
  137. data/vendor/raster/test/src/jade/test-default.jade +10 -0
  138. data/vendor/raster/test/src/jade/test-em.jade +10 -0
  139. data/vendor/raster/test/src/jade/test-percent.jade +10 -0
  140. data/vendor/raster/test/src/jade/test-pixel.jade +10 -0
  141. data/vendor/raster/test/src/jade/test-rem.jade +10 -0
  142. data/vendor/raster/test/src/sass/_layout.scss +104 -0
  143. data/vendor/raster/test/src/sass/test-default.scss +2 -0
  144. data/vendor/raster/test/src/sass/test-em.scss +5 -0
  145. data/vendor/raster/test/src/sass/test-percent.scss +5 -0
  146. data/vendor/raster/test/src/sass/test-pixel.scss +5 -0
  147. data/vendor/raster/test/src/sass/test-rem.scss +5 -0
  148. metadata +232 -0
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
@@ -0,0 +1,94 @@
1
+ Copyright (c) 2010-2015, Łukasz Dziedzic (dziedzic@typoland.com),
2
+ with Reserved Font Name Lato.
3
+
4
+ This Font Software is licensed under the SIL Open Font License, Version 1.1.
5
+ This license is copied below, and is also available with a FAQ at:
6
+ http://scripts.sil.org/OFL
7
+
8
+
9
+ -----------------------------------------------------------
10
+ SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
11
+ -----------------------------------------------------------
12
+
13
+ PREAMBLE
14
+ The goals of the Open Font License (OFL) are to stimulate worldwide
15
+ development of collaborative font projects, to support the font creation
16
+ efforts of academic and linguistic communities, and to provide a free and
17
+ open framework in which fonts may be shared and improved in partnership
18
+ with others.
19
+
20
+ The OFL allows the licensed fonts to be used, studied, modified and
21
+ redistributed freely as long as they are not sold by themselves. The
22
+ fonts, including any derivative works, can be bundled, embedded,
23
+ redistributed and/or sold with any software provided that any reserved
24
+ names are not used by derivative works. The fonts and derivatives,
25
+ however, cannot be released under any other type of license. The
26
+ requirement for fonts to remain under this license does not apply
27
+ to any document created using the fonts or their derivatives.
28
+
29
+ DEFINITIONS
30
+ "Font Software" refers to the set of files released by the Copyright
31
+ Holder(s) under this license and clearly marked as such. This may
32
+ include source files, build scripts and documentation.
33
+
34
+ "Reserved Font Name" refers to any names specified as such after the
35
+ copyright statement(s).
36
+
37
+ "Original Version" refers to the collection of Font Software components as
38
+ distributed by the Copyright Holder(s).
39
+
40
+ "Modified Version" refers to any derivative made by adding to, deleting,
41
+ or substituting -- in part or in whole -- any of the components of the
42
+ Original Version, by changing formats or by porting the Font Software to a
43
+ new environment.
44
+
45
+ "Author" refers to any designer, engineer, programmer, technical
46
+ writer or other person who contributed to the Font Software.
47
+
48
+ PERMISSION & CONDITIONS
49
+ Permission is hereby granted, free of charge, to any person obtaining
50
+ a copy of the Font Software, to use, study, copy, merge, embed, modify,
51
+ redistribute, and sell modified and unmodified copies of the Font
52
+ Software, subject to the following conditions:
53
+
54
+ 1) Neither the Font Software nor any of its individual components,
55
+ in Original or Modified Versions, may be sold by itself.
56
+
57
+ 2) Original or Modified Versions of the Font Software may be bundled,
58
+ redistributed and/or sold with any software, provided that each copy
59
+ contains the above copyright notice and this license. These can be
60
+ included either as stand-alone text files, human-readable headers or
61
+ in the appropriate machine-readable metadata fields within text or
62
+ binary files as long as those fields can be easily viewed by the user.
63
+
64
+ 3) No Modified Version of the Font Software may use the Reserved Font
65
+ Name(s) unless explicit written permission is granted by the corresponding
66
+ Copyright Holder. This restriction only applies to the primary font name as
67
+ presented to the users.
68
+
69
+ 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
70
+ Software shall not be used to promote, endorse or advertise any
71
+ Modified Version, except to acknowledge the contribution(s) of the
72
+ Copyright Holder(s) and the Author(s) or with their explicit written
73
+ permission.
74
+
75
+ 5) The Font Software, modified or unmodified, in part or in whole,
76
+ must be distributed entirely under this license, and must not be
77
+ distributed under any other license. The requirement for fonts to
78
+ remain under this license does not apply to any document created
79
+ using the Font Software.
80
+
81
+ TERMINATION
82
+ This license becomes null and void if any of the above conditions are
83
+ not met.
84
+
85
+ DISCLAIMER
86
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
87
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
88
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
89
+ OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
90
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
91
+ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
92
+ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
93
+ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
94
+ OTHER DEALINGS IN THE FONT SOFTWARE.
@@ -0,0 +1,93 @@
1
+ Copyright 2017 The Playfair Display Project Authors (https://github.com/clauseggers/Playfair-Display), with Reserved Font Name "Playfair Display".
2
+
3
+ This Font Software is licensed under the SIL Open Font License, Version 1.1.
4
+ This license is copied below, and is also available with a FAQ at:
5
+ http://scripts.sil.org/OFL
6
+
7
+
8
+ -----------------------------------------------------------
9
+ SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10
+ -----------------------------------------------------------
11
+
12
+ PREAMBLE
13
+ The goals of the Open Font License (OFL) are to stimulate worldwide
14
+ development of collaborative font projects, to support the font creation
15
+ efforts of academic and linguistic communities, and to provide a free and
16
+ open framework in which fonts may be shared and improved in partnership
17
+ with others.
18
+
19
+ The OFL allows the licensed fonts to be used, studied, modified and
20
+ redistributed freely as long as they are not sold by themselves. The
21
+ fonts, including any derivative works, can be bundled, embedded,
22
+ redistributed and/or sold with any software provided that any reserved
23
+ names are not used by derivative works. The fonts and derivatives,
24
+ however, cannot be released under any other type of license. The
25
+ requirement for fonts to remain under this license does not apply
26
+ to any document created using the fonts or their derivatives.
27
+
28
+ DEFINITIONS
29
+ "Font Software" refers to the set of files released by the Copyright
30
+ Holder(s) under this license and clearly marked as such. This may
31
+ include source files, build scripts and documentation.
32
+
33
+ "Reserved Font Name" refers to any names specified as such after the
34
+ copyright statement(s).
35
+
36
+ "Original Version" refers to the collection of Font Software components as
37
+ distributed by the Copyright Holder(s).
38
+
39
+ "Modified Version" refers to any derivative made by adding to, deleting,
40
+ or substituting -- in part or in whole -- any of the components of the
41
+ Original Version, by changing formats or by porting the Font Software to a
42
+ new environment.
43
+
44
+ "Author" refers to any designer, engineer, programmer, technical
45
+ writer or other person who contributed to the Font Software.
46
+
47
+ PERMISSION & CONDITIONS
48
+ Permission is hereby granted, free of charge, to any person obtaining
49
+ a copy of the Font Software, to use, study, copy, merge, embed, modify,
50
+ redistribute, and sell modified and unmodified copies of the Font
51
+ Software, subject to the following conditions:
52
+
53
+ 1) Neither the Font Software nor any of its individual components,
54
+ in Original or Modified Versions, may be sold by itself.
55
+
56
+ 2) Original or Modified Versions of the Font Software may be bundled,
57
+ redistributed and/or sold with any software, provided that each copy
58
+ contains the above copyright notice and this license. These can be
59
+ included either as stand-alone text files, human-readable headers or
60
+ in the appropriate machine-readable metadata fields within text or
61
+ binary files as long as those fields can be easily viewed by the user.
62
+
63
+ 3) No Modified Version of the Font Software may use the Reserved Font
64
+ Name(s) unless explicit written permission is granted by the corresponding
65
+ Copyright Holder. This restriction only applies to the primary font name as
66
+ presented to the users.
67
+
68
+ 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69
+ Software shall not be used to promote, endorse or advertise any
70
+ Modified Version, except to acknowledge the contribution(s) of the
71
+ Copyright Holder(s) and the Author(s) or with their explicit written
72
+ permission.
73
+
74
+ 5) The Font Software, modified or unmodified, in part or in whole,
75
+ must be distributed entirely under this license, and must not be
76
+ distributed under any other license. The requirement for fonts to
77
+ remain under this license does not apply to any document created
78
+ using the Font Software.
79
+
80
+ TERMINATION
81
+ This license becomes null and void if any of the above conditions are
82
+ not met.
83
+
84
+ DISCLAIMER
85
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88
+ OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90
+ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91
+ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92
+ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93
+ OTHER DEALINGS IN THE FONT SOFTWARE.
data/assets/main.scss ADDED
@@ -0,0 +1,11 @@
1
+ ---
2
+ # Only the main Sass file needs front matter (the dashes are enough)
3
+ ---
4
+
5
+ $font-size: 16px;
6
+ $line-height: 20px;
7
+
8
+ @import "../vendor/raster/dist/raster.scss";
9
+ @import "layout";
10
+ @import "fonts";
11
+ @import "typography";
@@ -0,0 +1,2 @@
1
+ .sass-cache
2
+ node_modules
@@ -0,0 +1,173 @@
1
+ # Raster
2
+
3
+ Raster is a simple typography and grid framework written in SCSS.
4
+
5
+ * It replaces the default sizes for header elements (i.e., `H1`-`H6`) based on the [traditional point scale](http://markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-4).
6
+ * But the header font sizes are not fixed, instead they're defined as ratios (based on `12px` body type). This means if the body font size is not `12px`, then the sizes of the headers maintain their proportional size relative to the body font size. For example, at a font size of `12px`, the `H1` element will have a font size of `36px` (the "double great primer" size), but if the body font size is `11px`, then the `H1` element will have a font size of `33px` (`36/12 * 11 = 33`).
7
+ * Text is [aligned to the baseline grid](http://24ways.org/2006/compose-to-a-vertical-rhythm) using the following rules:
8
+ * Headers are given a `line-height` that's a multiple of the [leading](http://en.wikipedia.org/wiki/Leading).
9
+ * All block level elements are given a `top-margin` of `0` and a `bottom-margin` equal to the leading.
10
+
11
+ ## Usage
12
+
13
+ There are two ways to use Raster: either by simply linking the default CSS, or by recompiling the SCSS for finer-grained control.
14
+
15
+ ### Use Default CSS
16
+
17
+ Simply import the compiled CSS file from `dist/raster.css` in HTML:
18
+
19
+ ``` html
20
+ <link rel="stylesheet" href="[path to raster]/dist/raster.css">
21
+ ```
22
+
23
+ This pre-compiled version uses the browsers default font size and a `line-height` equal to `1.25rem`. Since all the `line-height` and `font-size` calculations are done in `rem` units, any font size can be specified on the root `HTML` element and the header elements will continue to maintain their proportional sizes and all text elements will stay aligned to the baseline grid.
24
+
25
+ ### Recompile SCSS
26
+
27
+ Recompile Sass with a new `line-height`, `font-size`, or both by importing the SCSS file at `dist/raster.scss`. Simply set the `$font-size` and `$line-height` variables before importing the SCSS file.
28
+
29
+
30
+ ``` scss
31
+ $font-size: 15px;
32
+ $line-height: 20px;
33
+ @import "[path to raster]/dist/raster";
34
+ ```
35
+
36
+ ## Caveats
37
+
38
+ * Raster is only tested in WebKit derivative browsers: Chrome and Safari.
39
+ * Due to the imprecisions of CSS math, `font-size` and `line-height` combinations that result in a leading with a decimal will not align to the baseline grid. For example, a `font-size` of `16px` and `line-height` of `120%` results in a decimal number leading of `19.2` (`1.2 * 16 = 19.2`). WebKit's handling of the decimal results in inconsistent leading sizes causing the text to drift from the baseline. There are three work-arounds for this problem:
40
+ 1. Specify a `$line-height` and `$font-size` in pixels. The text will always align properly to the baseline grid if the `$line-height` and `$font-size` are specified in pixels.
41
+ 2. Make sure your `font-size` and `line-height` combination results in a whole number leading. For example, a `$font-size` of `12px` and a line-height of `125%`, results in a leading of `15px` (`12px × 1.25 = 15px`). Since `15px` is a whole number, the text will align to the baseline.
42
+ 3. Just don't worry about the slight drift caused by off-by-one errors rendering text to the baseline.
43
+
44
+ ## Typography
45
+
46
+ ### Typographic Hierarchy
47
+
48
+ [Traditional typography defines](http://markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-4) defines the following font sizes:
49
+
50
+ * `6pt`: nonpareil
51
+ * `7pt`: minion
52
+ * `8pt`: brevier or small text
53
+ * `9pt`: bourgeois or galliard
54
+ * `10pt`: long primer or garamond
55
+ * `11pt`: small pica or philosophy
56
+ * `12pt`: pica
57
+ * `14pt`: english or augustin
58
+ * `18pt`: great primer
59
+ * `21pt`: double small pica or double pica
60
+ * `24pt`: double pica or two-line pica
61
+ * `36pt`: double great primer or 2-line great primer
62
+
63
+ It's easy to use these values "as is" in CSS, but then only a few font sizes are available for body text. Only the sizes between `10pt` to `18pt` are appropriate as body font sizes, and going above `12pt` throws off the proportional harmony with the larger sizes.
64
+
65
+ Raster's solution to this problem is to treat these as proportional font sizes rather than specific font sizes. Raster uses `12pt` ("pica") as the default font size and defines the rest as ratios as follows:
66
+
67
+ * "double great primer": `36 / 12`
68
+ * "double pica": `24 / 12`
69
+ * "double small pica": `21 / 12`
70
+ * "great primer": `18 / 12`s
71
+ * "english": `14 / 12`
72
+ * "pica": `12 / 12`
73
+
74
+ These ratios are then mapped to these HTML header tags:
75
+
76
+ * `H1`: double great primer
77
+ * `H2`: double pica
78
+ * `H3`: double small pica
79
+ * `H4`: great primer
80
+ * `H5`: english
81
+ * `H6`: pica
82
+
83
+ Since these header sizes are defined as ratios to the body size, the header sizes will stay in proportion to the body size, even if the body size is change from `12px`. The header font size calculation is `[body size] * [ratio]`. For example, a body font of `15px` will result in an `H1` header font size of `45px` (`15 * (36 / 12) = 45px`).
84
+
85
+ ### Vertical Rhythm
86
+
87
+ A [vertical rhythm](http://24ways.org/2006/compose-to-a-vertical-rhythm) means making the spacing of elements consistently align to the baseline grid.
88
+
89
+ Raster aligns elements to the baseline grid using the following rules:
90
+
91
+ * All default margins and padding are set to zero by the CSS reset.
92
+ * The line height is used as the leading.
93
+ * All block level elements are given a bottom margin equal to the leading. (The exception to this is hierarchical sublists, which have a bottom margin of zero, i.e., a list within a list does not have a bottom margin).
94
+ * Headers are fitted to the closest matching line height that's a multiple of the leading. For example, if the calculated header height is `21px` and the leading is `17px`, then the line height of the header will be `34px`. (This is in addition to having a bottom margin because headers are also block level elements).
95
+
96
+ ## Layout
97
+
98
+ Raster's grid approach is to expose Sass variables and functions for positioning elements. In most cases, the `columns-width` and `units-width` functions should be used when specifying widths (and horizontal padding and margins). These functions return the width for an integer count multiplier *while accounting for the gutter space spanning between the specified division size*. For example, to specify an element that spans two columns and is indented two units:
99
+
100
+ ``` css
101
+ #sidebar {
102
+ margin-left: units-width(2);
103
+ width: columns-width(2);
104
+ }
105
+ ```
106
+
107
+ ### Semantic Classes
108
+
109
+ Raster does not expose any classes of its own, allowing HTML authors to choose semantic classes without interfering.
110
+
111
+ ### Grid Functions
112
+
113
+ These functions are designed to specify the widths of elements that to be laid out on the grid.
114
+
115
+ * `@function columns-width($num-columns)`: Returns a width equal to the number of columns, while adding space for gutters between columns.
116
+ * `@function units-width($num-units)`: Returns a width equal to the number of units, while adding space for gutters between units.
117
+
118
+ ### Grid Variables
119
+
120
+ While in most cases, it's preferable to use the grid functions to horizontally space elements, it can be useful in some cases to access the widths from the backing Sass variables directly:
121
+
122
+ * `$gutter-width`: The width of the gutter between columns.
123
+ * `$unit-width`: The width of the smallest vertical division, the column is made of up multiples of this.
124
+ * `$column-width`: The width of the smallest *usable* vertical division.
125
+
126
+ Any of these variables can be overridden.
127
+
128
+ ### Calculation Variables
129
+
130
+ While the grid variables can be overridden directly, a better approach is to use the calculation variables which in turn define the grid variables by default (q.v. `dist/sass/_setup.scss`). The idea is for the `$gutter-width` to be defined based on the font size, and then have all the vertical divisions be defined based on the `$gutter-width`. As a result all the vertical divisions will end up being proportional to the font size of the body text. So the calculation variables allow the sizes of the grid variables to be adjusted (for example, adjusting the `$column-width`), while maintaining the proportional relationship of the body font size to the sizes of the vertical divisions.
131
+
132
+ * `$num-indent-gutters`: The multiple of `$gutter-width` for indenting hierarchical elements (e.g., `blockquote` and `li`).
133
+ * `$num-unit-gutters`: The multiple of `$gutter-width` used to set the `$unit-width`.
134
+ * `$num-column-units`: The multiple of `$unit-width` used to set the `$column-width`.
135
+
136
+ By default, the `$gutter-width` is set to `1rem`, this variable can also be overridden.
137
+
138
+ ### Overriding Variables
139
+
140
+ To override any of these variables, simply set them before importing `raster.scss`:
141
+
142
+ ``` scss
143
+ $num-column-units: 4;
144
+ @import "[path to raster]/dist/raster";
145
+ ```
146
+
147
+ ## Debugging Tools
148
+
149
+ Raster comes with tools to display the baseline grid, to use them:
150
+
151
+ 1. Import the JavaScript file at `dist/raster.js`:
152
+
153
+ ``` html
154
+ <script src="[path to raster]/dist/raster.js"></script>
155
+ ```
156
+
157
+ 2. Add the class `raster-show-baseline` to the element to show the baseline in (usually the `body` tag):
158
+
159
+ ``` html
160
+ <body class="raster-show-baseline">
161
+ ```
162
+
163
+ ## Tests
164
+
165
+ Tests can be run by opening the `test-*.html` files in `test/build/html/` in a WebKit browser.
166
+
167
+ If `mocha-phantomjs` is installed, tests can also be run on the command line with `npm test`. But `phantomjs` doesn't fully simulate the DOM, so it's better to just run the tests this way to debug the tests themselves, and then run the tests in the browser to fully confirm they are passing.
168
+
169
+ ## Resources
170
+
171
+ * [Compose to a Vertical Rhythm ◆ 24 ways](http://24ways.org/2006/compose-to-a-vertical-rhythm)
172
+ * [Five simple steps to better typography - Part 4 | Journal | The Personal Disquiet of Mark Boulton](http://markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-4)
173
+ * [Thinking with Type | Contents](http://www.thinkingwithtype.com/contents/grid/)