@stackoverflow/stacks 0.76.0 → 1.0.0-beta.0

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 (86) hide show
  1. package/LICENSE.MD +9 -9
  2. package/README.md +47 -47
  3. package/dist/controllers/index.d.ts +7 -7
  4. package/dist/controllers/s-expandable-control.d.ts +17 -17
  5. package/dist/controllers/s-modal.d.ts +97 -97
  6. package/dist/controllers/s-navigation-tablist.d.ts +36 -36
  7. package/dist/controllers/s-popover.d.ts +155 -155
  8. package/dist/controllers/s-table.d.ts +8 -8
  9. package/dist/controllers/s-tooltip.d.ts +82 -82
  10. package/dist/controllers/s-uploader.d.ts +48 -48
  11. package/dist/css/stacks.css +4321 -2635
  12. package/dist/css/stacks.min.css +1 -1
  13. package/dist/index.d.ts +3 -3
  14. package/dist/js/stacks.js +1978 -1978
  15. package/dist/js/stacks.min.js +1 -1
  16. package/dist/stacks.d.ts +21 -21
  17. package/lib/css/atomic/{_stacks-borders.less → borders.less} +378 -378
  18. package/lib/css/atomic/{_stacks-colors.less → colors.less} +209 -209
  19. package/lib/css/atomic/{_stacks-flex.less → flex.less} +375 -374
  20. package/lib/css/atomic/{_stacks-grid.less → grid.less} +174 -174
  21. package/lib/css/atomic/{_stacks-misc.less → misc.less} +343 -343
  22. package/lib/css/atomic/spacing.less +314 -0
  23. package/lib/css/atomic/{_stacks-typography.less → typography.less} +273 -273
  24. package/lib/css/atomic/width-height.less +194 -0
  25. package/lib/css/base/{_stacks-body.less → body.less} +44 -44
  26. package/lib/css/base/{_stacks-configuration-static.less → configuration-static.less} +61 -59
  27. package/lib/css/base/{_stacks-icons.less → icons.less} +20 -20
  28. package/lib/css/base/{_stacks-internals.less → internals.less} +220 -220
  29. package/lib/css/base/{_stacks-reset-meyer.less → reset-meyer.less} +64 -64
  30. package/lib/css/base/{_stacks-reset-normalize.less → reset-normalize.less} +449 -449
  31. package/lib/css/base/{_stacks-reset.less → reset.less} +20 -20
  32. package/lib/css/components/{_stacks-activity-indicator.less → activity-indicator.less} +45 -45
  33. package/lib/css/components/{_stacks-avatars.less → avatars.less} +189 -189
  34. package/lib/css/components/{_stacks-badges.less → badges.less} +209 -209
  35. package/lib/css/components/{_stacks-banners.less → banners.less} +80 -80
  36. package/lib/css/components/{_stacks-blank-states.less → blank-states.less} +26 -26
  37. package/lib/css/components/{_stacks-breadcrumbs.less → breadcrumbs.less} +44 -44
  38. package/lib/css/components/{_stacks-button-groups.less → button-groups.less} +104 -104
  39. package/lib/css/components/{_stacks-buttons.less → buttons.less} +665 -658
  40. package/lib/css/components/{_stacks-cards.less → cards.less} +44 -44
  41. package/lib/css/components/{_stacks-code-blocks.less → code-blocks.less} +130 -130
  42. package/lib/css/components/{_stacks-collapsible.less → collapsible.less} +104 -104
  43. package/lib/css/components/{_stacks-inputs.less → inputs.less} +728 -728
  44. package/lib/css/components/{_stacks-link-previews.less → link-previews.less} +136 -136
  45. package/lib/css/components/{_stacks-links.less → links.less} +218 -218
  46. package/lib/css/components/{_stacks-menu.less → menu.less} +47 -47
  47. package/lib/css/components/{_stacks-modals.less → modals.less} +133 -133
  48. package/lib/css/components/{_stacks-navigation.less → navigation.less} +146 -146
  49. package/lib/css/components/{_stacks-notices.less → notices.less} +233 -233
  50. package/lib/css/components/{_stacks-page-titles.less → page-titles.less} +60 -60
  51. package/lib/css/components/{_stacks-pagination.less → pagination.less} +55 -55
  52. package/lib/css/components/{_stacks-popovers.less → popovers.less} +197 -197
  53. package/lib/css/components/{_stacks-post-summary.less → post-summary.less} +425 -425
  54. package/lib/css/components/{_stacks-progress-bars.less → progress-bars.less} +330 -331
  55. package/lib/css/components/{_stacks-prose.less → prose.less} +503 -503
  56. package/lib/css/components/{_stacks-spinner.less → spinner.less} +107 -107
  57. package/lib/css/components/{_stacks-tables.less → tables.less} +341 -341
  58. package/lib/css/components/{_stacks-tags.less → tags.less} +236 -236
  59. package/lib/css/components/{_stacks-toggle-switches.less → toggle-switches.less} +144 -144
  60. package/lib/css/components/{_stacks-topbar.less → topbar.less} +427 -425
  61. package/lib/css/components/{_stacks-uploader.less → uploader.less} +210 -210
  62. package/lib/css/components/{_stacks-user-cards.less → user-cards.less} +169 -169
  63. package/lib/css/components/{_stacks-widget-dynamic.less → widget-dynamic.less} +33 -33
  64. package/lib/css/components/{_stacks-widget-static.less → widget-static.less} +273 -272
  65. package/lib/css/exports/{_stacks-constants-colors.less → constants-colors.less} +1092 -1112
  66. package/lib/css/exports/constants-helpers.less +108 -0
  67. package/lib/css/exports/{_stacks-constants-type.less → constants-type.less} +153 -152
  68. package/lib/css/exports/{_stacks-exports.less → exports.less} +15 -15
  69. package/lib/css/exports/{_stacks-mixins.less → mixins.less} +237 -220
  70. package/lib/css/stacks-dynamic.less +35 -35
  71. package/lib/css/stacks-static.less +86 -86
  72. package/lib/ts/controllers/index.ts +7 -7
  73. package/lib/ts/controllers/s-expandable-control.ts +188 -188
  74. package/lib/ts/controllers/s-modal.ts +321 -321
  75. package/lib/ts/controllers/s-navigation-tablist.ts +117 -117
  76. package/lib/ts/controllers/s-popover.ts +547 -547
  77. package/lib/ts/controllers/s-table.ts +220 -220
  78. package/lib/ts/controllers/s-tooltip.ts +246 -246
  79. package/lib/ts/controllers/s-uploader.ts +172 -172
  80. package/lib/ts/index.ts +20 -20
  81. package/lib/ts/stacks.ts +88 -88
  82. package/lib/tsconfig.json +13 -13
  83. package/package.json +87 -87
  84. package/lib/css/atomic/_stacks-spacing.less +0 -168
  85. package/lib/css/atomic/_stacks-width-height.less +0 -195
  86. package/lib/css/exports/_stacks-constants-helpers.less +0 -139
