cyclist 0.4.0 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- metadata +1 -47
- data/vendor/raster/.gitignore +0 -2
- data/vendor/raster/README.md +0 -173
- data/vendor/raster/dist/raster.css +0 -131
- data/vendor/raster/dist/raster.js +0 -164
- data/vendor/raster/dist/raster.scss +0 -5
- data/vendor/raster/dist/sass/_guidelines.scss +0 -33
- data/vendor/raster/dist/sass/_layout.scss +0 -9
- data/vendor/raster/dist/sass/_reset.scss +0 -51
- data/vendor/raster/dist/sass/_setup.scss +0 -25
- data/vendor/raster/dist/sass/_typography.scss +0 -75
- data/vendor/raster/examples/build/css/typography.css +0 -139
- data/vendor/raster/examples/src/sass/typography.scss +0 -10
- data/vendor/raster/examples/typography.html +0 -117
- data/vendor/raster/gulpfile.js +0 -94
- data/vendor/raster/package.json +0 -20
- data/vendor/raster/test/build/css/test-default.css +0 -229
- data/vendor/raster/test/build/css/test-em.css +0 -232
- data/vendor/raster/test/build/css/test-percent.css +0 -232
- data/vendor/raster/test/build/css/test-pixel.css +0 -232
- data/vendor/raster/test/build/css/test-rem.css +0 -232
- data/vendor/raster/test/build/html/test-default.html +0 -67
- data/vendor/raster/test/build/html/test-em.html +0 -67
- data/vendor/raster/test/build/html/test-percent.html +0 -67
- data/vendor/raster/test/build/html/test-pixel.html +0 -67
- data/vendor/raster/test/build/html/test-rem.html +0 -67
- data/vendor/raster/test/lib/js/test-helper.js +0 -131
- data/vendor/raster/test/lib/tests/test-custom.js +0 -20
- data/vendor/raster/test/lib/tests/test-default.js +0 -34
- data/vendor/raster/test/scripts/run_tests.js +0 -20
- data/vendor/raster/test/src/html/mocha.html +0 -6
- data/vendor/raster/test/src/jade/includes/baseline.jade +0 -12
- data/vendor/raster/test/src/jade/includes/content.jade +0 -2
- data/vendor/raster/test/src/jade/includes/head.jade +0 -11
- data/vendor/raster/test/src/jade/includes/layout.jade +0 -26
- data/vendor/raster/test/src/jade/includes/mocha.jade +0 -1
- data/vendor/raster/test/src/jade/test-default.jade +0 -10
- data/vendor/raster/test/src/jade/test-em.jade +0 -10
- data/vendor/raster/test/src/jade/test-percent.jade +0 -10
- data/vendor/raster/test/src/jade/test-pixel.jade +0 -10
- data/vendor/raster/test/src/jade/test-rem.jade +0 -10
- data/vendor/raster/test/src/sass/_layout.scss +0 -104
- data/vendor/raster/test/src/sass/test-default.scss +0 -2
- data/vendor/raster/test/src/sass/test-em.scss +0 -5
- data/vendor/raster/test/src/sass/test-percent.scss +0 -5
- data/vendor/raster/test/src/sass/test-pixel.scss +0 -5
- data/vendor/raster/test/src/sass/test-rem.scss +0 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2e58d5b84bd15a3731466ee817ffacda3cc5ae4d
|
4
|
+
data.tar.gz: 81ca99a0e9e907b83572bfae2ef5e5a219525a94
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bead533838ffcf8a40a21d9357d1e86b235426768ed23c915c51a63893f569728cec648a08c7b2103b4706d01ca73c6999cc88b209af72985ddd5d57ca00b022
|
7
|
+
data.tar.gz: b3355d46e5a4ca15e7f9f06742828b48127e88ddc567fd44000507076ba7d607d020662876cdba86c67b2403910eaace1c9c080f8e9d9094a914535cdd82e8ae
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: cyclist
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.5.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Roben Kleene
|
@@ -173,52 +173,6 @@ files:
|
|
173
173
|
- assets/fonts/playfair-display/PlayfairDisplaySC-Regular.woff
|
174
174
|
- assets/fonts/playfair-display/PlayfairDisplaySC-Regular.woff2
|
175
175
|
- assets/main.scss
|
176
|
-
- vendor/raster/.gitignore
|
177
|
-
- vendor/raster/README.md
|
178
|
-
- vendor/raster/dist/raster.css
|
179
|
-
- vendor/raster/dist/raster.js
|
180
|
-
- vendor/raster/dist/raster.scss
|
181
|
-
- vendor/raster/dist/sass/_guidelines.scss
|
182
|
-
- vendor/raster/dist/sass/_layout.scss
|
183
|
-
- vendor/raster/dist/sass/_reset.scss
|
184
|
-
- vendor/raster/dist/sass/_setup.scss
|
185
|
-
- vendor/raster/dist/sass/_typography.scss
|
186
|
-
- vendor/raster/examples/build/css/typography.css
|
187
|
-
- vendor/raster/examples/src/sass/typography.scss
|
188
|
-
- vendor/raster/examples/typography.html
|
189
|
-
- vendor/raster/gulpfile.js
|
190
|
-
- vendor/raster/package.json
|
191
|
-
- vendor/raster/test/build/css/test-default.css
|
192
|
-
- vendor/raster/test/build/css/test-em.css
|
193
|
-
- vendor/raster/test/build/css/test-percent.css
|
194
|
-
- vendor/raster/test/build/css/test-pixel.css
|
195
|
-
- vendor/raster/test/build/css/test-rem.css
|
196
|
-
- vendor/raster/test/build/html/test-default.html
|
197
|
-
- vendor/raster/test/build/html/test-em.html
|
198
|
-
- vendor/raster/test/build/html/test-percent.html
|
199
|
-
- vendor/raster/test/build/html/test-pixel.html
|
200
|
-
- vendor/raster/test/build/html/test-rem.html
|
201
|
-
- vendor/raster/test/lib/js/test-helper.js
|
202
|
-
- vendor/raster/test/lib/tests/test-custom.js
|
203
|
-
- vendor/raster/test/lib/tests/test-default.js
|
204
|
-
- vendor/raster/test/scripts/run_tests.js
|
205
|
-
- vendor/raster/test/src/html/mocha.html
|
206
|
-
- vendor/raster/test/src/jade/includes/baseline.jade
|
207
|
-
- vendor/raster/test/src/jade/includes/content.jade
|
208
|
-
- vendor/raster/test/src/jade/includes/head.jade
|
209
|
-
- vendor/raster/test/src/jade/includes/layout.jade
|
210
|
-
- vendor/raster/test/src/jade/includes/mocha.jade
|
211
|
-
- vendor/raster/test/src/jade/test-default.jade
|
212
|
-
- vendor/raster/test/src/jade/test-em.jade
|
213
|
-
- vendor/raster/test/src/jade/test-percent.jade
|
214
|
-
- vendor/raster/test/src/jade/test-pixel.jade
|
215
|
-
- vendor/raster/test/src/jade/test-rem.jade
|
216
|
-
- vendor/raster/test/src/sass/_layout.scss
|
217
|
-
- vendor/raster/test/src/sass/test-default.scss
|
218
|
-
- vendor/raster/test/src/sass/test-em.scss
|
219
|
-
- vendor/raster/test/src/sass/test-percent.scss
|
220
|
-
- vendor/raster/test/src/sass/test-pixel.scss
|
221
|
-
- vendor/raster/test/src/sass/test-rem.scss
|
222
176
|
homepage: https://github.com/robenkleene/cyclist
|
223
177
|
licenses:
|
224
178
|
- MIT
|
data/vendor/raster/.gitignore
DELETED
data/vendor/raster/README.md
DELETED
@@ -1,173 +0,0 @@
|
|
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/)
|
@@ -1,131 +0,0 @@
|
|
1
|
-
/* Structure */
|
2
|
-
html, body, div, span {
|
3
|
-
margin: 0;
|
4
|
-
padding: 0;
|
5
|
-
border: 0;
|
6
|
-
outline: 0;
|
7
|
-
font-size: 100%;
|
8
|
-
vertical-align: baseline;
|
9
|
-
background: transparent; }
|
10
|
-
|
11
|
-
/* Text */
|
12
|
-
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ol, ul, li, strong, em {
|
13
|
-
margin: 0;
|
14
|
-
padding: 0;
|
15
|
-
border: 0;
|
16
|
-
outline: 0;
|
17
|
-
font-size: 100%;
|
18
|
-
vertical-align: baseline;
|
19
|
-
background: transparent; }
|
20
|
-
|
21
|
-
/* Other */
|
22
|
-
applet, object, iframe, abbr, acronym, address, big, cite, code, del, dfn,
|
23
|
-
font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i,
|
24
|
-
center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody,
|
25
|
-
tfoot, thead, tr, th, td {
|
26
|
-
margin: 0;
|
27
|
-
padding: 0;
|
28
|
-
border: 0;
|
29
|
-
outline: 0;
|
30
|
-
font-size: 100%;
|
31
|
-
vertical-align: baseline;
|
32
|
-
background: transparent; }
|
33
|
-
|
34
|
-
/* Misc */
|
35
|
-
:focus {
|
36
|
-
outline: 0; }
|
37
|
-
|
38
|
-
table {
|
39
|
-
border-collapse: separate;
|
40
|
-
border-spacing: 0; }
|
41
|
-
|
42
|
-
caption, th, td {
|
43
|
-
text-align: left;
|
44
|
-
font-weight: normal; }
|
45
|
-
|
46
|
-
blockquote:before, blockquote:after, q:before, q:after {
|
47
|
-
content: ""; }
|
48
|
-
|
49
|
-
blockquote, q {
|
50
|
-
quotes: "" ""; }
|
51
|
-
|
52
|
-
body {
|
53
|
-
line-height: 1.25rem; }
|
54
|
-
|
55
|
-
h1 {
|
56
|
-
font-size: calc(1em * (36 / 12));
|
57
|
-
margin-bottom: 1.25rem;
|
58
|
-
line-height: calc(3 * 1.25rem); }
|
59
|
-
|
60
|
-
h2 {
|
61
|
-
font-size: calc(1em * (24 / 12));
|
62
|
-
margin-bottom: 1.25rem;
|
63
|
-
line-height: calc(2 * 1.25rem); }
|
64
|
-
|
65
|
-
h3 {
|
66
|
-
font-size: calc(1em * (21 / 12));
|
67
|
-
margin-bottom: 1.25rem;
|
68
|
-
line-height: calc(2 * 1.25rem); }
|
69
|
-
|
70
|
-
h4 {
|
71
|
-
font-size: calc(1em * (18 / 12));
|
72
|
-
margin-bottom: 1.25rem;
|
73
|
-
line-height: calc(2 * 1.25rem); }
|
74
|
-
|
75
|
-
h5 {
|
76
|
-
font-size: calc(1em * (14 / 12));
|
77
|
-
margin-bottom: 1.25rem;
|
78
|
-
line-height: calc(2 * 1.25rem); }
|
79
|
-
|
80
|
-
h6 {
|
81
|
-
font-size: calc(1em * (12 / 12));
|
82
|
-
margin-bottom: 1.25rem;
|
83
|
-
line-height: calc(1 * 1.25rem); }
|
84
|
-
|
85
|
-
p,
|
86
|
-
ul,
|
87
|
-
ol {
|
88
|
-
margin-bottom: 1.25rem; }
|
89
|
-
|
90
|
-
ul ol,
|
91
|
-
ol ol,
|
92
|
-
ul ul,
|
93
|
-
ol ul {
|
94
|
-
margin-bottom: 0; }
|
95
|
-
|
96
|
-
ul {
|
97
|
-
list-style-type: disc;
|
98
|
-
margin-left: 2rem; }
|
99
|
-
|
100
|
-
ol {
|
101
|
-
list-style-type: decimal;
|
102
|
-
margin-left: 2rem; }
|
103
|
-
|
104
|
-
.raster-guidelines {
|
105
|
-
display: -webkit-flex;
|
106
|
-
display: flex;
|
107
|
-
position: absolute;
|
108
|
-
left: 0;
|
109
|
-
top: 0;
|
110
|
-
bottom: 0;
|
111
|
-
right: 0; }
|
112
|
-
|
113
|
-
.raster-guidelines > div.raster-column {
|
114
|
-
display: -webkit-flex;
|
115
|
-
display: flex;
|
116
|
-
background-color: rgba(148, 235, 255, 0.25);
|
117
|
-
margin-right: 1rem;
|
118
|
-
-webkit-flex: 0 0 9rem;
|
119
|
-
flex: 0 0 9rem; }
|
120
|
-
|
121
|
-
.raster-guidelines > div.raster-column:last-child {
|
122
|
-
margin-right: 0; }
|
123
|
-
|
124
|
-
.raster-column > div.raster-unit {
|
125
|
-
background-color: rgba(148, 235, 255, 0.25);
|
126
|
-
margin-right: 1rem;
|
127
|
-
-webkit-flex: 0 0 4rem;
|
128
|
-
flex: 0 0 4rem; }
|
129
|
-
|
130
|
-
.raster-column > div.raster-unit:last-child {
|
131
|
-
margin-right: 0; }
|
@@ -1,164 +0,0 @@
|
|
1
|
-
var Raster = {
|
2
|
-
baselineHelper: {
|
3
|
-
SHOW_BASELINE_CLASS_NAME: 'raster-show-baseline',
|
4
|
-
BASELINE_CLASS_NAME: 'raster-baseline',
|
5
|
-
setup: function() {
|
6
|
-
var showBaselineElements = document.getElementsByClassName(this.SHOW_BASELINE_CLASS_NAME);
|
7
|
-
for (var i = 0; i < showBaselineElements.length; i++) {
|
8
|
-
var baselineElement = showBaselineElements[i];
|
9
|
-
var baselineContainer = this.containerForElement(baselineElement);
|
10
|
-
this.showBaseline(baselineContainer);
|
11
|
-
}
|
12
|
-
},
|
13
|
-
|
14
|
-
showBaseline: function(container) {
|
15
|
-
container.style.height = "auto";
|
16
|
-
container.style.width = "100%";
|
17
|
-
|
18
|
-
var containerHeightInt = container.clientHeight;
|
19
|
-
var parentHeightInt = container.parentNode.clientHeight;
|
20
|
-
|
21
|
-
var counter = 0; // Use a counter to limit to 30 children to prevent infinite loops
|
22
|
-
while (containerHeightInt < parentHeightInt && counter < 200) {
|
23
|
-
// Add an element to contain the baseline
|
24
|
-
var baselineElement = document.createElement("p");
|
25
|
-
this.resetCSS(baselineElement);
|
26
|
-
baselineElement.appendChild(document.createTextNode('\u00A0'));
|
27
|
-
|
28
|
-
// Draw the baseline on a canvas element
|
29
|
-
var canvas = document.createElement("canvas");
|
30
|
-
baselineElement.style.position = "relative";
|
31
|
-
canvas.setAttribute("width", 1);
|
32
|
-
canvas.setAttribute("height", 1);
|
33
|
-
canvas.style.position = "absolute";
|
34
|
-
canvas.style.left = "0";
|
35
|
-
canvas.style.bottom = "0";
|
36
|
-
canvas.style.width = "100%";
|
37
|
-
canvas.style.height = "1px";
|
38
|
-
if (canvas && canvas.getContext) {
|
39
|
-
context = canvas.getContext('2d');
|
40
|
-
context.strokeStyle = "rgba(148, 235, 255, 0.5)";
|
41
|
-
context.lineWidth = 1;
|
42
|
-
context.strokeRect(0, 0, 1, 1);
|
43
|
-
}
|
44
|
-
baselineElement.appendChild(canvas);
|
45
|
-
container.appendChild(baselineElement);
|
46
|
-
containerHeightInt = container.clientHeight;
|
47
|
-
counter++;
|
48
|
-
}
|
49
|
-
},
|
50
|
-
|
51
|
-
// Helpers
|
52
|
-
|
53
|
-
containerForElement: function(element) {
|
54
|
-
var container = document.createElement("div");
|
55
|
-
element.appendChild(container);
|
56
|
-
this.makeContainer(container);
|
57
|
-
return container;
|
58
|
-
},
|
59
|
-
|
60
|
-
makeContainer: function(element) {
|
61
|
-
var parent = element.parentNode;
|
62
|
-
parent.style.position = "relative";
|
63
|
-
|
64
|
-
var height = parent.offsetHeight;
|
65
|
-
var width = parent.offsetWidth;
|
66
|
-
|
67
|
-
element.classList.add(this.BASELINE_CLASS_NAME);
|
68
|
-
element.setAttribute("width", width);
|
69
|
-
element.setAttribute("height", height);
|
70
|
-
element.style.width = width + "px";
|
71
|
-
element.style.height = height + "px";
|
72
|
-
element.style.position = "absolute";
|
73
|
-
element.style.left = "0";
|
74
|
-
element.style.top = "0";
|
75
|
-
},
|
76
|
-
|
77
|
-
resetCSS: function(element) {
|
78
|
-
element.style.border = 0;
|
79
|
-
element.style.margin = "0";
|
80
|
-
element.style.padding = "0";
|
81
|
-
element.style.outline = "0";
|
82
|
-
element.style.fontSize = "100%";
|
83
|
-
element.style.verticalAlign = "baseline";
|
84
|
-
element.style.background = "transparent";
|
85
|
-
}
|
86
|
-
},
|
87
|
-
|
88
|
-
guidelineHelper: {
|
89
|
-
SHOW_GUIDELINES_CLASS_NAME: 'raster-show-guidelines',
|
90
|
-
GUIDELINES_CLASS_NAME: 'raster-guidelines',
|
91
|
-
setup: function() {
|
92
|
-
var showGuidelinesElements = document.getElementsByClassName(this.SHOW_GUIDELINES_CLASS_NAME);
|
93
|
-
for (var j = 0; j < showGuidelinesElements.length; j++) {
|
94
|
-
var guidelinesElement = showGuidelinesElements[j];
|
95
|
-
var guidelinesContainer = this.containerForElement(guidelinesElement);
|
96
|
-
this.showGuidelines(guidelinesContainer);
|
97
|
-
}
|
98
|
-
},
|
99
|
-
showGuidelines: function(container) {
|
100
|
-
this.fillContainerWithClassName(container, 'raster-column');
|
101
|
-
var rasterColumns = container.getElementsByClassName('raster-column');
|
102
|
-
for (var i = 0; i < rasterColumns.length; i++) {
|
103
|
-
var rasterColmun = rasterColumns[i];
|
104
|
-
this.fillContainerWithClassName(rasterColmun, 'raster-unit');
|
105
|
-
}
|
106
|
-
},
|
107
|
-
fillContainerWithClassName: function(container, className) {
|
108
|
-
var computedWidth = 0;
|
109
|
-
var containerWidth = container.clientWidth;
|
110
|
-
var counter = 0; // Use a counter to limit to 30 children to prevent infinite loops
|
111
|
-
while (computedWidth < containerWidth && counter < 30) {
|
112
|
-
var element = document.createElement("div");
|
113
|
-
element.classList.add(className);
|
114
|
-
container.appendChild(element);
|
115
|
-
computedWidth = this.widthForChildElementsWithClassName(container, className);
|
116
|
-
counter++;
|
117
|
-
}
|
118
|
-
},
|
119
|
-
|
120
|
-
widthForChildElementsWithClassName: function(parent, className) {
|
121
|
-
var nodeList = parent.getElementsByClassName(className);
|
122
|
-
var calculateWidth = function(initial, element) {
|
123
|
-
var style = window.getComputedStyle(element);
|
124
|
-
var marginRight = parseInt(style.marginRight, 10);
|
125
|
-
var width = element.clientWidth;
|
126
|
-
var totalWidth = width + marginRight;
|
127
|
-
return initial + totalWidth;
|
128
|
-
};
|
129
|
-
var width = Array.prototype.reduce.call(nodeList, calculateWidth, 0);
|
130
|
-
return width;
|
131
|
-
},
|
132
|
-
containerForElement: function(element) {
|
133
|
-
var container = document.createElement("div");
|
134
|
-
element.appendChild(container);
|
135
|
-
container.classList.add(this.GUIDELINES_CLASS_NAME);
|
136
|
-
var height = element.offsetHeight;
|
137
|
-
container.setAttribute("height", height);
|
138
|
-
container.style.height = height + "px";
|
139
|
-
element.style.position = "relative";
|
140
|
-
return container;
|
141
|
-
}
|
142
|
-
},
|
143
|
-
|
144
|
-
redraw: function() {
|
145
|
-
var classNames = [this.baselineHelper.BASELINE_CLASS_NAME, this.guidelineHelper.GUIDELINES_CLASS_NAME];
|
146
|
-
for (var i = 0; i < classNames.length; i++) {
|
147
|
-
var className = classNames[i];
|
148
|
-
var nodeList = document.getElementsByClassName(className);
|
149
|
-
for (var j = nodeList.length - 1; j >= 0; --j) {
|
150
|
-
var element = nodeList[j];
|
151
|
-
element.parentNode.removeChild(element);
|
152
|
-
}
|
153
|
-
}
|
154
|
-
|
155
|
-
this.setup();
|
156
|
-
},
|
157
|
-
|
158
|
-
setup: function() {
|
159
|
-
this.baselineHelper.setup();
|
160
|
-
this.guidelineHelper.setup();
|
161
|
-
}
|
162
|
-
};
|
163
|
-
|
164
|
-
window.addEventListener('load', function () { Raster.setup(); }, false);
|
@@ -1,33 +0,0 @@
|
|
1
|
-
.raster-guidelines {
|
2
|
-
display: -webkit-flex;
|
3
|
-
display: flex;
|
4
|
-
position: absolute;
|
5
|
-
left: 0;
|
6
|
-
top: 0;
|
7
|
-
bottom: 0;
|
8
|
-
right: 0;
|
9
|
-
}
|
10
|
-
|
11
|
-
.raster-guidelines > div.raster-column {
|
12
|
-
display: -webkit-flex;
|
13
|
-
display: flex;
|
14
|
-
background-color: rgba(148, 235, 255, .25);
|
15
|
-
margin-right: $gutter-width;
|
16
|
-
-webkit-flex: 0 0 $column-width;
|
17
|
-
flex: 0 0 $column-width;
|
18
|
-
}
|
19
|
-
|
20
|
-
.raster-guidelines > div.raster-column:last-child {
|
21
|
-
margin-right: 0;
|
22
|
-
}
|
23
|
-
|
24
|
-
.raster-column > div.raster-unit {
|
25
|
-
background-color: rgba(148, 235, 255, .25);
|
26
|
-
margin-right: $gutter-width;
|
27
|
-
-webkit-flex: 0 0 $unit-width;
|
28
|
-
flex: 0 0 $unit-width;
|
29
|
-
}
|
30
|
-
|
31
|
-
.raster-column > div.raster-unit:last-child {
|
32
|
-
margin-right: 0;
|
33
|
-
}
|
@@ -1,9 +0,0 @@
|
|
1
|
-
@function columns-width($num-columns) {
|
2
|
-
$width: $num-columns * ($column-width + $gutter-width) - $gutter-width;
|
3
|
-
@return max($width, 0);
|
4
|
-
}
|
5
|
-
|
6
|
-
@function units-width($num-units) {
|
7
|
-
$width: $num-units * ($unit-width + $gutter-width) - $gutter-width;
|
8
|
-
@return max($width, 0);
|
9
|
-
}
|
@@ -1,51 +0,0 @@
|
|
1
|
-
/* Structure */
|
2
|
-
html, body, div, span {
|
3
|
-
margin: 0;
|
4
|
-
padding: 0;
|
5
|
-
border: 0;
|
6
|
-
outline: 0;
|
7
|
-
font-size: 100%;
|
8
|
-
vertical-align: baseline;
|
9
|
-
background: transparent;
|
10
|
-
}
|
11
|
-
/* Text */
|
12
|
-
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ol, ul, li, strong, em {
|
13
|
-
margin: 0;
|
14
|
-
padding: 0;
|
15
|
-
border: 0;
|
16
|
-
outline: 0;
|
17
|
-
font-size: 100%;
|
18
|
-
vertical-align: baseline;
|
19
|
-
background: transparent;
|
20
|
-
}
|
21
|
-
/* Other */
|
22
|
-
applet, object, iframe, abbr, acronym, address, big, cite, code, del, dfn,
|
23
|
-
font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i,
|
24
|
-
center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody,
|
25
|
-
tfoot, thead, tr, th, td {
|
26
|
-
margin: 0;
|
27
|
-
padding: 0;
|
28
|
-
border: 0;
|
29
|
-
outline: 0;
|
30
|
-
font-size: 100%;
|
31
|
-
vertical-align: baseline;
|
32
|
-
background: transparent;
|
33
|
-
}
|
34
|
-
/* Misc */
|
35
|
-
:focus {
|
36
|
-
outline: 0;
|
37
|
-
}
|
38
|
-
table {
|
39
|
-
border-collapse: separate;
|
40
|
-
border-spacing: 0;
|
41
|
-
}
|
42
|
-
caption, th, td {
|
43
|
-
text-align: left;
|
44
|
-
font-weight: normal;
|
45
|
-
}
|
46
|
-
blockquote:before, blockquote:after, q:before, q:after {
|
47
|
-
content: "";
|
48
|
-
}
|
49
|
-
blockquote, q {
|
50
|
-
quotes: "" "";
|
51
|
-
}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
// Line Height & Leading Variables
|
2
|
-
|
3
|
-
$font-size: false !default;
|
4
|
-
$line-height: 1.25rem !default;
|
5
|
-
$leading-height: $line-height !default;
|
6
|
-
|
7
|
-
@if unit($line-height) == "%" {
|
8
|
-
$leading-height: $line-height / 100% * 1rem;
|
9
|
-
} @else if unit($line-height) == "em" {
|
10
|
-
$leading-height: $line-height / 1em * 1rem;
|
11
|
-
}
|
12
|
-
|
13
|
-
// Grid Variables
|
14
|
-
|
15
|
-
$gutter-width: 1rem !default;
|
16
|
-
$num-indent-gutters: 2 !default;
|
17
|
-
$num-unit-gutters: 4 !default;
|
18
|
-
$num-column-units: 2 !default;
|
19
|
-
|
20
|
-
// Calculation Variables
|
21
|
-
|
22
|
-
$indent-width: $gutter-width * $num-indent-gutters !default;
|
23
|
-
$unit-width: $gutter-width * $num-unit-gutters !default;
|
24
|
-
$column-width: $unit-width * $num-column-units + $gutter-width * ($num-column-units - 1) !default;
|
25
|
-
|