@graupl/graupl 1.0.0-beta.10 → 1.0.0-beta.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 (474) hide show
  1. package/dist/js/accordion.js +5 -0
  2. package/dist/js/accordion.js.map +1 -0
  3. package/dist/js/alert.js +5 -0
  4. package/dist/js/alert.js.map +1 -0
  5. package/dist/js/carousel.js +5 -0
  6. package/dist/js/carousel.js.map +1 -0
  7. package/dist/js/component/accordion.cjs.js +5 -0
  8. package/dist/js/component/accordion.cjs.js.map +1 -0
  9. package/dist/js/component/accordion.es.js +5 -0
  10. package/dist/js/component/accordion.es.js.map +1 -0
  11. package/dist/js/component/accordion.iife.js +5 -0
  12. package/dist/js/component/accordion.iife.js.map +1 -0
  13. package/dist/js/component/alert.cjs.js +5 -0
  14. package/dist/js/component/alert.cjs.js.map +1 -0
  15. package/dist/js/component/alert.es.js +5 -0
  16. package/dist/js/component/alert.es.js.map +1 -0
  17. package/dist/js/component/alert.iife.js +5 -0
  18. package/dist/js/component/alert.iife.js.map +1 -0
  19. package/dist/js/component/carousel.cjs.js +5 -0
  20. package/dist/js/component/carousel.cjs.js.map +1 -0
  21. package/dist/js/component/carousel.es.js +5 -0
  22. package/dist/js/component/carousel.es.js.map +1 -0
  23. package/dist/js/component/carousel.iife.js +5 -0
  24. package/dist/js/component/carousel.iife.js.map +1 -0
  25. package/dist/js/generator/accordion.cjs.js +5 -0
  26. package/dist/js/generator/accordion.cjs.js.map +1 -0
  27. package/dist/js/generator/accordion.es.js +5 -0
  28. package/dist/js/generator/accordion.es.js.map +1 -0
  29. package/dist/js/generator/accordion.iife.js +5 -0
  30. package/dist/js/generator/accordion.iife.js.map +1 -0
  31. package/dist/js/generator/carousel.cjs.js +5 -0
  32. package/dist/js/generator/carousel.cjs.js.map +1 -0
  33. package/dist/js/generator/carousel.es.js +5 -0
  34. package/dist/js/generator/carousel.es.js.map +1 -0
  35. package/dist/js/generator/carousel.iife.js +5 -0
  36. package/dist/js/generator/carousel.iife.js.map +1 -0
  37. package/dist/js/generator/navigation.cjs.js +3 -0
  38. package/dist/js/generator/navigation.cjs.js.map +1 -0
  39. package/dist/js/generator/navigation.es.js +3 -0
  40. package/dist/js/generator/navigation.es.js.map +1 -0
  41. package/dist/js/generator/navigation.iife.js +3 -0
  42. package/dist/js/generator/navigation.iife.js.map +1 -0
  43. package/dist/js/graupl.js +9 -0
  44. package/dist/js/graupl.js.map +1 -0
  45. package/dist/js/navigation.js +3 -0
  46. package/dist/js/navigation.js.map +1 -0
  47. package/package.json +24 -14
  48. package/.browserslistrc +0 -3
  49. package/.czrc +0 -3
  50. package/.devcontainer/devcontainer.json +0 -221
  51. package/.editorconfig +0 -13
  52. package/.env +0 -3
  53. package/.github/CODE_OF_CONDUCT.md +0 -73
  54. package/.github/COMMIT_CONVENTION.md +0 -17
  55. package/.github/CONTRIBUTING.md +0 -86
  56. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -30
  57. package/.github/ISSUE_TEMPLATE/documentation.md +0 -20
  58. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  59. package/.github/SECURITY.md +0 -26
  60. package/.github/dependabot.yml +0 -17
  61. package/.github/pull_request_template.md +0 -5
  62. package/.github/workflows/codeql-analysis.yml +0 -71
  63. package/.github/workflows/docs.yml +0 -66
  64. package/.github/workflows/prerelease.yml +0 -125
  65. package/.github/workflows/release.yml +0 -111
  66. package/.github/workflows/test.yml +0 -78
  67. package/.husky/commit-msg +0 -3
  68. package/.husky/pre-commit +0 -4
  69. package/.prettierignore +0 -12
  70. package/.stylelintignore +0 -9
  71. package/.versionrc.cjs +0 -73
  72. package/.vscode/settings.json +0 -10
  73. package/CHANGELOG.md +0 -559
  74. package/build.js +0 -9
  75. package/combine-at-rules.cjs +0 -61
  76. package/commitlint.config.js +0 -5
  77. package/container/.env +0 -26
  78. package/container/build/app.dockerfile +0 -41
  79. package/container/docker-compose.yml +0 -27
  80. package/dist/js/graupl.cjs.js +0 -7
  81. package/dist/js/graupl.esm.js +0 -2561
  82. package/dist/js/graupl.iife.js +0 -7
  83. package/docs/.vitepress/config.js +0 -108
  84. package/docs/.vitepress/theme/custom.scss +0 -35
  85. package/docs/.vitepress/theme/index.js +0 -4
  86. package/docs/compiling-graupl.md +0 -57
  87. package/docs/components/alert.md +0 -130
  88. package/docs/components/button.md +0 -84
  89. package/docs/components/card.md +0 -369
  90. package/docs/components/index.md +0 -1
  91. package/docs/components/inputgroup.md +0 -159
  92. package/docs/components/menu.md +0 -326
  93. package/docs/components/navigation.md +0 -158
  94. package/docs/content.md +0 -237
  95. package/docs/defaults.md +0 -121
  96. package/docs/forms.md +0 -79
  97. package/docs/functions.md +0 -9
  98. package/docs/getting-started.md +0 -1
  99. package/docs/index.md +0 -1
  100. package/docs/introduction.md +0 -25
  101. package/docs/layout.md +0 -200
  102. package/docs/mixins.md +0 -47
  103. package/docs/state.md +0 -67
  104. package/docs/theme.md +0 -258
  105. package/docs/utilities/alignment.md +0 -411
  106. package/docs/utilities/background.md +0 -192
  107. package/docs/utilities/border.md +0 -268
  108. package/docs/utilities/color.md +0 -348
  109. package/docs/utilities/container.md +0 -3
  110. package/docs/utilities/display.md +0 -3
  111. package/docs/utilities/flex.md +0 -3
  112. package/docs/utilities/gradient.md +0 -3
  113. package/docs/utilities/height.md +0 -3
  114. package/docs/utilities/inset.md +0 -3
  115. package/docs/utilities/justification.md +0 -3
  116. package/docs/utilities/list.md +0 -3
  117. package/docs/utilities/order.md +0 -3
  118. package/docs/utilities/position.md +0 -3
  119. package/docs/utilities/ratio.md +0 -3
  120. package/docs/utilities/responsive-classes.md +0 -3
  121. package/docs/utilities/spacing.md +0 -3
  122. package/docs/utilities/typography.md +0 -3
  123. package/docs/utilities/visibility.md +0 -3
  124. package/docs/utilities/visually-hidden.md +0 -3
  125. package/docs/utilities/width.md +0 -3
  126. package/docs/utilities/z-index.md +0 -3
  127. package/docs/utilities.md +0 -357
  128. package/eslint.config.js +0 -74
  129. package/favicon.ico +0 -0
  130. package/index.html +0 -1214
  131. package/index.js +0 -12
  132. package/lint-staged.config.js +0 -6
  133. package/logo.svg +0 -296
  134. package/packages/core/build.js +0 -9
  135. package/packages/core/dist/css/base/button.css +0 -2
  136. package/packages/core/dist/css/base/button.css.map +0 -1
  137. package/packages/core/dist/css/base/form.css +0 -2
  138. package/packages/core/dist/css/base/form.css.map +0 -1
  139. package/packages/core/dist/css/base/link.css +0 -2
  140. package/packages/core/dist/css/base/link.css.map +0 -1
  141. package/packages/core/dist/css/base/table.css +0 -2
  142. package/packages/core/dist/css/base/table.css.map +0 -1
  143. package/packages/core/dist/css/base.css +0 -2
  144. package/packages/core/dist/css/base.css.map +0 -1
  145. package/packages/core/dist/css/component/accordion.css +0 -5
  146. package/packages/core/dist/css/component/accordion.css.map +0 -1
  147. package/packages/core/dist/css/component/alert.css +0 -2
  148. package/packages/core/dist/css/component/alert.css.map +0 -1
  149. package/packages/core/dist/css/component/card.css +0 -2
  150. package/packages/core/dist/css/component/card.css.map +0 -1
  151. package/packages/core/dist/css/component/carousel.css +0 -2
  152. package/packages/core/dist/css/component/carousel.css.map +0 -1
  153. package/packages/core/dist/css/component/input-group.css +0 -2
  154. package/packages/core/dist/css/component/input-group.css.map +0 -1
  155. package/packages/core/dist/css/component/list.css +0 -2
  156. package/packages/core/dist/css/component/list.css.map +0 -1
  157. package/packages/core/dist/css/component/menu.css +0 -2
  158. package/packages/core/dist/css/component/menu.css.map +0 -1
  159. package/packages/core/dist/css/component/navigation.css +0 -2
  160. package/packages/core/dist/css/component/navigation.css.map +0 -1
  161. package/packages/core/dist/css/component.css +0 -5
  162. package/packages/core/dist/css/component.css.map +0 -1
  163. package/packages/core/dist/css/graupl.css +0 -5
  164. package/packages/core/dist/css/graupl.css.map +0 -1
  165. package/packages/core/dist/css/init.css +0 -2
  166. package/packages/core/dist/css/init.css.map +0 -1
  167. package/packages/core/dist/css/layout/columns.css +0 -2
  168. package/packages/core/dist/css/layout/columns.css.map +0 -1
  169. package/packages/core/dist/css/layout/container.css +0 -2
  170. package/packages/core/dist/css/layout/container.css.map +0 -1
  171. package/packages/core/dist/css/layout/flex-columns.css +0 -2
  172. package/packages/core/dist/css/layout/flex-columns.css.map +0 -1
  173. package/packages/core/dist/css/layout.css +0 -5
  174. package/packages/core/dist/css/layout.css.map +0 -1
  175. package/packages/core/dist/css/normalize.css +0 -2
  176. package/packages/core/dist/css/normalize.css.map +0 -1
  177. package/packages/core/dist/css/state/focus.css +0 -2
  178. package/packages/core/dist/css/state/focus.css.map +0 -1
  179. package/packages/core/dist/css/state.css +0 -2
  180. package/packages/core/dist/css/state.css.map +0 -1
  181. package/packages/core/dist/css/theme/color.css +0 -2
  182. package/packages/core/dist/css/theme/color.css.map +0 -1
  183. package/packages/core/dist/css/theme/typography.css +0 -2
  184. package/packages/core/dist/css/theme/typography.css.map +0 -1
  185. package/packages/core/dist/css/theme.css +0 -2
  186. package/packages/core/dist/css/theme.css.map +0 -1
  187. package/packages/core/dist/css/utilities/alignment.css +0 -2
  188. package/packages/core/dist/css/utilities/alignment.css.map +0 -1
  189. package/packages/core/dist/css/utilities/background.css +0 -2
  190. package/packages/core/dist/css/utilities/background.css.map +0 -1
  191. package/packages/core/dist/css/utilities/border.css +0 -2
  192. package/packages/core/dist/css/utilities/border.css.map +0 -1
  193. package/packages/core/dist/css/utilities/color.css +0 -2
  194. package/packages/core/dist/css/utilities/color.css.map +0 -1
  195. package/packages/core/dist/css/utilities/container.css +0 -2
  196. package/packages/core/dist/css/utilities/container.css.map +0 -1
  197. package/packages/core/dist/css/utilities/display.css +0 -2
  198. package/packages/core/dist/css/utilities/display.css.map +0 -1
  199. package/packages/core/dist/css/utilities/flex.css +0 -2
  200. package/packages/core/dist/css/utilities/flex.css.map +0 -1
  201. package/packages/core/dist/css/utilities/gradient.css +0 -2
  202. package/packages/core/dist/css/utilities/gradient.css.map +0 -1
  203. package/packages/core/dist/css/utilities/height.css +0 -2
  204. package/packages/core/dist/css/utilities/height.css.map +0 -1
  205. package/packages/core/dist/css/utilities/inset.css +0 -2
  206. package/packages/core/dist/css/utilities/inset.css.map +0 -1
  207. package/packages/core/dist/css/utilities/justification.css +0 -2
  208. package/packages/core/dist/css/utilities/justification.css.map +0 -1
  209. package/packages/core/dist/css/utilities/list.css +0 -2
  210. package/packages/core/dist/css/utilities/list.css.map +0 -1
  211. package/packages/core/dist/css/utilities/order.css +0 -2
  212. package/packages/core/dist/css/utilities/order.css.map +0 -1
  213. package/packages/core/dist/css/utilities/position.css +0 -2
  214. package/packages/core/dist/css/utilities/position.css.map +0 -1
  215. package/packages/core/dist/css/utilities/ratio.css +0 -2
  216. package/packages/core/dist/css/utilities/ratio.css.map +0 -1
  217. package/packages/core/dist/css/utilities/spacing.css +0 -2
  218. package/packages/core/dist/css/utilities/spacing.css.map +0 -1
  219. package/packages/core/dist/css/utilities/typography.css +0 -2
  220. package/packages/core/dist/css/utilities/typography.css.map +0 -1
  221. package/packages/core/dist/css/utilities/visibility.css +0 -2
  222. package/packages/core/dist/css/utilities/visibility.css.map +0 -1
  223. package/packages/core/dist/css/utilities/visually-hidden.css +0 -2
  224. package/packages/core/dist/css/utilities/visually-hidden.css.map +0 -1
  225. package/packages/core/dist/css/utilities/width.css +0 -2
  226. package/packages/core/dist/css/utilities/width.css.map +0 -1
  227. package/packages/core/dist/css/utilities/z-index.css +0 -2
  228. package/packages/core/dist/css/utilities/z-index.css.map +0 -1
  229. package/packages/core/dist/css/utilities.css +0 -2
  230. package/packages/core/dist/css/utilities.css.map +0 -1
  231. package/packages/core/package.json +0 -58
  232. package/packages/core/scss/base/button.scss +0 -3
  233. package/packages/core/scss/base/form.scss +0 -3
  234. package/packages/core/scss/base/link.scss +0 -3
  235. package/packages/core/scss/base/table.scss +0 -3
  236. package/packages/core/scss/base.scss +0 -3
  237. package/packages/core/scss/component/accordion.scss +0 -3
  238. package/packages/core/scss/component/alert.scss +0 -3
  239. package/packages/core/scss/component/card.scss +0 -3
  240. package/packages/core/scss/component/carousel.scss +0 -3
  241. package/packages/core/scss/component/input-group.scss +0 -3
  242. package/packages/core/scss/component/list.scss +0 -3
  243. package/packages/core/scss/component/menu.scss +0 -3
  244. package/packages/core/scss/component/navigation.scss +0 -3
  245. package/packages/core/scss/component.scss +0 -3
  246. package/packages/core/scss/graupl.scss +0 -3
  247. package/packages/core/scss/init.scss +0 -3
  248. package/packages/core/scss/layout/columns.scss +0 -3
  249. package/packages/core/scss/layout/container.scss +0 -3
  250. package/packages/core/scss/layout/flex-columns.scss +0 -3
  251. package/packages/core/scss/layout.scss +0 -3
  252. package/packages/core/scss/normalize.scss +0 -3
  253. package/packages/core/scss/state/focus.scss +0 -3
  254. package/packages/core/scss/state.scss +0 -3
  255. package/packages/core/scss/theme/color.scss +0 -3
  256. package/packages/core/scss/theme/typography.scss +0 -3
  257. package/packages/core/scss/theme.scss +0 -3
  258. package/packages/core/scss/utilities/alignment.scss +0 -3
  259. package/packages/core/scss/utilities/background.scss +0 -3
  260. package/packages/core/scss/utilities/border.scss +0 -3
  261. package/packages/core/scss/utilities/color.scss +0 -3
  262. package/packages/core/scss/utilities/container.scss +0 -3
  263. package/packages/core/scss/utilities/display.scss +0 -3
  264. package/packages/core/scss/utilities/flex.scss +0 -3
  265. package/packages/core/scss/utilities/gradient.scss +0 -3
  266. package/packages/core/scss/utilities/height.scss +0 -3
  267. package/packages/core/scss/utilities/inset.scss +0 -3
  268. package/packages/core/scss/utilities/justification.scss +0 -3
  269. package/packages/core/scss/utilities/list.scss +0 -3
  270. package/packages/core/scss/utilities/order.scss +0 -3
  271. package/packages/core/scss/utilities/position.scss +0 -3
  272. package/packages/core/scss/utilities/ratio.scss +0 -3
  273. package/packages/core/scss/utilities/spacing.scss +0 -3
  274. package/packages/core/scss/utilities/typography.scss +0 -3
  275. package/packages/core/scss/utilities/visibility.scss +0 -3
  276. package/packages/core/scss/utilities/visually-hidden.scss +0 -3
  277. package/packages/core/scss/utilities/width.scss +0 -3
  278. package/packages/core/scss/utilities/z-index.scss +0 -3
  279. package/packages/core/scss/utilities.scss +0 -3
  280. package/packages/core/src/js/accordion/Accordion.js +0 -1163
  281. package/packages/core/src/js/accordion/AccordionItem.js +0 -496
  282. package/packages/core/src/js/accordion/index.js +0 -10
  283. package/packages/core/src/js/alert/Alert.js +0 -581
  284. package/packages/core/src/js/alert/index.js +0 -11
  285. package/packages/core/src/js/carousel/Carousel.js +0 -1427
  286. package/packages/core/src/js/carousel/index.js +0 -10
  287. package/packages/core/src/js/domHelpers.js +0 -37
  288. package/packages/core/src/js/eventHandlers.js +0 -39
  289. package/packages/core/src/js/navigation/index.js +0 -36
  290. package/packages/core/src/js/storage.js +0 -106
  291. package/packages/core/src/js/validate.js +0 -225
  292. package/packages/core/src/scss/_defaults.scss +0 -184
  293. package/packages/core/src/scss/_index.scss +0 -15
  294. package/packages/core/src/scss/_init.scss +0 -6
  295. package/packages/core/src/scss/_normalize.scss +0 -197
  296. package/packages/core/src/scss/_variables.scss +0 -95
  297. package/packages/core/src/scss/base/_index.scss +0 -6
  298. package/packages/core/src/scss/base/button/_defaults.scss +0 -49
  299. package/packages/core/src/scss/base/button/_index.scss +0 -206
  300. package/packages/core/src/scss/base/button/_mixins.scss +0 -104
  301. package/packages/core/src/scss/base/button/_variables.scss +0 -252
  302. package/packages/core/src/scss/base/form/_defaults.scss +0 -24
  303. package/packages/core/src/scss/base/form/_index.scss +0 -227
  304. package/packages/core/src/scss/base/form/_variables.scss +0 -245
  305. package/packages/core/src/scss/base/link/_defaults.scss +0 -35
  306. package/packages/core/src/scss/base/link/_index.scss +0 -245
  307. package/packages/core/src/scss/base/link/_variables.scss +0 -370
  308. package/packages/core/src/scss/base/table/_defaults.scss +0 -68
  309. package/packages/core/src/scss/base/table/_index.scss +0 -314
  310. package/packages/core/src/scss/base/table/_variables.scss +0 -309
  311. package/packages/core/src/scss/component/_index.scss +0 -10
  312. package/packages/core/src/scss/component/accordion/_defaults.scss +0 -40
  313. package/packages/core/src/scss/component/accordion/_index.scss +0 -198
  314. package/packages/core/src/scss/component/accordion/_variables.scss +0 -356
  315. package/packages/core/src/scss/component/alert/_defaults.scss +0 -49
  316. package/packages/core/src/scss/component/alert/_index.scss +0 -119
  317. package/packages/core/src/scss/component/alert/_variables.scss +0 -200
  318. package/packages/core/src/scss/component/card/_defaults.scss +0 -32
  319. package/packages/core/src/scss/component/card/_index.scss +0 -212
  320. package/packages/core/src/scss/component/card/_variables.scss +0 -216
  321. package/packages/core/src/scss/component/carousel/_defaults.scss +0 -43
  322. package/packages/core/src/scss/component/carousel/_index.scss +0 -192
  323. package/packages/core/src/scss/component/carousel/_variables.scss +0 -104
  324. package/packages/core/src/scss/component/input-group/_defaults.scss +0 -30
  325. package/packages/core/src/scss/component/input-group/_index.scss +0 -47
  326. package/packages/core/src/scss/component/input-group/_variables.scss +0 -66
  327. package/packages/core/src/scss/component/list/_defaults.scss +0 -15
  328. package/packages/core/src/scss/component/list/_index.scss +0 -52
  329. package/packages/core/src/scss/component/list/_variables.scss +0 -236
  330. package/packages/core/src/scss/component/menu/_defaults.scss +0 -57
  331. package/packages/core/src/scss/component/menu/_index.scss +0 -308
  332. package/packages/core/src/scss/component/menu/_variables.scss +0 -642
  333. package/packages/core/src/scss/component/navigation/_defaults.scss +0 -23
  334. package/packages/core/src/scss/component/navigation/_index.scss +0 -190
  335. package/packages/core/src/scss/component/navigation/_variables.scss +0 -290
  336. package/packages/core/src/scss/functions/_container.scss +0 -38
  337. package/packages/core/src/scss/functions/_important.scss +0 -36
  338. package/packages/core/src/scss/functions/_screen.scss +0 -38
  339. package/packages/core/src/scss/functions/_theme.scss +0 -39
  340. package/packages/core/src/scss/functions/_utility.scss +0 -28
  341. package/packages/core/src/scss/layout/_index.scss +0 -5
  342. package/packages/core/src/scss/layout/columns/_defaults.scss +0 -24
  343. package/packages/core/src/scss/layout/columns/_index.scss +0 -137
  344. package/packages/core/src/scss/layout/columns/_variables.scss +0 -55
  345. package/packages/core/src/scss/layout/container/_defaults.scss +0 -35
  346. package/packages/core/src/scss/layout/container/_index.scss +0 -628
  347. package/packages/core/src/scss/layout/container/_variables.scss +0 -114
  348. package/packages/core/src/scss/layout/flex-columns/_defaults.scss +0 -28
  349. package/packages/core/src/scss/layout/flex-columns/_index.scss +0 -184
  350. package/packages/core/src/scss/layout/flex-columns/_variables.scss +0 -30
  351. package/packages/core/src/scss/mixins/_animation.scss +0 -15
  352. package/packages/core/src/scss/mixins/_container.scss +0 -80
  353. package/packages/core/src/scss/mixins/_layer.scss +0 -16
  354. package/packages/core/src/scss/mixins/_screen.scss +0 -77
  355. package/packages/core/src/scss/mixins/_state.scss +0 -18
  356. package/packages/core/src/scss/mixins/_theme.scss +0 -15
  357. package/packages/core/src/scss/mixins/_utility.scss +0 -185
  358. package/packages/core/src/scss/mixins/_visually-hidden.scss +0 -30
  359. package/packages/core/src/scss/state/_index.scss +0 -3
  360. package/packages/core/src/scss/state/focus/_defaults.scss +0 -9
  361. package/packages/core/src/scss/state/focus/_index.scss +0 -42
  362. package/packages/core/src/scss/state/focus/_mixins.scss +0 -13
  363. package/packages/core/src/scss/state/focus/_variables.scss +0 -50
  364. package/packages/core/src/scss/theme/_index.scss +0 -4
  365. package/packages/core/src/scss/theme/color/_defaults.scss +0 -143
  366. package/packages/core/src/scss/theme/color/_index.scss +0 -42
  367. package/packages/core/src/scss/theme/color/_variables.scss +0 -133
  368. package/packages/core/src/scss/theme/typography/_defaults.scss +0 -54
  369. package/packages/core/src/scss/theme/typography/_index.scss +0 -120
  370. package/packages/core/src/scss/theme/typography/_variables.scss +0 -248
  371. package/packages/core/src/scss/utilities/_index.scss +0 -23
  372. package/packages/core/src/scss/utilities/_template/_defaults.scss +0 -41
  373. package/packages/core/src/scss/utilities/_template/_index.scss +0 -171
  374. package/packages/core/src/scss/utilities/_template/_variables.scss +0 -6
  375. package/packages/core/src/scss/utilities/alignment/_defaults.scss +0 -76
  376. package/packages/core/src/scss/utilities/alignment/_index.scss +0 -336
  377. package/packages/core/src/scss/utilities/alignment/_variables.scss +0 -6
  378. package/packages/core/src/scss/utilities/background/_defaults.scss +0 -122
  379. package/packages/core/src/scss/utilities/background/_index.scss +0 -634
  380. package/packages/core/src/scss/utilities/background/_variables.scss +0 -6
  381. package/packages/core/src/scss/utilities/border/_defaults.scss +0 -73
  382. package/packages/core/src/scss/utilities/border/_index.scss +0 -558
  383. package/packages/core/src/scss/utilities/border/_variables.scss +0 -6
  384. package/packages/core/src/scss/utilities/color/_defaults.scss +0 -49
  385. package/packages/core/src/scss/utilities/color/_index.scss +0 -469
  386. package/packages/core/src/scss/utilities/color/_variables.scss +0 -6
  387. package/packages/core/src/scss/utilities/container/_defaults.scss +0 -40
  388. package/packages/core/src/scss/utilities/container/_index.scss +0 -174
  389. package/packages/core/src/scss/utilities/container/_variables.scss +0 -6
  390. package/packages/core/src/scss/utilities/display/_defaults.scss +0 -47
  391. package/packages/core/src/scss/utilities/display/_index.scss +0 -184
  392. package/packages/core/src/scss/utilities/display/_variables.scss +0 -6
  393. package/packages/core/src/scss/utilities/flex/_defaults.scss +0 -99
  394. package/packages/core/src/scss/utilities/flex/_index.scss +0 -486
  395. package/packages/core/src/scss/utilities/flex/_variables.scss +0 -6
  396. package/packages/core/src/scss/utilities/gradient/_defaults.scss +0 -70
  397. package/packages/core/src/scss/utilities/gradient/_index.scss +0 -696
  398. package/packages/core/src/scss/utilities/gradient/_variables.scss +0 -29
  399. package/packages/core/src/scss/utilities/height/_defaults.scss +0 -54
  400. package/packages/core/src/scss/utilities/height/_index.scss +0 -525
  401. package/packages/core/src/scss/utilities/height/_variables.scss +0 -6
  402. package/packages/core/src/scss/utilities/inset/_defaults.scss +0 -55
  403. package/packages/core/src/scss/utilities/inset/_index.scss +0 -258
  404. package/packages/core/src/scss/utilities/inset/_variables.scss +0 -6
  405. package/packages/core/src/scss/utilities/justification/_defaults.scss +0 -73
  406. package/packages/core/src/scss/utilities/justification/_index.scss +0 -333
  407. package/packages/core/src/scss/utilities/justification/_variables.scss +0 -6
  408. package/packages/core/src/scss/utilities/list/_defaults.scss +0 -53
  409. package/packages/core/src/scss/utilities/list/_index.scss +0 -253
  410. package/packages/core/src/scss/utilities/list/_variables.scss +0 -6
  411. package/packages/core/src/scss/utilities/order/_defaults.scss +0 -36
  412. package/packages/core/src/scss/utilities/order/_index.scss +0 -246
  413. package/packages/core/src/scss/utilities/order/_variables.scss +0 -6
  414. package/packages/core/src/scss/utilities/position/_defaults.scss +0 -41
  415. package/packages/core/src/scss/utilities/position/_index.scss +0 -178
  416. package/packages/core/src/scss/utilities/position/_variables.scss +0 -6
  417. package/packages/core/src/scss/utilities/ratio/_defaults.scss +0 -42
  418. package/packages/core/src/scss/utilities/ratio/_index.scss +0 -188
  419. package/packages/core/src/scss/utilities/ratio/_variables.scss +0 -9
  420. package/packages/core/src/scss/utilities/spacing/_defaults.scss +0 -64
  421. package/packages/core/src/scss/utilities/spacing/_index.scss +0 -970
  422. package/packages/core/src/scss/utilities/spacing/_variables.scss +0 -6
  423. package/packages/core/src/scss/utilities/typography/_defaults.scss +0 -58
  424. package/packages/core/src/scss/utilities/typography/_index.scss +0 -1089
  425. package/packages/core/src/scss/utilities/typography/_variables.scss +0 -6
  426. package/packages/core/src/scss/utilities/visibility/_defaults.scss +0 -39
  427. package/packages/core/src/scss/utilities/visibility/_index.scss +0 -173
  428. package/packages/core/src/scss/utilities/visibility/_variables.scss +0 -6
  429. package/packages/core/src/scss/utilities/visually-hidden/_defaults.scss +0 -29
  430. package/packages/core/src/scss/utilities/visually-hidden/_index.scss +0 -189
  431. package/packages/core/src/scss/utilities/visually-hidden/_variables.scss +0 -6
  432. package/packages/core/src/scss/utilities/width/_defaults.scss +0 -54
  433. package/packages/core/src/scss/utilities/width/_index.scss +0 -525
  434. package/packages/core/src/scss/utilities/width/_variables.scss +0 -6
  435. package/packages/core/src/scss/utilities/z-index/_defaults.scss +0 -40
  436. package/packages/core/src/scss/utilities/z-index/_index.scss +0 -173
  437. package/packages/core/src/scss/utilities/z-index/_variables.scss +0 -6
  438. package/packages/core/vite.config.js +0 -28
  439. package/packages/icons/dist/css/base/button.css +0 -2
  440. package/packages/icons/dist/css/base/button.css.map +0 -1
  441. package/packages/icons/dist/css/base/link.css +0 -2
  442. package/packages/icons/dist/css/base/link.css.map +0 -1
  443. package/packages/icons/dist/css/base.css +0 -2
  444. package/packages/icons/dist/css/base.css.map +0 -1
  445. package/packages/icons/dist/css/component/icon.css +0 -2
  446. package/packages/icons/dist/css/component/icon.css.map +0 -1
  447. package/packages/icons/dist/css/component.css +0 -2
  448. package/packages/icons/dist/css/component.css.map +0 -1
  449. package/packages/icons/dist/css/icon.css +0 -2
  450. package/packages/icons/dist/css/icon.css.map +0 -1
  451. package/packages/icons/package.json +0 -48
  452. package/packages/icons/scss/base/button.scss +0 -3
  453. package/packages/icons/scss/base/link.scss +0 -3
  454. package/packages/icons/scss/base.scss +0 -3
  455. package/packages/icons/scss/component/icon.scss +0 -3
  456. package/packages/icons/scss/component.scss +0 -3
  457. package/packages/icons/scss/icon.scss +0 -3
  458. package/packages/icons/src/scss/_index.scss +0 -4
  459. package/packages/icons/src/scss/base/_index.scss +0 -4
  460. package/packages/icons/src/scss/base/button/_defaults.scss +0 -7
  461. package/packages/icons/src/scss/base/button/_index.scss +0 -58
  462. package/packages/icons/src/scss/base/button/_variables.scss +0 -7
  463. package/packages/icons/src/scss/base/link/_defaults.scss +0 -7
  464. package/packages/icons/src/scss/base/link/_index.scss +0 -58
  465. package/packages/icons/src/scss/base/link/_variables.scss +0 -7
  466. package/packages/icons/src/scss/component/_index.scss +0 -3
  467. package/packages/icons/src/scss/component/icon/_defaults.scss +0 -30
  468. package/packages/icons/src/scss/component/icon/_index.scss +0 -60
  469. package/packages/icons/src/scss/component/icon/_mixins.scss +0 -62
  470. package/packages/icons/src/scss/component/icon/_variables.scss +0 -24
  471. package/postcss.config.cjs +0 -11
  472. package/prettier.config.js +0 -16
  473. package/stylelint.config.js +0 -22
  474. package/vite.config.js +0 -28