package/lib/css/atomic/{_stacks-grid.less → grid.less} RENAMED
@@ -1,174 +1,174 @@
1
- //
2
- // STACK OVERFLOW
3
- // GRID
4
- //
5
- // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
6
- // Stack Overflow. For documentation of all these classes and how to contribute,
7
- // visit https://stackoverflow.design/
8
- //
9
- // TABLE OF CONTENTS
10
- // • GAP
11
- // • GRID FLOW
12
- // • GRID COLUMN TEMPLATES
13
- // • COLUMN SPANS
14
- // • ROW SPANS
15
- //
16
-
17
- // ============================================================================
18
- // $ GAP
19
- // Insert spaces or gutters in between grid items
20
- // When this is available in flex layouts, this can be separated
21
- // into its own section and documentation
22
- // ----------------------------------------------------------------------------
23
- #stacks-internals #responsify('.g0', { gap: 0 });
24
- #stacks-internals #responsify('.g1', { gap: @su1 });
25
- #stacks-internals #responsify('.g2', { gap: @su2 });
26
- #stacks-internals #responsify('.g4', { gap: @su4; });
27
- #stacks-internals #responsify('.g6', { gap: @su6; });
28
- #stacks-internals #responsify('.g8', { gap: @su8; });
29
- #stacks-internals #responsify('.g12', { gap: @su12; });
30
- #stacks-internals #responsify('.g16', { gap: @su16; });
31
- #stacks-internals #responsify('.g24', { gap: @su24; });
32
- #stacks-internals #responsify('.g32', { gap: @su32; });
33
- #stacks-internals #responsify('.g48', { gap: @su48; });
34
- #stacks-internals #responsify('.g64', { gap: @su64; });
35
-
36
- // ============================================================================
37
- // $ GRID FLOW
38
- // ----------------------------------------------------------------------------
39
- #stacks-internals #responsify('.g-af-dense', { grid-auto-flow: dense; });
40
- #stacks-internals #responsify('.g-af-row', { grid-auto-flow: row; });
41
- #stacks-internals #responsify('.g-af-column', { grid-auto-flow: column; });
42
-
43
- // ============================================================================
44
- // $ GRID COLUMN TEMPLATES
45
- // ----------------------------------------------------------------------------
46
- #stacks-internals #responsify('.grid__1', { grid-template-columns: repeat(1, minmax(0, 1fr)); });
47
- #stacks-internals #responsify('.grid__2', { grid-template-columns: repeat(2, minmax(0, 1fr)); });
48
- #stacks-internals #responsify('.grid__3', { grid-template-columns: repeat(3, minmax(0, 1fr)); });
49
- #stacks-internals #responsify('.grid__4', { grid-template-columns: repeat(4, minmax(0, 1fr)); });
50
- #stacks-internals #responsify('.grid__5', { grid-template-columns: repeat(5, minmax(0, 1fr)); });
51
- #stacks-internals #responsify('.grid__6', { grid-template-columns: repeat(6, minmax(0, 1fr)); });
52
- #stacks-internals #responsify('.grid__7', { grid-template-columns: repeat(7, minmax(0, 1fr)); });
53
- #stacks-internals #responsify('.grid__8', { grid-template-columns: repeat(8, minmax(0, 1fr)); });
54
- #stacks-internals #responsify('.grid__9', { grid-template-columns: repeat(9, minmax(0, 1fr)); });
55
- #stacks-internals #responsify('.grid__10', { grid-template-columns: repeat(10, minmax(0, 1fr)); });
56
- #stacks-internals #responsify('.grid__11', { grid-template-columns: repeat(11, minmax(0, 1fr)); });
57
- #stacks-internals #responsify('.grid__12', { grid-template-columns: repeat(12, minmax(0, 1fr)); });
58
- #stacks-internals #responsify('.grid__auto', { grid-template-columns: auto 1fr; });
59
-
60
- // ============================================================================
61
- // $ COLUMN SPANS
62
- // ----------------------------------------------------------------------------
63
- #stacks-internals #responsify('.grid--col-all', { grid-column: ~"1 / -1"; });
64
- #stacks-internals #responsify('.grid--row-all', { grid-row: ~"1 / -1"; });
65
-
66
- #stacks-internals #responsify('.grid--col1', { grid-column: span 1; });
67
- #stacks-internals #responsify('.grid--col2', { grid-column: span 2; });
68
- #stacks-internals #responsify('.grid--col3', { grid-column: span 3; });
69
- #stacks-internals #responsify('.grid--col4', { grid-column: span 4; });
70
- #stacks-internals #responsify('.grid--col5', { grid-column: span 5; });
71
- #stacks-internals #responsify('.grid--col6', { grid-column: span 6; });
72
- #stacks-internals #responsify('.grid--col7', { grid-column: span 7; });
73
- #stacks-internals #responsify('.grid--col8', { grid-column: span 8; });
74
- #stacks-internals #responsify('.grid--col9', { grid-column: span 9; });
75
- #stacks-internals #responsify('.grid--col10', { grid-column: span 10; });
76
- #stacks-internals #responsify('.grid--col11', { grid-column: span 11; });
77
- #stacks-internals #responsify('.grid--col12', { grid-column: span 12; });
78
-
79
- // ============================================================================
80
- // $ ROW SPANS
81
- // ----------------------------------------------------------------------------
82
- #stacks-internals #responsify('.grid--row1', { grid-row: span 1; });
83
- #stacks-internals #responsify('.grid--row2', { grid-row: span 2; });
84
- #stacks-internals #responsify('.grid--row3', { grid-row: span 3; });
85
- #stacks-internals #responsify('.grid--row4', { grid-row: span 4; });
86
- #stacks-internals #responsify('.grid--row5', { grid-row: span 5; });
87
- #stacks-internals #responsify('.grid--row6', { grid-row: span 6; });
88
- #stacks-internals #responsify('.grid--row7', { grid-row: span 7; });
89
- #stacks-internals #responsify('.grid--row8', { grid-row: span 8; });
90
- #stacks-internals #responsify('.grid--row9', { grid-row: span 9; });
91
- #stacks-internals #responsify('.grid--row10', { grid-row: span 10; });
92
- #stacks-internals #responsify('.grid--row11', { grid-row: span 11; });
93
- #stacks-internals #responsify('.grid--row12', { grid-row: span 12; });
94
-
95
- // ============================================================================
96
- // $ COLUMN START
97
- // ----------------------------------------------------------------------------
98
- #stacks-internals #responsify('.grid--col-start1', { grid-column-start: 1; });
99
- #stacks-internals #responsify('.grid--col-start2', { grid-column-start: 2; });
100
- #stacks-internals #responsify('.grid--col-start3', { grid-column-start: 3; });
101
- #stacks-internals #responsify('.grid--col-start4', { grid-column-start: 4; });
102
- #stacks-internals #responsify('.grid--col-start5', { grid-column-start: 5; });
103
- #stacks-internals #responsify('.grid--col-start6', { grid-column-start: 6; });
104
- #stacks-internals #responsify('.grid--col-start7', { grid-column-start: 7; });
105
- #stacks-internals #responsify('.grid--col-start8', { grid-column-start: 8; });
106
- #stacks-internals #responsify('.grid--col-start9', { grid-column-start: 9; });
107
- #stacks-internals #responsify('.grid--col-start10', { grid-column-start: 10; });
108
- #stacks-internals #responsify('.grid--col-start11', { grid-column-start: 11; });
109
- #stacks-internals #responsify('.grid--col-start12', { grid-column-start: 12; });
110
-
111
- // ============================================================================
112
- // $ COLUMN END
113
- // ----------------------------------------------------------------------------
114
- #stacks-internals #responsify('.grid--col-end2', { grid-column-end: 2; });
115
- #stacks-internals #responsify('.grid--col-end3', { grid-column-end: 3; });
116
- #stacks-internals #responsify('.grid--col-end4', { grid-column-end: 4; });
117
- #stacks-internals #responsify('.grid--col-end5', { grid-column-end: 5; });
118
- #stacks-internals #responsify('.grid--col-end6', { grid-column-end: 6; });
119
- #stacks-internals #responsify('.grid--col-end7', { grid-column-end: 7; });
120
- #stacks-internals #responsify('.grid--col-end8', { grid-column-end: 8; });
121
- #stacks-internals #responsify('.grid--col-end9', { grid-column-end: 9; });
122
- #stacks-internals #responsify('.grid--col-end10', { grid-column-end: 10; });
123
- #stacks-internals #responsify('.grid--col-end11', { grid-column-end: 11; });
124
- #stacks-internals #responsify('.grid--col-end12', { grid-column-end: 12; });
125
- #stacks-internals #responsify('.grid--col-end13', { grid-column-end: 13; });
126
-
127
- // ============================================================================
128
- // $ ROW START
129
- // ----------------------------------------------------------------------------
130
- #stacks-internals #responsify('.grid--row-start1', { grid-row-start: 1; });
131
- #stacks-internals #responsify('.grid--row-start2', { grid-row-start: 2; });
132
- #stacks-internals #responsify('.grid--row-start3', { grid-row-start: 3; });
133
- #stacks-internals #responsify('.grid--row-start4', { grid-row-start: 4; });
134
- #stacks-internals #responsify('.grid--row-start5', { grid-row-start: 5; });
135
- #stacks-internals #responsify('.grid--row-start6', { grid-row-start: 6; });
136
- #stacks-internals #responsify('.grid--row-start7', { grid-row-start: 7; });
137
- #stacks-internals #responsify('.grid--row-start8', { grid-row-start: 8; });
138
- #stacks-internals #responsify('.grid--row-start9', { grid-row-start: 9; });
139
- #stacks-internals #responsify('.grid--row-start10', { grid-row-start: 10; });
140
- #stacks-internals #responsify('.grid--row-start11', { grid-row-start: 11; });
141
- #stacks-internals #responsify('.grid--row-start12', { grid-row-start: 12; });
142
-
143
- // ============================================================================
144
- // $ ROW END
145
- // ----------------------------------------------------------------------------
146
- #stacks-internals #responsify('.grid--row-end2', { grid-row-end: 2; });
147
- #stacks-internals #responsify('.grid--row-end3', { grid-row-end: 3; });
148
- #stacks-internals #responsify('.grid--row-end4', { grid-row-end: 4; });
149
- #stacks-internals #responsify('.grid--row-end5', { grid-row-end: 5; });
150
- #stacks-internals #responsify('.grid--row-end6', { grid-row-end: 6; });
151
- #stacks-internals #responsify('.grid--row-end7', { grid-row-end: 7; });
152
- #stacks-internals #responsify('.grid--row-end8', { grid-row-end: 8; });
153
- #stacks-internals #responsify('.grid--row-end9', { grid-row-end: 9; });
154
- #stacks-internals #responsify('.grid--row-end10', { grid-row-end: 10; });
155
- #stacks-internals #responsify('.grid--row-end11', { grid-row-end: 11; });
156
- #stacks-internals #responsify('.grid--row-end12', { grid-row-end: 12; });
157
- #stacks-internals #responsify('.grid--row-end13', { grid-row-end: 13; });
158
-
159
- // ============================================================================
160
- // $ JUSTIFICATION
161
- // ----------------------------------------------------------------------------
162
- #stacks-internals #responsify('.ji-auto', { justify-items: auto !important; });
163
- #stacks-internals #responsify('.ji-center', { justify-items: center !important; });
164
- #stacks-internals #responsify('.ji-start', { justify-items: start !important; });
165
- #stacks-internals #responsify('.ji-end', { justify-items: end !important; });
166
- #stacks-internals #responsify('.ji-stretch', { justify-items: stretch !important; });
167
- #stacks-internals #responsify('.ji-unset', { justify-items: unset !important; });
168
-
169
- #stacks-internals #responsify('.js-auto', { justify-self: auto !important; });
170
- #stacks-internals #responsify('.js-center', { justify-self: center !important; });
171
- #stacks-internals #responsify('.js-start', { justify-self: start !important; });
172
- #stacks-internals #responsify('.js-end', { justify-self: end !important; });
173
- #stacks-internals #responsify('.js-stretch', { justify-self: stretch !important; });
174
- #stacks-internals #responsify('.js-unset', { justify-self: unset !important; });
1
+ //
2
+ // STACK OVERFLOW
3
+ // GRID
4
+ //
5
+ // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
6
+ // Stack Overflow. For documentation of all these classes and how to contribute,
7
+ // visit https://stackoverflow.design/
8
+ //
9
+ // TABLE OF CONTENTS
10
+ // • GAP
11
+ // • GRID FLOW
12
+ // • GRID COLUMN TEMPLATES
13
+ // • COLUMN SPANS
14
+ // • ROW SPANS
15
+ //
16
+
17
+ // ============================================================================
18
+ // $ GAP
19
+ // Insert spaces or gutters in between grid items
20
+ // When this is available in flex layouts, this can be separated
21
+ // into its own section and documentation
22
+ // ----------------------------------------------------------------------------
23
+ #stacks-internals #responsify('.g0', { gap: 0 });
24
+ #stacks-internals #responsify('.g1', { gap: var(--su1) });
25
+ #stacks-internals #responsify('.g2', { gap: var(--su2) });
26
+ #stacks-internals #responsify('.g4', { gap: var(--su4); });
27
+ #stacks-internals #responsify('.g6', { gap: var(--su6); });
28
+ #stacks-internals #responsify('.g8', { gap: var(--su8); });
29
+ #stacks-internals #responsify('.g12', { gap: var(--su12); });
30
+ #stacks-internals #responsify('.g16', { gap: var(--su16); });
31
+ #stacks-internals #responsify('.g24', { gap: var(--su24); });
32
+ #stacks-internals #responsify('.g32', { gap: var(--su32); });
33
+ #stacks-internals #responsify('.g48', { gap: var(--su48); });
34
+ #stacks-internals #responsify('.g64', { gap: var(--su64); });
35
+
36
+ // ============================================================================
37
+ // $ GRID FLOW
38
+ // ----------------------------------------------------------------------------
39
+ #stacks-internals #responsify('.g-af-dense', { grid-auto-flow: dense; });
40
+ #stacks-internals #responsify('.g-af-row', { grid-auto-flow: row; });
41
+ #stacks-internals #responsify('.g-af-column', { grid-auto-flow: column; });
42
+
43
+ // ============================================================================
44
+ // $ GRID COLUMN TEMPLATES
45
+ // ----------------------------------------------------------------------------
46
+ #stacks-internals #responsify('.grid__1', { grid-template-columns: repeat(1, minmax(0, 1fr)); });
47
+ #stacks-internals #responsify('.grid__2', { grid-template-columns: repeat(2, minmax(0, 1fr)); });
48
+ #stacks-internals #responsify('.grid__3', { grid-template-columns: repeat(3, minmax(0, 1fr)); });
49
+ #stacks-internals #responsify('.grid__4', { grid-template-columns: repeat(4, minmax(0, 1fr)); });
50
+ #stacks-internals #responsify('.grid__5', { grid-template-columns: repeat(5, minmax(0, 1fr)); });
51
+ #stacks-internals #responsify('.grid__6', { grid-template-columns: repeat(6, minmax(0, 1fr)); });
52
+ #stacks-internals #responsify('.grid__7', { grid-template-columns: repeat(7, minmax(0, 1fr)); });
53
+ #stacks-internals #responsify('.grid__8', { grid-template-columns: repeat(8, minmax(0, 1fr)); });
54
+ #stacks-internals #responsify('.grid__9', { grid-template-columns: repeat(9, minmax(0, 1fr)); });
55
+ #stacks-internals #responsify('.grid__10', { grid-template-columns: repeat(10, minmax(0, 1fr)); });
56
+ #stacks-internals #responsify('.grid__11', { grid-template-columns: repeat(11, minmax(0, 1fr)); });
57
+ #stacks-internals #responsify('.grid__12', { grid-template-columns: repeat(12, minmax(0, 1fr)); });
58
+ #stacks-internals #responsify('.grid__auto', { grid-template-columns: auto 1fr; });
59
+
60
+ // ============================================================================
61
+ // $ COLUMN SPANS
62
+ // ----------------------------------------------------------------------------
63
+ #stacks-internals #responsify('.grid--col-all', { grid-column: ~"1 / -1"; });
64
+ #stacks-internals #responsify('.grid--row-all', { grid-row: ~"1 / -1"; });
65
+
66
+ #stacks-internals #responsify('.grid--col1', { grid-column: span 1; });
67
+ #stacks-internals #responsify('.grid--col2', { grid-column: span 2; });
68
+ #stacks-internals #responsify('.grid--col3', { grid-column: span 3; });
69
+ #stacks-internals #responsify('.grid--col4', { grid-column: span 4; });
70
+ #stacks-internals #responsify('.grid--col5', { grid-column: span 5; });
71
+ #stacks-internals #responsify('.grid--col6', { grid-column: span 6; });
72
+ #stacks-internals #responsify('.grid--col7', { grid-column: span 7; });
73
+ #stacks-internals #responsify('.grid--col8', { grid-column: span 8; });
74
+ #stacks-internals #responsify('.grid--col9', { grid-column: span 9; });
75
+ #stacks-internals #responsify('.grid--col10', { grid-column: span 10; });
76
+ #stacks-internals #responsify('.grid--col11', { grid-column: span 11; });
77
+ #stacks-internals #responsify('.grid--col12', { grid-column: span 12; });
78
+
79
+ // ============================================================================
80
+ // $ ROW SPANS
81
+ // ----------------------------------------------------------------------------
82
+ #stacks-internals #responsify('.grid--row1', { grid-row: span 1; });
83
+ #stacks-internals #responsify('.grid--row2', { grid-row: span 2; });
84
+ #stacks-internals #responsify('.grid--row3', { grid-row: span 3; });
85
+ #stacks-internals #responsify('.grid--row4', { grid-row: span 4; });
86
+ #stacks-internals #responsify('.grid--row5', { grid-row: span 5; });
87
+ #stacks-internals #responsify('.grid--row6', { grid-row: span 6; });
88
+ #stacks-internals #responsify('.grid--row7', { grid-row: span 7; });
89
+ #stacks-internals #responsify('.grid--row8', { grid-row: span 8; });
90
+ #stacks-internals #responsify('.grid--row9', { grid-row: span 9; });
91
+ #stacks-internals #responsify('.grid--row10', { grid-row: span 10; });
92
+ #stacks-internals #responsify('.grid--row11', { grid-row: span 11; });
93
+ #stacks-internals #responsify('.grid--row12', { grid-row: span 12; });
94
+
95
+ // ============================================================================
96
+ // $ COLUMN START
97
+ // ----------------------------------------------------------------------------
98
+ #stacks-internals #responsify('.grid--col-start1', { grid-column-start: 1; });
99
+ #stacks-internals #responsify('.grid--col-start2', { grid-column-start: 2; });
100
+ #stacks-internals #responsify('.grid--col-start3', { grid-column-start: 3; });
101
+ #stacks-internals #responsify('.grid--col-start4', { grid-column-start: 4; });
102
+ #stacks-internals #responsify('.grid--col-start5', { grid-column-start: 5; });
103
+ #stacks-internals #responsify('.grid--col-start6', { grid-column-start: 6; });
104
+ #stacks-internals #responsify('.grid--col-start7', { grid-column-start: 7; });
105
+ #stacks-internals #responsify('.grid--col-start8', { grid-column-start: 8; });
106
+ #stacks-internals #responsify('.grid--col-start9', { grid-column-start: 9; });
107
+ #stacks-internals #responsify('.grid--col-start10', { grid-column-start: 10; });
108
+ #stacks-internals #responsify('.grid--col-start11', { grid-column-start: 11; });
109
+ #stacks-internals #responsify('.grid--col-start12', { grid-column-start: 12; });
110
+
111
+ // ============================================================================
112
+ // $ COLUMN END
113
+ // ----------------------------------------------------------------------------
114
+ #stacks-internals #responsify('.grid--col-end2', { grid-column-end: 2; });
115
+ #stacks-internals #responsify('.grid--col-end3', { grid-column-end: 3; });
116
+ #stacks-internals #responsify('.grid--col-end4', { grid-column-end: 4; });
117
+ #stacks-internals #responsify('.grid--col-end5', { grid-column-end: 5; });
118
+ #stacks-internals #responsify('.grid--col-end6', { grid-column-end: 6; });
119
+ #stacks-internals #responsify('.grid--col-end7', { grid-column-end: 7; });
120
+ #stacks-internals #responsify('.grid--col-end8', { grid-column-end: 8; });
121
+ #stacks-internals #responsify('.grid--col-end9', { grid-column-end: 9; });
122
+ #stacks-internals #responsify('.grid--col-end10', { grid-column-end: 10; });
123
+ #stacks-internals #responsify('.grid--col-end11', { grid-column-end: 11; });
124
+ #stacks-internals #responsify('.grid--col-end12', { grid-column-end: 12; });
125
+ #stacks-internals #responsify('.grid--col-end13', { grid-column-end: 13; });
126
+
127
+ // ============================================================================
128
+ // $ ROW START
129
+ // ----------------------------------------------------------------------------
130
+ #stacks-internals #responsify('.grid--row-start1', { grid-row-start: 1; });
131
+ #stacks-internals #responsify('.grid--row-start2', { grid-row-start: 2; });
132
+ #stacks-internals #responsify('.grid--row-start3', { grid-row-start: 3; });
133
+ #stacks-internals #responsify('.grid--row-start4', { grid-row-start: 4; });
134
+ #stacks-internals #responsify('.grid--row-start5', { grid-row-start: 5; });
135
+ #stacks-internals #responsify('.grid--row-start6', { grid-row-start: 6; });
136
+ #stacks-internals #responsify('.grid--row-start7', { grid-row-start: 7; });
137
+ #stacks-internals #responsify('.grid--row-start8', { grid-row-start: 8; });
138
+ #stacks-internals #responsify('.grid--row-start9', { grid-row-start: 9; });
139
+ #stacks-internals #responsify('.grid--row-start10', { grid-row-start: 10; });
140
+ #stacks-internals #responsify('.grid--row-start11', { grid-row-start: 11; });
141
+ #stacks-internals #responsify('.grid--row-start12', { grid-row-start: 12; });
142
+
143
+ // ============================================================================
144
+ // $ ROW END
145
+ // ----------------------------------------------------------------------------
146
+ #stacks-internals #responsify('.grid--row-end2', { grid-row-end: 2; });
147
+ #stacks-internals #responsify('.grid--row-end3', { grid-row-end: 3; });
148
+ #stacks-internals #responsify('.grid--row-end4', { grid-row-end: 4; });
149
+ #stacks-internals #responsify('.grid--row-end5', { grid-row-end: 5; });
150
+ #stacks-internals #responsify('.grid--row-end6', { grid-row-end: 6; });
151
+ #stacks-internals #responsify('.grid--row-end7', { grid-row-end: 7; });
152
+ #stacks-internals #responsify('.grid--row-end8', { grid-row-end: 8; });
153
+ #stacks-internals #responsify('.grid--row-end9', { grid-row-end: 9; });
154
+ #stacks-internals #responsify('.grid--row-end10', { grid-row-end: 10; });
155
+ #stacks-internals #responsify('.grid--row-end11', { grid-row-end: 11; });
156
+ #stacks-internals #responsify('.grid--row-end12', { grid-row-end: 12; });
157
+ #stacks-internals #responsify('.grid--row-end13', { grid-row-end: 13; });
158
+
159
+ // ============================================================================
160
+ // $ JUSTIFICATION
161
+ // ----------------------------------------------------------------------------
162
+ #stacks-internals #responsify('.ji-auto', { justify-items: auto !important; });
163
+ #stacks-internals #responsify('.ji-center', { justify-items: center !important; });
164
+ #stacks-internals #responsify('.ji-start', { justify-items: start !important; });
165
+ #stacks-internals #responsify('.ji-end', { justify-items: end !important; });
166
+ #stacks-internals #responsify('.ji-stretch', { justify-items: stretch !important; });
167
+ #stacks-internals #responsify('.ji-unset', { justify-items: unset !important; });
168
+
169
+ #stacks-internals #responsify('.js-auto', { justify-self: auto !important; });
170
+ #stacks-internals #responsify('.js-center', { justify-self: center !important; });
171
+ #stacks-internals #responsify('.js-start', { justify-self: start !important; });
172
+ #stacks-internals #responsify('.js-end', { justify-self: end !important; });
173
+ #stacks-internals #responsify('.js-stretch', { justify-self: stretch !important; });
174
+ #stacks-internals #responsify('.js-unset', { justify-self: unset !important; });