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
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<title>Default</title>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<script src="../../../node_modules/mocha/mocha.js"></script>
|
|
7
|
+
<script src="../../../node_modules/chai/chai.js"></script>
|
|
8
|
+
<script>
|
|
9
|
+
mocha.ui('bdd');
|
|
10
|
+
mocha.reporter('html');
|
|
11
|
+
var should = chai.should();
|
|
12
|
+
</script>
|
|
13
|
+
<script src="../../lib/js/test-helper.js"></script>
|
|
14
|
+
<link rel="stylesheet" href="../../../node_modules/mocha/mocha.css">
|
|
15
|
+
</head>
|
|
16
|
+
<script src="../../lib/tests/test-default.js"></script>
|
|
17
|
+
<script src="../../../dist/raster.js"></script>
|
|
18
|
+
<link rel="stylesheet" href="../css/test-default.css">
|
|
19
|
+
</html>
|
|
20
|
+
<body class="raster-show-baseline">
|
|
21
|
+
<article id="baseline">
|
|
22
|
+
<h1 id="h1">h1</h1>
|
|
23
|
+
<h2 id="h2">h2</h2>
|
|
24
|
+
<h3 id="h3">h3</h3>
|
|
25
|
+
<h4 id="h4">h4</h4>
|
|
26
|
+
<h5 id="h5">h5</h5>
|
|
27
|
+
<h6 id="h6">h6</h6>
|
|
28
|
+
<p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
29
|
+
<ul id="ul">
|
|
30
|
+
<li id="li">li</li>
|
|
31
|
+
</ul>
|
|
32
|
+
<pre id="code"><code>code</code></pre>
|
|
33
|
+
</article>
|
|
34
|
+
<article id="layout" class="raster-show-guidelines">
|
|
35
|
+
<div class="indent-one-gutter indent gutters">1</div>
|
|
36
|
+
<div class="indent-one-unit indent units">1</div>
|
|
37
|
+
<div class="indent-one-column indent columns">1</div>
|
|
38
|
+
<div class="indent-two-gutter indent gutters">2</div>
|
|
39
|
+
<div class="indent-two-unit indent units">2</div>
|
|
40
|
+
<div class="indent-two-column indent columns">2</div>
|
|
41
|
+
<div class="indent-three-gutter indent gutters">3</div>
|
|
42
|
+
<div class="indent-three-unit indent units">3</div>
|
|
43
|
+
<article id="layout-width">
|
|
44
|
+
<div class="width-one-gutter width gutters">1</div>
|
|
45
|
+
<div class="width-one-unit width units">1</div>
|
|
46
|
+
<div class="width-one-column width columns">1</div>
|
|
47
|
+
<div class="width-two-gutter width gutters">2</div>
|
|
48
|
+
<div class="width-two-unit width units">2</div>
|
|
49
|
+
<div class="width-two-column width columns">2</div>
|
|
50
|
+
<div class="width-three-gutter width gutters">3</div>
|
|
51
|
+
<div class="width-three-unit width units">3</div>
|
|
52
|
+
<div class="width-two-column width columns">2</div>
|
|
53
|
+
<div class="width-one-column width columns">1</div>
|
|
54
|
+
<div class="width-three-column width columns">3</div>
|
|
55
|
+
<div class="width-one-unit width units">1</div>
|
|
56
|
+
<div class="width-two-unit width units">2</div>
|
|
57
|
+
<div class="width-one-column width columns">1</div>
|
|
58
|
+
<div class="width-one-unit width units">1</div>
|
|
59
|
+
</article>
|
|
60
|
+
</article>
|
|
61
|
+
<div id="mocha"></div>
|
|
62
|
+
<script>
|
|
63
|
+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
|
64
|
+
else { mocha.run(); }
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
</body>
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<title>em</title>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<script src="../../../node_modules/mocha/mocha.js"></script>
|
|
7
|
+
<script src="../../../node_modules/chai/chai.js"></script>
|
|
8
|
+
<script>
|
|
9
|
+
mocha.ui('bdd');
|
|
10
|
+
mocha.reporter('html');
|
|
11
|
+
var should = chai.should();
|
|
12
|
+
</script>
|
|
13
|
+
<script src="../../lib/js/test-helper.js"></script>
|
|
14
|
+
<link rel="stylesheet" href="../../../node_modules/mocha/mocha.css">
|
|
15
|
+
</head>
|
|
16
|
+
<script src="../../lib/tests/test-custom.js"></script>
|
|
17
|
+
<script src="../../../dist/raster.js"></script>
|
|
18
|
+
<link rel="stylesheet" href="../css/test-em.css">
|
|
19
|
+
</html>
|
|
20
|
+
<body class="raster-show-baseline">
|
|
21
|
+
<article id="baseline">
|
|
22
|
+
<h1 id="h1">h1</h1>
|
|
23
|
+
<h2 id="h2">h2</h2>
|
|
24
|
+
<h3 id="h3">h3</h3>
|
|
25
|
+
<h4 id="h4">h4</h4>
|
|
26
|
+
<h5 id="h5">h5</h5>
|
|
27
|
+
<h6 id="h6">h6</h6>
|
|
28
|
+
<p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
29
|
+
<ul id="ul">
|
|
30
|
+
<li id="li">li</li>
|
|
31
|
+
</ul>
|
|
32
|
+
<pre id="code"><code>code</code></pre>
|
|
33
|
+
</article>
|
|
34
|
+
<article id="layout" class="raster-show-guidelines">
|
|
35
|
+
<div class="indent-one-gutter indent gutters">1</div>
|
|
36
|
+
<div class="indent-one-unit indent units">1</div>
|
|
37
|
+
<div class="indent-one-column indent columns">1</div>
|
|
38
|
+
<div class="indent-two-gutter indent gutters">2</div>
|
|
39
|
+
<div class="indent-two-unit indent units">2</div>
|
|
40
|
+
<div class="indent-two-column indent columns">2</div>
|
|
41
|
+
<div class="indent-three-gutter indent gutters">3</div>
|
|
42
|
+
<div class="indent-three-unit indent units">3</div>
|
|
43
|
+
<article id="layout-width">
|
|
44
|
+
<div class="width-one-gutter width gutters">1</div>
|
|
45
|
+
<div class="width-one-unit width units">1</div>
|
|
46
|
+
<div class="width-one-column width columns">1</div>
|
|
47
|
+
<div class="width-two-gutter width gutters">2</div>
|
|
48
|
+
<div class="width-two-unit width units">2</div>
|
|
49
|
+
<div class="width-two-column width columns">2</div>
|
|
50
|
+
<div class="width-three-gutter width gutters">3</div>
|
|
51
|
+
<div class="width-three-unit width units">3</div>
|
|
52
|
+
<div class="width-two-column width columns">2</div>
|
|
53
|
+
<div class="width-one-column width columns">1</div>
|
|
54
|
+
<div class="width-three-column width columns">3</div>
|
|
55
|
+
<div class="width-one-unit width units">1</div>
|
|
56
|
+
<div class="width-two-unit width units">2</div>
|
|
57
|
+
<div class="width-one-column width columns">1</div>
|
|
58
|
+
<div class="width-one-unit width units">1</div>
|
|
59
|
+
</article>
|
|
60
|
+
</article>
|
|
61
|
+
<div id="mocha"></div>
|
|
62
|
+
<script>
|
|
63
|
+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
|
64
|
+
else { mocha.run(); }
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
</body>
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<title>percent</title>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<script src="../../../node_modules/mocha/mocha.js"></script>
|
|
7
|
+
<script src="../../../node_modules/chai/chai.js"></script>
|
|
8
|
+
<script>
|
|
9
|
+
mocha.ui('bdd');
|
|
10
|
+
mocha.reporter('html');
|
|
11
|
+
var should = chai.should();
|
|
12
|
+
</script>
|
|
13
|
+
<script src="../../lib/js/test-helper.js"></script>
|
|
14
|
+
<link rel="stylesheet" href="../../../node_modules/mocha/mocha.css">
|
|
15
|
+
</head>
|
|
16
|
+
<script src="../../lib/tests/test-custom.js"></script>
|
|
17
|
+
<script src="../../../dist/raster.js"></script>
|
|
18
|
+
<link rel="stylesheet" href="../css/test-percent.css">
|
|
19
|
+
</html>
|
|
20
|
+
<body class="raster-show-baseline">
|
|
21
|
+
<article id="baseline">
|
|
22
|
+
<h1 id="h1">h1</h1>
|
|
23
|
+
<h2 id="h2">h2</h2>
|
|
24
|
+
<h3 id="h3">h3</h3>
|
|
25
|
+
<h4 id="h4">h4</h4>
|
|
26
|
+
<h5 id="h5">h5</h5>
|
|
27
|
+
<h6 id="h6">h6</h6>
|
|
28
|
+
<p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
29
|
+
<ul id="ul">
|
|
30
|
+
<li id="li">li</li>
|
|
31
|
+
</ul>
|
|
32
|
+
<pre id="code"><code>code</code></pre>
|
|
33
|
+
</article>
|
|
34
|
+
<article id="layout" class="raster-show-guidelines">
|
|
35
|
+
<div class="indent-one-gutter indent gutters">1</div>
|
|
36
|
+
<div class="indent-one-unit indent units">1</div>
|
|
37
|
+
<div class="indent-one-column indent columns">1</div>
|
|
38
|
+
<div class="indent-two-gutter indent gutters">2</div>
|
|
39
|
+
<div class="indent-two-unit indent units">2</div>
|
|
40
|
+
<div class="indent-two-column indent columns">2</div>
|
|
41
|
+
<div class="indent-three-gutter indent gutters">3</div>
|
|
42
|
+
<div class="indent-three-unit indent units">3</div>
|
|
43
|
+
<article id="layout-width">
|
|
44
|
+
<div class="width-one-gutter width gutters">1</div>
|
|
45
|
+
<div class="width-one-unit width units">1</div>
|
|
46
|
+
<div class="width-one-column width columns">1</div>
|
|
47
|
+
<div class="width-two-gutter width gutters">2</div>
|
|
48
|
+
<div class="width-two-unit width units">2</div>
|
|
49
|
+
<div class="width-two-column width columns">2</div>
|
|
50
|
+
<div class="width-three-gutter width gutters">3</div>
|
|
51
|
+
<div class="width-three-unit width units">3</div>
|
|
52
|
+
<div class="width-two-column width columns">2</div>
|
|
53
|
+
<div class="width-one-column width columns">1</div>
|
|
54
|
+
<div class="width-three-column width columns">3</div>
|
|
55
|
+
<div class="width-one-unit width units">1</div>
|
|
56
|
+
<div class="width-two-unit width units">2</div>
|
|
57
|
+
<div class="width-one-column width columns">1</div>
|
|
58
|
+
<div class="width-one-unit width units">1</div>
|
|
59
|
+
</article>
|
|
60
|
+
</article>
|
|
61
|
+
<div id="mocha"></div>
|
|
62
|
+
<script>
|
|
63
|
+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
|
64
|
+
else { mocha.run(); }
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
</body>
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<title>pixel</title>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<script src="../../../node_modules/mocha/mocha.js"></script>
|
|
7
|
+
<script src="../../../node_modules/chai/chai.js"></script>
|
|
8
|
+
<script>
|
|
9
|
+
mocha.ui('bdd');
|
|
10
|
+
mocha.reporter('html');
|
|
11
|
+
var should = chai.should();
|
|
12
|
+
</script>
|
|
13
|
+
<script src="../../lib/js/test-helper.js"></script>
|
|
14
|
+
<link rel="stylesheet" href="../../../node_modules/mocha/mocha.css">
|
|
15
|
+
</head>
|
|
16
|
+
<script src="../../lib/tests/test-custom.js"></script>
|
|
17
|
+
<script src="../../../dist/raster.js"></script>
|
|
18
|
+
<link rel="stylesheet" href="../css/test-pixel.css">
|
|
19
|
+
</html>
|
|
20
|
+
<body class="raster-show-baseline">
|
|
21
|
+
<article id="baseline">
|
|
22
|
+
<h1 id="h1">h1</h1>
|
|
23
|
+
<h2 id="h2">h2</h2>
|
|
24
|
+
<h3 id="h3">h3</h3>
|
|
25
|
+
<h4 id="h4">h4</h4>
|
|
26
|
+
<h5 id="h5">h5</h5>
|
|
27
|
+
<h6 id="h6">h6</h6>
|
|
28
|
+
<p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
29
|
+
<ul id="ul">
|
|
30
|
+
<li id="li">li</li>
|
|
31
|
+
</ul>
|
|
32
|
+
<pre id="code"><code>code</code></pre>
|
|
33
|
+
</article>
|
|
34
|
+
<article id="layout" class="raster-show-guidelines">
|
|
35
|
+
<div class="indent-one-gutter indent gutters">1</div>
|
|
36
|
+
<div class="indent-one-unit indent units">1</div>
|
|
37
|
+
<div class="indent-one-column indent columns">1</div>
|
|
38
|
+
<div class="indent-two-gutter indent gutters">2</div>
|
|
39
|
+
<div class="indent-two-unit indent units">2</div>
|
|
40
|
+
<div class="indent-two-column indent columns">2</div>
|
|
41
|
+
<div class="indent-three-gutter indent gutters">3</div>
|
|
42
|
+
<div class="indent-three-unit indent units">3</div>
|
|
43
|
+
<article id="layout-width">
|
|
44
|
+
<div class="width-one-gutter width gutters">1</div>
|
|
45
|
+
<div class="width-one-unit width units">1</div>
|
|
46
|
+
<div class="width-one-column width columns">1</div>
|
|
47
|
+
<div class="width-two-gutter width gutters">2</div>
|
|
48
|
+
<div class="width-two-unit width units">2</div>
|
|
49
|
+
<div class="width-two-column width columns">2</div>
|
|
50
|
+
<div class="width-three-gutter width gutters">3</div>
|
|
51
|
+
<div class="width-three-unit width units">3</div>
|
|
52
|
+
<div class="width-two-column width columns">2</div>
|
|
53
|
+
<div class="width-one-column width columns">1</div>
|
|
54
|
+
<div class="width-three-column width columns">3</div>
|
|
55
|
+
<div class="width-one-unit width units">1</div>
|
|
56
|
+
<div class="width-two-unit width units">2</div>
|
|
57
|
+
<div class="width-one-column width columns">1</div>
|
|
58
|
+
<div class="width-one-unit width units">1</div>
|
|
59
|
+
</article>
|
|
60
|
+
</article>
|
|
61
|
+
<div id="mocha"></div>
|
|
62
|
+
<script>
|
|
63
|
+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
|
64
|
+
else { mocha.run(); }
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
</body>
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<title>rem</title>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<script src="../../../node_modules/mocha/mocha.js"></script>
|
|
7
|
+
<script src="../../../node_modules/chai/chai.js"></script>
|
|
8
|
+
<script>
|
|
9
|
+
mocha.ui('bdd');
|
|
10
|
+
mocha.reporter('html');
|
|
11
|
+
var should = chai.should();
|
|
12
|
+
</script>
|
|
13
|
+
<script src="../../lib/js/test-helper.js"></script>
|
|
14
|
+
<link rel="stylesheet" href="../../../node_modules/mocha/mocha.css">
|
|
15
|
+
</head>
|
|
16
|
+
<script src="../../lib/tests/test-custom.js"></script>
|
|
17
|
+
<script src="../../../dist/raster.js"></script>
|
|
18
|
+
<link rel="stylesheet" href="../css/test-rem.css">
|
|
19
|
+
</html>
|
|
20
|
+
<body class="raster-show-baseline">
|
|
21
|
+
<article id="baseline">
|
|
22
|
+
<h1 id="h1">h1</h1>
|
|
23
|
+
<h2 id="h2">h2</h2>
|
|
24
|
+
<h3 id="h3">h3</h3>
|
|
25
|
+
<h4 id="h4">h4</h4>
|
|
26
|
+
<h5 id="h5">h5</h5>
|
|
27
|
+
<h6 id="h6">h6</h6>
|
|
28
|
+
<p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
29
|
+
<ul id="ul">
|
|
30
|
+
<li id="li">li</li>
|
|
31
|
+
</ul>
|
|
32
|
+
<pre id="code"><code>code</code></pre>
|
|
33
|
+
</article>
|
|
34
|
+
<article id="layout" class="raster-show-guidelines">
|
|
35
|
+
<div class="indent-one-gutter indent gutters">1</div>
|
|
36
|
+
<div class="indent-one-unit indent units">1</div>
|
|
37
|
+
<div class="indent-one-column indent columns">1</div>
|
|
38
|
+
<div class="indent-two-gutter indent gutters">2</div>
|
|
39
|
+
<div class="indent-two-unit indent units">2</div>
|
|
40
|
+
<div class="indent-two-column indent columns">2</div>
|
|
41
|
+
<div class="indent-three-gutter indent gutters">3</div>
|
|
42
|
+
<div class="indent-three-unit indent units">3</div>
|
|
43
|
+
<article id="layout-width">
|
|
44
|
+
<div class="width-one-gutter width gutters">1</div>
|
|
45
|
+
<div class="width-one-unit width units">1</div>
|
|
46
|
+
<div class="width-one-column width columns">1</div>
|
|
47
|
+
<div class="width-two-gutter width gutters">2</div>
|
|
48
|
+
<div class="width-two-unit width units">2</div>
|
|
49
|
+
<div class="width-two-column width columns">2</div>
|
|
50
|
+
<div class="width-three-gutter width gutters">3</div>
|
|
51
|
+
<div class="width-three-unit width units">3</div>
|
|
52
|
+
<div class="width-two-column width columns">2</div>
|
|
53
|
+
<div class="width-one-column width columns">1</div>
|
|
54
|
+
<div class="width-three-column width columns">3</div>
|
|
55
|
+
<div class="width-one-unit width units">1</div>
|
|
56
|
+
<div class="width-two-unit width units">2</div>
|
|
57
|
+
<div class="width-one-column width columns">1</div>
|
|
58
|
+
<div class="width-one-unit width units">1</div>
|
|
59
|
+
</article>
|
|
60
|
+
</article>
|
|
61
|
+
<div id="mocha"></div>
|
|
62
|
+
<script>
|
|
63
|
+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
|
64
|
+
else { mocha.run(); }
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
</body>
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
var defaultNumIndentGutters = 2;
|
|
2
|
+
var defaultNumUnitGutters = 4;
|
|
3
|
+
var defaultNumColumnUnits = 2;
|
|
4
|
+
|
|
5
|
+
var testHelper = {
|
|
6
|
+
baselineIsCorrect: function(rootElement) {
|
|
7
|
+
// The heights and margins should be multiples of the leading
|
|
8
|
+
|
|
9
|
+
var leading = this.leading();
|
|
10
|
+
var nodeList = rootElement.querySelectorAll('*');
|
|
11
|
+
|
|
12
|
+
for (var i = nodeList.length - 1; i >= 0; --i) {
|
|
13
|
+
var element = nodeList[i];
|
|
14
|
+
var totalHeight = this.totalHeightForElement(element);
|
|
15
|
+
if (!element.id) {
|
|
16
|
+
// Only test items with an ID
|
|
17
|
+
continue;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
totalHeight.should.be.above(0);
|
|
21
|
+
if (totalHeight < 1) {
|
|
22
|
+
return false;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var remainder = totalHeight % leading;
|
|
26
|
+
remainder.should.equal(0);
|
|
27
|
+
if (remainder !== 0) {
|
|
28
|
+
return false;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
return true;
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
layoutIsCorrect: function(rootElement, layoutSizes) {
|
|
36
|
+
layoutSizes = layoutSizes || this.layoutSizes(this.gutterWidth(), defaultNumUnitGutters, defaultNumColumnUnits);
|
|
37
|
+
var nodeList = rootElement.querySelectorAll('.columns', '.gutters', '.units');
|
|
38
|
+
for (var i = nodeList.length - 1; i >= 0; --i) {
|
|
39
|
+
var element = nodeList[i];
|
|
40
|
+
var multiplier = parseInt(this.trimmedInnerText(element));
|
|
41
|
+
var testProperty = element.classList.contains('width') ? 'width' : 'marginLeft';
|
|
42
|
+
var style = window.getComputedStyle(element);
|
|
43
|
+
var valueStyle = style[testProperty];
|
|
44
|
+
var value = parseFloat(valueStyle, 10);
|
|
45
|
+
|
|
46
|
+
var base;
|
|
47
|
+
var gutterWidth = null;
|
|
48
|
+
if (element.classList.contains('columns')) {
|
|
49
|
+
// Test columns
|
|
50
|
+
gutterWidth = layoutSizes.gutterWidth;
|
|
51
|
+
base = layoutSizes.columnWidth;
|
|
52
|
+
} else if (element.classList.contains('units')) {
|
|
53
|
+
// Test units
|
|
54
|
+
gutterWidth = layoutSizes.gutterWidth;
|
|
55
|
+
base = layoutSizes.unitWidth;
|
|
56
|
+
} else {
|
|
57
|
+
// Test Gutters
|
|
58
|
+
base = layoutSizes.gutterWidth;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
var result = this.widthPropertyMatches(base, multiplier, value, gutterWidth);
|
|
62
|
+
if (!window.mochaPhantomJS && testProperty == 'width') {
|
|
63
|
+
// Skip this test when running in `phantomjs` because `phantomjs` doesn't support flexbox
|
|
64
|
+
result.should.equal(true);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
|
|
69
|
+
// Helpers
|
|
70
|
+
|
|
71
|
+
widthPropertyMatches: function(base, multiplier, value, gutterWidth) {
|
|
72
|
+
var testValue = base * multiplier;
|
|
73
|
+
if (!!gutterWidth) {
|
|
74
|
+
testValue += gutterWidth * (multiplier - 1);
|
|
75
|
+
}
|
|
76
|
+
return testValue == value;
|
|
77
|
+
},
|
|
78
|
+
|
|
79
|
+
layoutSizes: function(gutterWidth, numUnitGutters, numColumnUnits) {
|
|
80
|
+
var unitWidth = numUnitGutters * gutterWidth;
|
|
81
|
+
var columnWidth = numColumnUnits * (unitWidth + gutterWidth) - gutterWidth;
|
|
82
|
+
return {
|
|
83
|
+
gutterWidth: gutterWidth,
|
|
84
|
+
unitWidth: unitWidth,
|
|
85
|
+
columnWidth: columnWidth
|
|
86
|
+
};
|
|
87
|
+
},
|
|
88
|
+
|
|
89
|
+
trimmedInnerText: function(element) {
|
|
90
|
+
var text = element.innerText.trim();
|
|
91
|
+
var index = text.indexOf('\n');
|
|
92
|
+
if (index > 0) {
|
|
93
|
+
text = text.substring(0, index);
|
|
94
|
+
}
|
|
95
|
+
return text;
|
|
96
|
+
},
|
|
97
|
+
|
|
98
|
+
leading: function() {
|
|
99
|
+
var style = window.getComputedStyle(document.body);
|
|
100
|
+
return parseFloat(style.lineHeight, 10);
|
|
101
|
+
},
|
|
102
|
+
|
|
103
|
+
gutterWidth: function() {
|
|
104
|
+
return parseFloat(this.gutterWidthStyle(), 10);
|
|
105
|
+
},
|
|
106
|
+
|
|
107
|
+
gutterWidthStyle: function() {
|
|
108
|
+
var gutterElement = document.getElementsByClassName('indent-one-gutter')[0];
|
|
109
|
+
var style = window.getComputedStyle(gutterElement);
|
|
110
|
+
return style.marginLeft;
|
|
111
|
+
},
|
|
112
|
+
|
|
113
|
+
totalHeightForElement: function(element) {
|
|
114
|
+
var style = window.getComputedStyle(element);
|
|
115
|
+
var computedHeight = element.clientHeight;
|
|
116
|
+
computedHeight += parseFloat(style.marginTop, 10);
|
|
117
|
+
computedHeight += parseFloat(style.marginBottom, 10);
|
|
118
|
+
computedHeight += parseFloat(style.paddingTop, 10);
|
|
119
|
+
computedHeight += parseFloat(style.paddingBottom, 10);
|
|
120
|
+
computedHeight += parseFloat(style.borderTopWidth, 10);
|
|
121
|
+
computedHeight += parseFloat(style.borderBottomWidth, 10);
|
|
122
|
+
return computedHeight;
|
|
123
|
+
},
|
|
124
|
+
|
|
125
|
+
testElement: function() {
|
|
126
|
+
var testElements = document.getElementsByTagName('li');
|
|
127
|
+
var testElement = testElements[0];
|
|
128
|
+
testElement.should.be.an('object');
|
|
129
|
+
return testElement;
|
|
130
|
+
}
|
|
131
|
+
};
|