package/index.html DELETED
@@ -1,1214 +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
- <style>
10
- @media screen and (width > 72ch) {
11
- .sidebar-left {
12
- z-index: 1;
13
- }
14
-
15
- .inner-content {
16
- .breakout,
17
- .full-width,
18
- .feature {
19
- z-index: 0;
20
- }
21
- }
22
-
23
- .sidebar-right {
24
- z-index: 1;
25
- }
26
- }
27
- </style>
28
- </head>
29
-
30
- <body>
31
- <main class="container pb-10">
32
- <div class="flex-columns">
33
- <div class="col-8">
34
- <h1 class="gradient from-tertiary-600 to-primary-600 w-max-content bg-clip-text text-transparent">Hello Graupl!</h1>
35
- <p>Graupl is a modular CSS framework with the goal of making it easy to theme a site.</p>
36
- <p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
37
- <p>Graupl supports light and dark modes out-of-the-box.</p>
38
- <button id="dark-mode-toggle" class="button mt-5 w-half">Toggle dark mode</button>
39
- </div>
40
- <div class="col-4 align-items-center">
41
- <img src="./logo.svg" alt="Graupl logo" class="logo">
42
- </div>
43
- </div>
44
- <div class="container py-10 my-10 align-content-center">
45
- <h2>Typography</h2>
46
- <p>Graupl provides default typography styles and classes to go with them.</p>
47
- <div class="text-h1">Heading 1 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h1</span>)</div>
48
- <div class="text-h2">Heading 2 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h2</span>)</div>
49
- <div class="text-h3">Heading 3 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h3</span>)</div>
50
- <div class="text-h4">Heading 4 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h4</span>)</div>
51
- <div class="text-h5">Heading 5 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h5</span>)</div>
52
- <div class="text-h6">Heading 6 (<span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-h6</span>)</div>
53
- <p>This is a paragraph. It provides the default styles for all text on the site and can be applied to non-paragraph elements using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.text-paragraph</span> class. There are also set defaults for <strong>bold</strong> and <em>emphasized</em> text.</p>
54
- <h3>Links</h3>
55
- <p>There are also default links styles that handle all states they could be in.</p>
56
- <ul class="list-style-none m-0 p-0 display-flex flex-col g-3">
57
- <li><a href="https://graupl.dev/page-that-cant-be-visited">Link</a></li>
58
- <li><a href="https://graupl.dev" class="visited">Visited link</a></li>
59
- <li><a href="https://graupl.dev" class="focus">Focused link</a></li>
60
- <li><a href="https://graupl.dev" class="hover">Hovered link</a></li>
61
- <li><a href="https://graupl.dev" class="active">Active link</a></li>
62
- <li><a href="https://graupl.dev" class="disabled">Disabled link</a></li>
63
- </ul>
64
- </div>
65
- <div class="container py-10 my-10 align-content-center">
66
- <h2>Buttons</h2>
67
- <p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.
68
- </p>
69
- <h3>Default buttons</h3>
70
- <p>The default button can be applied by adding the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> class to any element.</p>
71
- <div class="columns">
72
- <button class="button">Default button</button>
73
- <button class="button visited">Visited button</button>
74
- <button class="button focus">Focused Button</button>
75
- <button class="button hover">Hovered Button</button>
76
- <button class="button active">Active Button</button>
77
- <button class="button disabled">Disabled Button</button>
78
- </div>
79
- <h3>Primary buttons</h3>
80
- <p>The primary button can be applied by adding the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.primary</span> classes to any element.</p>
81
- <div class="columns">
82
- <button class="button primary">Default button</button>
83
- <button class="button primary visited">Visited button</button>
84
- <button class="button primary focus">Focused Button</button>
85
- <button class="button primary hover">Hovered Button</button>
86
- <button class="button primary active">Active Button</button>
87
- <button class="button primary disabled">Disabled Button</button>
88
- </div>
89
- <h3>Secondary buttons</h3>
90
- <p>The secondary button can be applied by adding the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.secondary</span> classes to any element.</p>
91
- <div class="columns">
92
- <button class="button secondary">Default button</button>
93
- <button class="button secondary visited">Visited button</button>
94
- <button class="button secondary focus">Focused Button</button>
95
- <button class="button secondary hover">Hovered Button</button>
96
- <button class="button secondary active">Active Button</button>
97
- <button class="button secondary disabled">Disabled Button</button>
98
- </div>
99
- <h3>Tertiary buttons</h3>
100
- <p>The tertiary button can be applied by adding the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.tertiary</span> classes to any element.</p>
101
- <div class="columns">
102
- <button class="button tertiary">Default button</button>
103
- <button class="button tertiary visited">Visited button</button>
104
- <button class="button tertiary focus">Focused Button</button>
105
- <button class="button tertiary hover">Hovered Button</button>
106
- <button class="button tertiary active">Active Button</button>
107
- <button class="button tertiary disabled">Disabled Button</button>
108
- </div>
109
- <h3>Link buttons</h3>
110
- <p>The link button can be applied by adding the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.link</span> classes to any element. Buttons set to use the link variant will have their defaults overwritten by link defaults.</p>
111
- <div class="columns">
112
- <button class="button link">Default button</button>
113
- <button class="button link visited">Visited button</button>
114
- <button class="button link focus">Focused Button</button>
115
- <button class="button link hover">Hovered Button</button>
116
- <button class="button link active">Active Button</button>
117
- <button class="button link disabled">Disabled Button</button>
118
- </div>
119
- <h3>Anchor buttons</h3>
120
- <p>The anchor button isn't a class, but demonstrates the interactions between buttons and links. Any <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">&lt;a&gt;</span> tag with the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.button</span> class will have its defaults overwritten with button defaults.</p>
121
- <div class="columns">
122
- <a href="https://graupl.dev/page-that-cant-be-visited" class="button">Default button</a>
123
- <a href="https://graupl.dev" class="button visited">Visited button</a>
124
- <a href="https://graupl.dev" class="button focus">Focused Button</a>
125
- <a href="https://graupl.dev" class="button hover">Hovered Button</a>
126
- <a href="https://graupl.dev" class="button active">Active Button</a>
127
- <a href="https://graupl.dev" class="button disabled">Disabled Button</a>
128
- </div>
129
- </div>
130
- <div class="container py-10 my-10 align-content-center">
131
- <h2>Form elements</h2>
132
- <p>Graupl provides default styling for all form elements.</p>
133
- <form class="container rg-4">
134
- <div class="input-group">
135
- <label for="input">Input</label>
136
- <input type="text" placeholder="Input" id="input">
137
- <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
138
- </div>
139
- <div class="input-group inline"><label for="input-readonly">Readonly Input</label>
140
- <input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input" readonly>
141
- <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
142
- </div>
143
- <div class="input-group"><label for="input-disabled">Disabled Input</label>
144
- <input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
145
- <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
146
- </div>
147
- <div class="input-group inline"><label for="textarea">Textarea</label>
148
- <textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
149
- </div>
150
- <div class="input-group"><label for="textarea-readonly">Readonly Textarea</label>
151
- <textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly"
152
- readonly>Readonly Textarea</textarea>
153
- </div>
154
- <div class="input-group"><label for="textarea-disabled">Disabled Textarea</label>
155
- <textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
156
- </div>
157
- <div class="input-group inline"><label for="select">Select</label>
158
- <select id="select">
159
- <option value="1">Option 1</option>
160
- <option value="2">Option 2</option>
161
- <optgroup label="Group 1">
162
- <option value="3">Option 3</option>
163
- <option value="4">Option 4</option>
164
- <option value="5">Option 5</option>
165
- </optgroup>
166
- </select>
167
- </div>
168
- <div class="input-group"><label for="select-disabled">Disabled Select</label>
169
- <select id="select-disabled" disabled>
170
- <option value="1">Option 1</option>
171
- <option value="2">Option 2</option>
172
- <optgroup label="Group 1">
173
- <option value="3">Option 3</option>
174
- <option value="4">Option 4</option>
175
- <option value="5">Option 5</option>
176
- </optgroup>
177
- </select>
178
- </div>
179
- <div class="input-group"><label for="multi-select">Multi-select</label>
180
- <select id="multi-select" multiple>
181
- <option value="1">Option 1</option>
182
- <option value="2">Option 2</option>
183
- <optgroup label="Group 1">
184
- <option value="3">Option 3</option>
185
- <option value="4">Option 4</option>
186
- <option value="5">Option 5</option>
187
- </optgroup>
188
- </select>
189
- </div>
190
- <div class="input-group inline"><label for="multi-select-disabled">Disabled Multi-select</label>
191
- <select id="multi-select-disabled" multiple disabled>
192
- <option value="1">Option 1</option>
193
- <option value="2">Option 2</option>
194
- <optgroup label="Group 1">
195
- <option value="3">Option 3</option>
196
- <option value="4">Option 4</option>
197
- <option value="5">Option 5</option>
198
- </optgroup>
199
- </select>
200
- </div>
201
- <fieldset>
202
- <legend>Checkboxes</legend>
203
- <label for="checkbox">
204
- <input type="checkbox" id="checkbox"> Checkbox</label>
205
- <label for="checkbox-checked">
206
- <input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
207
- <label for="checkbox-disabled">
208
- <input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
209
- </fieldset>
210
- <fieldset>
211
- <legend>Radio Buttons</legend>
212
- <label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
213
- <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
214
- <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled
215
- Radio</label>
216
- </fieldset>
217
- <fieldset disabled>
218
- <legend>Disabled Fieldset</legend>
219
- <label for="disabled-fieldset-checkbox">
220
- <input type="checkbox" id="disabled-fieldset-checkbox"> Checkbox</label>
221
- </fieldset>
222
- <div class="input-group"><label for="range">Range</label>
223
- <input type="range" class="range" id="range">
224
- </div>
225
- </form>
226
- </div>
227
- <div class="container py-10 my-10 align-content-center">
228
- <h2>Navigation</h2>
229
- <div class="py-7">
230
- <nav class="navigation" data-graupl-menu-type="DisclosureMenu"
231
- data-graupl-menu-options="{'optionalKeySupport': true}">
232
- <a class="navigation-branding" href="#">Graupl</a>
233
- <button class="navigation-toggle ml-auto mr-0" aria-label="Toggle navigation"></button>
234
- <ul class="menu">
235
- <li class="menu-item"><a class="menu-link" href="#">Home</a></li>
236
- <li class="menu-item submenu-item">
237
- <button class="menu-link button link submenu-toggle">About</button>
238
- <ul class="submenu">
239
- <li class="menu-item"><a class="menu-link" href="#">About Us</a></li>
240
- <li class="menu-item"><a class="menu-link" href="#">Our Team</a></li>
241
- <li class="menu-item"><a class="menu-link" href="#">Our Mission</a></li>
242
- </ul>
243
- </li>
244
- <li class="menu-item"><a class="menu-link" href="#">Blog</a></li>
245
- <li class="menu-item"><a class="menu-link" href="#">Portfolio</a></li>
246
- <li class="menu-item"><a class="menu-link button tertiary" href="#">Contact</a></li>
247
- </ul>
248
- </nav>
249
- </div>
250
- </div>
251
- <div class="container py-10 my-10 align-content-center">
252
- <h2>Tables</h2>
253
- <p>Graupl provides some default styling for tables as well as some other useful features to customize them.</p>
254
- <table class="bordered striped-rows hoverable">
255
- <caption>
256
- Front-end web developer course 2021
257
- </caption>
258
- <thead>
259
- <tr>
260
- <th scope="col">Person</th>
261
- <th scope="col">Most interest in</th>
262
- <th scope="col">Age</th>
263
- </tr>
264
- </thead>
265
- <tbody>
266
- <tr>
267
- <th scope="row">Chris</th>
268
- <td>HTML tables</td>
269
- <td>22</td>
270
- </tr>
271
- <tr>
272
- <th scope="row">Dennis</th>
273
- <td>Web accessibility</td>
274
- <td>45</td>
275
- </tr>
276
- <tr>
277
- <th scope="row">Sarah</th>
278
- <td>JavaScript frameworks</td>
279
- <td>29</td>
280
- </tr>
281
- <tr>
282
- <th scope="row">Karen</th>
283
- <td>Web performance</td>
284
- <td>36</td>
285
- </tr>
286
- </tbody>
287
- <tfoot>
288
- <tr>
289
- <th scope="row" colspan="2">Average age</th>
290
- <td>33</td>
291
- </tr>
292
- </tfoot>
293
- </table>
294
- <table class="primary collapsed striped-columns hoverable">
295
- <caption>
296
- Front-end web developer course 2021
297
- </caption>
298
- <thead>
299
- <tr>
300
- <th scope="col">Person</th>
301
- <th scope="col">Most interest in</th>
302
- <th scope="col">Age</th>
303
- </tr>
304
- </thead>
305
- <tbody>
306
- <tr>
307
- <th scope="row">Chris</th>
308
- <td>HTML tables</td>
309
- <td>22</td>
310
- </tr>
311
- <tr>
312
- <th scope="row">Dennis</th>
313
- <td>Web accessibility</td>
314
- <td>45</td>
315
- </tr>
316
- <tr>
317
- <th scope="row">Sarah</th>
318
- <td>JavaScript frameworks</td>
319
- <td>29</td>
320
- </tr>
321
- <tr>
322
- <th scope="row">Karen</th>
323
- <td>Web performance</td>
324
- <td>36</td>
325
- </tr>
326
- </tbody>
327
- <tfoot>
328
- <tr>
329
- <th scope="row" colspan="2">Average age</th>
330
- <td>33</td>
331
- </tr>
332
- </tfoot>
333
- </table>
334
- <table class="secondary bordered striped-columns hoverable">
335
- <caption>
336
- Front-end web developer course 2021
337
- </caption>
338
- <thead>
339
- <tr>
340
- <th scope="col">Person</th>
341
- <th scope="col">Most interest in</th>
342
- <th scope="col">Age</th>
343
- </tr>
344
- </thead>
345
- <tbody>
346
- <tr>
347
- <th scope="row">Chris</th>
348
- <td>HTML tables</td>
349
- <td>22</td>
350
- </tr>
351
- <tr>
352
- <th scope="row">Dennis</th>
353
- <td>Web accessibility</td>
354
- <td>45</td>
355
- </tr>
356
- <tr>
357
- <th scope="row">Sarah</th>
358
- <td>JavaScript frameworks</td>
359
- <td>29</td>
360
- </tr>
361
- <tr>
362
- <th scope="row">Karen</th>
363
- <td>Web performance</td>
364
- <td>36</td>
365
- </tr>
366
- </tbody>
367
- <tfoot>
368
- <tr>
369
- <th scope="row" colspan="2">Average age</th>
370
- <td>33</td>
371
- </tr>
372
- </tfoot>
373
- </table>
374
- <table class="tertiary striped-columns hoverable">
375
- <caption>
376
- Front-end web developer course 2021
377
- </caption>
378
- <thead>
379
- <tr>
380
- <th scope="col">Person</th>
381
- <th scope="col">Most interest in</th>
382
- <th scope="col">Age</th>
383
- </tr>
384
- </thead>
385
- <tbody>
386
- <tr>
387
- <th scope="row">Chris</th>
388
- <td>HTML tables</td>
389
- <td>22</td>
390
- </tr>
391
- <tr>
392
- <th scope="row">Dennis</th>
393
- <td>Web accessibility</td>
394
- <td>45</td>
395
- </tr>
396
- <tr>
397
- <th scope="row">Sarah</th>
398
- <td>JavaScript frameworks</td>
399
- <td>29</td>
400
- </tr>
401
- <tr>
402
- <th scope="row">Karen</th>
403
- <td>Web performance</td>
404
- <td>36</td>
405
- </tr>
406
- </tbody>
407
- <tfoot>
408
- <tr>
409
- <th scope="row" colspan="2">Average age</th>
410
- <td>33</td>
411
- </tr>
412
- </tfoot>
413
- </table>
414
- <div class="responsive-table">
415
- <table class="striped-columns">
416
- <caption>
417
- A "responsive" table element. Resize the window to see the effect.
418
- </caption>
419
- <thead class="primary">
420
- <tr>
421
- <th scope="col">Column 1</th>
422
- <th scope="col">Column 2</th>
423
- <th scope="col">Column 3</th>
424
- <th scope="col">Column 4</th>
425
- <th scope="col">Column 5</th>
426
- <th scope="col">Column 6</th>
427
- <th scope="col">Column 7</th>
428
- <th scope="col">Column 8</th>
429
- <th scope="col">Column 9</th>
430
- <th scope="col">Column 10</th>
431
- <th scope="col">Column 11</th>
432
- <th scope="col">Column 12</th>
433
- </tr>
434
- </thead>
435
- <tbody>
436
- <tr>
437
- <td>Row 1, Column 1</td>
438
- <td>Row 1, Column 2</td>
439
- <td>Row 1, Column 3</td>
440
- <td>Row 1, Column 4</td>
441
- <td>Row 1, Column 5</td>
442
- <td>Row 1, Column 6</td>
443
- <td>Row 1, Column 7</td>
444
- <td>Row 1, Column 8</td>
445
- <td>Row 1, Column 9</td>
446
- <td>Row 1, Column 10</td>
447
- <td>Row 1, Column 11</td>
448
- <td>Row 1, Column 12</td>
449
- </tr>
450
- <tr>
451
- <td>Row 2, Column 1</td>
452
- <td>Row 2, Column 2</td>
453
- <td>Row 2, Column 3</td>
454
- <td>Row 2, Column 4</td>
455
- <td>Row 2, Column 5</td>
456
- <td>Row 2, Column 6</td>
457
- <td>Row 2, Column 7</td>
458
- <td>Row 2, Column 8</td>
459
- <td>Row 2, Column 9</td>
460
- <td>Row 2, Column 10</td>
461
- <td>Row 2, Column 11</td>
462
- <td>Row 2, Column 12</td>
463
- </tr>
464
- <tr>
465
- <td class="tertiary">Row 3, Column 1</td>
466
- <td>Row 3, Column 2</td>
467
- <td class="tertiary highlight">Row 3, Column 3</td>
468
- <td>Row 3, Column 4</td>
469
- <td class="tertiary">Row 3, Column 5</td>
470
- <td>Row 3, Column 6</td>
471
- <td class="tertiary">Row 3, Column 7</td>
472
- <td>Row 3, Column 8</td>
473
- <td class="tertiary">Row 3, Column 9</td>
474
- <td>Row 3, Column 10</td>
475
- <td class="tertiary">Row 3, Column 11</td>
476
- <td>Row 3, Column 12</td>
477
- </tr>
478
- </tbody>
479
- </table>
480
- </div>
481
- </div>
482
- <div class="container py-10 my-10 align-content-center">
483
- <h2>Columns</h2>
484
- <div class="columns py-5">
485
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
486
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
487
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
488
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
489
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
490
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
491
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
492
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
493
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
494
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
495
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
496
- <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
497
- </div>
498
- </div>
499
- <div class="container py-10 my-10 align-content-center">
500
- <h2>Flex columns</h2>
501
- <div class="flex-columns py-5">
502
- <div class="col-6 md:col-8 xl:col-9 py-7 bg-primary-700 text-primary-100 px-5">
503
- <div class="flex-columns">
504
- <div class="col-6 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
505
- <div class="col-6 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
506
- </div>
507
- </div>
508
- <div class="col-6 md:col-4 xl:col-3 py-7 bg-primary-700 text-primary-100 px-5"></div>
509
- <div class="col-12 py-7 bg-primary-700 text-primary-100 px-5">
510
- <div class="flex-columns">
511
- <div class="col-6 md:col-9 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
512
- <div class="col-6 md:col-3 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
513
- </div>
514
- </div>
515
- <div class="col-8 py-7 bg-primary-700 text-primary-100 px-5">
516
- <div class="flex-columns">
517
- <div class="col-3 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
518
- <div class="col-9 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
519
- </div>
520
- </div>
521
- <div class="col-4 py-7 bg-primary-700 text-primary-100 px-5"></div>
522
- </div>
523
- </div>
524
- <div class="container py-10 my-10 align-content-center">
525
- <h2>Cards</h2>
526
- <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.top</span> class
527
- will have the image placed on the top while cards using the <span
528
- class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom</span> class will have the image
529
- placed on the bottom.</p>
530
- <div class="columns">
531
- <div class="card">
532
- <div class="card-image">
533
- <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
534
- </div>
535
- <div class="card-content">
536
- <div class="card-header">
537
- <h3 class="card-title">Title</h3>
538
- </div>
539
- <div class="card-body">
540
- <p>This is some text that describes the card.</p>
541
- </div>
542
- <div class="card-footer">
543
- <a class="button stretched" href="#">Card Action</a>
544
- </div>
545
- </div>
546
- </div>
547
- <div class="card">
548
- <div class="card-image">
549
- <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
550
- </div>
551
- <div class="card-content">
552
- <div class="card-header">
553
- <h3 class="card-title">Title</h3>
554
- </div>
555
- <div class="card-body">
556
- <p>This is some text that describes the card.</p>
557
- </div>
558
- <div class="card-footer">
559
- <a class="button stretched" href="#">Card Action</a>
560
- </div>
561
- </div>
562
- </div>
563
- <div class="card">
564
- <div class="card-image">
565
- <img src="https://picsum.photos/1000/400?random=3" alt="Card image">
566
- </div>
567
- <div class="card-content">
568
- <div class="card-header">
569
- <h3 class="card-title">Title</h3>
570
- </div>
571
- <div class="card-body">
572
- <p>This is some text that describes the card.</p>
573
- </div>
574
- <div class="card-footer">
575
- <a class="button stretched" href="#">Card Action</a>
576
- </div>
577
- </div>
578
- </div>
579
- <div class="card bottom">
580
- <div class="card-image">
581
- <img src="https://picsum.photos/1000/400?random=4" alt="Card image">
582
- </div>
583
- <div class="card-content">
584
- <div class="card-header">
585
- <h3 class="card-title">Title</h3>
586
- </div>
587
- <div class="card-body">
588
- <p>This is some text that describes the card.</p>
589
- </div>
590
- <div class="card-footer">
591
- <a class="button stretched" href="#">Card Action</a>
592
- </div>
593
- </div>
594
- </div>
595
- <div class="card bottom">
596
- <div class="card-image">
597
- <img src="https://picsum.photos/1000/400?random=5" alt="Card image">
598
- </div>
599
- <div class="card-content">
600
- <div class="card-header">
601
- <h3 class="card-title">Title</h3>
602
- </div>
603
- <div class="card-body">
604
- <p>This is some text that describes the card.</p>
605
- </div>
606
- <div class="card-footer">
607
- <a class="button stretched" href="#">Card Action</a>
608
- </div>
609
- </div>
610
- </div>
611
- <div class="card bottom">
612
- <div class="card-image">
613
- <img src="https://picsum.photos/1000/400?random=6" alt="Card image">
614
- </div>
615
- <div class="card-content">
616
- <div class="card-header">
617
- <h3 class="card-title">Title</h3>
618
- </div>
619
- <div class="card-body">
620
- <p>This is some text that describes the card.</p>
621
- </div>
622
- <div class="card-footer">
623
- <a class="button stretched" href="#">Card Action</a>
624
- </div>
625
- </div>
626
- </div>
627
- </div>
628
- </div>
629
- <div class="container py-10 my-10 align-content-center">
630
- <h2>Horizontal Cards</h2>
631
- <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.right</span> class
632
- will have the image placed on the right while cards using the <span
633
- class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.left</span> class will have the image
634
- placed on the left.</p>
635
- <div class="columns count-2">
636
- <div class="card horizontal">
637
- <div class="card-image">
638
- <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
639
- </div>
640
- <div class="card-content">
641
- <div class="card-header">
642
- <h3 class="card-title">Title</h3>
643
- </div>
644
- <div class="card-body">
645
- <p>This is some text that describes the card.</p>
646
- </div>
647
- <div class="card-footer">
648
- <a class="button stretched" href="#">Card Action</a>
649
- </div>
650
- </div>
651
- </div>
652
- <div class="card horizontal right">
653
- <div class="card-image">
654
- <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
655
- </div>
656
- <div class="card-content">
657
- <div class="card-header">
658
- <h3 class="card-title">Title</h3>
659
- </div>
660
- <div class="card-body">
661
- <p>This is some text that describes the card.</p>
662
- </div>
663
- <div class="card-footer">
664
- <a class="button stretched" href="#">Card Action</a>
665
- </div>
666
- </div>
667
- </div>
668
- <div class="card horizontal">
669
- <div class="card-image">
670
- <img src="https://picsum.photos/1000/400?random=3" alt="Card image">
671
- </div>
672
- <div class="card-content">
673
- <div class="card-header">
674
- <h3 class="card-title">Title</h3>
675
- </div>
676
- <div class="card-body">
677
- <p>This is some text that describes the card.</p>
678
- </div>
679
- <div class="card-footer">
680
- <a class="button stretched" href="#">Card Action</a>
681
- </div>
682
- </div>
683
- </div>
684
- <div class="card horizontal right">
685
- <div class="card-image">
686
- <img src="https://picsum.photos/1000/400?random=4" alt="Card image">
687
- </div>
688
- <div class="card-content">
689
- <div class="card-header">
690
- <h3 class="card-title">Title</h3>
691
- </div>
692
- <div class="card-body">
693
- <p>This is some text that describes the card.</p>
694
- </div>
695
- <div class="card-footer">
696
- <a class="button stretched" href="#">Card Action</a>
697
- </div>
698
- </div>
699
- </div>
700
- <div class="card horizontal">
701
- <div class="card-image">
702
- <img src="https://picsum.photos/1000/400?random=5" alt="Card image">
703
- </div>
704
- <div class="card-content">
705
- <div class="card-header">
706
- <h3 class="card-title">Title</h3>
707
- </div>
708
- <div class="card-body">
709
- <p>This is some text that describes the card.</p>
710
- </div>
711
- <div class="card-footer">
712
- <a class="button stretched" href="#">Card Action</a>
713
- </div>
714
- </div>
715
- </div>
716
- <div class="card horizontal right">
717
- <div class="card-image">
718
- <img src="https://picsum.photos/1000/400?random=6" alt="Card image">
719
- </div>
720
- <div class="card-content">
721
- <div class="card-header">
722
- <h3 class="card-title">Title</h3>
723
- </div>
724
- <div class="card-body">
725
- <p>This is some text that describes the card.</p>
726
- </div>
727
- <div class="card-footer">
728
- <a class="button stretched" href="#">Card Action</a>
729
- </div>
730
- </div>
731
- </div>
732
- </div>
733
- </div>
734
- <div class="container py-10 my-10 align-content-center">
735
- <h2>Inverse Cards</h2>
736
- <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.inverse</span>
737
- class will have the image placed on the right if it is a horizontal card and on the bottom if it is a vertical
738
- card.</p>
739
- <p>This is mainly to provide a shortcut for horizontal cards that you'd like to use the <span
740
- class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom .right</span> classes on when the
741
- card is forced to be vertical.</p>
742
- <div class="columns count-2">
743
- <div class="card horizontal inverse">
744
- <div class="card-image">
745
- <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
746
- </div>
747
- <div class="card-content">
748
- <div class="card-header">
749
- <h3 class="card-title">Title</h3>
750
- </div>
751
- <div class="card-body">
752
- <p>This is some text that describes the card.</p>
753
- </div>
754
- <div class="card-footer">
755
- <a class="button stretched" href="#">Card Action</a>
756
- </div>
757
- </div>
758
- </div>
759
- <div class="card horizontal inverse">
760
- <div class="card-image">
761
- <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
762
- </div>
763
- <div class="card-content">
764
- <div class="card-header">
765
- <h3 class="card-title">Title</h3>
766
- </div>
767
- <div class="card-body">
768
- <p>This is some text that describes the card.</p>
769
- </div>
770
- <div class="card-footer">
771
- <a class="button stretched" href="#">Card Action</a>
772
- </div>
773
- </div>
774
- </div>
775
- </div>
776
- </div>
777
- <div class="container py-10 my-10 align-content-center">
778
- <h2>Contained Cards</h2>
779
- <p>Cards will adjust their layout based on the available space within their parent container.</p>
780
- <p>If you use horizontal cards in a grid, where each individual grid space is it's own container, the cards will go from horizontal to vertical depending on the layout.</p>
781
- <div class="flex-columns">
782
- <div class="col-6 lg:col-4 container-type-inline display-flex">
783
- <div class="card horizontal flex-grow">
784
- <div class="card-image">
785
- <img src="https://picsum.photos/1000/400?random=1" alt="Card image">
786
- </div>
787
- <div class="card-content">
788
- <div class="card-header">
789
- <h3 class="card-title">Title</h3>
790
- </div>
791
- <div class="card-body">
792
- <p>This is some text that describes the card.</p>
793
- </div>
794
- <div class="card-footer">
795
- <a class="button stretched" href="#">Card Action</a>
796
- </div>
797
- </div>
798
- </div>
799
- </div>
800
- <div class="col-6 lg:col-4 container-type-inline display-flex">
801
- <div class="card horizontal flex-grow right">
802
- <div class="card-image">
803
- <img src="https://picsum.photos/1000/400?random=2" alt="Card image">
804
- </div>
805
- <div class="card-content">
806
- <div class="card-header">
807
- <h3 class="card-title">Title</h3>
808
- </div>
809
- <div class="card-body">
810
- <p>This is some text that describes the card.</p>
811
- </div>
812
- <div class="card-footer">
813
- <a class="button stretched" href="#">Card Action</a>
814
- </div>
815
- </div>
816
- </div>
817
- </div>
818
- <div class="col-6 lg:col-4 container-type-inline display-flex">
819
- <div class="card horizontal flex-grow">
820
- <div class="card-image">
821
- <img src="https://picsum.photos/1000/400?random=3" alt="Card image">
822
- </div>
823
- <div class="card-content">
824
- <div class="card-header">
825
- <h3 class="card-title">Title</h3>
826
- </div>
827
- <div class="card-body">
828
- <p>This is some text that describes the card.</p>
829
- </div>
830
- <div class="card-footer">
831
- <a class="button stretched" href="#">Card Action</a>
832
- </div>
833
- </div>
834
- </div>
835
- </div>
836
- <div class="col-6 lg:col-12 container-type-inline display-flex">
837
- <div class="card horizontal flex-grow right">
838
- <div class="card-image">
839
- <img src="https://picsum.photos/1000/400?random=4" alt="Card image">
840
- </div>
841
- <div class="card-content">
842
- <div class="card-header">
843
- <h3 class="card-title">Title</h3>
844
- </div>
845
- <div class="card-body">
846
- <p>This is some text that describes the card.</p>
847
- </div>
848
- <div class="card-footer">
849
- <a class="button stretched" href="#">Card Action</a>
850
- </div>
851
- </div>
852
- </div>
853
- </div>
854
- <div class="col-6 xl:col-9 container-type-inline display-flex">
855
- <div class="card horizontal flex-grow">
856
- <div class="card-image">
857
- <img src="https://picsum.photos/1000/400?random=5" alt="Card image">
858
- </div>
859
- <div class="card-content">
860
- <div class="card-header">
861
- <h3 class="card-title">Title</h3>
862
- </div>
863
- <div class="card-body">
864
- <p>This is some text that describes the card.</p>
865
- </div>
866
- <div class="card-footer">
867
- <a class="button stretched" href="#">Card Action</a>
868
- </div>
869
- </div>
870
- </div>
871
- </div>
872
- <div class="col-6 xl:col-3 container-type-inline display-flex">
873
- <div class="card horizontal flex-grow right">
874
- <div class="card-image">
875
- <img src="https://picsum.photos/1000/400?random=6" alt="Card image">
876
- </div>
877
- <div class="card-content">
878
- <div class="card-header">
879
- <h3 class="card-title">Title</h3>
880
- </div>
881
- <div class="card-body">
882
- <p>This is some text that describes the card.</p>
883
- </div>
884
- <div class="card-footer">
885
- <a class="button stretched" href="#">Card Action</a>
886
- </div>
887
- </div>
888
- </div>
889
- </div>
890
- </div>
891
- </div>
892
- <div class="container py-10 my-10 align-content-center">
893
- <h2>Alerts</h2>
894
- <div class="display-grid g-5">
895
- <div class="alert">
896
- <div class="alert-header">
897
- <h3 class="alert-title">Alert</h3>
898
- </div>
899
- <div class="alert-body">
900
- <p>This is some text that describes the alert.</p>
901
- </div>
902
- <div class="alert-footer">
903
- <a href="#">Action</a>
904
- </div>
905
- <button class="alert-dismisser">x</button>
906
- </div>
907
- <div class="alert primary">
908
- <div class="alert-header">
909
- <h3 class="alert-title">Primary Alert</h3>
910
- </div>
911
- <div class="alert-body">
912
- <p>This is some text that describes the alert.</p>
913
- </div>
914
- <div class="alert-footer">
915
- <a href="#">Primary Action</a>
916
- </div>
917
- <button class="alert-dismisser primary">x</button>
918
- </div>
919
- <div class="alert secondary">
920
- <div class="alert-header">
921
- <h3 class="alert-title">Secondary Alert</h3>
922
- </div>
923
- <div class="alert-body">
924
- <p>This is some text that describes the alert.</p>
925
- </div>
926
- <div class="alert-footer">
927
- <a href="#">Secondary Action</a>
928
- </div>
929
- <button class="alert-dismisser secondary">x</button>
930
- </div>
931
- <div class="alert tertiary">
932
- <div class="alert-header">
933
- <h3 class="alert-title">Tertiary Alert</h3>
934
- </div>
935
- <div class="alert-body">
936
- <p>This is some text that describes the alert.</p>
937
- </div>
938
- <div class="alert-footer">
939
- <a href="#">Tertiary Action</a>
940
- </div>
941
- <button class="alert-dismisser tertiary">x</button>
942
- </div>
943
- </div>
944
- </div>
945
- <div class="py-10 container">
946
- <h2>Accordions</h2>
947
- <div class="accordion">
948
- <div class="accordion-item show">
949
- <div class="accordion-item-header">
950
- <h3 class="accordion-item-title">
951
- <button aria-expanded="true" class="accordion-item-toggle">Accordion 1</button>
952
- </h3>
953
- </div>
954
- <div class="accordion-item-content">
955
- <div class="accordion-item-body">
956
- <p>This is the body of the accordion that can expand/collapse based on the state.</p>
957
- </div>
958
- <div class="accordion-item-footer">
959
- <p>This is the footer.</p>
960
- </div>
961
- </div>
962
- </div>
963
- <div class="accordion-item hide">
964
- <div class="accordion-item-header">
965
- <h3 class="accordion-item-title">
966
- <button aria-expanded="false" class="accordion-item-toggle">Accordion 2</button>
967
- </h3>
968
- </div>
969
- <div class="accordion-item-content">
970
- <div class="accordion-item-body">
971
- <p>This is the body of the accordion that can expand/collapse based on the state.</p>
972
- <p>This one has some extra text in it to make it longer.</p>
973
- </div>
974
- <div class="accordion-item-footer">
975
- <p>This is the footer.</p>
976
- <p>There is more info in the footer too.</p>
977
- </div>
978
- </div>
979
- </div>
980
- <div class="accordion-item hide">
981
- <div class="accordion-item-header">
982
- <h3 class="accordion-item-title">
983
- <button aria-expanded="false" class="accordion-item-toggle">Accordion 3</button>
984
- </h3>
985
- </div>
986
- <div class="accordion-item-content">
987
- <div class="accordion-item-body">
988
- <p>This is the body of the accordion that can expand/collapse based on the state.</p>
989
- <p>This one is even longer than the second one. Why? Because it needs to be. That's why.</p>
990
- <p>It's also a bit more verbose than the other two.</p>
991
- <p>But that's okay. It's just an example.</p>
992
- </div>
993
- <div class="accordion-item-footer">
994
- <p>This is the footer.</p>
995
- </div>
996
- </div>
997
- </div>
998
- </div>
999
- </div>
1000
- <div class="container py-10 my-10 align-content-center">
1001
- <h2>Carousels</h2>
1002
- <section class="carousel">
1003
- <div class="carousel-control-container">
1004
- <button class=" carousel-control autoplay"></button>
1005
- <button class="carousel-control previous"></button>
1006
- <button class="carousel-control next"></button>
1007
- </div>
1008
- <div class="carousel-tab-container">
1009
- <button class="carousel-tab" aria-label="Carousel item 1"></button>
1010
- <button class="carousel-tab" aria-label="Carousel item 2"></button>
1011
- <button class="carousel-tab" aria-label="Carousel item 3"></button>
1012
- <button class="carousel-tab" aria-label="Carousel item 4"></button>
1013
- <button class="carousel-tab" aria-label="Carousel item 5"></button>
1014
- </div>
1015
- <div class="carousel-item-container">
1016
- <div class="carousel-item">
1017
- <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=1" alt="A placeholder carousel image" /></div>
1018
- </div>
1019
- <div class="carousel-item">
1020
- <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=2" alt="A placeholder carousel image" /></div>
1021
- </div>
1022
- <div class="carousel-item">
1023
- <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=3" alt="A placeholder carousel image" /></div>
1024
- </div>
1025
- <div class="carousel-item">
1026
- <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=4" alt="A placeholder carousel image" /></div>
1027
- </div>
1028
- <div class="carousel-item">
1029
- <div class="ratio sixteen-by-nine"><img class="force-ratio" src="https://picsum.photos/1400/600?random=5" alt="A placeholder carousel image" /></div>
1030
- </div>
1031
- </div>
1032
- </section>
1033
- </div>
1034
- <div class="container py-10 my-10 align-content-center">
1035
- <h2>Lists</h2>
1036
- <p>Lists are inspired by Bootstrap's list groups.</p>
1037
- <h3>Unordered list</h3>
1038
- <ul class="list">
1039
- <li class="list-item">
1040
- <a href="#">List item 1</a>
1041
- </li>
1042
- <li class="list-item">
1043
- List item 2
1044
- </li>
1045
- <li class="list-item">
1046
- <a href="#" class="stretched">List item 3</a>
1047
- </li>
1048
- </ul>
1049
- <h3>Ordered list</h3>
1050
- <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>
1051
- <ol class="list list-style-decimal list-style-inside">
1052
- <li class="list-item">
1053
- <a href="#">List item 1</a>
1054
- </li>
1055
- <li class="list-item">
1056
- List item 2
1057
- </li>
1058
- <li class="list-item">
1059
- <a href="#" class="stretched">List item 3</a>
1060
- </li>
1061
- </ol>
1062
- <h3>Inline lists</h3>
1063
- <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>
1064
- <ul class="list columns">
1065
- <li class="list-item">
1066
- <a href="#">List item 1</a>
1067
- </li>
1068
- <li class="list-item">
1069
- List item 2
1070
- </li>
1071
- <li class="list-item">
1072
- <a href="#" class="stretched">List item 3</a>
1073
- </li>
1074
- <li class="list-item">
1075
- <a href="#">List item 4</a>
1076
- </li>
1077
- <li class="list-item">
1078
- List item 5
1079
- </li>
1080
- <li class="list-item">
1081
- <a href="#" class="stretched">List item 6</a>
1082
- </li>
1083
- </ul>
1084
- <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>
1085
- <ul class="list display-flex flex-wrap">
1086
- <li class="list-item">
1087
- <a href="#">List item 1</a>
1088
- </li>
1089
- <li class="list-item">
1090
- List item 2
1091
- </li>
1092
- <li class="list-item">
1093
- <a href="#" class="stretched">List item 3</a>
1094
- </li>
1095
- <li class="list-item">
1096
- <a href="#">List item 4</a>
1097
- </li>
1098
- <li class="list-item">
1099
- List item 5
1100
- </li>
1101
- <li class="list-item">
1102
- <a href="#" class="stretched">List item 6</a>
1103
- </li>
1104
- </ul>
1105
- </div>
1106
- <div class="py-10 my-10 container sidebars">
1107
- <div class="sidebar-left z-1">
1108
- <div class="bg-primary-500 py-10">
1109
- <h2>Sidebar content (left)</h2>
1110
- <p>This is sidebar content.</p>
1111
- </div>
1112
- </div>
1113
- <div class="inner-content container z-0">
1114
- <div class="bg-secondary-500 py-10">
1115
- <h2>Inner content 1</h2>
1116
- <p>This is the inner content section where additional information can be placed.</p>
1117
- </div>
1118
- <div class="bg-tertiary-500 full-width contain">
1119
- <div class="bg-tertiary-700 feature contain">
1120
- <div class="bg-tertiary-800 breakout contain">
1121
- <div class="bg-secondary-500 py-10">
1122
- <h2>Inner content 2</h2>
1123
- <p>This is the inner content section where additional information can be placed.</p>
1124
- </div>
1125
- </div>
1126
- </div>
1127
- </div>
1128
- <div class="bg-secondary-500 py-10">
1129
- <h2>Inner content 3</h2>
1130
- <p>This is the inner content section where additional information can be placed.</p>
1131
- </div>
1132
- </div>
1133
- <div class="sidebar-right z-1">
1134
- <div class="bg-primary-500 py-10">
1135
- <h2>Sidebar content (right)</h2>
1136
- <p>This is sidebar content.</p>
1137
- </div>
1138
- </div>
1139
- </div>
1140
- <div class="py-10 my-10 container sidebars">
1141
- <div class="sidebar-left bg-primary-700 z-1">
1142
- <div class="bg-primary-500 py-10">
1143
- <h2>Sidebar content (left)</h2>
1144
- <p>This is sidebar content.</p>
1145
- </div>
1146
- </div>
1147
- <div class="content-right bg-secondary-700 z-0">
1148
- <div class="bg-secondary-500 py-10">
1149
- <h2>Inner content 1</h2>
1150
- <p>This is the inner content section where additional information can be placed.</p>
1151
- </div>
1152
- </div>
1153
- </div>
1154
- <div class="py-10 my-10 container sidebars">
1155
- <div class="content-left bg-secondary-700 z-0">
1156
- <div class="bg-secondary-500 py-10">
1157
- <h2>Inner content 1</h2>
1158
- <p>This is the inner content section where additional information can be placed.</p>
1159
- </div>
1160
- </div>
1161
- <div class="sidebar-right bg-primary-700 z-1">
1162
- <div class="bg-primary-500 py-10">
1163
- <h2>Sidebar content (right)</h2>
1164
- <p>This is sidebar content.</p>
1165
- </div>
1166
- </div>
1167
- </div>
1168
- </main>
1169
- <script src="https://cdn.jsdelivr.net/npm/accessible-menu/dist/disclosure-menu.iife.js"></script>
1170
- <script type="module" src="packages/core/src/js/alert/index.js"></script>
1171
- <script type="module" src="packages/core/src/js/accordion/index.js"></script>
1172
- <script type="module" src="packages/core/src/js/carousel/index.js"></script>
1173
- <script type="module" src="packages/core/src/js/navigation/index.js"></script>
1174
- <script>
1175
- const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
1176
- const setTheme = window.localStorage.getItem('theme') || preferredTheme;
1177
- const themeToggle = document.getElementById('dark-mode-toggle');
1178
-
1179
- document.documentElement.classList.add(`${setTheme}-mode`);
1180
- themeToggle.innerHTML = setTheme === 'dark' ? 'Toggle light mode' : 'Toggle dark mode';
1181
-
1182
- themeToggle.addEventListener('click', () => {
1183
- const currentTheme = document.documentElement.classList.contains('dark-mode') ? 'dark' : 'light';
1184
- const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
1185
-
1186
- document.documentElement.classList.remove(`${currentTheme}-mode`);
1187
- document.documentElement.classList.add(`${newTheme}-mode`);
1188
- window.localStorage.setItem('theme', newTheme);
1189
- themeToggle.innerHTML = newTheme === 'dark' ? 'Toggle light mode' : 'Toggle dark mode';
1190
- });
1191
- </script>
1192
- <script>
1193
- document.addEventListener('DOMContentLoaded', () => {
1194
- const viewSwapper = document.getElementById('view-swapper');
1195
- const cardContainer = document.querySelector('.container-type-inline > .columns');
1196
-
1197
- viewSwapper.addEventListener('click', () => {
1198
- if (viewSwapper.dataset.view === 'list') {
1199
- // Set the --graupl-columns-count CSS variable to 1 for list view.
1200
- cardContainer.style.setProperty('--graupl-columns-count', '1');
1201
- viewSwapper.dataset.view = 'grid';
1202
- viewSwapper.textContent = 'Grid view';
1203
- } else {
1204
- // Set the --graupl-columns-count CSS variable to 3 for grid view.
1205
- cardContainer.style.setProperty('--graupl-columns-count', '3');
1206
- viewSwapper.dataset.view = 'list';
1207
- viewSwapper.textContent = 'List view';
1208
- }
1209
- });
1210
- });
1211
- </script>
1212
- </body>
1213
-
1214
- </html>