unigrid.css 0.3.0 → 0.3.2

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 (44) hide show
  1. package/README.md +101 -101
  2. package/dist/dropdown.js +36 -36
  3. package/dist/scrollspy.js +57 -57
  4. package/dist/tabs.js +30 -30
  5. package/dist/unigrid.css +4608 -4501
  6. package/dist/unigrid.js +173 -124
  7. package/dist/unigrid.min.css +1 -1
  8. package/dist/unigrid.min.js +1 -1
  9. package/package.json +70 -41
  10. package/src/js/dropdown.js +49 -49
  11. package/src/js/index.js +20 -19
  12. package/src/js/modal.js +81 -0
  13. package/src/js/scrollspy.js +87 -87
  14. package/src/js/tabs.js +58 -58
  15. package/src/scss/_accordion.scss +123 -123
  16. package/src/scss/_broadside.scss +125 -125
  17. package/src/scss/_buttons.scss +241 -241
  18. package/src/scss/_card.scss +168 -168
  19. package/src/scss/_components.scss +140 -140
  20. package/src/scss/_container.scss +53 -53
  21. package/src/scss/_dropdown.scss +178 -178
  22. package/src/scss/_footer.scss +147 -147
  23. package/src/scss/_formats.scss +64 -64
  24. package/src/scss/_forms.scss +192 -192
  25. package/src/scss/_grid.scss +114 -114
  26. package/src/scss/_header.scss +169 -169
  27. package/src/scss/_hero.scss +262 -262
  28. package/src/scss/_mixins.scss +120 -120
  29. package/src/scss/_modal.scss +158 -0
  30. package/src/scss/_modules.scss +238 -238
  31. package/src/scss/_navbar.scss +341 -341
  32. package/src/scss/_pagination.scss +160 -160
  33. package/src/scss/_prose.scss +393 -393
  34. package/src/scss/_reset.scss +82 -82
  35. package/src/scss/_scrollspy.scss +62 -62
  36. package/src/scss/_section.scss +91 -91
  37. package/src/scss/_sidebar.scss +147 -147
  38. package/src/scss/_table.scss +122 -122
  39. package/src/scss/_tabs.scss +178 -178
  40. package/src/scss/_typography.scss +105 -105
  41. package/src/scss/_utilities.scss +79 -79
  42. package/src/scss/_variables.scss +183 -183
  43. package/src/scss/unigrid.scss +50 -49
  44. package/dist/index.js +0 -5
