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/_header.scss CHANGED
@@ -1,169 +1,169 @@
1
- // ==========================================================================
2
- // Unigrid CSS Framework — Header Bar (BEM)
3
- //
4
- // The signature black header band spanning the full broadside width.
5
- // Can embed a .ug-navbar inside for an integrated header+nav layout.
6
- //
7
- // Block: .ug-header
8
- // Elements: __logo, __title, __name, __subtitle, __nav
9
- // Modifiers: --compact, --brown, --full
10
- // ==========================================================================
11
-
12
-
13
- @use "variables" as *;
14
- @use "mixins" as *;
15
-
16
- .ug-header {
17
- display: flex;
18
- align-items: flex-start;
19
- gap: var(--ug-leading);
20
- background-color: $ug-black;
21
- color: $ug-white;
22
- padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
23
- width: 100%;
24
- grid-column: 1 / -1;
25
- flex-wrap: wrap;
26
-
27
- // -- Elements --
28
- &__logo {
29
- height: calc(var(--ug-leading) * 3);
30
- flex-shrink: 0;
31
-
32
- img,
33
- svg {
34
- height: 100%;
35
- width: auto;
36
- }
37
- }
38
-
39
- &__title {
40
- display: flex;
41
- flex-direction: column;
42
- gap: 0;
43
- flex-shrink: 0;
44
-
45
- h1, a {
46
- @include ug-font-size("3xl");
47
- @include ug-font-weight("bold");
48
- @include ug-rhythm-line-height(2);
49
- letter-spacing: -0.02em;
50
- text-transform: none;
51
- margin: 0;
52
- }
53
-
54
- a {
55
- text-decoration: none;
56
- }
57
- }
58
-
59
- &__name {
60
- @include ug-font-size("3xl");
61
- @include ug-font-weight("bold");
62
- @include ug-rhythm-line-height(2);
63
- letter-spacing: -0.02em;
64
- margin: 0;
65
- flex-shrink: 0;
66
- }
67
-
68
- &__subtitle {
69
- @include ug-font-size("lg");
70
- @include ug-font-weight("light");
71
- @include ug-rhythm-line-height(1);
72
- opacity: 0.85;
73
- margin: 0;
74
- }
75
-
76
- // -- Embedded Navbar --
77
- .ug-navbar {
78
- flex: 1;
79
- background: transparent;
80
- border: none;
81
- min-height: 0;
82
-
83
- &__inner {
84
- padding: 0;
85
- max-width: none;
86
- min-height: 0;
87
- justify-content: flex-end;
88
- align-items: flex-start;
89
- }
90
-
91
- &__brand {
92
- display: none;
93
- }
94
-
95
- &__link {
96
- color: rgba(255, 255, 255, 0.7);
97
-
98
- &:hover {
99
- color: $ug-white;
100
- background-color: rgba(255, 255, 255, 0.1);
101
- }
102
-
103
- &--active {
104
- color: $ug-white;
105
- }
106
- }
107
-
108
- &__toggle {
109
- color: $ug-white;
110
- }
111
-
112
- &__divider {
113
- background-color: rgba(255, 255, 255, 0.15);
114
- }
115
-
116
- &__menu {
117
- @include ug-breakpoint-down("md") {
118
- background-color: $ug-black;
119
- }
120
- }
121
- }
122
-
123
- // -- Modifiers --
124
- &--compact {
125
- padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 1.5);
126
-
127
- .ug-header__logo {
128
- width: auto;
129
- height: calc(var(--ug-leading) * 2);
130
- }
131
-
132
- .ug-header__title h1,
133
- .ug-header__title a,
134
- .ug-header__name {
135
- @include ug-font-size("2xl");
136
- @include ug-rhythm-line-height(1);
137
- }
138
-
139
- .ug-header__subtitle {
140
- @include ug-font-size("sm");
141
- @include ug-rhythm-line-height(1);
142
- }
143
- }
144
-
145
- &--brown {
146
- background-color: $ug-brown;
147
- }
148
-
149
- &--full {
150
- grid-column: 1 / -1;
151
- }
152
-
153
- // -- Responsive --
154
- @include ug-breakpoint-down("md") {
155
- &__title h1,
156
- &__title a,
157
- &__name {
158
- @include ug-font-size("2xl");
159
- }
160
-
161
- &__subtitle {
162
- @include ug-font-size("base");
163
- }
164
-
165
- &__logo {
166
- width: 2.5rem;
167
- }
168
- }
169
- }
1
+ // ==========================================================================
2
+ // Unigrid CSS Framework — Header Bar (BEM)
3
+ //
4
+ // The signature black header band spanning the full broadside width.
5
+ // Can embed a .ug-navbar inside for an integrated header+nav layout.
6
+ //
7
+ // Block: .ug-header
8
+ // Elements: __logo, __title, __name, __subtitle, __nav
9
+ // Modifiers: --compact, --brown, --full
10
+ // ==========================================================================
11
+
12
+
13
+ @use "variables" as *;
14
+ @use "mixins" as *;
15
+
16
+ .ug-header {
17
+ display: flex;
18
+ align-items: flex-start;
19
+ gap: var(--ug-leading);
20
+ background-color: $ug-black;
21
+ color: $ug-white;
22
+ padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
23
+ width: 100%;
24
+ grid-column: 1 / -1;
25
+ flex-wrap: wrap;
26
+
27
+ // -- Elements --
28
+ &__logo {
29
+ height: calc(var(--ug-leading) * 3);
30
+ flex-shrink: 0;
31
+
32
+ img,
33
+ svg {
34
+ height: 100%;
35
+ width: auto;
36
+ }
37
+ }
38
+
39
+ &__title {
40
+ display: flex;
41
+ flex-direction: column;
42
+ gap: 0;
43
+ flex-shrink: 0;
44
+
45
+ h1, a {
46
+ @include ug-font-size("3xl");
47
+ @include ug-font-weight("bold");
48
+ @include ug-rhythm-line-height(2);
49
+ letter-spacing: -0.02em;
50
+ text-transform: none;
51
+ margin: 0;
52
+ }
53
+
54
+ a {
55
+ text-decoration: none;
56
+ }
57
+ }
58
+
59
+ &__name {
60
+ @include ug-font-size("3xl");
61
+ @include ug-font-weight("bold");
62
+ @include ug-rhythm-line-height(2);
63
+ letter-spacing: -0.02em;
64
+ margin: 0;
65
+ flex-shrink: 0;
66
+ }
67
+
68
+ &__subtitle {
69
+ @include ug-font-size("lg");
70
+ @include ug-font-weight("light");
71
+ @include ug-rhythm-line-height(1);
72
+ opacity: 0.85;
73
+ margin: 0;
74
+ }
75
+
76
+ // -- Embedded Navbar --
77
+ .ug-navbar {
78
+ flex: 1;
79
+ background: transparent;
80
+ border: none;
81
+ min-height: 0;
82
+
83
+ &__inner {
84
+ padding: 0;
85
+ max-width: none;
86
+ min-height: 0;
87
+ justify-content: flex-end;
88
+ align-items: flex-start;
89
+ }
90
+
91
+ &__brand {
92
+ display: none;
93
+ }
94
+
95
+ &__link {
96
+ color: rgba(255, 255, 255, 0.7);
97
+
98
+ &:hover {
99
+ color: $ug-white;
100
+ background-color: rgba(255, 255, 255, 0.1);
101
+ }
102
+
103
+ &--active {
104
+ color: $ug-white;
105
+ }
106
+ }
107
+
108
+ &__toggle {
109
+ color: $ug-white;
110
+ }
111
+
112
+ &__divider {
113
+ background-color: rgba(255, 255, 255, 0.15);
114
+ }
115
+
116
+ &__menu {
117
+ @include ug-breakpoint-down("md") {
118
+ background-color: $ug-black;
119
+ }
120
+ }
121
+ }
122
+
123
+ // -- Modifiers --
124
+ &--compact {
125
+ padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 1.5);
126
+
127
+ .ug-header__logo {
128
+ width: auto;
129
+ height: calc(var(--ug-leading) * 2);
130
+ }
131
+
132
+ .ug-header__title h1,
133
+ .ug-header__title a,
134
+ .ug-header__name {
135
+ @include ug-font-size("2xl");
136
+ @include ug-rhythm-line-height(1);
137
+ }
138
+
139
+ .ug-header__subtitle {
140
+ @include ug-font-size("sm");
141
+ @include ug-rhythm-line-height(1);
142
+ }
143
+ }
144
+
145
+ &--brown {
146
+ background-color: $ug-brown;
147
+ }
148
+
149
+ &--full {
150
+ grid-column: 1 / -1;
151
+ }
152
+
153
+ // -- Responsive --
154
+ @include ug-breakpoint-down("md") {
155
+ &__title h1,
156
+ &__title a,
157
+ &__name {
158
+ @include ug-font-size("2xl");
159
+ }
160
+
161
+ &__subtitle {
162
+ @include ug-font-size("base");
163
+ }
164
+
165
+ &__logo {
166
+ width: 2.5rem;
167
+ }
168
+ }
169
+ }