@graupl/graupl 1.0.0-alpha.1 → 1.0.0-alpha.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 (212) hide show
  1. package/.stylelintignore +9 -0
  2. package/CHANGELOG.md +177 -0
  3. package/dist/base/form.css +2 -0
  4. package/dist/base/form.css.map +1 -0
  5. package/dist/base/link.css +2 -0
  6. package/dist/base/link.css.map +1 -0
  7. package/dist/base/table.css +2 -0
  8. package/dist/base/table.css.map +1 -0
  9. package/dist/base.css +2 -0
  10. package/dist/base.css.map +1 -0
  11. package/dist/component/button.css +2 -0
  12. package/dist/component/button.css.map +1 -0
  13. package/dist/component/input-group.css +2 -0
  14. package/dist/component/input-group.css.map +1 -0
  15. package/dist/component/table.css +2 -0
  16. package/dist/component/table.css.map +1 -0
  17. package/dist/component.css +2 -0
  18. package/dist/component.css.map +1 -0
  19. package/dist/graupl.css +1 -284
  20. package/dist/graupl.css.map +1 -1
  21. package/dist/layout/columns.css +2 -0
  22. package/dist/layout/columns.css.map +1 -0
  23. package/dist/layout/container.css +2 -0
  24. package/dist/layout/container.css.map +1 -0
  25. package/dist/layout.css +2 -0
  26. package/dist/layout.css.map +1 -0
  27. package/dist/state/focus.css +2 -0
  28. package/dist/state/focus.css.map +1 -0
  29. package/dist/state.css +2 -0
  30. package/dist/state.css.map +1 -0
  31. package/dist/theme/color.css +2 -0
  32. package/dist/theme/color.css.map +1 -0
  33. package/dist/theme/typography.css +2 -0
  34. package/dist/theme/typography.css.map +1 -0
  35. package/dist/theme.css +2 -0
  36. package/dist/theme.css.map +1 -0
  37. package/dist/utilities/alignment.css +2 -0
  38. package/dist/utilities/alignment.css.map +1 -0
  39. package/dist/utilities/color.css +2 -0
  40. package/dist/utilities/color.css.map +1 -0
  41. package/dist/utilities/display.css +2 -0
  42. package/dist/utilities/display.css.map +1 -0
  43. package/dist/utilities/flex.css +2 -0
  44. package/dist/utilities/flex.css.map +1 -0
  45. package/dist/utilities/inset.css +2 -0
  46. package/dist/utilities/inset.css.map +1 -0
  47. package/dist/utilities/justification.css +2 -0
  48. package/dist/utilities/justification.css.map +1 -0
  49. package/dist/utilities/list.css +2 -0
  50. package/dist/utilities/list.css.map +1 -0
  51. package/dist/utilities/postion.css +2 -0
  52. package/dist/utilities/postion.css.map +1 -0
  53. package/dist/utilities/spacing.css +2 -0
  54. package/dist/utilities/spacing.css.map +1 -0
  55. package/dist/utilities/typography.css +2 -0
  56. package/dist/utilities/typography.css.map +1 -0
  57. package/dist/utilities/visibility.css +2 -0
  58. package/dist/utilities/visibility.css.map +1 -0
  59. package/dist/utilities.css +2 -0
  60. package/dist/utilities.css.map +1 -0
  61. package/docs/.vitepress/config.js +41 -1
  62. package/docs/.vitepress/theme/custom.scss +29 -29
  63. package/docs/compiling-graupl.md +56 -0
  64. package/docs/introduction.md +5 -0
  65. package/index.html +333 -72
  66. package/package.json +16 -4
  67. package/postcss.config.cjs +1 -1
  68. package/scss/base/form.scss +3 -0
  69. package/scss/base/link.scss +3 -0
  70. package/scss/base/table.scss +3 -0
  71. package/scss/base.scss +3 -0
  72. package/scss/component/button.scss +3 -0
  73. package/scss/component/input-group.scss +3 -0
  74. package/scss/component/table.scss +3 -0
  75. package/scss/component.scss +3 -0
  76. package/scss/graupl.scss +1 -5
  77. package/scss/layout/columns.scss +3 -0
  78. package/scss/layout/container.scss +3 -0
  79. package/scss/layout.scss +3 -0
  80. package/scss/state/focus.scss +3 -0
  81. package/scss/state.scss +3 -0
  82. package/scss/theme/color.scss +3 -0
  83. package/scss/theme/typography.scss +3 -0
  84. package/scss/theme.scss +3 -0
  85. package/scss/utilities/alignment.scss +3 -0
  86. package/scss/utilities/color.scss +3 -0
  87. package/scss/utilities/display.scss +3 -0
  88. package/scss/utilities/flex.scss +3 -0
  89. package/scss/utilities/inset.scss +3 -0
  90. package/scss/utilities/justification.scss +3 -0
  91. package/scss/utilities/list.scss +3 -0
  92. package/scss/utilities/postion.scss +3 -0
  93. package/scss/utilities/spacing.scss +3 -0
  94. package/scss/utilities/typography.scss +3 -0
  95. package/scss/utilities/visibility.scss +3 -0
  96. package/scss/utilities.scss +3 -0
  97. package/{scss → src/scss}/_defaults.scss +40 -13
  98. package/src/scss/_index.scss +14 -0
  99. package/src/scss/_init.scss +3 -0
  100. package/{scss → src/scss}/_variables.scss +14 -24
  101. package/{scss → src/scss}/base/_index.scss +1 -0
  102. package/{scss → src/scss}/base/form/_defaults.scss +0 -2
  103. package/{scss → src/scss}/base/form/_index.scss +12 -0
  104. package/src/scss/base/form/_variables.scss +145 -0
  105. package/{scss → src/scss}/base/link/_defaults.scss +0 -2
  106. package/src/scss/base/link/_index.scss +50 -0
  107. package/src/scss/base/link/_variables.scss +36 -0
  108. package/src/scss/base/table/_defaults.scss +8 -0
  109. package/src/scss/base/table/_index.scss +27 -0
  110. package/src/scss/base/table/_variables.scss +65 -0
  111. package/{scss → src/scss}/component/_index.scss +2 -0
  112. package/src/scss/component/button/_defaults.scss +39 -0
  113. package/src/scss/component/button/_index.scss +134 -0
  114. package/src/scss/component/button/_variables.scss +132 -0
  115. package/src/scss/component/input-group/_defaults.scss +23 -0
  116. package/src/scss/component/input-group/_index.scss +45 -0
  117. package/src/scss/component/input-group/_variables.scss +63 -0
  118. package/src/scss/component/table/_defaults.scss +30 -0
  119. package/src/scss/component/table/_index.scss +77 -0
  120. package/src/scss/component/table/_variables.scss +64 -0
  121. package/src/scss/functions/_important.scss +11 -0
  122. package/src/scss/functions/_theme.scss +18 -0
  123. package/{scss → src/scss}/layout/columns/_defaults.scss +1 -4
  124. package/src/scss/layout/columns/_index.scss +36 -0
  125. package/src/scss/layout/columns/_variables.scss +47 -0
  126. package/{scss → src/scss}/layout/container/_defaults.scss +0 -2
  127. package/src/scss/layout/container/_index.scss +36 -0
  128. package/src/scss/layout/container/_variables.scss +47 -0
  129. package/{scss → src/scss}/mixins/_layer.scss +2 -2
  130. package/{scss → src/scss}/mixins/_media-queries.scss +11 -0
  131. package/{scss → src/scss}/state/focus/_defaults.scss +0 -2
  132. package/src/scss/state/focus/_variables.scss +40 -0
  133. package/src/scss/theme/_index.scss +4 -0
  134. package/src/scss/theme/color/_defaults.scss +61 -0
  135. package/src/scss/theme/color/_index.scss +42 -0
  136. package/src/scss/theme/color/_variables.scss +121 -0
  137. package/src/scss/theme/typography/_defaults.scss +52 -0
  138. package/src/scss/theme/typography/_index.scss +111 -0
  139. package/src/scss/theme/typography/_variables.scss +227 -0
  140. package/src/scss/utilities/_index.scss +13 -0
  141. package/src/scss/utilities/alignment/_defaults.scss +57 -0
  142. package/src/scss/utilities/alignment/_index.scss +29 -0
  143. package/src/scss/utilities/alignment/_variables.scss +3 -0
  144. package/src/scss/utilities/color/_defaults.scss +30 -0
  145. package/src/scss/utilities/color/_index.scss +38 -0
  146. package/src/scss/utilities/color/_variables.scss +3 -0
  147. package/src/scss/utilities/display/_defaults.scss +27 -0
  148. package/src/scss/utilities/display/_index.scss +15 -0
  149. package/src/scss/utilities/display/_variables.scss +3 -0
  150. package/src/scss/utilities/flex/_defaults.scss +58 -0
  151. package/src/scss/utilities/flex/_index.scss +36 -0
  152. package/src/scss/utilities/flex/_variables.scss +3 -0
  153. package/src/scss/utilities/inset/_defaults.scss +36 -0
  154. package/src/scss/utilities/inset/_index.scss +19 -0
  155. package/src/scss/utilities/inset/_variables.scss +3 -0
  156. package/src/scss/utilities/justification/_defaults.scss +54 -0
  157. package/src/scss/utilities/justification/_index.scss +29 -0
  158. package/src/scss/utilities/justification/_variables.scss +3 -0
  159. package/src/scss/utilities/list/_defaults.scss +34 -0
  160. package/src/scss/utilities/list/_index.scss +22 -0
  161. package/src/scss/utilities/list/_variables.scss +3 -0
  162. package/src/scss/utilities/position/_defaults.scss +21 -0
  163. package/src/scss/utilities/position/_index.scss +15 -0
  164. package/src/scss/utilities/position/_variables.scss +3 -0
  165. package/src/scss/utilities/spacing/_defaults.scss +44 -0
  166. package/src/scss/utilities/spacing/_index.scss +64 -0
  167. package/src/scss/utilities/spacing/_variables.scss +3 -0
  168. package/src/scss/utilities/typography/_defaults.scss +25 -0
  169. package/src/scss/utilities/typography/_index.scss +95 -0
  170. package/src/scss/utilities/typography/_variables.scss +3 -0
  171. package/src/scss/utilities/visibility/_defaults.scss +20 -0
  172. package/src/scss/utilities/visibility/_index.scss +15 -0
  173. package/src/scss/utilities/visibility/_variables.scss +3 -0
  174. package/stylelint.config.js +2 -0
  175. package/dist/base/form/form.css +0 -78
  176. package/dist/base/form/form.css.map +0 -1
  177. package/dist/base/link/link.css +0 -26
  178. package/dist/base/link/link.css.map +0 -1
  179. package/dist/component/button/button.css +0 -62
  180. package/dist/component/button/button.css.map +0 -1
  181. package/dist/layout/columns/columns.css +0 -41
  182. package/dist/layout/columns/columns.css.map +0 -1
  183. package/dist/layout/container/container.css +0 -38
  184. package/dist/layout/container/container.css.map +0 -1
  185. package/dist/state/focus/focus.css +0 -10
  186. package/dist/state/focus/focus.css.map +0 -1
  187. package/dist/theme/theme.css +0 -42
  188. package/dist/theme/theme.css.map +0 -1
  189. package/scss/base/form/_variables.scss +0 -133
  190. package/scss/base/form/form.scss +0 -3
  191. package/scss/base/link/_index.scss +0 -33
  192. package/scss/base/link/_variables.scss +0 -31
  193. package/scss/base/link/link.scss +0 -3
  194. package/scss/component/button/_defaults.scss +0 -10
  195. package/scss/component/button/_index.scss +0 -75
  196. package/scss/component/button/_variables.scss +0 -102
  197. package/scss/component/button/button.scss +0 -3
  198. package/scss/layout/columns/_index.scss +0 -38
  199. package/scss/layout/columns/_variables.scss +0 -24
  200. package/scss/layout/columns/columns.scss +0 -3
  201. package/scss/layout/container/_index.scss +0 -50
  202. package/scss/layout/container/_variables.scss +0 -26
  203. package/scss/layout/container/container.scss +0 -3
  204. package/scss/state/focus/_variables.scss +0 -36
  205. package/scss/state/focus/focus.scss +0 -3
  206. package/scss/theme/_defaults.scss +0 -56
  207. package/scss/theme/_index.scss +0 -53
  208. package/scss/theme/_variables.scss +0 -297
  209. package/scss/theme/theme.scss +0 -3
  210. /package/{scss → src/scss}/layout/_index.scss +0 -0
  211. /package/{scss → src/scss}/state/_index.scss +0 -0
  212. /package/{scss → src/scss}/state/focus/_index.scss +0 -0
