cyclist-grid 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: a95f7f5f4047e3b265f8475b50b15f0d8019bcce0d9db16787ae95c6bae1ee96
4
+ data.tar.gz: 0a9db509e180f50659ec147161c4f367fc594c9f9dbfbed1d966d288db2eaca7
5
+ SHA512:
6
+ metadata.gz: f466dc0faa01210133dea7a8467a56a5e6c972f0c79ae124c42901fa910b75f685f043b2c9a0c15fac8c39c5cc866859db86e9fd85a354feab7e006f1381cd9e
7
+ data.tar.gz: 1c7ab9ba34ee8e2e81fd8a85061ade656bb8a1d0e3e7869bb22a1e34066b06b33f5a2e042c75a8efd9396dc062be2db7b16683d529fe27dab61944f1ae5d0efe
@@ -0,0 +1,134 @@
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
+ hr {
105
+ line-height: 2.5rem; }
106
+
107
+ .cyclist-guidelines {
108
+ display: -webkit-flex;
109
+ display: flex;
110
+ position: absolute;
111
+ left: 0;
112
+ top: 0;
113
+ bottom: 0;
114
+ right: 0; }
115
+
116
+ .cyclist-guidelines > div.cyclist-column {
117
+ display: -webkit-flex;
118
+ display: flex;
119
+ background-color: rgba(148, 235, 255, 0.25);
120
+ margin-right: 1rem;
121
+ -webkit-flex: 0 0 9rem;
122
+ flex: 0 0 9rem; }
123
+
124
+ .cyclist-guidelines > div.cyclist-column:last-child {
125
+ margin-right: 0; }
126
+
127
+ .cyclist-column > div.cyclist-unit {
128
+ background-color: rgba(148, 235, 255, 0.25);
129
+ margin-right: 1rem;
130
+ -webkit-flex: 0 0 4rem;
131
+ flex: 0 0 4rem; }
132
+
133
+ .cyclist-column > div.cyclist-unit:last-child {
134
+ margin-right: 0; }
@@ -0,0 +1,164 @@
1
+ var Cyclist = {
2
+ baselineHelper: {
3
+ SHOW_BASELINE_CLASS_NAME: 'cyclist-show-baseline',
4
+ BASELINE_CLASS_NAME: 'cyclist-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: 'cyclist-show-guidelines',
90
+ GUIDELINES_CLASS_NAME: 'cyclist-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, 'cyclist-column');
101
+ var cyclistColumns = container.getElementsByClassName('cyclist-column');
102
+ for (var i = 0; i < cyclistColumns.length; i++) {
103
+ var cyclistColmun = cyclistColumns[i];
104
+ this.fillContainerWithClassName(cyclistColmun, 'cyclist-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 () { Cyclist.setup(); }, false);
@@ -0,0 +1,5 @@
1
+ @import "partials/reset";
2
+ @import "partials/setup";
3
+ @import "partials/typography";
4
+ @import "partials/guidelines";
5
+ @import "partials/layout";
@@ -0,0 +1,33 @@
1
+ .cyclist-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
+ .cyclist-guidelines > div.cyclist-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
+ .cyclist-guidelines > div.cyclist-column:last-child {
21
+ margin-right: 0;
22
+ }
23
+
24
+ .cyclist-column > div.cyclist-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
+ .cyclist-column > div.cyclist-unit:last-child {
32
+ margin-right: 0;
33
+ }
@@ -0,0 +1,9 @@
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
+ }
@@ -0,0 +1,51 @@
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
+ }
@@ -0,0 +1,25 @@
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
+
@@ -0,0 +1,109 @@
1
+ @if $font-size {
2
+ html {
3
+ font-size: $font-size;
4
+ }
5
+ }
6
+
7
+ body {
8
+ line-height: $line-height;
9
+ }
10
+
11
+ @function font-size-from-ratio($ratio) {
12
+ $numerator: nth($ratio, 1);
13
+ $denumerator: nth($ratio, 2);
14
+ @return calc(1em * (#{$numerator} / #{$denumerator}));
15
+ }
16
+
17
+ @mixin header($ratio) {
18
+ $numerator: nth($ratio, 1);
19
+ $denumerator: nth($ratio, 2);
20
+ font-size: font-size-from-ratio($ratio);
21
+ $leading-multiplier: ceil($numerator / $denumerator);
22
+ line-height: calc(#{$leading-multiplier} * #{$leading-height});
23
+ margin-bottom: $leading-height;
24
+ }
25
+
26
+ $double-great-primer-ratio: 36, 12;
27
+ $double-pica-ratio: 24, 12;
28
+ $double-small-pica-ratio: 21, 12;
29
+ $great-primer-ratio: 18, 12;
30
+ $english-ratio: 14, 12;
31
+ $pica-ratio: 12, 12;
32
+ $small-pica-ratio: 11, 12;
33
+ $long-primer-ratio: 10, 12;
34
+ $bourgeois-ratio: 9, 12;
35
+ $brevier-ratio: 8, 12;
36
+ $minion-ratio: 7, 12;
37
+ $nonpareil-ratio: 6, 12;
38
+
39
+ $double-great-primer: font-size-from-ratio($double-great-primer-ratio);
40
+ $double-pica: font-size-from-ratio($double-pica-ratio);
41
+ $double-small-pica: font-size-from-ratio($double-small-pica-ratio);
42
+ $great-primer: font-size-from-ratio($great-primer-ratio);
43
+ $english: font-size-from-ratio($english-ratio);
44
+ $pica: font-size-from-ratio($pica-ratio);
45
+ $small-pica: font-size-from-ratio($small-pica-ratio);
46
+ $long-primer: font-size-from-ratio($long-primer-ratio);
47
+ $bourgeois: font-size-from-ratio($bourgeois-ratio);
48
+ $brevier: font-size-from-ratio($brevier-ratio);
49
+ $minion: font-size-from-ratio($minion-ratio);
50
+ $nonpareil: font-size-from-ratio($nonpareil-ratio);
51
+
52
+ h1 {
53
+ @include header($double-great-primer-ratio);
54
+ }
55
+
56
+ h2 {
57
+ @include header($double-pica-ratio);
58
+ }
59
+
60
+ h3 {
61
+ @include header($double-small-pica-ratio);
62
+ }
63
+
64
+ h4 {
65
+ @include header($great-primer-ratio);
66
+ }
67
+
68
+ h5 {
69
+ @include header($english-ratio);
70
+ }
71
+
72
+ h6 {
73
+ @include header($pica-ratio);
74
+ }
75
+
76
+ p,
77
+ ul,
78
+ ol {
79
+ margin-bottom: $leading-height;
80
+ }
81
+
82
+ ul ol,
83
+ ol ol,
84
+ ul ul,
85
+ ol ul {
86
+ margin-bottom: 0;
87
+ }
88
+
89
+ ul {
90
+ list-style-type: disc;
91
+ margin-left: $indent-width;
92
+ }
93
+
94
+ ol {
95
+ list-style-type: decimal;
96
+ margin-left: $indent-width;
97
+ }
98
+
99
+ sub {
100
+ line-height: 0;
101
+ vertical-align: sub;
102
+ font-size: $long-primer;
103
+ }
104
+
105
+ sup {
106
+ line-height: 0;
107
+ vertical-align: super;
108
+ font-size: $long-primer;
109
+ }
metadata ADDED
@@ -0,0 +1,51 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: cyclist-grid
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.3.0
5
+ platform: ruby
6
+ authors:
7
+ - Roben Kleene
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2021-08-01 00:00:00.000000000 Z
12
+ dependencies: []
13
+ description: An HTML5 typographic-grid system using Sass.
14
+ email: contact@robenkleene.com
15
+ executables: []
16
+ extensions: []
17
+ extra_rdoc_files: []
18
+ files:
19
+ - dist/css/cyclist.css
20
+ - dist/js/cyclist.js
21
+ - dist/scss/cyclist.scss
22
+ - dist/scss/partials/_guidelines.scss
23
+ - dist/scss/partials/_layout.scss
24
+ - dist/scss/partials/_reset.scss
25
+ - dist/scss/partials/_setup.scss
26
+ - dist/scss/partials/_typography.scss
27
+ homepage: https://github.com/robenkleene/cyclist.git
28
+ licenses:
29
+ - MIT
30
+ metadata: {}
31
+ post_install_message:
32
+ rdoc_options: []
33
+ require_paths:
34
+ - lib
35
+ required_ruby_version: !ruby/object:Gem::Requirement
36
+ requirements:
37
+ - - ">="
38
+ - !ruby/object:Gem::Version
39
+ version: '0'
40
+ required_rubygems_version: !ruby/object:Gem::Requirement
41
+ requirements:
42
+ - - ">="
43
+ - !ruby/object:Gem::Version
44
+ version: '0'
45
+ requirements: []
46
+ rubyforge_project:
47
+ rubygems_version: 2.7.6
48
+ signing_key:
49
+ specification_version: 4
50
+ summary: Grid System
51
+ test_files: []