@graupl/graupl 1.0.0-beta.10 → 1.0.0-beta.12

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 (480) 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/alert.cjs.js +5 -0
  32. package/dist/js/generator/alert.cjs.js.map +1 -0
  33. package/dist/js/generator/alert.es.js +5 -0
  34. package/dist/js/generator/alert.es.js.map +1 -0
  35. package/dist/js/generator/alert.iife.js +5 -0
  36. package/dist/js/generator/alert.iife.js.map +1 -0
  37. package/dist/js/generator/carousel.cjs.js +5 -0
  38. package/dist/js/generator/carousel.cjs.js.map +1 -0
  39. package/dist/js/generator/carousel.es.js +5 -0
  40. package/dist/js/generator/carousel.es.js.map +1 -0
  41. package/dist/js/generator/carousel.iife.js +5 -0
  42. package/dist/js/generator/carousel.iife.js.map +1 -0
  43. package/dist/js/generator/navigation.cjs.js +3 -0
  44. package/dist/js/generator/navigation.cjs.js.map +1 -0
  45. package/dist/js/generator/navigation.es.js +3 -0
  46. package/dist/js/generator/navigation.es.js.map +1 -0
  47. package/dist/js/generator/navigation.iife.js +3 -0
  48. package/dist/js/generator/navigation.iife.js.map +1 -0
  49. package/dist/js/graupl.js +9 -0
  50. package/dist/js/graupl.js.map +1 -0
  51. package/dist/js/navigation.js +3 -0
  52. package/dist/js/navigation.js.map +1 -0
  53. package/package.json +24 -14
  54. package/.browserslistrc +0 -3
  55. package/.czrc +0 -3
  56. package/.devcontainer/devcontainer.json +0 -221
  57. package/.editorconfig +0 -13
  58. package/.env +0 -3
  59. package/.github/CODE_OF_CONDUCT.md +0 -73
  60. package/.github/COMMIT_CONVENTION.md +0 -17
  61. package/.github/CONTRIBUTING.md +0 -86
  62. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -30
  63. package/.github/ISSUE_TEMPLATE/documentation.md +0 -20
  64. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  65. package/.github/SECURITY.md +0 -26
  66. package/.github/dependabot.yml +0 -17
  67. package/.github/pull_request_template.md +0 -5
  68. package/.github/workflows/codeql-analysis.yml +0 -71
  69. package/.github/workflows/docs.yml +0 -66
  70. package/.github/workflows/prerelease.yml +0 -125
  71. package/.github/workflows/release.yml +0 -111
  72. package/.github/workflows/test.yml +0 -78
  73. package/.husky/commit-msg +0 -3
  74. package/.husky/pre-commit +0 -4
  75. package/.prettierignore +0 -12
  76. package/.stylelintignore +0 -9
  77. package/.versionrc.cjs +0 -73
  78. package/.vscode/settings.json +0 -10
  79. package/CHANGELOG.md +0 -559
  80. package/build.js +0 -9
  81. package/combine-at-rules.cjs +0 -61
  82. package/commitlint.config.js +0 -5
  83. package/container/.env +0 -26
  84. package/container/build/app.dockerfile +0 -41
  85. package/container/docker-compose.yml +0 -27
  86. package/dist/js/graupl.cjs.js +0 -7
  87. package/dist/js/graupl.esm.js +0 -2561
  88. package/dist/js/graupl.iife.js +0 -7
  89. package/docs/.vitepress/config.js +0 -108
  90. package/docs/.vitepress/theme/custom.scss +0 -35
  91. package/docs/.vitepress/theme/index.js +0 -4
  92. package/docs/compiling-graupl.md +0 -57
  93. package/docs/components/alert.md +0 -130
  94. package/docs/components/button.md +0 -84
  95. package/docs/components/card.md +0 -369
  96. package/docs/components/index.md +0 -1
  97. package/docs/components/inputgroup.md +0 -159
  98. package/docs/components/menu.md +0 -326
  99. package/docs/components/navigation.md +0 -158
  100. package/docs/content.md +0 -237
  101. package/docs/defaults.md +0 -121
  102. package/docs/forms.md +0 -79
  103. package/docs/functions.md +0 -9
  104. package/docs/getting-started.md +0 -1
  105. package/docs/index.md +0 -1
  106. package/docs/introduction.md +0 -25
  107. package/docs/layout.md +0 -200
  108. package/docs/mixins.md +0 -47
  109. package/docs/state.md +0 -67
  110. package/docs/theme.md +0 -258
  111. package/docs/utilities/alignment.md +0 -411
  112. package/docs/utilities/background.md +0 -192
  113. package/docs/utilities/border.md +0 -268
  114. package/docs/utilities/color.md +0 -348
  115. package/docs/utilities/container.md +0 -3
  116. package/docs/utilities/display.md +0 -3
  117. package/docs/utilities/flex.md +0 -3
  118. package/docs/utilities/gradient.md +0 -3
  119. package/docs/utilities/height.md +0 -3
  120. package/docs/utilities/inset.md +0 -3
  121. package/docs/utilities/justification.md +0 -3
  122. package/docs/utilities/list.md +0 -3
  123. package/docs/utilities/order.md +0 -3
  124. package/docs/utilities/position.md +0 -3
  125. package/docs/utilities/ratio.md +0 -3
  126. package/docs/utilities/responsive-classes.md +0 -3
  127. package/docs/utilities/spacing.md +0 -3
  128. package/docs/utilities/typography.md +0 -3
  129. package/docs/utilities/visibility.md +0 -3
  130. package/docs/utilities/visually-hidden.md +0 -3
  131. package/docs/utilities/width.md +0 -3
  132. package/docs/utilities/z-index.md +0 -3
  133. package/docs/utilities.md +0 -357
  134. package/eslint.config.js +0 -74
  135. package/favicon.ico +0 -0
  136. package/index.html +0 -1214
  137. package/index.js +0 -12
  138. package/lint-staged.config.js +0 -6
  139. package/logo.svg +0 -296
  140. package/packages/core/build.js +0 -9
  141. package/packages/core/dist/css/base/button.css +0 -2
  142. package/packages/core/dist/css/base/button.css.map +0 -1
  143. package/packages/core/dist/css/base/form.css +0 -2
  144. package/packages/core/dist/css/base/form.css.map +0 -1
  145. package/packages/core/dist/css/base/link.css +0 -2
  146. package/packages/core/dist/css/base/link.css.map +0 -1
  147. package/packages/core/dist/css/base/table.css +0 -2
  148. package/packages/core/dist/css/base/table.css.map +0 -1
  149. package/packages/core/dist/css/base.css +0 -2
  150. package/packages/core/dist/css/base.css.map +0 -1
  151. package/packages/core/dist/css/component/accordion.css +0 -5
  152. package/packages/core/dist/css/component/accordion.css.map +0 -1
  153. package/packages/core/dist/css/component/alert.css +0 -2
  154. package/packages/core/dist/css/component/alert.css.map +0 -1
  155. package/packages/core/dist/css/component/card.css +0 -2
  156. package/packages/core/dist/css/component/card.css.map +0 -1
  157. package/packages/core/dist/css/component/carousel.css +0 -2
  158. package/packages/core/dist/css/component/carousel.css.map +0 -1
  159. package/packages/core/dist/css/component/input-group.css +0 -2
  160. package/packages/core/dist/css/component/input-group.css.map +0 -1
  161. package/packages/core/dist/css/component/list.css +0 -2
  162. package/packages/core/dist/css/component/list.css.map +0 -1
  163. package/packages/core/dist/css/component/menu.css +0 -2
  164. package/packages/core/dist/css/component/menu.css.map +0 -1
  165. package/packages/core/dist/css/component/navigation.css +0 -2
  166. package/packages/core/dist/css/component/navigation.css.map +0 -1
  167. package/packages/core/dist/css/component.css +0 -5
  168. package/packages/core/dist/css/component.css.map +0 -1
  169. package/packages/core/dist/css/graupl.css +0 -5
  170. package/packages/core/dist/css/graupl.css.map +0 -1
  171. package/packages/core/dist/css/init.css +0 -2
  172. package/packages/core/dist/css/init.css.map +0 -1
  173. package/packages/core/dist/css/layout/columns.css +0 -2
  174. package/packages/core/dist/css/layout/columns.css.map +0 -1
  175. package/packages/core/dist/css/layout/container.css +0 -2
  176. package/packages/core/dist/css/layout/container.css.map +0 -1
  177. package/packages/core/dist/css/layout/flex-columns.css +0 -2
  178. package/packages/core/dist/css/layout/flex-columns.css.map +0 -1
  179. package/packages/core/dist/css/layout.css +0 -5
  180. package/packages/core/dist/css/layout.css.map +0 -1
  181. package/packages/core/dist/css/normalize.css +0 -2
  182. package/packages/core/dist/css/normalize.css.map +0 -1
  183. package/packages/core/dist/css/state/focus.css +0 -2
  184. package/packages/core/dist/css/state/focus.css.map +0 -1
  185. package/packages/core/dist/css/state.css +0 -2
  186. package/packages/core/dist/css/state.css.map +0 -1
  187. package/packages/core/dist/css/theme/color.css +0 -2
  188. package/packages/core/dist/css/theme/color.css.map +0 -1
  189. package/packages/core/dist/css/theme/typography.css +0 -2
  190. package/packages/core/dist/css/theme/typography.css.map +0 -1
  191. package/packages/core/dist/css/theme.css +0 -2
  192. package/packages/core/dist/css/theme.css.map +0 -1
  193. package/packages/core/dist/css/utilities/alignment.css +0 -2
  194. package/packages/core/dist/css/utilities/alignment.css.map +0 -1
  195. package/packages/core/dist/css/utilities/background.css +0 -2
  196. package/packages/core/dist/css/utilities/background.css.map +0 -1
  197. package/packages/core/dist/css/utilities/border.css +0 -2
  198. package/packages/core/dist/css/utilities/border.css.map +0 -1
  199. package/packages/core/dist/css/utilities/color.css +0 -2
  200. package/packages/core/dist/css/utilities/color.css.map +0 -1
  201. package/packages/core/dist/css/utilities/container.css +0 -2
  202. package/packages/core/dist/css/utilities/container.css.map +0 -1
  203. package/packages/core/dist/css/utilities/display.css +0 -2
  204. package/packages/core/dist/css/utilities/display.css.map +0 -1
  205. package/packages/core/dist/css/utilities/flex.css +0 -2
  206. package/packages/core/dist/css/utilities/flex.css.map +0 -1
  207. package/packages/core/dist/css/utilities/gradient.css +0 -2
  208. package/packages/core/dist/css/utilities/gradient.css.map +0 -1
  209. package/packages/core/dist/css/utilities/height.css +0 -2
  210. package/packages/core/dist/css/utilities/height.css.map +0 -1
  211. package/packages/core/dist/css/utilities/inset.css +0 -2
  212. package/packages/core/dist/css/utilities/inset.css.map +0 -1
  213. package/packages/core/dist/css/utilities/justification.css +0 -2
  214. package/packages/core/dist/css/utilities/justification.css.map +0 -1
  215. package/packages/core/dist/css/utilities/list.css +0 -2
  216. package/packages/core/dist/css/utilities/list.css.map +0 -1
  217. package/packages/core/dist/css/utilities/order.css +0 -2
  218. package/packages/core/dist/css/utilities/order.css.map +0 -1
  219. package/packages/core/dist/css/utilities/position.css +0 -2
  220. package/packages/core/dist/css/utilities/position.css.map +0 -1
  221. package/packages/core/dist/css/utilities/ratio.css +0 -2
  222. package/packages/core/dist/css/utilities/ratio.css.map +0 -1
  223. package/packages/core/dist/css/utilities/spacing.css +0 -2
  224. package/packages/core/dist/css/utilities/spacing.css.map +0 -1
  225. package/packages/core/dist/css/utilities/typography.css +0 -2
  226. package/packages/core/dist/css/utilities/typography.css.map +0 -1
  227. package/packages/core/dist/css/utilities/visibility.css +0 -2
  228. package/packages/core/dist/css/utilities/visibility.css.map +0 -1
  229. package/packages/core/dist/css/utilities/visually-hidden.css +0 -2
  230. package/packages/core/dist/css/utilities/visually-hidden.css.map +0 -1
  231. package/packages/core/dist/css/utilities/width.css +0 -2
  232. package/packages/core/dist/css/utilities/width.css.map +0 -1
  233. package/packages/core/dist/css/utilities/z-index.css +0 -2
  234. package/packages/core/dist/css/utilities/z-index.css.map +0 -1
  235. package/packages/core/dist/css/utilities.css +0 -2
  236. package/packages/core/dist/css/utilities.css.map +0 -1
  237. package/packages/core/package.json +0 -58
  238. package/packages/core/scss/base/button.scss +0 -3
  239. package/packages/core/scss/base/form.scss +0 -3
  240. package/packages/core/scss/base/link.scss +0 -3
  241. package/packages/core/scss/base/table.scss +0 -3
  242. package/packages/core/scss/base.scss +0 -3
  243. package/packages/core/scss/component/accordion.scss +0 -3
  244. package/packages/core/scss/component/alert.scss +0 -3
  245. package/packages/core/scss/component/card.scss +0 -3
  246. package/packages/core/scss/component/carousel.scss +0 -3
  247. package/packages/core/scss/component/input-group.scss +0 -3
  248. package/packages/core/scss/component/list.scss +0 -3
  249. package/packages/core/scss/component/menu.scss +0 -3
  250. package/packages/core/scss/component/navigation.scss +0 -3
  251. package/packages/core/scss/component.scss +0 -3
  252. package/packages/core/scss/graupl.scss +0 -3
  253. package/packages/core/scss/init.scss +0 -3
  254. package/packages/core/scss/layout/columns.scss +0 -3
  255. package/packages/core/scss/layout/container.scss +0 -3
  256. package/packages/core/scss/layout/flex-columns.scss +0 -3
  257. package/packages/core/scss/layout.scss +0 -3
  258. package/packages/core/scss/normalize.scss +0 -3
  259. package/packages/core/scss/state/focus.scss +0 -3
  260. package/packages/core/scss/state.scss +0 -3
  261. package/packages/core/scss/theme/color.scss +0 -3
  262. package/packages/core/scss/theme/typography.scss +0 -3
  263. package/packages/core/scss/theme.scss +0 -3
  264. package/packages/core/scss/utilities/alignment.scss +0 -3
  265. package/packages/core/scss/utilities/background.scss +0 -3
  266. package/packages/core/scss/utilities/border.scss +0 -3
  267. package/packages/core/scss/utilities/color.scss +0 -3
  268. package/packages/core/scss/utilities/container.scss +0 -3
  269. package/packages/core/scss/utilities/display.scss +0 -3
  270. package/packages/core/scss/utilities/flex.scss +0 -3
  271. package/packages/core/scss/utilities/gradient.scss +0 -3
  272. package/packages/core/scss/utilities/height.scss +0 -3
  273. package/packages/core/scss/utilities/inset.scss +0 -3
  274. package/packages/core/scss/utilities/justification.scss +0 -3
  275. package/packages/core/scss/utilities/list.scss +0 -3
  276. package/packages/core/scss/utilities/order.scss +0 -3
  277. package/packages/core/scss/utilities/position.scss +0 -3
  278. package/packages/core/scss/utilities/ratio.scss +0 -3
  279. package/packages/core/scss/utilities/spacing.scss +0 -3
  280. package/packages/core/scss/utilities/typography.scss +0 -3
  281. package/packages/core/scss/utilities/visibility.scss +0 -3
  282. package/packages/core/scss/utilities/visually-hidden.scss +0 -3
  283. package/packages/core/scss/utilities/width.scss +0 -3
  284. package/packages/core/scss/utilities/z-index.scss +0 -3
  285. package/packages/core/scss/utilities.scss +0 -3
  286. package/packages/core/src/js/accordion/Accordion.js +0 -1163
  287. package/packages/core/src/js/accordion/AccordionItem.js +0 -496
  288. package/packages/core/src/js/accordion/index.js +0 -10
  289. package/packages/core/src/js/alert/Alert.js +0 -581
  290. package/packages/core/src/js/alert/index.js +0 -11
  291. package/packages/core/src/js/carousel/Carousel.js +0 -1427
  292. package/packages/core/src/js/carousel/index.js +0 -10
  293. package/packages/core/src/js/domHelpers.js +0 -37
  294. package/packages/core/src/js/eventHandlers.js +0 -39
  295. package/packages/core/src/js/navigation/index.js +0 -36
  296. package/packages/core/src/js/storage.js +0 -106
  297. package/packages/core/src/js/validate.js +0 -225
  298. package/packages/core/src/scss/_defaults.scss +0 -184
  299. package/packages/core/src/scss/_index.scss +0 -15
  300. package/packages/core/src/scss/_init.scss +0 -6
  301. package/packages/core/src/scss/_normalize.scss +0 -197
  302. package/packages/core/src/scss/_variables.scss +0 -95
  303. package/packages/core/src/scss/base/_index.scss +0 -6
  304. package/packages/core/src/scss/base/button/_defaults.scss +0 -49
  305. package/packages/core/src/scss/base/button/_index.scss +0 -206
  306. package/packages/core/src/scss/base/button/_mixins.scss +0 -104
  307. package/packages/core/src/scss/base/button/_variables.scss +0 -252
  308. package/packages/core/src/scss/base/form/_defaults.scss +0 -24
  309. package/packages/core/src/scss/base/form/_index.scss +0 -227
  310. package/packages/core/src/scss/base/form/_variables.scss +0 -245
  311. package/packages/core/src/scss/base/link/_defaults.scss +0 -35
  312. package/packages/core/src/scss/base/link/_index.scss +0 -245
  313. package/packages/core/src/scss/base/link/_variables.scss +0 -370
  314. package/packages/core/src/scss/base/table/_defaults.scss +0 -68
  315. package/packages/core/src/scss/base/table/_index.scss +0 -314
  316. package/packages/core/src/scss/base/table/_variables.scss +0 -309
  317. package/packages/core/src/scss/component/_index.scss +0 -10
  318. package/packages/core/src/scss/component/accordion/_defaults.scss +0 -40
  319. package/packages/core/src/scss/component/accordion/_index.scss +0 -198
  320. package/packages/core/src/scss/component/accordion/_variables.scss +0 -356
  321. package/packages/core/src/scss/component/alert/_defaults.scss +0 -49
  322. package/packages/core/src/scss/component/alert/_index.scss +0 -119
  323. package/packages/core/src/scss/component/alert/_variables.scss +0 -200
  324. package/packages/core/src/scss/component/card/_defaults.scss +0 -32
  325. package/packages/core/src/scss/component/card/_index.scss +0 -212
  326. package/packages/core/src/scss/component/card/_variables.scss +0 -216
  327. package/packages/core/src/scss/component/carousel/_defaults.scss +0 -43
  328. package/packages/core/src/scss/component/carousel/_index.scss +0 -192
  329. package/packages/core/src/scss/component/carousel/_variables.scss +0 -104
  330. package/packages/core/src/scss/component/input-group/_defaults.scss +0 -30
  331. package/packages/core/src/scss/component/input-group/_index.scss +0 -47
  332. package/packages/core/src/scss/component/input-group/_variables.scss +0 -66
  333. package/packages/core/src/scss/component/list/_defaults.scss +0 -15
  334. package/packages/core/src/scss/component/list/_index.scss +0 -52
  335. package/packages/core/src/scss/component/list/_variables.scss +0 -236
  336. package/packages/core/src/scss/component/menu/_defaults.scss +0 -57
  337. package/packages/core/src/scss/component/menu/_index.scss +0 -308
  338. package/packages/core/src/scss/component/menu/_variables.scss +0 -642
  339. package/packages/core/src/scss/component/navigation/_defaults.scss +0 -23
  340. package/packages/core/src/scss/component/navigation/_index.scss +0 -190
  341. package/packages/core/src/scss/component/navigation/_variables.scss +0 -290
  342. package/packages/core/src/scss/functions/_container.scss +0 -38
  343. package/packages/core/src/scss/functions/_important.scss +0 -36
  344. package/packages/core/src/scss/functions/_screen.scss +0 -38
  345. package/packages/core/src/scss/functions/_theme.scss +0 -39
  346. package/packages/core/src/scss/functions/_utility.scss +0 -28
  347. package/packages/core/src/scss/layout/_index.scss +0 -5
  348. package/packages/core/src/scss/layout/columns/_defaults.scss +0 -24
  349. package/packages/core/src/scss/layout/columns/_index.scss +0 -137
  350. package/packages/core/src/scss/layout/columns/_variables.scss +0 -55
  351. package/packages/core/src/scss/layout/container/_defaults.scss +0 -35
  352. package/packages/core/src/scss/layout/container/_index.scss +0 -628
  353. package/packages/core/src/scss/layout/container/_variables.scss +0 -114
  354. package/packages/core/src/scss/layout/flex-columns/_defaults.scss +0 -28
  355. package/packages/core/src/scss/layout/flex-columns/_index.scss +0 -184
  356. package/packages/core/src/scss/layout/flex-columns/_variables.scss +0 -30
  357. package/packages/core/src/scss/mixins/_animation.scss +0 -15
  358. package/packages/core/src/scss/mixins/_container.scss +0 -80
  359. package/packages/core/src/scss/mixins/_layer.scss +0 -16
  360. package/packages/core/src/scss/mixins/_screen.scss +0 -77
  361. package/packages/core/src/scss/mixins/_state.scss +0 -18
  362. package/packages/core/src/scss/mixins/_theme.scss +0 -15
  363. package/packages/core/src/scss/mixins/_utility.scss +0 -185
  364. package/packages/core/src/scss/mixins/_visually-hidden.scss +0 -30
  365. package/packages/core/src/scss/state/_index.scss +0 -3
  366. package/packages/core/src/scss/state/focus/_defaults.scss +0 -9
  367. package/packages/core/src/scss/state/focus/_index.scss +0 -42
  368. package/packages/core/src/scss/state/focus/_mixins.scss +0 -13
  369. package/packages/core/src/scss/state/focus/_variables.scss +0 -50
  370. package/packages/core/src/scss/theme/_index.scss +0 -4
  371. package/packages/core/src/scss/theme/color/_defaults.scss +0 -143
  372. package/packages/core/src/scss/theme/color/_index.scss +0 -42
  373. package/packages/core/src/scss/theme/color/_variables.scss +0 -133
  374. package/packages/core/src/scss/theme/typography/_defaults.scss +0 -54
  375. package/packages/core/src/scss/theme/typography/_index.scss +0 -120
  376. package/packages/core/src/scss/theme/typography/_variables.scss +0 -248
  377. package/packages/core/src/scss/utilities/_index.scss +0 -23
  378. package/packages/core/src/scss/utilities/_template/_defaults.scss +0 -41
  379. package/packages/core/src/scss/utilities/_template/_index.scss +0 -171
  380. package/packages/core/src/scss/utilities/_template/_variables.scss +0 -6
  381. package/packages/core/src/scss/utilities/alignment/_defaults.scss +0 -76
  382. package/packages/core/src/scss/utilities/alignment/_index.scss +0 -336
  383. package/packages/core/src/scss/utilities/alignment/_variables.scss +0 -6
  384. package/packages/core/src/scss/utilities/background/_defaults.scss +0 -122
  385. package/packages/core/src/scss/utilities/background/_index.scss +0 -634
  386. package/packages/core/src/scss/utilities/background/_variables.scss +0 -6
  387. package/packages/core/src/scss/utilities/border/_defaults.scss +0 -73
  388. package/packages/core/src/scss/utilities/border/_index.scss +0 -558
  389. package/packages/core/src/scss/utilities/border/_variables.scss +0 -6
  390. package/packages/core/src/scss/utilities/color/_defaults.scss +0 -49
  391. package/packages/core/src/scss/utilities/color/_index.scss +0 -469
  392. package/packages/core/src/scss/utilities/color/_variables.scss +0 -6
  393. package/packages/core/src/scss/utilities/container/_defaults.scss +0 -40
  394. package/packages/core/src/scss/utilities/container/_index.scss +0 -174
  395. package/packages/core/src/scss/utilities/container/_variables.scss +0 -6
  396. package/packages/core/src/scss/utilities/display/_defaults.scss +0 -47
  397. package/packages/core/src/scss/utilities/display/_index.scss +0 -184
  398. package/packages/core/src/scss/utilities/display/_variables.scss +0 -6
  399. package/packages/core/src/scss/utilities/flex/_defaults.scss +0 -99
  400. package/packages/core/src/scss/utilities/flex/_index.scss +0 -486
  401. package/packages/core/src/scss/utilities/flex/_variables.scss +0 -6
  402. package/packages/core/src/scss/utilities/gradient/_defaults.scss +0 -70
  403. package/packages/core/src/scss/utilities/gradient/_index.scss +0 -696
  404. package/packages/core/src/scss/utilities/gradient/_variables.scss +0 -29
  405. package/packages/core/src/scss/utilities/height/_defaults.scss +0 -54
  406. package/packages/core/src/scss/utilities/height/_index.scss +0 -525
  407. package/packages/core/src/scss/utilities/height/_variables.scss +0 -6
  408. package/packages/core/src/scss/utilities/inset/_defaults.scss +0 -55
  409. package/packages/core/src/scss/utilities/inset/_index.scss +0 -258
  410. package/packages/core/src/scss/utilities/inset/_variables.scss +0 -6
  411. package/packages/core/src/scss/utilities/justification/_defaults.scss +0 -73
  412. package/packages/core/src/scss/utilities/justification/_index.scss +0 -333
  413. package/packages/core/src/scss/utilities/justification/_variables.scss +0 -6
  414. package/packages/core/src/scss/utilities/list/_defaults.scss +0 -53
  415. package/packages/core/src/scss/utilities/list/_index.scss +0 -253
  416. package/packages/core/src/scss/utilities/list/_variables.scss +0 -6
  417. package/packages/core/src/scss/utilities/order/_defaults.scss +0 -36
  418. package/packages/core/src/scss/utilities/order/_index.scss +0 -246
  419. package/packages/core/src/scss/utilities/order/_variables.scss +0 -6
  420. package/packages/core/src/scss/utilities/position/_defaults.scss +0 -41
  421. package/packages/core/src/scss/utilities/position/_index.scss +0 -178
  422. package/packages/core/src/scss/utilities/position/_variables.scss +0 -6
  423. package/packages/core/src/scss/utilities/ratio/_defaults.scss +0 -42
  424. package/packages/core/src/scss/utilities/ratio/_index.scss +0 -188
  425. package/packages/core/src/scss/utilities/ratio/_variables.scss +0 -9
  426. package/packages/core/src/scss/utilities/spacing/_defaults.scss +0 -64
  427. package/packages/core/src/scss/utilities/spacing/_index.scss +0 -970
  428. package/packages/core/src/scss/utilities/spacing/_variables.scss +0 -6
  429. package/packages/core/src/scss/utilities/typography/_defaults.scss +0 -58
  430. package/packages/core/src/scss/utilities/typography/_index.scss +0 -1089
  431. package/packages/core/src/scss/utilities/typography/_variables.scss +0 -6
  432. package/packages/core/src/scss/utilities/visibility/_defaults.scss +0 -39
  433. package/packages/core/src/scss/utilities/visibility/_index.scss +0 -173
  434. package/packages/core/src/scss/utilities/visibility/_variables.scss +0 -6
  435. package/packages/core/src/scss/utilities/visually-hidden/_defaults.scss +0 -29
  436. package/packages/core/src/scss/utilities/visually-hidden/_index.scss +0 -189
  437. package/packages/core/src/scss/utilities/visually-hidden/_variables.scss +0 -6
  438. package/packages/core/src/scss/utilities/width/_defaults.scss +0 -54
  439. package/packages/core/src/scss/utilities/width/_index.scss +0 -525
  440. package/packages/core/src/scss/utilities/width/_variables.scss +0 -6
  441. package/packages/core/src/scss/utilities/z-index/_defaults.scss +0 -40
  442. package/packages/core/src/scss/utilities/z-index/_index.scss +0 -173
  443. package/packages/core/src/scss/utilities/z-index/_variables.scss +0 -6
  444. package/packages/core/vite.config.js +0 -28
  445. package/packages/icons/dist/css/base/button.css +0 -2
  446. package/packages/icons/dist/css/base/button.css.map +0 -1
  447. package/packages/icons/dist/css/base/link.css +0 -2
  448. package/packages/icons/dist/css/base/link.css.map +0 -1
  449. package/packages/icons/dist/css/base.css +0 -2
  450. package/packages/icons/dist/css/base.css.map +0 -1
  451. package/packages/icons/dist/css/component/icon.css +0 -2
  452. package/packages/icons/dist/css/component/icon.css.map +0 -1
  453. package/packages/icons/dist/css/component.css +0 -2
  454. package/packages/icons/dist/css/component.css.map +0 -1
  455. package/packages/icons/dist/css/icon.css +0 -2
  456. package/packages/icons/dist/css/icon.css.map +0 -1
  457. package/packages/icons/package.json +0 -48
  458. package/packages/icons/scss/base/button.scss +0 -3
  459. package/packages/icons/scss/base/link.scss +0 -3
  460. package/packages/icons/scss/base.scss +0 -3
  461. package/packages/icons/scss/component/icon.scss +0 -3
  462. package/packages/icons/scss/component.scss +0 -3
  463. package/packages/icons/scss/icon.scss +0 -3
  464. package/packages/icons/src/scss/_index.scss +0 -4
  465. package/packages/icons/src/scss/base/_index.scss +0 -4
  466. package/packages/icons/src/scss/base/button/_defaults.scss +0 -7
  467. package/packages/icons/src/scss/base/button/_index.scss +0 -58
  468. package/packages/icons/src/scss/base/button/_variables.scss +0 -7
  469. package/packages/icons/src/scss/base/link/_defaults.scss +0 -7
  470. package/packages/icons/src/scss/base/link/_index.scss +0 -58
  471. package/packages/icons/src/scss/base/link/_variables.scss +0 -7
  472. package/packages/icons/src/scss/component/_index.scss +0 -3
  473. package/packages/icons/src/scss/component/icon/_defaults.scss +0 -30
  474. package/packages/icons/src/scss/component/icon/_index.scss +0 -60
  475. package/packages/icons/src/scss/component/icon/_mixins.scss +0 -62
  476. package/packages/icons/src/scss/component/icon/_variables.scss +0 -24
  477. package/postcss.config.cjs +0 -11
  478. package/prettier.config.js +0 -16
  479. package/stylelint.config.js +0 -22
  480. 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>