package/index.html CHANGED
@@ -1,5 +1,6 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" class="light-mode">
2
+ <html lang="en">
3
+
3
4
  <head>
4
5
  <meta charset="UTF-8">
5
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,6 +12,7 @@
11
12
  </style>
12
13
  <link rel="stylesheet" href="dist/graupl.css">
13
14
  </head>
15
+
14
16
  <body>
15
17
  <main class="container">
16
18
  <h1>Hello Graupl!</h1>
@@ -18,84 +20,343 @@
18
20
  <p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
19
21
  <p>Graupl supports light and dark modes out-of-the-box.</p>
20
22
  <h2>Buttons</h2>
21
- <p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.</p>
22
- <div class="columns columns-4">
23
+ <p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.
24
+ </p>
25
+ <div class="columns count-4">
23
26
  <button class="button">Default Button</button>
24
27
  <button class="button primary">Primary Button</button>
25
28
  <button class="button secondary">Secondary Button</button>
26
29
  <button class="button tertiary">Tertiary Button</button>
30
+ <button class="button" disabled>Default Button</button>
31
+ <button class="button primary" disabled>Primary Button</button>
32
+ <button class="button secondary" disabled>Secondary Button</button>
33
+ <button class="button tertiary" disabled>Tertiary Button</button>
27
34
  </div>
