unigrid.css 0.3.9 → 0.3.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/unigrid.css +100 -0
  2. package/dist/unigrid.js +22 -0
  3. package/dist/unigrid.min.css +1 -1
  4. package/dist/unigrid.min.js +1 -1
  5. package/package.json +3 -2
  6. package/src/js/icons.js +71 -0
  7. package/src/js/index.js +1 -0
  8. package/src/scss/_icons.scss +98 -0
  9. package/src/scss/bootstrap/_components.scss +905 -0
  10. package/src/scss/bootstrap/_containers.scss +4 -0
  11. package/src/scss/bootstrap/_fonts.scss +5 -0
  12. package/src/scss/bootstrap/_helpers.scss +36 -0
  13. package/src/scss/bootstrap/unigrid-bootstrap.scss +285 -0
  14. package/src/scss/unigrid.scss +1 -0
package/src/js/icons.js ADDED
@@ -0,0 +1,71 @@
1
+ /**
2
+ * Unigrid.css — Icon Registry
3
+ *
4
+ * Extensible array of SVG icon definitions. The CSS classes
5
+ * (.ug-icon-github etc.) are generated from the $ug-icons SCSS map
6
+ * via mask-image — no JS required for basic usage.
7
+ *
8
+ * This module is useful when you want to:
9
+ * - dynamically add icons at runtime
10
+ * - inject an SVG sprite for <use href="#ug-icon-NAME"> usage
11
+ * - iterate over the available icons programmatically
12
+ *
13
+ * Usage:
14
+ * import { ugIcons, initIcons } from 'unigrid.css/src/js/icons.js';
15
+ * ugIcons.push({ name: 'mastodon', viewBox: '0 0 24 24', svg: '<path .../>' });
16
+ * initIcons(); // injects SVG sprite into DOM
17
+ */
18
+
19
+ var ugIcons = [
20
+ {
21
+ name: 'github',
22
+ viewBox: '0 0 24 24',
23
+ svg: '<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>',
24
+ },
25
+ {
26
+ name: 'npm',
27
+ viewBox: '0 0 24 24',
28
+ svg: '<path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/>',
29
+ },
30
+ {
31
+ name: 'bootstrap',
32
+ viewBox: '0 0 24 24',
33
+ svg: '<path d="M11.77 11.24H9.956V8.202h2.152c1.17 0 1.834.522 1.834 1.466 0 1.008-.773 1.572-2.174 1.572zm.324 1.206H9.957v3.348h2.231c1.459 0 2.232-.585 2.232-1.685s-.795-1.663-2.326-1.663zM24 11.39v1.218c-1.128.108-1.817.944-2.226 2.268-.407 1.319-.463 2.937-.42 4.186.045 1.3-.968 2.5-2.337 2.5H4.985c-1.37 0-2.383-1.2-2.337-2.5.043-1.249-.013-2.867-.42-4.186-.41-1.324-1.1-2.16-2.228-2.268V11.39c1.128-.108 1.819-.944 2.227-2.268.408-1.319.464-2.937.42-4.186C2.602 3.636 3.615 2.438 4.985 2.438h14.032c1.37 0 2.382 1.198 2.337 2.498-.043 1.249.013 2.867.42 4.186.408 1.324 1.098 2.16 2.226 2.268zm-7.927 2.817c0-1.354-.953-2.333-2.368-2.488v-.057c1.04-.169 1.856-1.135 1.856-2.213 0-1.537-1.213-2.538-3.062-2.538h-4.16v10.172h4.181c2.218 0 3.553-1.086 3.553-2.876z"/>',
34
+ },
35
+ ];
36
+
37
+ if (typeof window !== 'undefined') {
38
+ window.ugIcons = ugIcons;
39
+ }
40
+
41
+ /**
42
+ * Inject the icons as an SVG sprite into the DOM.
43
+ * Optional — CSS mask-image classes work without this.
44
+ * Use this if you prefer <svg><use href="#ug-icon-NAME"></svg>.
45
+ */
46
+ function initIcons() {
47
+ if (typeof document === 'undefined') return;
48
+
49
+ var existing = document.getElementById('ug-icon-sprite');
50
+ if (existing) existing.remove();
51
+
52
+ var ns = 'http://www.w3.org/2000/svg';
53
+ var sprite = document.createElementNS(ns, 'svg');
54
+ sprite.setAttribute('id', 'ug-icon-sprite');
55
+ sprite.setAttribute('xmlns', ns);
56
+ sprite.setAttribute('style', 'position:absolute;width:0;height:0;overflow:hidden');
57
+ sprite.setAttribute('aria-hidden', 'true');
58
+
59
+ for (var i = 0; i < ugIcons.length; i++) {
60
+ var icon = ugIcons[i];
61
+ var symbol = document.createElementNS(ns, 'symbol');
62
+ symbol.setAttribute('id', 'ug-icon-' + icon.name);
63
+ symbol.setAttribute('viewBox', icon.viewBox || '0 0 24 24');
64
+ symbol.innerHTML = icon.svg;
65
+ sprite.appendChild(symbol);
66
+ }
67
+
68
+ document.body.insertBefore(sprite, document.body.firstChild);
69
+ }
70
+
71
+ export { ugIcons, initIcons };
package/src/js/index.js CHANGED
@@ -18,3 +18,4 @@ import './dropdown.js';
18
18
  import './tabs.js';
