@graupl/graupl 1.0.0-beta.4 → 1.0.0-beta.41

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 (475) hide show
  1. package/LICENSE +674 -0
  2. package/README.md +9 -0
  3. package/dist/css/base/button.css +2 -2
  4. package/dist/css/base/button.css.map +1 -1
  5. package/dist/css/base/form.css +2 -2
  6. package/dist/css/base/form.css.map +1 -1
  7. package/dist/css/base/link.css +2 -2
  8. package/dist/css/base/link.css.map +1 -1
  9. package/dist/css/base/table.css +2 -2
  10. package/dist/css/base/table.css.map +1 -1
  11. package/dist/css/base.css +2 -2
  12. package/dist/css/base.css.map +1 -1
  13. package/dist/css/component/accordion.css +2 -2
  14. package/dist/css/component/accordion.css.map +1 -1
  15. package/dist/css/component/alert.css +2 -2
  16. package/dist/css/component/alert.css.map +1 -1
  17. package/dist/css/component/badge.css +2 -0
  18. package/dist/css/component/badge.css.map +1 -0
  19. package/dist/css/component/breadcrumb.css +2 -0
  20. package/dist/css/component/breadcrumb.css.map +1 -0
  21. package/dist/css/component/card.css +2 -2
  22. package/dist/css/component/card.css.map +1 -1
  23. package/dist/css/component/carousel.css +2 -2
  24. package/dist/css/component/carousel.css.map +1 -1
  25. package/dist/css/component/disclosure.css +2 -0
  26. package/dist/css/component/disclosure.css.map +1 -0
  27. package/dist/css/component/input-group.css +2 -2
  28. package/dist/css/component/input-group.css.map +1 -1
  29. package/dist/css/component/list.css +2 -2
  30. package/dist/css/component/list.css.map +1 -1
  31. package/dist/css/component/menu.css +2 -2
  32. package/dist/css/component/menu.css.map +1 -1
  33. package/dist/css/component/navigation.css +2 -2
  34. package/dist/css/component/navigation.css.map +1 -1
  35. package/dist/css/component/tabs.css +2 -0
  36. package/dist/css/component/tabs.css.map +1 -0
  37. package/dist/css/component.css +2 -2
  38. package/dist/css/component.css.map +1 -1
  39. package/dist/css/graupl.css +2 -2
  40. package/dist/css/graupl.css.map +1 -1
  41. package/dist/css/init.css +2 -2
  42. package/dist/css/init.css.map +1 -1
  43. package/dist/css/layout/columns.css +2 -2
  44. package/dist/css/layout/columns.css.map +1 -1
  45. package/dist/css/layout/container.css +2 -2
  46. package/dist/css/layout/container.css.map +1 -1
  47. package/dist/css/layout/flex-columns.css +2 -2
  48. package/dist/css/layout/flex-columns.css.map +1 -1
  49. package/dist/css/layout.css +2 -2
  50. package/dist/css/layout.css.map +1 -1
  51. package/dist/css/normalize.css +2 -2
  52. package/dist/css/normalize.css.map +1 -1
  53. package/dist/css/state/focus.css +2 -2
  54. package/dist/css/state/focus.css.map +1 -1
  55. package/dist/css/state.css +2 -2
  56. package/dist/css/state.css.map +1 -1
  57. package/dist/css/theme/color.css +2 -2
  58. package/dist/css/theme/color.css.map +1 -1
  59. package/dist/css/theme/typography.css +2 -2
  60. package/dist/css/theme/typography.css.map +1 -1
  61. package/dist/css/theme.css +2 -2
  62. package/dist/css/theme.css.map +1 -1
  63. package/dist/css/utilities/alignment.css +1 -1
  64. package/dist/css/utilities/alignment.css.map +1 -1
  65. package/dist/css/utilities/background.css +2 -2
  66. package/dist/css/utilities/background.css.map +1 -1
  67. package/dist/css/utilities/border.css +2 -2
  68. package/dist/css/utilities/border.css.map +1 -1
  69. package/dist/css/utilities/color.css +2 -2
  70. package/dist/css/utilities/color.css.map +1 -1
  71. package/dist/css/utilities/container.css +2 -0
  72. package/dist/css/utilities/container.css.map +1 -0
  73. package/dist/css/utilities/display.css +2 -2
  74. package/dist/css/utilities/display.css.map +1 -1
  75. package/dist/css/utilities/flex.css +2 -2
  76. package/dist/css/utilities/flex.css.map +1 -1
  77. package/dist/css/utilities/gradient.css +2 -2
  78. package/dist/css/utilities/gradient.css.map +1 -1
  79. package/dist/css/utilities/height.css +2 -2
  80. package/dist/css/utilities/height.css.map +1 -1
  81. package/dist/css/utilities/inset.css +2 -2
  82. package/dist/css/utilities/inset.css.map +1 -1
  83. package/dist/css/utilities/isolation.css +2 -0
  84. package/dist/css/utilities/isolation.css.map +1 -0
  85. package/dist/css/utilities/justification.css +1 -1
  86. package/dist/css/utilities/justification.css.map +1 -1
  87. package/dist/css/utilities/list.css +1 -1
  88. package/dist/css/utilities/list.css.map +1 -1
  89. package/dist/css/utilities/object.css +2 -0
  90. package/dist/css/utilities/object.css.map +1 -0
  91. package/dist/css/utilities/order.css +2 -2
  92. package/dist/css/utilities/order.css.map +1 -1
  93. package/dist/css/utilities/position.css +2 -0
  94. package/dist/css/utilities/position.css.map +1 -0
  95. package/dist/css/utilities/ratio.css +2 -2
  96. package/dist/css/utilities/ratio.css.map +1 -1
  97. package/dist/css/utilities/spacing.css +2 -2
  98. package/dist/css/utilities/spacing.css.map +1 -1
  99. package/dist/css/utilities/typography.css +2 -2
  100. package/dist/css/utilities/typography.css.map +1 -1
  101. package/dist/css/utilities/visibility.css +2 -2
  102. package/dist/css/utilities/visibility.css.map +1 -1
  103. package/dist/css/utilities/visually-hidden.css +2 -0
  104. package/dist/css/utilities/visually-hidden.css.map +1 -0
  105. package/dist/css/utilities/width.css +2 -2
  106. package/dist/css/utilities/width.css.map +1 -1
  107. package/dist/css/utilities/z-index.css +2 -0
  108. package/dist/css/utilities/z-index.css.map +1 -0
  109. package/dist/css/utilities.css +2 -2
  110. package/dist/css/utilities.css.map +1 -1
  111. package/dist/js/accordion.js +5 -0
  112. package/dist/js/accordion.js.map +1 -0
  113. package/dist/js/alert.js +5 -0
  114. package/dist/js/alert.js.map +1 -0
  115. package/dist/js/breadcrumb.js +5 -0
  116. package/dist/js/breadcrumb.js.map +1 -0
  117. package/dist/js/carousel.js +5 -0
  118. package/dist/js/carousel.js.map +1 -0
  119. package/dist/js/component/accordion.cjs.js +5 -3
  120. package/dist/js/component/accordion.cjs.js.map +1 -0
  121. package/dist/js/component/accordion.es.js +5 -0
  122. package/dist/js/component/accordion.es.js.map +1 -0
  123. package/dist/js/component/accordion.iife.js +5 -3
  124. package/dist/js/component/accordion.iife.js.map +1 -0
  125. package/dist/js/component/alert.cjs.js +5 -3
  126. package/dist/js/component/alert.cjs.js.map +1 -0
  127. package/dist/js/component/alert.es.js +5 -0
  128. package/dist/js/component/alert.es.js.map +1 -0
  129. package/dist/js/component/alert.iife.js +5 -3
  130. package/dist/js/component/alert.iife.js.map +1 -0
  131. package/dist/js/component/breadcrumb.cjs.js +5 -0
  132. package/dist/js/component/breadcrumb.cjs.js.map +1 -0
  133. package/dist/js/component/breadcrumb.es.js +5 -0
  134. package/dist/js/component/breadcrumb.es.js.map +1 -0
  135. package/dist/js/component/breadcrumb.iife.js +5 -0
  136. package/dist/js/component/breadcrumb.iife.js.map +1 -0
  137. package/dist/js/component/carousel.cjs.js +5 -3
  138. package/dist/js/component/carousel.cjs.js.map +1 -0
  139. package/dist/js/component/carousel.es.js +5 -0
  140. package/dist/js/component/carousel.es.js.map +1 -0
  141. package/dist/js/component/carousel.iife.js +5 -3
  142. package/dist/js/component/carousel.iife.js.map +1 -0
  143. package/dist/js/component/disclosure.cjs.js +5 -0
  144. package/dist/js/component/disclosure.cjs.js.map +1 -0
  145. package/dist/js/component/disclosure.es.js +5 -0
  146. package/dist/js/component/disclosure.es.js.map +1 -0
  147. package/dist/js/component/disclosure.iife.js +5 -0
  148. package/dist/js/component/disclosure.iife.js.map +1 -0
  149. package/dist/js/component/tabs.cjs.js +5 -0
  150. package/dist/js/component/tabs.cjs.js.map +1 -0
  151. package/dist/js/component/tabs.es.js +5 -0
  152. package/dist/js/component/tabs.es.js.map +1 -0
  153. package/dist/js/component/tabs.iife.js +5 -0
  154. package/dist/js/component/tabs.iife.js.map +1 -0
  155. package/dist/js/disclosure.js +5 -0
  156. package/dist/js/disclosure.js.map +1 -0
  157. package/dist/js/generator/accordion.cjs.js +5 -0
  158. package/dist/js/generator/accordion.cjs.js.map +1 -0
  159. package/dist/js/generator/accordion.es.js +5 -0
  160. package/dist/js/generator/accordion.es.js.map +1 -0
  161. package/dist/js/generator/accordion.iife.js +5 -0
  162. package/dist/js/generator/accordion.iife.js.map +1 -0
  163. package/dist/js/generator/alert.cjs.js +5 -0
  164. package/dist/js/generator/alert.cjs.js.map +1 -0
  165. package/dist/js/generator/alert.es.js +5 -0
  166. package/dist/js/generator/alert.es.js.map +1 -0
  167. package/dist/js/generator/alert.iife.js +5 -0
  168. package/dist/js/generator/alert.iife.js.map +1 -0
  169. package/dist/js/generator/breadcrumb.cjs.js +5 -0
  170. package/dist/js/generator/breadcrumb.cjs.js.map +1 -0
  171. package/dist/js/generator/breadcrumb.es.js +5 -0
  172. package/dist/js/generator/breadcrumb.es.js.map +1 -0
  173. package/dist/js/generator/breadcrumb.iife.js +5 -0
  174. package/dist/js/generator/breadcrumb.iife.js.map +1 -0
  175. package/dist/js/generator/carousel.cjs.js +5 -0
  176. package/dist/js/generator/carousel.cjs.js.map +1 -0
  177. package/dist/js/generator/carousel.es.js +5 -0
  178. package/dist/js/generator/carousel.es.js.map +1 -0
  179. package/dist/js/generator/carousel.iife.js +5 -0
  180. package/dist/js/generator/carousel.iife.js.map +1 -0
  181. package/dist/js/generator/disclosure.cjs.js +5 -0
  182. package/dist/js/generator/disclosure.cjs.js.map +1 -0
  183. package/dist/js/generator/disclosure.es.js +5 -0
  184. package/dist/js/generator/disclosure.es.js.map +1 -0
  185. package/dist/js/generator/disclosure.iife.js +5 -0
  186. package/dist/js/generator/disclosure.iife.js.map +1 -0
  187. package/dist/js/generator/navigation.cjs.js +3 -0
  188. package/dist/js/generator/navigation.cjs.js.map +1 -0
  189. package/dist/js/generator/navigation.es.js +3 -0
  190. package/dist/js/generator/navigation.es.js.map +1 -0
  191. package/dist/js/generator/navigation.iife.js +3 -0
  192. package/dist/js/generator/navigation.iife.js.map +1 -0
  193. package/dist/js/generator/tabs.cjs.js +5 -0
  194. package/dist/js/generator/tabs.cjs.js.map +1 -0
  195. package/dist/js/generator/tabs.es.js +5 -0
  196. package/dist/js/generator/tabs.es.js.map +1 -0
  197. package/dist/js/generator/tabs.iife.js +5 -0
  198. package/dist/js/generator/tabs.iife.js.map +1 -0
  199. package/dist/js/graupl.js +5 -0
  200. package/dist/js/graupl.js.map +1 -0
  201. package/dist/js/navigation.js +3 -0
  202. package/dist/js/navigation.js.map +1 -0
  203. package/dist/js/storage/initializer.js +3 -0
  204. package/dist/js/storage/initializer.js.map +1 -0
  205. package/dist/js/storage/storage-manager.cjs.js +3 -0
  206. package/dist/js/storage/storage-manager.cjs.js.map +1 -0
  207. package/dist/js/storage/storage-manager.es.js +3 -0
  208. package/dist/js/storage/storage-manager.es.js.map +1 -0
  209. package/dist/js/storage/storage-manager.iife.js +3 -0
  210. package/dist/js/storage/storage-manager.iife.js.map +1 -0
  211. package/dist/js/tabs.js +5 -0
  212. package/dist/js/tabs.js.map +1 -0
  213. package/package.json +59 -49
  214. package/scss/base/button.scss +1 -1
  215. package/scss/base/form.scss +1 -1
  216. package/scss/base/link.scss +1 -1
  217. package/scss/base/table.scss +1 -1
  218. package/scss/base.scss +1 -1
  219. package/scss/component/accordion.scss +1 -1
  220. package/scss/component/alert.scss +1 -1
  221. package/scss/component/badge.scss +3 -0
  222. package/scss/component/breadcrumb.scss +3 -0
  223. package/scss/component/card.scss +1 -1
  224. package/scss/component/carousel.scss +1 -1
  225. package/scss/component/disclosure.scss +3 -0
  226. package/scss/component/input-group.scss +1 -1
  227. package/scss/component/list.scss +1 -1
  228. package/scss/component/menu.scss +1 -1
  229. package/scss/component/navigation.scss +1 -1
  230. package/scss/component/tabs.scss +3 -0
  231. package/scss/component.scss +1 -1
  232. package/scss/graupl.scss +1 -1
  233. package/scss/init.scss +1 -1
  234. package/scss/layout/columns.scss +1 -1
  235. package/scss/layout/container.scss +1 -1
  236. package/scss/layout/flex-columns.scss +1 -1
  237. package/scss/layout.scss +1 -1
  238. package/scss/normalize.scss +1 -1
  239. package/scss/state/focus.scss +1 -1
  240. package/scss/state.scss +1 -1
  241. package/scss/theme/color.scss +1 -1
  242. package/scss/theme/typography.scss +1 -1
  243. package/scss/theme.scss +1 -1
  244. package/scss/utilities/alignment.scss +1 -1
  245. package/scss/utilities/background.scss +1 -1
  246. package/scss/utilities/border.scss +1 -1
  247. package/scss/utilities/color.scss +1 -1
  248. package/scss/utilities/container.scss +3 -0
  249. package/scss/utilities/display.scss +1 -1
  250. package/scss/utilities/flex.scss +1 -1
  251. package/scss/utilities/gradient.scss +1 -1
  252. package/scss/utilities/height.scss +1 -1
  253. package/scss/utilities/inset.scss +1 -1
  254. package/scss/utilities/isolation.scss +3 -0
  255. package/scss/utilities/justification.scss +1 -1
  256. package/scss/utilities/list.scss +1 -1
  257. package/scss/utilities/object.scss +3 -0
  258. package/scss/utilities/order.scss +1 -1
  259. package/scss/utilities/position.scss +3 -0
  260. package/scss/utilities/ratio.scss +1 -1
  261. package/scss/utilities/spacing.scss +1 -1
  262. package/scss/utilities/typography.scss +1 -1
  263. package/scss/utilities/visibility.scss +1 -1
  264. package/scss/utilities/visually-hidden.scss +3 -0
  265. package/scss/utilities/width.scss +1 -1
  266. package/scss/utilities/z-index.scss +3 -0
  267. package/scss/utilities.scss +1 -1
  268. package/.browserslistrc +0 -3
  269. package/.czrc +0 -3
  270. package/.editorconfig +0 -13
  271. package/.github/CODE_OF_CONDUCT.md +0 -73
  272. package/.github/COMMIT_CONVENTION.md +0 -17
  273. package/.github/CONTRIBUTING.md +0 -86
  274. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -30
  275. package/.github/ISSUE_TEMPLATE/documentation.md +0 -20
  276. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  277. package/.github/SECURITY.md +0 -26
  278. package/.github/dependabot.yml +0 -17
  279. package/.github/pull_request_template.md +0 -5
  280. package/.github/workflows/codeql-analysis.yml +0 -71
  281. package/.github/workflows/docs.yml +0 -59
  282. package/.github/workflows/test.yml +0 -27
  283. package/.husky/commit-msg +0 -3
  284. package/.husky/pre-commit +0 -4
  285. package/.prettierignore +0 -12
  286. package/.stylelintignore +0 -9
  287. package/.versionrc.cjs +0 -61
  288. package/CHANGELOG.md +0 -430
  289. package/build.js +0 -7
  290. package/combine-at-rules.cjs +0 -61
  291. package/commitlint.config.js +0 -5
  292. package/dist/css/utilities/postion.css +0 -2
  293. package/dist/css/utilities/postion.css.map +0 -1
  294. package/dist/js/component/accordion.esm.js +0 -1289
  295. package/dist/js/component/alert.esm.js +0 -529
  296. package/dist/js/component/carousel.esm.js +0 -1110
  297. package/dist/js/graupl.cjs.js +0 -5
  298. package/dist/js/graupl.esm.js +0 -1462
  299. package/dist/js/graupl.iife.js +0 -5
  300. package/docs/.vitepress/config.js +0 -78
  301. package/docs/.vitepress/theme/custom.scss +0 -35
  302. package/docs/.vitepress/theme/index.js +0 -4
  303. package/docs/compiling-graupl.md +0 -56
  304. package/docs/components/alert.md +0 -130
  305. package/docs/components/button.md +0 -84
  306. package/docs/components/card.md +0 -369
  307. package/docs/components/index.md +0 -1
  308. package/docs/components/inputgroup.md +0 -159
  309. package/docs/components/menu.md +0 -326
  310. package/docs/components/navigation.md +0 -158
  311. package/docs/content.md +0 -237
  312. package/docs/defaults.md +0 -121
  313. package/docs/forms.md +0 -79
  314. package/docs/functions.md +0 -9
  315. package/docs/getting-started.md +0 -1
  316. package/docs/index.md +0 -1
  317. package/docs/introduction.md +0 -25
  318. package/docs/layout.md +0 -200
  319. package/docs/mixins.md +0 -47
  320. package/docs/state.md +0 -67
  321. package/docs/theme.md +0 -258
  322. package/docs/utilities.md +0 -357
  323. package/eslint.config.js +0 -74
  324. package/index.html +0 -923
  325. package/index.js +0 -12
  326. package/lint-staged.config.js +0 -6
  327. package/postcss.config.cjs +0 -11
  328. package/prettier.config.js +0 -16
  329. package/scss/utilities/postion.scss +0 -3
  330. package/src/js/accordion/Accordion.js +0 -1163
  331. package/src/js/accordion/AccordionItem.js +0 -496
  332. package/src/js/accordion/index.js +0 -10
  333. package/src/js/alert/Alert.js +0 -581
  334. package/src/js/alert/index.js +0 -11
  335. package/src/js/carousel/Carousel.js +0 -1427
  336. package/src/js/carousel/index.js +0 -10
  337. package/src/js/domHelpers.js +0 -37
  338. package/src/js/eventHandlers.js +0 -39
  339. package/src/js/navigation/index.js +0 -36
  340. package/src/js/storage.js +0 -106
  341. package/src/js/validate.js +0 -225
  342. package/src/scss/_defaults.scss +0 -152
  343. package/src/scss/_index.scss +0 -15
  344. package/src/scss/_init.scss +0 -6
  345. package/src/scss/_normalize.scss +0 -197
  346. package/src/scss/_variables.scss +0 -53
  347. package/src/scss/base/_index.scss +0 -6
  348. package/src/scss/base/button/_defaults.scss +0 -60
  349. package/src/scss/base/button/_index.scss +0 -107
  350. package/src/scss/base/button/_mixins.scss +0 -166
  351. package/src/scss/base/button/_variables.scss +0 -176
  352. package/src/scss/base/form/_defaults.scss +0 -17
  353. package/src/scss/base/form/_index.scss +0 -93
  354. package/src/scss/base/form/_variables.scss +0 -153
  355. package/src/scss/base/link/_defaults.scss +0 -50
  356. package/src/scss/base/link/_index.scss +0 -134
  357. package/src/scss/base/link/_variables.scss +0 -262
  358. package/src/scss/base/table/_defaults.scss +0 -53
  359. package/src/scss/base/table/_index.scss +0 -121
  360. package/src/scss/base/table/_variables.scss +0 -135
  361. package/src/scss/component/_index.scss +0 -10
  362. package/src/scss/component/accordion/_defaults.scss +0 -40
  363. package/src/scss/component/accordion/_index.scss +0 -180
  364. package/src/scss/component/accordion/_variables.scss +0 -316
  365. package/src/scss/component/alert/_defaults.scss +0 -49
  366. package/src/scss/component/alert/_index.scss +0 -118
  367. package/src/scss/component/alert/_variables.scss +0 -170
  368. package/src/scss/component/card/_defaults.scss +0 -32
  369. package/src/scss/component/card/_index.scss +0 -178
  370. package/src/scss/component/card/_variables.scss +0 -186
  371. package/src/scss/component/carousel/_defaults.scss +0 -43
  372. package/src/scss/component/carousel/_index.scss +0 -188
  373. package/src/scss/component/carousel/_variables.scss +0 -104
  374. package/src/scss/component/input-group/_defaults.scss +0 -30
  375. package/src/scss/component/input-group/_index.scss +0 -47
  376. package/src/scss/component/input-group/_variables.scss +0 -66
  377. package/src/scss/component/list/_defaults.scss +0 -15
  378. package/src/scss/component/list/_index.scss +0 -50
  379. package/src/scss/component/list/_variables.scss +0 -176
  380. package/src/scss/component/menu/_defaults.scss +0 -66
  381. package/src/scss/component/menu/_index.scss +0 -305
  382. package/src/scss/component/menu/_variables.scss +0 -500
  383. package/src/scss/component/navigation/_defaults.scss +0 -29
  384. package/src/scss/component/navigation/_index.scss +0 -189
  385. package/src/scss/component/navigation/_variables.scss +0 -237
  386. package/src/scss/functions/_important.scss +0 -13
  387. package/src/scss/functions/_screen.scss +0 -38
  388. package/src/scss/functions/_theme.scss +0 -39
  389. package/src/scss/functions/_utility.scss +0 -28
  390. package/src/scss/layout/_index.scss +0 -5
  391. package/src/scss/layout/columns/_defaults.scss +0 -24
  392. package/src/scss/layout/columns/_index.scss +0 -58
  393. package/src/scss/layout/columns/_variables.scss +0 -51
  394. package/src/scss/layout/container/_defaults.scss +0 -23
  395. package/src/scss/layout/container/_index.scss +0 -43
  396. package/src/scss/layout/container/_variables.scss +0 -50
  397. package/src/scss/layout/flex-columns/_defaults.scss +0 -24
  398. package/src/scss/layout/flex-columns/_index.scss +0 -78
  399. package/src/scss/layout/flex-columns/_variables.scss +0 -26
  400. package/src/scss/mixins/_animation.scss +0 -15
  401. package/src/scss/mixins/_layer.scss +0 -16
  402. package/src/scss/mixins/_screen.scss +0 -77
  403. package/src/scss/mixins/_state.scss +0 -18
  404. package/src/scss/mixins/_theme.scss +0 -15
  405. package/src/scss/mixins/_utility.scss +0 -138
  406. package/src/scss/mixins/_visually-hidden.scss +0 -20
  407. package/src/scss/state/_index.scss +0 -3
  408. package/src/scss/state/focus/_defaults.scss +0 -10
  409. package/src/scss/state/focus/_index.scss +0 -13
  410. package/src/scss/state/focus/_mixins.scss +0 -15
  411. package/src/scss/state/focus/_variables.scss +0 -44
  412. package/src/scss/theme/_index.scss +0 -4
  413. package/src/scss/theme/color/_defaults.scss +0 -143
  414. package/src/scss/theme/color/_index.scss +0 -42
  415. package/src/scss/theme/color/_variables.scss +0 -129
  416. package/src/scss/theme/typography/_defaults.scss +0 -54
  417. package/src/scss/theme/typography/_index.scss +0 -111
  418. package/src/scss/theme/typography/_variables.scss +0 -231
  419. package/src/scss/utilities/_index.scss +0 -20
  420. package/src/scss/utilities/alignment/_defaults.scss +0 -64
  421. package/src/scss/utilities/alignment/_index.scss +0 -168
  422. package/src/scss/utilities/alignment/_variables.scss +0 -6
  423. package/src/scss/utilities/background/_defaults.scss +0 -145
  424. package/src/scss/utilities/background/_index.scss +0 -340
  425. package/src/scss/utilities/background/_variables.scss +0 -6
  426. package/src/scss/utilities/border/_defaults.scss +0 -61
  427. package/src/scss/utilities/border/_index.scss +0 -269
  428. package/src/scss/utilities/border/_variables.scss +0 -6
  429. package/src/scss/utilities/color/_defaults.scss +0 -37
  430. package/src/scss/utilities/color/_index.scss +0 -202
  431. package/src/scss/utilities/color/_variables.scss +0 -6
  432. package/src/scss/utilities/display/_defaults.scss +0 -36
  433. package/src/scss/utilities/display/_index.scss +0 -134
  434. package/src/scss/utilities/display/_variables.scss +0 -6
  435. package/src/scss/utilities/flex/_defaults.scss +0 -87
  436. package/src/scss/utilities/flex/_index.scss +0 -255
  437. package/src/scss/utilities/flex/_variables.scss +0 -6
  438. package/src/scss/utilities/gradient/_defaults.scss +0 -58
  439. package/src/scss/utilities/gradient/_index.scss +0 -380
  440. package/src/scss/utilities/gradient/_variables.scss +0 -29
  441. package/src/scss/utilities/height/_defaults.scss +0 -43
  442. package/src/scss/utilities/height/_index.scss +0 -236
  443. package/src/scss/utilities/height/_variables.scss +0 -6
  444. package/src/scss/utilities/inset/_defaults.scss +0 -43
  445. package/src/scss/utilities/inset/_index.scss +0 -90
  446. package/src/scss/utilities/inset/_variables.scss +0 -6
  447. package/src/scss/utilities/justification/_defaults.scss +0 -61
  448. package/src/scss/utilities/justification/_index.scss +0 -168
  449. package/src/scss/utilities/justification/_variables.scss +0 -6
  450. package/src/scss/utilities/list/_defaults.scss +0 -41
  451. package/src/scss/utilities/list/_index.scss +0 -125
  452. package/src/scss/utilities/list/_variables.scss +0 -6
  453. package/src/scss/utilities/order/_defaults.scss +0 -24
  454. package/src/scss/utilities/order/_index.scss +0 -111
  455. package/src/scss/utilities/order/_variables.scss +0 -6
  456. package/src/scss/utilities/position/_defaults.scss +0 -28
  457. package/src/scss/utilities/position/_index.scss +0 -82
  458. package/src/scss/utilities/position/_variables.scss +0 -6
  459. package/src/scss/utilities/ratio/_defaults.scss +0 -30
  460. package/src/scss/utilities/ratio/_index.scss +0 -91
  461. package/src/scss/utilities/ratio/_variables.scss +0 -9
  462. package/src/scss/utilities/spacing/_defaults.scss +0 -51
  463. package/src/scss/utilities/spacing/_index.scss +0 -382
  464. package/src/scss/utilities/spacing/_variables.scss +0 -6
  465. package/src/scss/utilities/typography/_defaults.scss +0 -46
  466. package/src/scss/utilities/typography/_index.scss +0 -658
  467. package/src/scss/utilities/typography/_variables.scss +0 -6
  468. package/src/scss/utilities/visibility/_defaults.scss +0 -27
  469. package/src/scss/utilities/visibility/_index.scss +0 -82
  470. package/src/scss/utilities/visibility/_variables.scss +0 -6
  471. package/src/scss/utilities/width/_defaults.scss +0 -43
  472. package/src/scss/utilities/width/_index.scss +0 -236
  473. package/src/scss/utilities/width/_variables.scss +0 -6
  474. package/stylelint.config.js +0 -22
  475. package/vite.config.js +0 -57