28
35
  <h2>Form elements</h2>
29
36
  <p>Graupl provides default styling for all form elements.</p>
30
- <label for="input">Input</label>
31
- <input type="text" placeholder="Input" id="input">
32
- <label for="input-readonly">Readonly Input</label>
33
- <input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input"readonly>
34
- <label for="input-disabled">Disabled Input</label>
35
- <input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
36
- <label for="textarea">Textarea</label>
37
- <textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
38
- <label for="textarea-readonly">Readonly Textarea</label>
39
- <textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly" readonly>Readonly Textarea</textarea>
40
- <label for="textarea-disabled">Disabled Textarea</label>
41
- <textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
42
- <label for="select">Select</label>
43
- <select id="select">
44
- <option value="1">Option 1</option>
45
- <option value="2">Option 2</option>
46
- <optgroup label="Group 1">
47
- <option value="3">Option 3</option>
48
- <option value="4">Option 4</option>
49
- <option value="5">Option 5</option>
50
- </optgroup>
51
- </select>
52
- <label for="select-disabled">Disabled Select</label>
53
- <select id="select-disabled" disabled>
54
- <option value="1">Option 1</option>
55
- <option value="2">Option 2</option>
56
- <optgroup label="Group 1">
57
- <option value="3">Option 3</option>
58
- <option value="4">Option 4</option>
59
- <option value="5">Option 5</option>
60
- </optgroup>
61
- </select>
62
- <label for"multi-select">Multi-select</label>
63
- <select id="multi-select" multiple>
64
- <option value="1">Option 1</option>
65
- <option value="2">Option 2</option>
66
- <optgroup label="Group 1">
67
- <option value="3">Option 3</option>
68
- <option value="4">Option 4</option>
69
- <option value="5">Option 5</option>
70
- </optgroup>
71
- </select>
72
- <label for="multi-select-disabled">Disabled Multi-select</label>
73
- <select id="multi-select-disabled" multiple disabled>
74
- <option value="1">Option 1</option>
75
- <option value="2">Option 2</option>
76
- <optgroup label="Group 1">
77
- <option value="3">Option 3</option>
78
- <option value="4">Option 4</option>
79
- <option value="5">Option 5</option>
80
- </optgroup>
81
- </select>
82
- <fieldset>
83
- <legend>Checkboxes</legend>
84
- <label for="checkbox">
85
- <input type="checkbox" id="checkbox"> Checkbox</label>
86
- <label for="checkbox-checked">
87
- <input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
88
- <label for="checkbox-disabled">
89
- <input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
90
- </fieldset>
91
- <fieldset>
92
- <legend>Radio Buttons</legend>
93
- <label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
94
- <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
95
- <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled Radio</label>
96
- </fieldset>
97
- <label for="range">Range</label>
98
- <input type="range" class="range" id="range">
37
+ <form class="full-width rg-4">
38
+ <div class="input-group">
39
+ <label for="input">Input</label>
40
+ <input type="text" placeholder="Input" id="input">
41
+ <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
42
+ </div>
43
+ <div class="input-group inline"><label for="input-readonly">Readonly Input</label>
44
+ <input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input" readonly>
45
+ <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
46
+ </div>
47
+ <div class="input-group"><label for="input-disabled">Disabled Input</label>
48
+ <input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
49
+ <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
50
+ </div>
51
+ <div class="input-group inline"><label for="textarea">Textarea</label>
52
+ <textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
53
+ </div>
54
+ <div class="input-group"><label for="textarea-readonly">Readonly Textarea</label>
55
+ <textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly"
56
+ readonly>Readonly Textarea</textarea>
57
+ </div>
58
+ <div class="input-group"><label for="textarea-disabled">Disabled Textarea</label>
59
+ <textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
60
+ </div>
61
+ <div class="input-group inline"><label for="select">Select</label>
62
+ <select id="select">
63
+ <option value="1">Option 1</option>
64
+ <option value="2">Option 2</option>
65
+ <optgroup label="Group 1">
66
+ <option value="3">Option 3</option>
67
+ <option value="4">Option 4</option>
68
+ <option value="5">Option 5</option>
69
+ </optgroup>
70
+ </select>
71
+ </div>
72
+ <div class="input-group"><label for="select-disabled">Disabled Select</label>
73
+ <select id="select-disabled" disabled>
74
+ <option value="1">Option 1</option>
75
+ <option value="2">Option 2</option>
76
+ <optgroup label="Group 1">
77
+ <option value="3">Option 3</option>
78
+ <option value="4">Option 4</option>
79
+ <option value="5">Option 5</option>
80
+ </optgroup>
81
+ </select>
82
+ </div>
83
+ <div class="input-group"><label for"multi-select">Multi-select</label>
84
+ <select id="multi-select" multiple>
85
+ <option value="1">Option 1</option>
86
+ <option value="2">Option 2</option>
87
+ <optgroup label="Group 1">
88
+ <option value="3">Option 3</option>
89
+ <option value="4">Option 4</option>
90
+ <option value="5">Option 5</option>
91
+ </optgroup>
92
+ </select>
93
+ </div>
94
+ <div class="input-group inline"><label for="multi-select-disabled">Disabled Multi-select</label>
95
+ <select id="multi-select-disabled" multiple disabled>
96
+ <option value="1">Option 1</option>
97
+ <option value="2">Option 2</option>
98
+ <optgroup label="Group 1">
99
+ <option value="3">Option 3</option>
100
+ <option value="4">Option 4</option>
101
+ <option value="5">Option 5</option>
102
+ </optgroup>
103
+ </select>
104
+ </div>
105
+ <fieldset>
106
+ <legend>Checkboxes</legend>
107
+ <label for="checkbox">
108
+ <input type="checkbox" id="checkbox"> Checkbox</label>
109
+ <label for="checkbox-checked">
110
+ <input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
111
+ <label for="checkbox-disabled">
112
+ <input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
113
+ </fieldset>
114
+ <fieldset>
115
+ <legend>Radio Buttons</legend>
116
+ <label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
117
+ <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
118
+ <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled
119
+ Radio</label>
120
+ </fieldset>
121
+ <fieldset disabled>
122
+ <legend>Disabled Fieldset</legend>
123
+ <label for="disabled-fieldset-checkbox">
124
+ <input type="checkbox" id="disabled-fieldset-checkbox"> Checkbox</label>
125
+ </fieldset>
126
+ <div class="input-group"><label for="range">Range</label>
127
+ <input type="range" class="range" id="range">
128
+ </div>
129
+ </form>
130
+ <h2>Tables</h2>
131
+ <p>Graupl provides some default styling for tables as well as some other useful features to customize them.</p>
132
+ <table class="bordered striped-rows hoverable">
133
+ <caption>
134
+ Front-end web developer course 2021
135
+ </caption>
136
+ <thead>
137
+ <tr>
138
+ <th scope="col">Person</th>
139
+ <th scope="col">Most interest in</th>
140
+ <th scope="col">Age</th>
141
+ </tr>
142
+ </thead>
143
+ <tbody>
144
+ <tr>
145
+ <th scope="row">Chris</th>
146
+ <td>HTML tables</td>
147
+ <td>22</td>
148
+ </tr>
149
+ <tr>
150
+ <th scope="row">Dennis</th>
151
+ <td>Web accessibility</td>
152
+ <td>45</td>
153
+ </tr>
154
+ <tr>
155
+ <th scope="row">Sarah</th>
156
+ <td>JavaScript frameworks</td>
157
+ <td>29</td>
158
+ </tr>
159
+ <tr>
160
+ <th scope="row">Karen</th>
161
+ <td>Web performance</td>
162
+ <td>36</td>
163
+ </tr>
164
+ </tbody>
165
+ <tfoot>
166
+ <tr>
167
+ <th scope="row" colspan="2">Average age</th>
168
+ <td>33</td>
169
+ </tr>
170
+ </tfoot>
171
+ </table>
172
+ <table class="primary bordered striped-columns hoverable">
173
+ <caption>
174
+ Front-end web developer course 2021
175
+ </caption>
176
+ <thead>
177
+ <tr>
178
+ <th scope="col">Person</th>
179
+ <th scope="col">Most interest in</th>
180
+ <th scope="col">Age</th>
181
+ </tr>
182
+ </thead>
183
+ <tbody>
184
+ <tr>
185
+ <th scope="row">Chris</th>
186
+ <td>HTML tables</td>
187
+ <td>22</td>
188
+ </tr>
189
+ <tr>
190
+ <th scope="row">Dennis</th>
191
+ <td>Web accessibility</td>
192
+ <td>45</td>
193
+ </tr>
194
+ <tr>
195
+ <th scope="row">Sarah</th>
196
+ <td>JavaScript frameworks</td>
197
+ <td>29</td>
198
+ </tr>
199
+ <tr>
200
+ <th scope="row">Karen</th>
201
+ <td>Web performance</td>
202
+ <td>36</td>
203
+ </tr>
204
+ </tbody>
205
+ <tfoot>
206
+ <tr>
207
+ <th scope="row" colspan="2">Average age</th>
208
+ <td>33</td>
209
+ </tr>
210
+ </tfoot>
211
+ </table>
212
+ <table class="secondary bordered striped-columns hoverable">
213
+ <caption>
214
+ Front-end web developer course 2021
215
+ </caption>
216
+ <thead>
217
+ <tr>
218
+ <th scope="col">Person</th>
219
+ <th scope="col">Most interest in</th>
220
+ <th scope="col">Age</th>
221
+ </tr>
222
+ </thead>
223
+ <tbody>
224
+ <tr>
225
+ <th scope="row">Chris</th>
226
+ <td>HTML tables</td>
227
+ <td>22</td>
228
+ </tr>
229
+ <tr>
230
+ <th scope="row">Dennis</th>
231
+ <td>Web accessibility</td>
232
+ <td>45</td>
233
+ </tr>
234
+ <tr>
235
+ <th scope="row">Sarah</th>
236
+ <td>JavaScript frameworks</td>
237
+ <td>29</td>
238
+ </tr>
239
+ <tr>
240
+ <th scope="row">Karen</th>
241
+ <td>Web performance</td>
242
+ <td>36</td>
243
+ </tr>
244
+ </tbody>
245
+ <tfoot>
246
+ <tr>
247
+ <th scope="row" colspan="2">Average age</th>
248
+ <td>33</td>
249
+ </tr>
250
+ </tfoot>
251
+ </table>
252
+ <table class="tertiary bordered striped-columns hoverable">
253
+ <caption>
254
+ Front-end web developer course 2021
255
+ </caption>
256
+ <thead>
257
+ <tr>
258
+ <th scope="col">Person</th>
259
+ <th scope="col">Most interest in</th>
260
+ <th scope="col">Age</th>
261
+ </tr>
262
+ </thead>
263
+ <tbody>
264
+ <tr>
265
+ <th scope="row">Chris</th>
266
+ <td>HTML tables</td>
267
+ <td>22</td>
268
+ </tr>
269
+ <tr>
270
+ <th scope="row">Dennis</th>
271
+ <td>Web accessibility</td>
272
+ <td>45</td>
273
+ </tr>
274
+ <tr>
275
+ <th scope="row">Sarah</th>
276
+ <td>JavaScript frameworks</td>
277
+ <td>29</td>
278
+ </tr>
279
+ <tr>
280
+ <th scope="row">Karen</th>
281
+ <td>Web performance</td>
282
+ <td>36</td>
283
+ </tr>
284
+ </tbody>
285
+ <tfoot>
286
+ <tr>
287
+ <th scope="row" colspan="2">Average age</th>
288
+ <td>33</td>
289
+ </tr>
290
+ </tfoot>
291
+ </table>
292
+ <div class="responsive-table">
293
+ <table class="striped-columns">
294
+ <caption>
295
+ A "responsive" table element. Resize the window to see the effect.
296
+ </caption>
297
+ <thead class="primary">
298
+ <tr>
299
+ <th scrop="col">Column 1</th>
300
+ <th scrop="col">Column 2</th>
301
+ <th scrop="col">Column 3</th>
302
+ <th scrop="col">Column 4</th>
303
+ <th scrop="col">Column 5</th>
304
+ <th scrop="col">Column 6</th>
305
+ <th scrop="col">Column 7</th>
306
+ <th scrop="col">Column 8</th>
307
+ <th scrop="col">Column 9</th>
308
+ <th scrop="col">Column 10</th>
309
+ <th scrop="col">Column 11</th>
310
+ <th scrop="col">Column 12</th>
311
+ </tr>
312
+ </thead>
313
+ <tbody>
314
+ <tr>
315
+ <td>Row 1, Column 1</td>
316
+ <td>Row 1, Column 2</td>
317
+ <td>Row 1, Column 3</td>
318
+ <td>Row 1, Column 4</td>
319
+ <td>Row 1, Column 5</td>
320
+ <td>Row 1, Column 6</td>
321
+ <td>Row 1, Column 7</td>
322
+ <td>Row 1, Column 8</td>
323
+ <td>Row 1, Column 9</td>
324
+ <td>Row 1, Column 10</td>
325
+ <td>Row 1, Column 11</td>
326
+ <td>Row 1, Column 12</td>
327
+ </tr>
328
+ <tr>
329
+ <td>Row 2, Column 1</td>
330
+ <td>Row 2, Column 2</td>
331
+ <td>Row 2, Column 3</td>
332
+ <td>Row 2, Column 4</td>
333
+ <td>Row 2, Column 5</td>
334
+ <td>Row 2, Column 6</td>
335
+ <td>Row 2, Column 7</td>
336
+ <td>Row 2, Column 8</td>
337
+ <td>Row 2, Column 9</td>
338
+ <td>Row 2, Column 10</td>
339
+ <td>Row 2, Column 11</td>
340
+ <td>Row 2, Column 12</td>
341
+ </tr>
342
+ <tr>
343
+ <td class="tertiary">Row 3, Column 1</td>
344
+ <td>Row 3, Column 2</td>
345
+ <td class="tertiary highlight">Row 3, Column 3</td>
346
+ <td>Row 3, Column 4</td>
347
+ <td class="tertiary">Row 3, Column 5</td>
348
+ <td>Row 3, Column 6</td>
349
+ <td class="tertiary">Row 3, Column 7</td>
350
+ <td>Row 3, Column 8</td>
351
+ <td class="tertiary">Row 3, Column 9</td>
352
+ <td>Row 3, Column 10</td>
353
+ <td class="tertiary">Row 3, Column 11</td>
354
+ <td>Row 3, Column 12</td>
355
+ </tr>
356
+ </tbody>
357
+ </table>
358
+ </div>
99
359
  </main>