package/src/scss/_broadside.scss CHANGED
@@ -1,125 +1,125 @@
1
- // ==========================================================================
2
- // Unigrid CSS Framework — Broadside & Panel Layout (BEM)
3
- //
4
- // The broadside is the fully opened, unfolded sheet.
5
- // A-series: 1 panel wide × N panels long → single row of panels
6
- // B-series: 2 panels wide × N panels long → two rows of panels
7
- //
8
- // Block: .ug-broadside
9
- // Elements: (children are .ug-panel blocks)
10
- // Modifiers: --full-height, --din, --stack
11
- //
12
- // Block: .ug-panel
13
- // Elements: __header, __body, __footer
14
- // Modifiers: --flush, --dark, --gray, --accent, --span-{n}
15
- // ==========================================================================
16
-
17
- // ---- Broadside Block ----
18
-
19
-
20
- @use "variables" as *;
21
- @use "mixins" as *;
22
-
23
- .ug-broadside {
24
- display: grid;
25
- grid-template-columns: repeat(var(--ug-format-cols, $ug-columns), 1fr);
26
- gap: var(--ug-leading);
27
- width: 100%;
28
- min-height: 0;
29
-
30
- &--full-height {
31
- min-height: 100vh;
32
- }
33
-
34
- &--din {
35
- @include ug-ratio-din(true);
36
- }
37
-
38
- &--stack {
39
- @include ug-breakpoint-down("md") {
40
- grid-template-columns: 1fr;
41
-
42
- > .ug-panel {
43
- grid-column: span 1;
44
- display: block;
45
- }
46
-
47
- > .ug-fold {
48
- display: none;
49
- }
50
- }
51
- }
52
- }
53
-
54
- // ---- Panel Block ----
55
-
56
- .ug-panel {
57
- grid-column: span 1;
58
- display: grid;
59
- grid-template-columns: subgrid;
60
- grid-template-rows: auto 1fr auto;
61
- padding: var(--ug-leading);
62
- min-height: 0;
63
-
64
- // -- Elements --
65
- &__header {
66
- grid-row: 1;
67
- grid-column: 1 / -1;
68
- }
69
-
70
- &__body {
71
- grid-row: 2;
72
- grid-column: 1 / -1;
73
- }
74
-
75
- &__footer {
76
- grid-row: 3;
77
- grid-column: 1 / -1;
78
- }
79
-
80
- // -- Modifiers --
81
- &--flush {
82
- padding: 0;
83
- }
84
-
85
- &--dark {
86
- background-color: $ug-black;
87
- color: $ug-white;
88
- }
89
-
90
- &--gray {
91
- background-color: $ug-warm-gray;
92
- }
93
-
94
- &--accent {
95
- background-color: $ug-red;
96
- color: $ug-white;
97
- }
98
-
99
- // -- Span modifiers for multi-column panels --
100
- @for $i from 2 through 6 {
101
- &--span-#{$i} {
102
- grid-column: span $i;
103
- }
104
- }
105
- }
106
-
107
- // ---- Fold Lines ----
108
-
109
- .ug-fold {
110
- grid-row: 1 / -1;
111
- width: 1px;
112
- background-color: $ug-light-gray;
113
- justify-self: end;
114
- pointer-events: none;
115
-
116
- &--dashed {
117
- background: repeating-linear-gradient(
118
- to bottom,
119
- $ug-light-gray 0,
120
- $ug-light-gray 6px,
121
- transparent 6px,
122
- transparent 12px
123
- );
124
- }
125
- }
1
+ // ==========================================================================
2
+ // Unigrid CSS Framework — Broadside & Panel Layout (BEM)
3
+ //
4
+ // The broadside is the fully opened, unfolded sheet.
5
+ // A-series: 1 panel wide × N panels long → single row of panels
6
+ // B-series: 2 panels wide × N panels long → two rows of panels
7
+ //
8
+ // Block: .ug-broadside
9
+ // Elements: (children are .ug-panel blocks)
10
+ // Modifiers: --full-height, --din, --stack
11
+ //
12
+ // Block: .ug-panel
13
+ // Elements: __header, __body, __footer
14
+ // Modifiers: --flush, --dark, --gray, --accent, --span-{n}
15
+ // ==========================================================================
16
+
17
+ // ---- Broadside Block ----
18
+
19
+
20
+ @use "variables" as *;
21
+ @use "mixins" as *;
22
+
23
+ .ug-broadside {
24
+ display: grid;
25
+ grid-template-columns: repeat(var(--ug-format-cols, $ug-columns), 1fr);
26
+ gap: var(--ug-leading);
27
+ width: 100%;
28
+ min-height: 0;
29
+
30
+ &--full-height {
31
+ min-height: 100vh;
32
+ }
33
+
34
+ &--din {
35
+ @include ug-ratio-din(true);
36
+ }
37
+
38
+ &--stack {
39
+ @include ug-breakpoint-down("md") {
40
+ grid-template-columns: 1fr;
41
+
42
+ > .ug-panel {
43
+ grid-column: span 1;
44
+ display: block;
45
+ }
46
+
47
+ > .ug-fold {
48
+ display: none;
49
+ }
50
+ }
51
+ }
52
+ }
53
+
54
+ // ---- Panel Block ----
55
+
56
+ .ug-panel {
57
+ grid-column: span 1;
58
+ display: grid;
59
+ grid-template-columns: subgrid;
60
+ grid-template-rows: auto 1fr auto;
61
+ padding: var(--ug-leading);
62
+ min-height: 0;
63
+
64
+ // -- Elements --
65
+ &__header {
66
+ grid-row: 1;
67
+ grid-column: 1 / -1;
68
+ }
69
+
70
+ &__body {
71
+ grid-row: 2;
72
+ grid-column: 1 / -1;
73
+ }
74
+
75
+ &__footer {
76
+ grid-row: 3;
77
+ grid-column: 1 / -1;
78
+ }
79
+
80
+ // -- Modifiers --
81
+ &--flush {
82
+ padding: 0;
83
+ }
84
+
85
+ &--dark {
86
+ background-color: $ug-black;
87
+ color: $ug-white;
88
+ }
89
+
90
+ &--gray {
91
+ background-color: $ug-warm-gray;
92
+ }
93
+
94
+ &--accent {
95
+ background-color: $ug-red;
96
+ color: $ug-white;
97
+ }
98
+
99
+ // -- Span modifiers for multi-column panels --
100
+ @for $i from 2 through 6 {
101
+ &--span-#{$i} {
102
+ grid-column: span $i;
103
+ }
104
+ }
105
+ }
106
+
107
+ // ---- Fold Lines ----
108
+
109
+ .ug-fold {
110
+ grid-row: 1 / -1;
111
+ width: 1px;
112
+ background-color: $ug-light-gray;
113
+ justify-self: end;
114
+ pointer-events: none;
115
+
116
+ &--dashed {
117
+ background: repeating-linear-gradient(
118
+ to bottom,
119
+ $ug-light-gray 0,
120
+ $ug-light-gray 6px,
121
+ transparent 6px,
122
+ transparent 12px
123
+ );
124
+ }
125
+ }