cyclist 0.4.0 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. metadata +1 -47
  3. data/vendor/raster/.gitignore +0 -2
  4. data/vendor/raster/README.md +0 -173
  5. data/vendor/raster/dist/raster.css +0 -131
  6. data/vendor/raster/dist/raster.js +0 -164
  7. data/vendor/raster/dist/raster.scss +0 -5
  8. data/vendor/raster/dist/sass/_guidelines.scss +0 -33
  9. data/vendor/raster/dist/sass/_layout.scss +0 -9
  10. data/vendor/raster/dist/sass/_reset.scss +0 -51
  11. data/vendor/raster/dist/sass/_setup.scss +0 -25
  12. data/vendor/raster/dist/sass/_typography.scss +0 -75
  13. data/vendor/raster/examples/build/css/typography.css +0 -139
  14. data/vendor/raster/examples/src/sass/typography.scss +0 -10
  15. data/vendor/raster/examples/typography.html +0 -117
  16. data/vendor/raster/gulpfile.js +0 -94
  17. data/vendor/raster/package.json +0 -20
  18. data/vendor/raster/test/build/css/test-default.css +0 -229
  19. data/vendor/raster/test/build/css/test-em.css +0 -232
  20. data/vendor/raster/test/build/css/test-percent.css +0 -232
  21. data/vendor/raster/test/build/css/test-pixel.css +0 -232
  22. data/vendor/raster/test/build/css/test-rem.css +0 -232
  23. data/vendor/raster/test/build/html/test-default.html +0 -67
  24. data/vendor/raster/test/build/html/test-em.html +0 -67
  25. data/vendor/raster/test/build/html/test-percent.html +0 -67
  26. data/vendor/raster/test/build/html/test-pixel.html +0 -67
  27. data/vendor/raster/test/build/html/test-rem.html +0 -67
  28. data/vendor/raster/test/lib/js/test-helper.js +0 -131
  29. data/vendor/raster/test/lib/tests/test-custom.js +0 -20
  30. data/vendor/raster/test/lib/tests/test-default.js +0 -34
  31. data/vendor/raster/test/scripts/run_tests.js +0 -20
  32. data/vendor/raster/test/src/html/mocha.html +0 -6
  33. data/vendor/raster/test/src/jade/includes/baseline.jade +0 -12
  34. data/vendor/raster/test/src/jade/includes/content.jade +0 -2
  35. data/vendor/raster/test/src/jade/includes/head.jade +0 -11
  36. data/vendor/raster/test/src/jade/includes/layout.jade +0 -26
  37. data/vendor/raster/test/src/jade/includes/mocha.jade +0 -1
  38. data/vendor/raster/test/src/jade/test-default.jade +0 -10
  39. data/vendor/raster/test/src/jade/test-em.jade +0 -10
  40. data/vendor/raster/test/src/jade/test-percent.jade +0 -10
  41. data/vendor/raster/test/src/jade/test-pixel.jade +0 -10
  42. data/vendor/raster/test/src/jade/test-rem.jade +0 -10
  43. data/vendor/raster/test/src/sass/_layout.scss +0 -104
  44. data/vendor/raster/test/src/sass/test-default.scss +0 -2
  45. data/vendor/raster/test/src/sass/test-em.scss +0 -5
  46. data/vendor/raster/test/src/sass/test-percent.scss +0 -5
  47. data/vendor/raster/test/src/sass/test-pixel.scss +0 -5
  48. 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: 0a3d4e39a9fefe82db988c076f1e20bb1f4e4e3d
4
- data.tar.gz: 19fc604a7cee076033521e05aa356fa4fc8717ee
3
+ metadata.gz: 2e58d5b84bd15a3731466ee817ffacda3cc5ae4d
4
+ data.tar.gz: 81ca99a0e9e907b83572bfae2ef5e5a219525a94
5
5
  SHA512:
6
- metadata.gz: d1614569147315f83a88c81ff9fba55e1c8fa3ceeed7117acea1b4074bcaf5daaa9562346b1de097925eb3a377d8fd78f4e4c24f3a6f2585169b88ce113129fd
7
- data.tar.gz: 31df92a3ca6a4b720481bc6c0eb7235cc8caf3c7fde78d3ff1ea646c4865a7c1b1b5669e04829c655195c3b43fbdb0385df9bd32273895b40d5fca8fad054aa9
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.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
@@ -1,2 +0,0 @@
1
- .sass-cache
2
- node_modules
@@ -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,5 +0,0 @@
1
- @import "sass/reset";
2
- @import "sass/setup";
3
- @import "sass/typography";
4
- @import "sass/guidelines";
5
- @import "sass/layout";
@@ -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
-