100
360
  </body>
361
+
101
362
  </html>
package/package.json CHANGED
@@ -1,8 +1,19 @@
1
1
  {
2
2
  "name": "@graupl/graupl",
3
- "version": "1.0.0-alpha.1",
3
+ "version": "1.0.0-alpha.11",
4
4
  "description": "A modular and modern CSS framework.",
5
5
  "type": "module",
6
+ "exports": {
7
+ ".": {
8
+ "sass": "./scss/graupl.scss"
9
+ },
10
+ "./*.scss": {
11
+ "sass": "./scss/*.scss"
12
+ },
13
+ "./src/*.scss": {
14
+ "sass": "./src/scss/*.scss"
15
+ }
16
+ },
6
17
  "scripts": {
7
18
  "prepare": "husky install",
8
19
  "commit": "git cz",
@@ -10,9 +21,10 @@
10
21
  "prettier": "prettier '**/*.{js,mjs,cjs,scss,sass}'",
11
22
  "stylelint": "stylelint '**/*.scss' --allow-empty-input",
12
23
  "lint": "npm run eslint -- --fix && npm run stylelint -- --fix && npm run prettier -- --write",
13
- "sass": "sass scss:dist",
24
+ "sass": "rm -rf dist && sass scss:dist",
14
25
  "postcss": "postcss 'dist/**/*.css' --replace",
15
26
  "build": "npm run sass && npm run postcss",
27
+ "postbuild": "npm run docs:build",
16
28
  "release": "git add dist/. && standard-version -a",
17
29
  "prerelease": "npm run lint && npm run build",
18
30
  "docs:dev": "vitepress dev docs",
@@ -35,7 +47,7 @@
35
47
  "@eslint/js": "^9.0.0",
36
48
  "autoprefixer": "^10.4.19",
37
49
  "commitizen": "^4.3.0",
38
- "cssnano": "^6.1.2",
50
+ "cssnano": "^7.0.1",
39
51
  "cz-conventional-changelog": "^3.3.0",
40
52
  "eslint": "^8.57.0",
41
53
  "eslint-config-prettier": "^9.1.0",
@@ -46,7 +58,7 @@
46
58
  "lint-staged": "^15.2.2",
47
59
  "postcss": "^8.4.38",
48
60
  "postcss-cli": "^11.0.0",
49
- "postcss-discard-comments": "^6.0.2",
61
+ "postcss-discard-comments": "^7.0.0",
50
62
  "prettier": "^3.2.5",
51
63
  "sass": "^1.69.5",
52
64
  "standard-version": "^9.5.0",
package/postcss.config.cjs CHANGED
@@ -4,7 +4,7 @@ const config = {
4
4
  require("autoprefixer"),
5
5
  // @todo: add cssnano when ready
6
6
  // Waiting on upstream issue for postcss-calc: https://github.com/postcss/postcss-calc/issues/77
7
- // require("cssnano"),
7
+ require("cssnano"),
8
8
  require("postcss-discard-comments"),
9
9
  ],
10
10
  };
package/scss/base/form.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl form base styles.
2
+
3
+ @forward "../../src/scss/base/form";
package/scss/base/link.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Link base styles.
2
+
3
+ @forward "../../src/scss/base/link";
package/scss/base/table.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Table base styles.
2
+
3
+ @forward "../../src/scss/base/table";
package/scss/base.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl base.
2
+
3
+ @forward "../src/scss/base";
package/scss/component/button.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl Button Component.
2
+
3
+ @forward "../../src/scss/component/button";
package/scss/component/input-group.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl Input group Component.
2
+
3
+ @forward "../../src/scss/component/input-group";
package/scss/component/table.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Table component styles.
2
+
3
+ @forward "../../src/scss/component/table";
package/scss/component.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl components.
2
+
3
+ @forward "../src/scss/component";
package/scss/graupl.scss CHANGED
@@ -2,8 +2,4 @@
2
2
  //
3
3
  // Forwards all components for easy development.
4
4
 
5
- @forward "base";
6
- @forward "layout";
7
- @forward "component";
8
- @forward "state";
9
- @forward "theme";
5
+ @forward "../src/scss";
package/scss/layout/columns.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl Columns layout.
2
+
3
+ @forward "../../src/scss/layout/columns";
package/scss/layout/container.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl Container layout.
2
+
3
+ @forward "../../src/scss/layout/container";
package/scss/layout.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl layout.
2
+
3
+ @forward "../src/scss/";
package/scss/state/focus.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Focus state styles.
2
+
3
+ @forward "../../src/scss/state/focus";
package/scss/state.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl state.
2
+
3
+ @forward "../src/scss/state";
package/scss/theme/color.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Color theme styles.
2
+
3
+ @forward "../../src/scss/theme/color";
package/scss/theme/typography.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Typography theme styles.
2
+
3
+ @forward "../../src/scss/theme/typography";
package/scss/theme.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl theme.
2
+
3
+ @forward "../src/scss/theme";
package/scss/utilities/alignment.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl alignment utilities.
2
+
3
+ @forward "../../src/scss/utilities/alignment";
package/scss/utilities/color.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl color utilities.
2
+
3
+ @forward "../../src/scss/utilities/color";
package/scss/utilities/display.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl display utilities.
2
+
3
+ @forward "../../src/scss/utilities/display";
package/scss/utilities/flex.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl flex utilities.
2
+
3
+ @forward "../../src/scss/utilities/flex";
package/scss/utilities/inset.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl inset utilities.
2
+
3
+ @forward "../../src/scss/utilities/inset";
package/scss/utilities/justification.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl justification utilities.
2
+
3
+ @forward "../../src/scss/utilities/justification";
package/scss/utilities/list.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl list utilities.
2
+
3
+ @forward "../../src/scss/utilities/list";
package/scss/utilities/postion.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl position utilities.
2
+
3
+ @forward "../../src/scss/utilities/position";
package/scss/utilities/spacing.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl spacing utilities.
2
+
3
+ @forward "../../src/scss/utilities/spacing";
package/scss/utilities/typography.scss ADDED
@@ -0,0 +1,3 @@
1
+ // Graupl typography utilities.
2
+
3
+ @forward "../../src/scss/utilities/typography";