19
19
  import './scrollspy.js';
20
20
  import './modal.js';
21
+ import './icons.js';
package/src/scss/_icons.scss ADDED
@@ -0,0 +1,98 @@
1
+ // ==========================================================================
2
+ // Unigrid CSS Framework — Icons (BEM)
3
+ //
4
+ // CSS-only icons via mask-image. Each icon is a single class that can
5
+ // be combined with size and color modifiers:
6
+ //
7
+ // <i class="ug-icon-github"></i>
8
+ // <i class="ug-icon-npm ug-icon--lg ug-icon--red"></i>
9
+ //
10
+ // The $ug-icons map is !default — override or extend it before
11
+ // importing to add your own icons:
12
+ //
13
+ // $ug-icons: map.merge($ug-icons, ("mastodon": url("data:...")));
14
+ // @use "unigrid" as *;
15
+ //
16
+ // Block: [.ug-icon-*] (generated per icon)
17
+ // Base: .ug-icon (shared layout/size/color base)
18
+ // Modifiers (size): --xs, --sm, --md, --lg, --xl, --2xl
19
+ // Modifiers (color): --black, --white, --red, --brown, --green,
20
+ // --blue, --dark-gray, --medium-gray, --light-gray
21
+ // ==========================================================================
22
+
23
+ @use "sass:map";
24
+ @use "variables" as *;
25
+ @use "mixins" as *;
26
+
27
+ // ---------------------------------------------------------------------------
28
+ // Icon registry — name → data-URI SVG
29
+ // Override with !default before @use to extend.
30
+ // ---------------------------------------------------------------------------
31
+
32
+ $ug-icons: (
33
+ "github": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E"),
34
+ "npm": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z'/%3E%3C/svg%3E"),
35
+ "bootstrap": url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.77 11.24H9.956V8.202h2.152c1.17 0 1.834.522 1.834 1.466 0 1.008-.773 1.572-2.174 1.572zm.324 1.206H9.957v3.348h2.231c1.459 0 2.232-.585 2.232-1.685s-.795-1.663-2.326-1.663zM24 11.39v1.218c-1.128.108-1.817.944-2.226 2.268-.407 1.319-.463 2.937-.42 4.186.045 1.3-.968 2.5-2.337 2.5H4.985c-1.37 0-2.383-1.2-2.337-2.5.043-1.249-.013-2.867-.42-4.186-.41-1.324-1.1-2.16-2.228-2.268V11.39c1.128-.108 1.819-.944 2.227-2.268.408-1.319.464-2.937.42-4.186C2.602 3.636 3.615 2.438 4.985 2.438h14.032c1.37 0 2.382 1.198 2.337 2.498-.043 1.249.013 2.867.42 4.186.408 1.324 1.098 2.16 2.226 2.268zm-7.927 2.817c0-1.354-.953-2.333-2.368-2.488v-.057c1.04-.169 1.856-1.135 1.856-2.213 0-1.537-1.213-2.538-3.062-2.538h-4.16v10.172h4.181c2.218 0 3.553-1.086 3.553-2.876z'/%3E%3C/svg%3E"),
36
+ ) !default;
37
+
38
+ // ---------------------------------------------------------------------------
39
+ // Base: shared layout for all icons
40
+ // ---------------------------------------------------------------------------
41
+
42
+ %ug-icon-base {
43
+ display: inline-block;
44
+ width: var(--ug-leading);
45
+ height: var(--ug-leading);
46
+ background-color: currentColor;
47
+ -webkit-mask-size: contain;
48
+ mask-size: contain;
49
+ -webkit-mask-repeat: no-repeat;
50
+ mask-repeat: no-repeat;
51
+ -webkit-mask-position: center;
52
+ mask-position: center;
53
+ vertical-align: middle;
54
+ flex-shrink: 0;
55
+ }
56
+
57
+ // Explicit .ug-icon class for standalone use (set mask-image yourself)
58
+ .ug-icon {
59
+ @extend %ug-icon-base;
60
+ }
61
+
62
+ // ---------------------------------------------------------------------------
63
+ // Generated: one class per icon — .ug-icon-github, .ug-icon-npm, …
64
+ // ---------------------------------------------------------------------------
65
+
66
+ @each $name, $data-uri in $ug-icons {
67
+ .ug-icon-#{$name} {
68
+ @extend %ug-icon-base;
69
+ -webkit-mask-image: $data-uri;
70
+ mask-image: $data-uri;
71
+ }
72
+ }
73
+
74
+ // ---------------------------------------------------------------------------
75
+ // Size modifiers (rhythm-aligned, work on any .ug-icon-* or .ug-icon)
76
+ // ---------------------------------------------------------------------------
77
+
78
+ .ug-icon--xs { width: calc(var(--ug-leading) * 0.5); height: calc(var(--ug-leading) * 0.5); }
79
+ .ug-icon--sm { width: calc(var(--ug-leading) * 0.75); height: calc(var(--ug-leading) * 0.75); }
80
+ .ug-icon--md { width: var(--ug-leading); height: var(--ug-leading); }
81
+ .ug-icon--lg { width: calc(var(--ug-leading) * 1.5); height: calc(var(--ug-leading) * 1.5); }
82
+ .ug-icon--xl { width: calc(var(--ug-leading) * 2); height: calc(var(--ug-leading) * 2); }
83
+ .ug-icon--2xl { width: calc(var(--ug-leading) * 3); height: calc(var(--ug-leading) * 3); }
84
+
85
+ // ---------------------------------------------------------------------------
86
+ // Color modifiers (override currentColor via background-color)
87
+ // ---------------------------------------------------------------------------
88
+
89
+ .ug-icon--current { background-color: currentColor; }
90
+ .ug-icon--black { background-color: $ug-black; }
91
+ .ug-icon--white { background-color: $ug-white; }
92
+ .ug-icon--dark-gray { background-color: $ug-dark-gray; }
93
+ .ug-icon--medium-gray { background-color: $ug-medium-gray; }
94
+ .ug-icon--light-gray { background-color: $ug-light-gray; }
95
+ .ug-icon--red { background-color: $ug-red; }
96
+ .ug-icon--brown { background-color: $ug-brown; }
97
+ .ug-icon--green { background-color: $ug-green; }
98
+ .ug-icon--blue { background-color: $ug-blue; }