cyclist 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +52 -0
- data/_includes/footer.html +4 -0
- data/_includes/head.html +6 -0
- data/_includes/header.html +20 -0
- data/_layouts/default.html +13 -0
- data/_layouts/home.html +39 -0
- data/_layouts/link.html +21 -0
- data/_layouts/page.html +15 -0
- data/_layouts/post.html +22 -0
- data/_sass/crimson.scss +41 -0
- data/_sass/fira-mono.scss +14 -0
- data/_sass/fonts.scss +4 -0
- data/_sass/lato.scss +144 -0
- data/_sass/layout.scss +80 -0
- data/_sass/playfair-display.scss +83 -0
- data/_sass/typography.scss +84 -0
- data/assets/fonts/crimson/LICENSE.txt +93 -0
- data/assets/fonts/crimson/crimson-bold-webfont.woff +0 -0
- data/assets/fonts/crimson/crimson-bold-webfont.woff2 +0 -0
- data/assets/fonts/crimson/crimson-bolditalic-webfont.woff +0 -0
- data/assets/fonts/crimson/crimson-bolditalic-webfont.woff2 +0 -0
- data/assets/fonts/crimson/crimson-italic-webfont.woff +0 -0
- data/assets/fonts/crimson/crimson-italic-webfont.woff2 +0 -0
- data/assets/fonts/crimson/crimson-roman-webfont.woff +0 -0
- data/assets/fonts/crimson/crimson-roman-webfont.woff2 +0 -0
- data/assets/fonts/crimson/crimson-semibold-webfont.woff +0 -0
- data/assets/fonts/crimson/crimson-semibold-webfont.woff2 +0 -0
- data/assets/fonts/crimson/crimson-semibolditalic-webfont.woff +0 -0
- data/assets/fonts/crimson/crimson-semibolditalic-webfont.woff2 +0 -0
- data/assets/fonts/fira-mono/FiraMono-Bold.woff +0 -0
- data/assets/fonts/fira-mono/FiraMono-Bold.woff2 +0 -0
- data/assets/fonts/fira-mono/FiraMono-Medium.woff +0 -0
- data/assets/fonts/fira-mono/FiraMono-Medium.woff2 +0 -0
- data/assets/fonts/fira-mono/FiraMono-Regular.woff +0 -0
- data/assets/fonts/fira-mono/FiraMono-Regular.woff2 +0 -0
- data/assets/fonts/fira-mono/LICENSE +94 -0
- data/assets/fonts/lato/Lato-Black.woff +0 -0
- data/assets/fonts/lato/Lato-Black.woff2 +0 -0
- data/assets/fonts/lato/Lato-BlackItalic.woff +0 -0
- data/assets/fonts/lato/Lato-BlackItalic.woff2 +0 -0
- data/assets/fonts/lato/Lato-Bold.woff +0 -0
- data/assets/fonts/lato/Lato-Bold.woff2 +0 -0
- data/assets/fonts/lato/Lato-BoldItalic.woff +0 -0
- data/assets/fonts/lato/Lato-BoldItalic.woff2 +0 -0
- data/assets/fonts/lato/Lato-Hairline.woff +0 -0
- data/assets/fonts/lato/Lato-Hairline.woff2 +0 -0
- data/assets/fonts/lato/Lato-HairlineItalic.woff +0 -0
- data/assets/fonts/lato/Lato-HairlineItalic.woff2 +0 -0
- data/assets/fonts/lato/Lato-Heavy.woff +0 -0
- data/assets/fonts/lato/Lato-Heavy.woff2 +0 -0
- data/assets/fonts/lato/Lato-HeavyItalic.woff +0 -0
- data/assets/fonts/lato/Lato-HeavyItalic.woff2 +0 -0
- data/assets/fonts/lato/Lato-Italic.woff +0 -0
- data/assets/fonts/lato/Lato-Italic.woff2 +0 -0
- data/assets/fonts/lato/Lato-Light.woff +0 -0
- data/assets/fonts/lato/Lato-Light.woff2 +0 -0
- data/assets/fonts/lato/Lato-LightItalic.woff +0 -0
- data/assets/fonts/lato/Lato-LightItalic.woff2 +0 -0
- data/assets/fonts/lato/Lato-Medium.woff +0 -0
- data/assets/fonts/lato/Lato-Medium.woff2 +0 -0
- data/assets/fonts/lato/Lato-MediumItalic.woff +0 -0
- data/assets/fonts/lato/Lato-MediumItalic.woff2 +0 -0
- data/assets/fonts/lato/Lato-Regular.woff +0 -0
- data/assets/fonts/lato/Lato-Regular.woff2 +0 -0
- data/assets/fonts/lato/Lato-Semibold.woff +0 -0
- data/assets/fonts/lato/Lato-Semibold.woff2 +0 -0
- data/assets/fonts/lato/Lato-SemiboldItalic.woff +0 -0
- data/assets/fonts/lato/Lato-SemiboldItalic.woff2 +0 -0
- data/assets/fonts/lato/Lato-Thin.woff +0 -0
- data/assets/fonts/lato/Lato-Thin.woff2 +0 -0
- data/assets/fonts/lato/Lato-ThinItalic.woff +0 -0
- data/assets/fonts/lato/Lato-ThinItalic.woff2 +0 -0
- data/assets/fonts/lato/OFL.txt +94 -0
- data/assets/fonts/playfair-display/OFL.txt +93 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-Black.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-Black.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-BlackItalic.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-BlackItalic.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-Bold.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-Bold.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-BoldItalic.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-BoldItalic.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-Italic.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-Italic.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-Regular.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplay-Regular.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-Black.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-Black.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-BlackItalic.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-BlackItalic.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-Bold.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-Bold.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-BoldItalic.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-BoldItalic.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-Italic.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-Italic.woff2 +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-Regular.woff +0 -0
- data/assets/fonts/playfair-display/PlayfairDisplaySC-Regular.woff2 +0 -0
- data/assets/main.scss +11 -0
- data/vendor/raster/.gitignore +2 -0
- data/vendor/raster/README.md +173 -0
- data/vendor/raster/dist/raster.css +131 -0
- data/vendor/raster/dist/raster.js +164 -0
- data/vendor/raster/dist/raster.scss +5 -0
- data/vendor/raster/dist/sass/_guidelines.scss +33 -0
- data/vendor/raster/dist/sass/_layout.scss +9 -0
- data/vendor/raster/dist/sass/_reset.scss +51 -0
- data/vendor/raster/dist/sass/_setup.scss +25 -0
- data/vendor/raster/dist/sass/_typography.scss +75 -0
- data/vendor/raster/examples/build/css/typography.css +139 -0
- data/vendor/raster/examples/src/sass/typography.scss +10 -0
- data/vendor/raster/examples/typography.html +117 -0
- data/vendor/raster/gulpfile.js +94 -0
- data/vendor/raster/package.json +20 -0
- data/vendor/raster/test/build/css/test-default.css +229 -0
- data/vendor/raster/test/build/css/test-em.css +232 -0
- data/vendor/raster/test/build/css/test-percent.css +232 -0
- data/vendor/raster/test/build/css/test-pixel.css +232 -0
- data/vendor/raster/test/build/css/test-rem.css +232 -0
- data/vendor/raster/test/build/html/test-default.html +67 -0
- data/vendor/raster/test/build/html/test-em.html +67 -0
- data/vendor/raster/test/build/html/test-percent.html +67 -0
- data/vendor/raster/test/build/html/test-pixel.html +67 -0
- data/vendor/raster/test/build/html/test-rem.html +67 -0
- data/vendor/raster/test/lib/js/test-helper.js +131 -0
- data/vendor/raster/test/lib/tests/test-custom.js +20 -0
- data/vendor/raster/test/lib/tests/test-default.js +34 -0
- data/vendor/raster/test/scripts/run_tests.js +20 -0
- data/vendor/raster/test/src/html/mocha.html +6 -0
- data/vendor/raster/test/src/jade/includes/baseline.jade +12 -0
- data/vendor/raster/test/src/jade/includes/content.jade +2 -0
- data/vendor/raster/test/src/jade/includes/head.jade +11 -0
- data/vendor/raster/test/src/jade/includes/layout.jade +26 -0
- data/vendor/raster/test/src/jade/includes/mocha.jade +1 -0
- data/vendor/raster/test/src/jade/test-default.jade +10 -0
- data/vendor/raster/test/src/jade/test-em.jade +10 -0
- data/vendor/raster/test/src/jade/test-percent.jade +10 -0
- data/vendor/raster/test/src/jade/test-pixel.jade +10 -0
- data/vendor/raster/test/src/jade/test-rem.jade +10 -0
- data/vendor/raster/test/src/sass/_layout.scss +104 -0
- data/vendor/raster/test/src/sass/test-default.scss +2 -0
- data/vendor/raster/test/src/sass/test-em.scss +5 -0
- data/vendor/raster/test/src/sass/test-percent.scss +5 -0
- data/vendor/raster/test/src/sass/test-pixel.scss +5 -0
- data/vendor/raster/test/src/sass/test-rem.scss +5 -0
- 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
|
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
|
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.
|
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
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
data/assets/main.scss
ADDED
@@ -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/)
|