package/index.html DELETED
@@ -1,923 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Document</title>
8
- <link rel="stylesheet" href="dist/css/graupl.css">
9
- </head>
10
-
11
- <body>
12
- <main class="container pb-10">
13
- <h1 class="gradient from-tertiary-600 to-primary-600 w-max-content bg-clip-text text-transparent">Hello Graupl!</h1>
14
- <p>Graupl is a modular CSS framework with the goal of making it easy to theme a site.</p>
15
- <p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
16
- <p>Graupl supports light and dark modes out-of-the-box.</p>
17
- <button id="dark-mode-toggle" class="button mt-5 w-half">Toggle dark mode</button>
18
- <div class="full-width container py-10 my-10 align-content-center">
19
- <h2>Buttons</h2>
20
- <p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.
21
- </p>
22
- <div class="columns count-4">
23
- <button class="button">Default Button</button>
24
- <button class="button primary">Primary Button</button>
25
- <button class="button secondary">Secondary Button</button>
26
- <button class="button tertiary">Tertiary Button</button>
27
- <button class="button link">Link Button</button>
28
- <a class="button" href="#">Anchor Button</a>
29
- <button class="button" disabled>Default Button</button>
30
- <button class="button primary" disabled>Primary Button</button>
31
- <button class="button secondary" disabled>Secondary Button</button>
32
- <button class="button tertiary" disabled>Tertiary Button</button>
33
- <button class="button link" disabled>Link Button</button>
34
- <a class="button" href="#" disabled>Anchor Button</a>
35
- </div>
36
- </div>
37
- <div class="full-width container py-10 my-10 align-content-center">
38
- <h2>Form elements</h2>
39
- <p>Graupl provides default styling for all form elements.</p>
40
- <form class="full-width rg-4">
41
- <div class="input-group">
42
- <label for="input">Input</label>
43
- <input type="text" placeholder="Input" id="input">
44
- <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
45
- </div>
46
- <div class="input-group inline"><label for="input-readonly">Readonly Input</label>
47
- <input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input" readonly>
48
- <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
49
- </div>
50
- <div class="input-group"><label for="input-disabled">Disabled Input</label>
51
- <input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
52
- <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
53
- </div>
54
- <div class="input-group inline"><label for="textarea">Textarea</label>
55
- <textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
56
- </div>
57
- <div class="input-group"><label for="textarea-readonly">Readonly Textarea</label>
58
- <textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly"
59
- readonly>Readonly Textarea</textarea>
60
- </div>
61
- <div class="input-group"><label for="textarea-disabled">Disabled Textarea</label>
62
- <textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
63
- </div>
64
- <div class="input-group inline"><label for="select">Select</label>
65
- <select id="select">
66
- <option value="1">Option 1</option>
67
- <option value="2">Option 2</option>
68
- <optgroup label="Group 1">
69
- <option value="3">Option 3</option>
70
- <option value="4">Option 4</option>
71
- <option value="5">Option 5</option>
72
- </optgroup>
73
- </select>
74
- </div>
75
- <div class="input-group"><label for="select-disabled">Disabled Select</label>
76
- <select id="select-disabled" disabled>
77
- <option value="1">Option 1</option>
78
- <option value="2">Option 2</option>
79
- <optgroup label="Group 1">
80
- <option value="3">Option 3</option>
81
- <option value="4">Option 4</option>
82
- <option value="5">Option 5</option>
83
- </optgroup>
84
- </select>
85
- </div>
86
- <div class="input-group"><label for="multi-select">Multi-select</label>
87
- <select id="multi-select" multiple>
88
- <option value="1">Option 1</option>
89
- <option value="2">Option 2</option>
90
- <optgroup label="Group 1">
91
- <option value="3">Option 3</option>
92
- <option value="4">Option 4</option>
93
- <option value="5">Option 5</option>
94
- </optgroup>
95
- </select>
96
- </div>
97
- <div class="input-group inline"><label for="multi-select-disabled">Disabled Multi-select</label>
98
- <select id="multi-select-disabled" multiple disabled>
99
- <option value="1">Option 1</option>
100
- <option value="2">Option 2</option>
101
- <optgroup label="Group 1">
102
- <option value="3">Option 3</option>
103
- <option value="4">Option 4</option>
104
- <option value="5">Option 5</option>
105
- </optgroup>
106
- </select>
107
- </div>
108
- <fieldset>
109
- <legend>Checkboxes</legend>
110
- <label for="checkbox">
111
- <input type="checkbox" id="checkbox"> Checkbox</label>
112
- <label for="checkbox-checked">
113
- <input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
114
- <label for="checkbox-disabled">
115
- <input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
116
- </fieldset>
117
- <fieldset>
118
- <legend>Radio Buttons</legend>
119
- <label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
120
- <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
121
- <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled
122
- Radio</label>
123
- </fieldset>
124
- <fieldset disabled>
125
- <legend>Disabled Fieldset</legend>
126
- <label for="disabled-fieldset-checkbox">
127
- <input type="checkbox" id="disabled-fieldset-checkbox"> Checkbox</label>
128
- </fieldset>
129
- <div class="input-group"><label for="range">Range</label>
130
- <input type="range" class="range" id="range">
131
- </div>
132
- </form>
133
- </div>
134
- <div class="full-width container py-10 my-10 align-content-center">
135
- <h2>Navigation</h2>
136
- <div class="py-7">
137
- <nav class="navigation" data-graupl-menu-type="DisclosureMenu"
138
- data-graupl-menu-options="{'optionalKeySupport': true}">
139
- <a class="navigation-branding" href="#">Graupl</a>
140
- <button class="navigation-toggle ml-auto mr-0" aria-label="Toggle navigation"></button>
141
- <ul class="menu">
142
- <li class="menu-item"><a class="menu-link" href="#">Home</a></li>
143
- <li class="menu-item submenu-item">
144
- <button class="menu-link button link submenu-toggle">About</button>
145
- <ul class="submenu">
146
- <li class="menu-item"><a class="menu-link" href="#">About Us</a></li>
147
- <li class="menu-item"><a class="menu-link" href="#">Our Team</a></li>
148
- <li class="menu-item"><a class="menu-link" href="#">Our Mission</a></li>
149
- </ul>
150
- </li>
151
- <li class="menu-item"><a class="menu-link" href="#">Blog</a></li>
152
- <li class="menu-item"><a class="menu-link" href="#">Portfolio</a></li>
153
- <li class="menu-item"><a class="menu-link button tertiary" href="#">Contact</a></li>
154
- </ul>
155
- </nav>
156
- </div>
157
- </div>
158
- <div class="full-width container py-10 my-10 align-content-center">
159
- <h2>Tables</h2>
160
- <p>Graupl provides some default styling for tables as well as some other useful features to customize them.</p>
161
- <table class="bordered striped-rows hoverable">
162
- <caption>
163
- Front-end web developer course 2021
164
- </caption>
165
- <thead>
166
- <tr>
167
- <th scope="col">Person</th>
168
- <th scope="col">Most interest in</th>
169
- <th scope="col">Age</th>
170
- </tr>
171
- </thead>
172
- <tbody>
173
- <tr>
174
- <th scope="row">Chris</th>
175
- <td>HTML tables</td>
176
- <td>22</td>
177
- </tr>
178
- <tr>
179
- <th scope="row">Dennis</th>
180
- <td>Web accessibility</td>
181
- <td>45</td>
182
- </tr>
183
- <tr>
184
- <th scope="row">Sarah</th>
185
- <td>JavaScript frameworks</td>
186
- <td>29</td>
187
- </tr>
188
- <tr>
189
- <th scope="row">Karen</th>
190
- <td>Web performance</td>
191
- <td>36</td>
192
- </tr>
193
- </tbody>
194
- <tfoot>
195
- <tr>
196
- <th scope="row" colspan="2">Average age</th>
197
- <td>33</td>
198
- </tr>
199
- </tfoot>
200
- </table>
201
- <table class="primary collapsed striped-columns hoverable">
202
- <caption>
203
- Front-end web developer course 2021
204
- </caption>
205
- <thead>
206
- <tr>
207
- <th scope="col">Person</th>
208
- <th scope="col">Most interest in</th>
209
- <th scope="col">Age</th>
210
- </tr>
211
- </thead>
212
- <tbody>
213
- <tr>
214
- <th scope="row">Chris</th>
215
- <td>HTML tables</td>
216
- <td>22</td>
217
- </tr>
218
- <tr>
219
- <th scope="row">Dennis</th>
220
- <td>Web accessibility</td>
221
- <td>45</td>
222
- </tr>
223
- <tr>
224
- <th scope="row">Sarah</th>
225
- <td>JavaScript frameworks</td>
226
- <td>29</td>
227
- </tr>
228
- <tr>
229
- <th scope="row">Karen</th>
230
- <td>Web performance</td>
231
- <td>36</td>
232
- </tr>
233
- </tbody>
234
- <tfoot>
235
- <tr>
236
- <th scope="row" colspan="2">Average age</th>
237
- <td>33</td>
238
- </tr>
239
- </tfoot>
240
- </table>
241
- <table class="secondary bordered striped-columns hoverable">
242
- <caption>
243
- Front-end web developer course 2021
244
- </caption>
245
- <thead>
246
- <tr>
247
- <th scope="col">Person</th>
248
- <th scope="col">Most interest in</th>
249
- <th scope="col">Age</th>
250
- </tr>
251
- </thead>
252
- <tbody>
253
- <tr>
254
- <th scope="row">Chris</th>
255
- <td>HTML tables</td>
256
- <td>22</td>
257
- </tr>
258
- <tr>
259
- <th scope="row">Dennis</th>
260
- <td>Web accessibility</td>
261
- <td>45</td>
262
- </tr>
263
- <tr>
264
- <th scope="row">Sarah</th>
265
- <td>JavaScript frameworks</td>
266
- <td>29</td>
267
- </tr>
268
- <tr>
269
- <th scope="row">Karen</th>
270
- <td>Web performance</td>
271
- <td>36</td>
272
- </tr>
273
- </tbody>
274
- <tfoot>
275
- <tr>
276
- <th scope="row" colspan="2">Average age</th>
277
- <td>33</td>
278
- </tr>
279
- </tfoot>
280
- </table>
281
- <table class="tertiary striped-columns hoverable">
282
- <caption>
283
- Front-end web developer course 2021
284
- </caption>
285
- <thead>
286
- <tr>
287
- <th scope="col">Person</th>
288
- <th scope="col">Most interest in</th>
289
- <th scope="col">Age</th>
290
- </tr>
291
- </thead>
292
- <tbody>
293
- <tr>
294
- <th scope="row">Chris</th>
295
- <td>HTML tables</td>
296
- <td>22</td>
297
- </tr>
298
- <tr>
299
- <th scope="row">Dennis</th>
300
- <td>Web accessibility</td>
301
- <td>45</td>
302
- </tr>
303
- <tr>
304
- <th scope="row">Sarah</th>
305
- <td>JavaScript frameworks</td>
306
- <td>29</td>
307
- </tr>
308
- <tr>
309
- <th scope="row">Karen</th>
310
- <td>Web performance</td>
311
- <td>36</td>
312
- </tr>
313
- </tbody>
314
- <tfoot>
315
- <tr>
316
- <th scope="row" colspan="2">Average age</th>
317
- <td>33</td>
318
- </tr>
319
- </tfoot>
320
- </table>
321
- <div class="responsive-table">
322
- <table class="striped-columns">
323
- <caption>
324
- A "responsive" table element. Resize the window to see the effect.
325
- </caption>
326
- <thead class="primary">
327
- <tr>
328
- <th scope="col">Column 1</th>
329
- <th scope="col">Column 2</th>
330
- <th scope="col">Column 3</th>
331
- <th scope="col">Column 4</th>
332
- <th scope="col">Column 5</th>
333
- <th scope="col">Column 6</th>
334
- <th scope="col">Column 7</th>
335
- <th scope="col">Column 8</th>
336
- <th scope="col">Column 9</th>
337
- <th scope="col">Column 10</th>
338
- <th scope="col">Column 11</th>
339
- <th scope="col">Column 12</th>
340
- </tr>
341
- </thead>
342
- <tbody>
343
- <tr>
344
- <td>Row 1, Column 1</td>
345
- <td>Row 1, Column 2</td>
346
- <td>Row 1, Column 3</td>
347
- <td>Row 1, Column 4</td>
348
- <td>Row 1, Column 5</td>
349
- <td>Row 1, Column 6</td>
350
- <td>Row 1, Column 7</td>
351
- <td>Row 1, Column 8</td>
352
- <td>Row 1, Column 9</td>
353
- <td>Row 1, Column 10</td>
354
- <td>Row 1, Column 11</td>
355
- <td>Row 1, Column 12</td>
356
- </tr>
357
- <tr>
358
- <td>Row 2, Column 1</td>
359
- <td>Row 2, Column 2</td>
360
- <td>Row 2, Column 3</td>
361
- <td>Row 2, Column 4</td>
362
- <td>Row 2, Column 5</td>
363
- <td>Row 2, Column 6</td>
364
- <td>Row 2, Column 7</td>
365
- <td>Row 2, Column 8</td>
366
- <td>Row 2, Column 9</td>
367
- <td>Row 2, Column 10</td>
368
- <td>Row 2, Column 11</td>
369
- <td>Row 2, Column 12</td>
370
- </tr>
371
- <tr>
372
- <td class="tertiary">Row 3, Column 1</td>
373
- <td>Row 3, Column 2</td>
374
- <td class="tertiary highlight">Row 3, Column 3</td>
375
- <td>Row 3, Column 4</td>
376
- <td class="tertiary">Row 3, Column 5</td>
377
- <td>Row 3, Column 6</td>
378
- <td class="tertiary">Row 3, Column 7</td>
379
- <td>Row 3, Column 8</td>
380
- <td class="tertiary">Row 3, Column 9</td>
381
- <td>Row 3, Column 10</td>
382
- <td class="tertiary">Row 3, Column 11</td>
383
- <td>Row 3, Column 12</td>
384
- </tr>
385
- </tbody>
386
- </table>
387
- </div>
388
- </div>
389
- <div class="full-width container py-10 my-10 align-content-center">
390
- <h2>Columns</h2>
391
- <div class="columns py-5">
392
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
393
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
394
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
395
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
396
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
397
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
398
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
399
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
400
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
401
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
402
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
403
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
404
- </div>
405
- </div>
406
- <div class="full-width container py-10 my-10 align-content-center">
407
- <h2>Flex columns</h2>
408
- <div class="flex-columns py-5">
409
- <div class="col-6 md:col-8 xl:col-9 py-7 bg-primary-700 text-primary-100 px-5">
410
- <div class="flex-columns">
411
- <div class="col-6 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
412
- <div class="col-6 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
413
- </div>
414
- </div>
415
- <div class="col-6 md:col-4 xl:col-3 py-7 bg-primary-700 text-primary-100 px-5"></div>
416
- <div class="col-12 py-7 bg-primary-700 text-primary-100 px-5">
417
- <div class="flex-columns">
418
- <div class="col-6 md:col-9 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
419
- <div class="col-6 md:col-3 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
420
- </div>
421
- </div>
422
- <div class="col-8 py-7 bg-primary-700 text-primary-100 px-5">
423
- <div class="flex-columns">
424
- <div class="col-3 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
425
- <div class="col-9 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
426
- </div>
427
- </div>
428
- <div class="col-4 py-7 bg-primary-700 text-primary-100 px-5"></div>
429
- </div>
430
- </div>
431
- <div class="full-width container py-10 my-10 align-content-center">
432
- <h2>Cards</h2>
433
- <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.top</span> class
434
- will have the image placed on the top while cards using the <span
435
- class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom</span> class will have the image
436
- placed on the bottom.</p>
437
- <div class="columns">
438
- <div class="card">
439
- <div class="card-image">
440
- <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
441
- </div>
442
- <div class="card-content">
443
- <div class="card-header">
444
- <h3 class="card-title">Title</h3>
445
- </div>
446
- <div class="card-body">
447
- <p>This is some text that describes the card.</p>
448
- </div>
449
- <div class="card-footer">
450
- <a class="button primary stretched" href="#">Card Action</a>
451
- </div>
452
- </div>
453
- </div>
454
- <div class="card">
455
- <div class="card-image">
456
- <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
457
- </div>
458
- <div class="card-content">
459
- <div class="card-header">
460
- <h3 class="card-title">Title</h3>
461
- </div>
462
- <div class="card-body">
463
- <p>This is some text that describes the card.</p>
464
- </div>
465
- <div class="card-footer">
466
- <a class="button primary stretched" href="#">Card Action</a>
467
- </div>
468
- </div>
469
- </div>
470
- <div class="card">
471
- <div class="card-image">
472
- <img src="https://picsum.photos/1000/400?random=3" alt="Card image">
473
- </div>
474
- <div class="card-content">
475
- <div class="card-header">
476
- <h3 class="card-title">Title</h3>
477
- </div>
478
- <div class="card-body">
479
- <p>This is some text that describes the card.</p>
480
- </div>
481
- <div class="card-footer">
482
- <a class="button primary stretched" href="#">Card Action</a>
483
- </div>
484
- </div>
485
- </div>
486
- <div class="card bottom">
487
- <div class="card-image">
488
- <img src="https://picsum.photos/1000/400?random=4" alt="Card image">
489
- </div>
490
- <div class="card-content">
491
- <div class="card-header">
492
- <h3 class="card-title">Title</h3>
493
- </div>
494
- <div class="card-body">
495
- <p>This is some text that describes the card.</p>
496
- </div>
497
- <div class="card-footer">
498
- <a class="button primary stretched" href="#">Card Action</a>
499
- </div>
500
- </div>
501
- </div>
502
- <div class="card bottom">
503
- <div class="card-image">
504
- <img src="https://picsum.photos/1000/400?random=5" alt="Card image">
505
- </div>
506
- <div class="card-content">
507
- <div class="card-header">
508
- <h3 class="card-title">Title</h3>
509
- </div>
510
- <div class="card-body">
511
- <p>This is some text that describes the card.</p>
512
- </div>
513
- <div class="card-footer">
514
- <a class="button primary stretched" href="#">Card Action</a>
515
- </div>
516
- </div>
517
- </div>
518
- <div class="card bottom">
519
- <div class="card-image">
520
- <img src="https://picsum.photos/1000/400?random=6" alt="Card image">
521
- </div>
522
- <div class="card-content">
523
- <div class="card-header">
524
- <h3 class="card-title">Title</h3>
525
- </div>
526
- <div class="card-body">
527
- <p>This is some text that describes the card.</p>
528
- </div>
529
- <div class="card-footer">
530
- <a class="button primary stretched" href="#">Card Action</a>
531
- </div>
532
- </div>
533
- </div>
534
- </div>
535
- </div>
536
- <div class="full-width container py-10 my-10 align-content-center">
537
- <h2>Horizontal Cards</h2>
538
- <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.right</span> class
539
- will have the image placed on the right while cards using the <span
540
- class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.left</span> class will have the image
541
- placed on the left.</p>
542
- <div class="columns count-2">
543
- <div class="card horizontal">
544
- <div class="card-image">
545
- <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
546
- </div>
547
- <div class="card-content">
548
- <div class="card-header">
549
- <h3 class="card-title">Title</h3>
550
- </div>
551
- <div class="card-body">
552
- <p>This is some text that describes the card.</p>
553
- </div>
554
- <div class="card-footer">
555
- <a class="button primary stretched" href="#">Card Action</a>
556
- </div>
557
- </div>
558
- </div>
559
- <div class="card horizontal right">
560
- <div class="card-image">
561
- <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
562
- </div>
563
- <div class="card-content">
564
- <div class="card-header">
565
- <h3 class="card-title">Title</h3>
566
- </div>
567
- <div class="card-body">
568
- <p>This is some text that describes the card.</p>
569
- </div>
570
- <div class="card-footer">
571
- <a class="button primary stretched" href="#">Card Action</a>
572
- </div>
573
- </div>
574
- </div>
575
- <div class="card horizontal">
576
- <div class="card-image">
577
- <img src="https://picsum.photos/1000/400?random=3" alt="Card image">
578
- </div>
579
- <div class="card-content">
580
- <div class="card-header">
581
- <h3 class="card-title">Title</h3>
582
- </div>
583
- <div class="card-body">
584
- <p>This is some text that describes the card.</p>
585
- </div>
586
- <div class="card-footer">
587
- <a class="button primary stretched" href="#">Card Action</a>
588
- </div>
589
- </div>
590
- </div>
591
- <div class="card horizontal right">
592
- <div class="card-image">
593
- <img src="https://picsum.photos/1000/400?random=4" alt="Card image">
594
- </div>
595
- <div class="card-content">
596
- <div class="card-header">
597
- <h3 class="card-title">Title</h3>
598
- </div>
599
- <div class="card-body">
600
- <p>This is some text that describes the card.</p>
601
- </div>
602
- <div class="card-footer">
603
- <a class="button primary stretched" href="#">Card Action</a>
604
- </div>
605
- </div>
606
- </div>
607
- <div class="card horizontal">
608
- <div class="card-image">
609
- <img src="https://picsum.photos/1000/400?random=5" alt="Card image">
610
- </div>
611
- <div class="card-content">
612
- <div class="card-header">
613
- <h3 class="card-title">Title</h3>
614
- </div>
615
- <div class="card-body">
616
- <p>This is some text that describes the card.</p>
617
- </div>
618
- <div class="card-footer">
619
- <a class="button primary stretched" href="#">Card Action</a>
620
- </div>
621
- </div>
622
- </div>
623
- <div class="card horizontal right">
624
- <div class="card-image">
625
- <img src="https://picsum.photos/1000/400?random=6" alt="Card image">
626
- </div>
627
- <div class="card-content">
628
- <div class="card-header">
629
- <h3 class="card-title">Title</h3>
630
- </div>
631
- <div class="card-body">
632
- <p>This is some text that describes the card.</p>
633
- </div>
634
- <div class="card-footer">
635
- <a class="button primary stretched" href="#">Card Action</a>
636
- </div>
637
- </div>
638
- </div>
639
- </div>
640
- </div>
641
- <div class="full-width container py-10 my-10 align-content-center">
642
- <h2>Inverse Cards</h2>
643
- <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.inverse</span>
644
- class will have the image placed on the right if it is a horizontal card and on the bottom if it is a vertical
645
- card.</p>
646
- <p>This is mainly to provide a shortcut for horizontal cards that you'd like to use the <span
647
- class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom .right</span> classes on when the
648
- card is forced to be vertical.</p>
649
- <div class="columns count-2">
650
- <div class="card horizontal inverse">
651
- <div class="card-image">
652
- <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
653
- </div>
654
- <div class="card-content">
655
- <div class="card-header">
656
- <h3 class="card-title">Title</h3>
657
- </div>
658
- <div class="card-body">
659
- <p>This is some text that describes the card.</p>
660
- </div>
661
- <div class="card-footer">
662
- <a class="button primary stretched" href="#">Card Action</a>
663
- </div>
664
- </div>
665
- </div>
666
- <div class="card horizontal inverse">
667
- <div class="card-image">
668
- <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
669
- </div>
670
- <div class="card-content">
671
- <div class="card-header">
672
- <h3 class="card-title">Title</h3>
673
- </div>
674
- <div class="card-body">
675
- <p>This is some text that describes the card.</p>
676
- </div>
677
- <div class="card-footer">
678
- <a class="button primary stretched" href="#">Card Action</a>
679
- </div>
680
- </div>
681
- </div>
682
- </div>
683
- </div>
684
- <div class="full-width container py-10 my-10 align-content-center">
685
- <h2>Alerts</h2>
686
- <div class="display-grid g-5">
687
- <div class="alert">
688
- <div class="alert-header">
689
- <h3 class="alert-title">Alert</h3>
690
- </div>
691
- <div class="alert-body">
692
- <p>This is some text that describes the alert.</p>
693
- </div>
694
- <div class="alert-footer">
695
- <a href="#">Action</a>
696
- </div>
697
- <button class="alert-dismisser">x</button>
698
- </div>
699
- <div class="alert primary">
700
- <div class="alert-header">
701
- <h3 class="alert-title">Primary Alert</h3>
702
- </div>
703
- <div class="alert-body">
704
- <p>This is some text that describes the alert.</p>
705
- </div>
706
- <div class="alert-footer">
707
- <a href="#">Primary Action</a>
708
- </div>
709
- <button class="alert-dismisser primary">x</button>
710
- </div>
711
- <div class="alert secondary">
712
- <div class="alert-header">
713
- <h3 class="alert-title">Secondary Alert</h3>
714
- </div>
715
- <div class="alert-body">
716
- <p>This is some text that describes the alert.</p>
717
- </div>
718
- <div class="alert-footer">
719
- <a href="#">Secondary Action</a>
720
- </div>
721
- <button class="alert-dismisser secondary">x</button>
722
- </div>
723
- <div class="alert tertiary">
724
- <div class="alert-header">
725
- <h3 class="alert-title">Tertiary Alert</h3>
726
- </div>
727
- <div class="alert-body">
728
- <p>This is some text that describes the alert.</p>
729
- </div>
730
- <div class="alert-footer">
731
- <a href="#">Tertiary Action</a>
732
- </div>
733
- <button class="alert-dismisser tertiary">x</button>
734
- </div>
735
- </div>
736
- </div>
737
- <div class="py-10 full-width container">
738
- <h2>Accordions</h2>
739
- <div class="accordion">
740
- <div class="accordion-item show">
741
- <div class="accordion-item-header">
742
- <h3 class="accordion-item-title">
743
- <button aria-expanded="true" class="accordion-item-toggle">Accordion 1</button>
744
- </h3>
745
- </div>
746
- <div class="accordion-item-content">
747
- <div class="accordion-item-body">
748
- <p>This is the body of the accordion that can expand/collapse based on the state.</p>
749
- </div>
750
- <div class="accordion-item-footer">
751
- <p>This is the footer.</p>
752
- </div>
753
- </div>
754
- </div>
755
- <div class="accordion-item hide">
756
- <div class="accordion-item-header">
757
- <h3 class="accordion-item-title">
758
- <button aria-expanded="false" class="accordion-item-toggle">Accordion 2</button>
759
- </h3>
760
- </div>
761
- <div class="accordion-item-content">
762
- <div class="accordion-item-body">
763
- <p>This is the body of the accordion that can expand/collapse based on the state.</p>
764
- <p>This one has some extra text in it to make it longer.</p>
765
- </div>
766
- <div class="accordion-item-footer">
767
- <p>This is the footer.</p>
768
- <p>There is more info in the footer too.</p>
769
- </div>
770
- </div>
771
- </div>
772
- <div class="accordion-item hide">
773
- <div class="accordion-item-header">
774
- <h3 class="accordion-item-title">
775
- <button aria-expanded="false" class="accordion-item-toggle">Accordion 3</button>
776
- </h3>
777
- </div>
778
- <div class="accordion-item-content">
779
- <div class="accordion-item-body">
780
- <p>This is the body of the accordion that can expand/collapse based on the state.</p>
781
- <p>This one is even longer than the second one. Why? Because it needs to be. That's why.</p>
782
- <p>It's also a bit more verbose than the other two.</p>
783
- <p>But that's okay. It's just an example.</p>
784
- </div>
785
- <div class="accordion-item-footer">
786
- <p>This is the footer.</p>
787
- </div>
788
- </div>
789
- </div>
790
- </div>
791
- <div class="full-width container py-10 my-10 align-content-center">
792
- <h2>Carousels</h2>
793
- <section class="carousel">
794
- <div class="carousel-control-container">
795
- <button class=" carousel-control autoplay"></button>
796
- <button class="carousel-control previous"></button>
797
- <button class="carousel-control next"></button>
798
- </div>
799
- <div class="carousel-tab-container">
800
- <button class="carousel-tab" aria-label="Carousel item 1"></button>
801
- <button class="carousel-tab" aria-label="Carousel item 2"></button>
802
- <button class="carousel-tab" aria-label="Carousel item 3"></button>
803
- <button class="carousel-tab" aria-label="Carousel item 4"></button>
804
- <button class="carousel-tab" aria-label="Carousel item 5"></button>
805
- </div>
806
- <div class="carousel-item-container">
807
- <div class="carousel-item">
808
- <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=1" alt="A placeholder carousel image" /></div>
809
- </div>
810
- <div class="carousel-item">
811
- <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=2" alt="A placeholder carousel image" /></div>
812
- </div>
813
- <div class="carousel-item">
814
- <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=3" alt="A placeholder carousel image" /></div>
815
- </div>
816
- <div class="carousel-item">
817
- <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=4" alt="A placeholder carousel image" /></div>
818
- </div>
819
- <div class="carousel-item">
820
- <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=5" alt="A placeholder carousel image" /></div>
821
- </div>
822
- </div>
823
- </section>
824
- </div>
825
- <div class="full-width container py-10 my-10 align-content-center">
826
- <h2>Lists</h2>
827
- <p>Lists are inspired by Bootstrap's list groups.</p>
828
- <h3>Unordered list</h3>
829
- <ul class="list">
830
- <li class="list-item">
831
- <a href="#">List item 1</a>
832
- </li>
833
- <li class="list-item">
834
- List item 2
835
- </li>
836
- <li class="list-item">
837
- <a href="#" class="stretched">List item 3</a>
838
- </li>
839
- </ul>
840
- <h3>Ordered list</h3>
841
- <p>You can add the list markers back in using utility classes (in this case <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.list-style-decimal</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.list-style-inside</span>).</p>
842
- <ol class="list list-style-decimal list-style-inside">
843
- <li class="list-item">
844
- <a href="#">List item 1</a>
845
- </li>
846
- <li class="list-item">
847
- List item 2
848
- </li>
849
- <li class="list-item">
850
- <a href="#" class="stretched">List item 3</a>
851
- </li>
852
- </ol>
853
- <h3>Inline lists</h3>
854
- <p>We can achieve an inline list by utilizing the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.columns</span> class.</p>
855
- <ul class="list columns">
856
- <li class="list-item">
857
- <a href="#">List item 1</a>
858
- </li>
859
- <li class="list-item">
860
- List item 2
861
- </li>
862
- <li class="list-item">
863
- <a href="#" class="stretched">List item 3</a>
864
- </li>
865
- <li class="list-item">
866
- <a href="#">List item 4</a>
867
- </li>
868
- <li class="list-item">
869
- List item 5
870
- </li>
871
- <li class="list-item">
872
- <a href="#" class="stretched">List item 6</a>
873
- </li>
874
- </ul>
875
- <p class="pt-5">We can also use the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.display-flex</span> utility class.</p>
876
- <ul class="list display-flex">
877
- <li class="list-item">
878
- <a href="#">List item 1</a>
879
- </li>
880
- <li class="list-item">
881
- List item 2
882
- </li>
883
- <li class="list-item">
884
- <a href="#" class="stretched">List item 3</a>
885
- </li>
886
- <li class="list-item">
887
- <a href="#">List item 4</a>
888
- </li>
889
- <li class="list-item">
890
- List item 5
891
- </li>
892
- <li class="list-item">
893
- <a href="#" class="stretched">List item 6</a>
894
- </li>
895
- </ul>
896
- </div>
897
- </main>
898
- <script src="https://cdn.jsdelivr.net/npm/accessible-menu/dist/disclosure-menu.iife.js"></script>
899
- <script type="module" src="src/js/alert/index.js"></script>
900
- <script type="module" src="src/js/accordion/index.js"></script>
901
- <script type="module" src="src/js/carousel/index.js"></script>
902
- <script type="module" src="src/js/navigation/index.js"></script>
903
- <script>
904
- const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
905
- const setTheme = window.localStorage.getItem('theme') || preferredTheme;
906
- const themeToggle = document.getElementById('dark-mode-toggle');
907
-
908
- document.documentElement.classList.add(`${setTheme}-mode`);
909
- themeToggle.innerHTML = setTheme === 'dark' ? 'Toggle light mode' : 'Toggle dark mode';
910
-
911
- themeToggle.addEventListener('click', () => {
912
- const currentTheme = document.documentElement.classList.contains('dark-mode') ? 'dark' : 'light';
913
- const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
914
-
915
- document.documentElement.classList.remove(`${currentTheme}-mode`);
916
- document.documentElement.classList.add(`${newTheme}-mode`);
917
- window.localStorage.setItem('theme', newTheme);
918
- themeToggle.innerHTML = newTheme === 'dark' ? 'Toggle light mode' : 'Toggle dark mode';
919
- });
920
- </script>
921
- </body>
922
-
923
- </html>