From 09da290ad8d5958ff51ced17e3698521518f67a0 Mon Sep 17 00:00:00 2001 From: Peter-Paul van Gemerden Date: Mon, 2 Sep 2024 13:05:45 +0200 Subject: [PATCH 1/2] feat: merge icore_open_docs/ back into docs/ --- docs/src/routes/(docs)/+page.svelte | 37 +- .../src/routes/(docs)/components/+page.svelte | 386 +- .../components/accordion-test/+page.svelte | 4 +- .../(docs)/components/accordion/+page.svelte | 3 +- .../components/application-base/+page.svelte | 16 +- .../article-content-wrapper-test/+page.svelte | 6 +- .../article-content-wrapper/+page.svelte | 11 +- .../components/article-test/+page.svelte | 8 +- .../(docs)/components/article/+page.svelte | 11 +- .../components/body-text-set/+page.svelte | 6 +- .../components/branding-colors/+page.svelte | 20 +- .../breadcrumb-bar-example/+page.svelte | 2 +- .../components/breadcrumb-bar/+page.svelte | 6 +- .../components/button-base/+page.svelte | 163 +- .../button-call-to-action/+page.svelte | 5 +- .../button-container-test/+page.svelte | 2 +- .../components/button-container/+page.svelte | 6 +- .../components/button-test/+page.svelte | 2 +- .../components/button-to-top/+page.svelte | 16 +- .../(docs)/components/button/+page.svelte | 34 +- .../(docs)/components/card/+page.svelte | 6 +- .../components/checkbox-test/+page.svelte | 2 +- .../(docs)/components/checkbox/+page.svelte | 2 +- .../components/collapsible-menu/+page.svelte | 37 +- .../components/collapsible/+page.svelte | 2 +- .../de-emphasized-test/+page.svelte | 2 +- .../components/de-emphasized/+page.svelte | 6 +- .../components/description-list/+page.svelte | 2 +- .../div-content-wrapper/+page.svelte | 9 +- .../routes/(docs)/components/div/+page.svelte | 9 +- .../components/emphasized-test/+page.svelte | 2 +- .../(docs)/components/emphasized/+page.svelte | 6 +- .../fieldset-checkbox-test/+page.svelte | 2 +- .../components/fieldset-checkbox/+page.svelte | 2 +- .../components/fieldset-radio/+page.svelte | 2 +- .../components/filter-test/+page.svelte | 2 +- .../(docs)/components/filter/+page.svelte | 2 +- .../(docs)/components/finn-large/+page.svelte | 2 +- .../components/finn-medium/+page.svelte | 2 +- .../(docs)/components/finn-small/+page.svelte | 7 +- .../components/focus-only-test/+page.svelte | 2 +- .../(docs)/components/focus-only/+page.svelte | 4 +- .../(docs)/components/font/+page.svelte | 6 +- .../footer-two-thirds-one-third/+page.svelte | 20 +- .../(docs)/components/footer/+page.svelte | 20 +- .../form-accent-color-test/+page.svelte | 2 +- .../components/form-accent-color/+page.svelte | 3 +- .../components/form-base-test/+page.svelte | 2 +- .../(docs)/components/form-base/+page.svelte | 4 +- .../components/form-columns-test/+page.svelte | 2 +- .../components/form-columns/+page.svelte | 4 +- .../form-combined-fields-test/+page.svelte | 14 +- .../form-combined-fields/+page.svelte | 4 +- .../form-fieldset-invisible/+page.svelte | 5 +- .../components/form-fieldset/+page.svelte | 12 +- .../components/form-help-test/+page.svelte | 2 +- .../(docs)/components/form-help/+page.svelte | 5 +- .../form-horizontal-view-test/+page.svelte | 2 +- .../form-horizontal-view/+page.svelte | 2 +- .../components/form-inline-test/+page.svelte | 2 +- .../components/form-inline/+page.svelte | 4 +- .../form-input-color-filled-test/+page.svelte | 2 +- .../form-input-color-filled/+page.svelte | 5 +- .../form-input-color-test/+page.svelte | 2 +- .../components/form-input-color/+page.svelte | 5 +- .../form-input-date-test/+page.svelte | 2 +- .../components/form-input-date/+page.svelte | 5 +- .../form-input-email-test/+page.svelte | 2 +- .../components/form-input-email/+page.svelte | 5 +- .../form-input-file-test/+page.svelte | 2 +- .../components/form-input-file/+page.svelte | 4 +- .../form-input-password-test/+page.svelte | 2 +- .../form-input-password/+page.svelte | 5 +- .../form-input-radio-test/+page.svelte | 2 +- .../components/form-input-radio/+page.svelte | 2 +- .../form-input-range-test/+page.svelte | 2 +- .../components/form-input-range/+page.svelte | 4 +- .../components/form-input-test/+page.svelte | 14 +- .../form-input-textarea-test/+page.svelte | 2 +- .../form-input-textarea/+page.svelte | 5 +- .../(docs)/components/form-input/+page.svelte | 5 +- .../form-notification-test/+page.svelte | 2 +- .../components/form-notification/+page.svelte | 6 +- .../form-required-test/+page.svelte | 2 +- .../components/form-required/+page.svelte | 4 +- .../components/form-select-test/+page.svelte | 2 +- .../components/form-select/+page.svelte | 4 +- .../(docs)/components/forms/+page.svelte | 26 +- .../components/header-navigation/+page.svelte | 219 +- .../example-content-wrapper/+page@.svelte | 52 +- .../example-form-button/+page@.svelte | 88 +- .../+page@.svelte | 2 +- .../example-logo-above/+page@.svelte | 2 +- .../example-logo/+page@.svelte | 46 +- .../example-multiple-menus/+page@.svelte | 71 +- .../header-navigation/example/+page@.svelte | 46 +- .../components/heading-base-set/+page.svelte | 66 +- .../components/headings-test/+page.svelte | 2 +- .../(docs)/components/headings/+page.svelte | 64 +- .../(docs)/components/hidden/+page.svelte | 5 +- .../horizontal-center-test/+page.svelte | 2 +- .../components/horizontal-center/+page.svelte | 6 +- .../horizontal-scroll-test/+page.svelte | 2 +- .../components/horizontal-scroll/+page.svelte | 6 +- .../horizontal-view-test/+page.svelte | 2 +- .../components/horizontal-view/+page.svelte | 4 +- .../(docs)/components/icons/+page.svelte | 2 +- .../components/icons/add-set/+page.svelte | 2 +- .../(docs)/components/icons/test/+page.svelte | 12 +- .../components/image-cover-test/+page.svelte | 2 +- .../components/image-cover/+page.svelte | 5 +- .../(docs)/components/image-icon/+page.svelte | 2 +- .../components/image-round-test/+page.svelte | 2 +- .../components/image-round/+page.svelte | 5 +- .../components/image-square-test/+page.svelte | 2 +- .../components/image-square/+page.svelte | 5 +- .../language-selector-test/+page.svelte | 22 +- .../components/language-selector/+page.svelte | 26 +- .../layout-authentication-test/+page.svelte | 2 +- .../layout-authentication/+page.svelte | 70 +- .../layout-centered-test/+page.svelte | 2 +- .../components/layout-centered/+page.svelte | 5 +- .../layout-column-2-test/+page.svelte | 26 +- .../components/layout-column-2/+page.svelte | 3 +- .../layout-column-3-test/+page.svelte | 38 +- .../components/layout-column-3/+page.svelte | 2 +- .../layout-column-4-test/+page.svelte | 50 +- .../components/layout-column-4/+page.svelte | 2 +- .../layout-fifty-fifty-test/+page.svelte | 26 +- .../layout-fifty-fifty/+page.svelte | 2 +- .../components/layout-form/+page.svelte | 2 +- .../+page.svelte | 22 +- .../layout-one-third-two-thirds/+page.svelte | 6 +- .../(docs)/components/layout-set/+page.svelte | 9 +- .../+page.svelte | 22 +- .../layout-two-thirds-one-third/+page.svelte | 6 +- .../(docs)/components/link/+page.svelte | 14 +- .../components/login-meta-test/+page.svelte | 2 +- .../(docs)/components/login-meta/+page.svelte | 4 +- .../(docs)/components/logo/+page.svelte | 2 +- .../main-content-wrapper/+page.svelte | 9 +- .../(docs)/components/main-test/+page.svelte | 4 +- .../(docs)/components/main/+page.svelte | 13 +- .../components/max-line-length/+page.svelte | 3 +- .../components/message-counter/+page.svelte | 3 +- .../(docs)/components/navigation/+page.svelte | 2 +- .../components/nota-bene-test/+page.svelte | 2 +- .../(docs)/components/nota-bene/+page.svelte | 19 +- .../notification-confirmation/+page.svelte | 5 +- .../notification-error/+page.svelte | 199 +- .../notification-explanation/+page.svelte | 201 +- .../notification-system-message/+page.svelte | 203 +- .../notification-warning/+page.svelte | 199 +- .../+page.svelte | 2 +- .../notifications-block-element/+page.svelte | 6 +- .../+page.svelte | 2 +- .../+page.svelte | 240 +- .../+page.svelte | 11 +- .../+page.svelte | 11 +- .../+page.svelte | 11 +- .../notifications-page/+page.svelte | 2 +- .../notifications-paragraph-test/+page.svelte | 2 +- .../notifications-paragraph/+page.svelte | 5 +- .../notifications-table-test/+page.svelte | 2 +- .../notifications-table/+page.svelte | 3 +- .../components/notifications/+page.svelte | 10 +- .../components/nowrap-test/+page.svelte | 7 +- .../(docs)/components/nowrap/+page.svelte | 10 +- .../components/pagination-test/+page.svelte | 22 +- .../(docs)/components/pagination/+page.svelte | 27 +- .../components/paragraph-test/+page.svelte | 2 +- .../(docs)/components/paragraph/+page.svelte | 11 +- .../section-content-wrapper/+page.svelte | 9 +- .../(docs)/components/section/+page.svelte | 9 +- .../(docs)/components/sidemenu/+page.svelte | 9 +- .../sidemenu/in-page-collapsible/+page.svelte | 6 +- .../components/sidemenu/in-page/+page.svelte | 67 +- .../next-to-page-collapsible/+page@.svelte | 6 +- .../sidemenu/next-to-page/+page@.svelte | 10 +- .../(docs)/components/spot-large/+page.svelte | 7 +- .../components/spot-medium/+page.svelte | 5 +- .../(docs)/components/spot-mini/+page.svelte | 5 +- .../(docs)/components/spot-small/+page.svelte | 5 +- .../table-action-buttons/+page.svelte | 60 +- .../(docs)/components/table-base/+page.svelte | 663 +-- .../components/table-caption/+page.svelte | 4 +- .../components/table-checkbox/+page.svelte | 4 +- .../components/table-condensed/+page.svelte | 26 +- .../components/table-expando-row/+page.svelte | 4 +- .../table-multiple-columns/+page.svelte | 4 +- .../table-multiple-rows/+page.svelte | 23 +- .../table-notifications/+page.svelte | 4 +- .../table-numerical-data/+page.svelte | 25 +- .../components/table-scope/+page.svelte | 4 +- .../components/table-sortable/+page.svelte | 28 +- .../table-sticky-header/+page.svelte | 4 +- .../components/table-summary/+page.svelte | 4 +- .../(docs)/components/table/+page.svelte | 20 +- .../(docs)/components/tabs-test/+page.svelte | 2 +- .../(docs)/components/tabs/+page.svelte | 6 +- .../routes/(docs)/components/tag/+page.svelte | 6 +- .../(docs)/components/tags-6-3/+page.svelte | 96 +- .../(docs)/components/tags-6/+page.svelte | 36 +- .../(docs)/components/tags/+page.svelte | 9 +- .../components/tile-cover-image/+page.svelte | 6 +- .../components/tile-groups-test/+page.svelte | 2 +- .../components/tile-groups/+page.svelte | 4 +- .../(docs)/components/tiles-test/+page.svelte | 2 +- .../(docs)/components/tiles/+page.svelte | 4 +- .../routes/(docs)/documentation/+page.svelte | 10 +- .../use-css-variable/+page.svelte | 2 +- docs/src/routes/+layout.svelte | 4 +- docs/src/scss/main.scss | 4 +- .../src/scss/manon-components.scss | 0 docs/src/scss/manon.scss | 277 -- docs/vite.config.js | 6 +- icore_open_docs/.gitignore | 10 - icore_open_docs/.nvmrc | 1 - icore_open_docs/.prettierignore | 2 - icore_open_docs/.prettierrc.cjs | 4 - icore_open_docs/jsconfig.json | 17 - icore_open_docs/package.json | 33 - icore_open_docs/src/app.d.ts | 12 - icore_open_docs/src/app.html | 11 - .../src/icons/manon-docs-icons-0.1.eot | Bin 1592 -> 0 bytes .../src/icons/manon-docs-icons-0.1.svg | 11 - .../src/icons/manon-docs-icons-0.1.ttf | Bin 1392 -> 0 bytes .../src/icons/manon-docs-icons-0.1.woff | Bin 1468 -> 0 bytes icore_open_docs/src/img/cat-white.svg | 13 - icore_open_docs/src/img/cat.svg | 9 - .../src/img/chevron-filled-down.svg | 8 - icore_open_docs/src/img/chevron-filled-up.svg | 8 - icore_open_docs/src/img/favicon.ico | Bin 15086 -> 0 bytes icore_open_docs/src/img/favicon.svg | 1 - .../src/img/layout-content-block.svg | 99 - icore_open_docs/src/img/layout-direct.svg | 99 - icore_open_docs/src/img/logo-white.svg | 13 - icore_open_docs/src/img/logo.svg | 21 - icore_open_docs/src/img/sortable.svg | 9 - icore_open_docs/src/img/strand.jpg | Bin 87136 -> 0 bytes icore_open_docs/src/lib/BreadcrumbNav.svelte | 19 - icore_open_docs/src/lib/Code.svelte | 35 - icore_open_docs/src/lib/DefaultFooter.svelte | 13 - icore_open_docs/src/lib/DefaultHeader.svelte | 12 - icore_open_docs/src/lib/NavLink.svelte | 12 - icore_open_docs/src/lib/SideMenu.svelte | 15 - icore_open_docs/src/lib/SiteNav.svelte | 22 - icore_open_docs/src/lib/SiteNavLinks.svelte | 10 - icore_open_docs/src/lib/breadcrumbs.js | 75 - icore_open_docs/src/lib/manon.js | 19 - icore_open_docs/src/lib/types.d.ts | 3 - icore_open_docs/src/redirects.js | 41 - .../src/routes/(docs)/+layout.svelte | 10 - .../src/routes/(docs)/+page.svelte | 32 - .../src/routes/(docs)/components/+page.svelte | 241 - .../components/accordion-test/+page.svelte | 281 -- .../(docs)/components/accordion/+page.svelte | 452 -- .../components/application-base/+page.svelte | 393 -- .../article-content-wrapper-test/+page.svelte | 149 - .../article-content-wrapper/+page.svelte | 223 - .../components/article-test/+page.svelte | 119 - .../(docs)/components/article/+page.svelte | 221 - .../components/body-text-set/+page.svelte | 397 -- .../components/branding-colors/+page.svelte | 66 - .../breadcrumb-bar-example/+page.svelte | 145 - .../components/breadcrumb-bar/+page.svelte | 146 - .../components/button-base/+page.svelte | 105 - .../button-call-to-action-test/+page.svelte | 310 -- .../button-call-to-action/+page.svelte | 108 - .../button-container-test/+page.svelte | 93 - .../components/button-container/+page.svelte | 193 - .../button-destructive-test/+page.svelte | 304 -- .../button-destructive/+page.svelte | 130 - .../components/button-dropdown/+page.svelte | 134 - .../components/button-ghost-test/+page.svelte | 294 -- .../components/button-ghost/+page.svelte | 130 - .../components/button-icon-only/+page.svelte | 127 - .../components/button-icon/+page.svelte | 127 - .../components/button-test/+page.svelte | 288 -- .../components/button-to-top/+page.svelte | 288 -- .../(docs)/components/button/+page.svelte | 126 - .../(docs)/components/card/+page.svelte | 327 -- .../components/checkbox-test/+page.svelte | 280 -- .../(docs)/components/checkbox/+page.svelte | 380 -- .../components/collapsible-menu/+page.svelte | 487 -- .../components/collapsible/+page.svelte | 422 -- .../(docs)/components/css/link-variables.css | 4 - .../de-emphasized-test/+page.svelte | 37 - .../components/de-emphasized/+page.svelte | 171 - .../components/description-list/+page.svelte | 220 - .../div-content-wrapper-test/+page.svelte | 130 - .../div-content-wrapper/+page.svelte | 223 - .../(docs)/components/div-test/+page.svelte | 119 - .../routes/(docs)/components/div/+page.svelte | 221 - .../components/emphasized-test/+page.svelte | 56 - .../(docs)/components/emphasized/+page.svelte | 174 - .../fieldset-checkbox-test/+page.svelte | 309 -- .../components/fieldset-checkbox/+page.svelte | 395 -- .../components/fieldset-radio/+page.svelte | 363 -- .../components/filter-test/+page.svelte | 189 - .../(docs)/components/filter/+page.svelte | 367 -- .../(docs)/components/finn-large/+page.svelte | 409 -- .../components/finn-medium/+page.svelte | 309 -- .../(docs)/components/finn-small/+page.svelte | 259 -- .../components/focus-only-test/+page.svelte | 41 - .../(docs)/components/focus-only/+page.svelte | 85 - .../(docs)/components/font/+page.svelte | 269 -- .../footer-two-thirds-one-third/+page.svelte | 295 -- .../(docs)/components/footer/+page.svelte | 300 -- .../form-accent-color-test/+page.svelte | 118 - .../components/form-accent-color/+page.svelte | 192 - .../components/form-base-test/+page.svelte | 4095 ----------------- .../(docs)/components/form-base/+page.svelte | 165 - .../components/form-columns-test/+page.svelte | 609 --- .../components/form-columns/+page.svelte | 143 - .../form-combined-fields-test/+page.svelte | 102 - .../form-combined-fields/+page.svelte | 123 - .../form-fieldset-invisible/+page.svelte | 131 - .../components/form-fieldset/+page.svelte | 159 - .../components/form-help-test/+page.svelte | 839 ---- .../(docs)/components/form-help/+page.svelte | 297 -- .../form-horizontal-view-test/+page.svelte | 1326 ------ .../form-horizontal-view/+page.svelte | 185 - .../components/form-inline-test/+page.svelte | 81 - .../components/form-inline/+page.svelte | 106 - .../form-input-color-filled-test/+page.svelte | 144 - .../form-input-color-filled/+page.svelte | 122 - .../form-input-color-test/+page.svelte | 137 - .../components/form-input-color/+page.svelte | 111 - .../form-input-date-test/+page.svelte | 119 - .../components/form-input-date/+page.svelte | 103 - .../form-input-email-test/+page.svelte | 119 - .../components/form-input-email/+page.svelte | 103 - .../form-input-file-test/+page.svelte | 135 - .../components/form-input-file/+page.svelte | 108 - .../form-input-password-test/+page.svelte | 202 - .../form-input-password/+page.svelte | 183 - .../form-input-radio-test/+page.svelte | 101 - .../components/form-input-radio/+page.svelte | 266 -- .../form-input-range-test/+page.svelte | 209 - .../components/form-input-range/+page.svelte | 128 - .../components/form-input-test/+page.svelte | 143 - .../form-input-textarea-test/+page.svelte | 133 - .../form-input-textarea/+page.svelte | 150 - .../(docs)/components/form-input/+page.svelte | 204 - .../form-notification-test/+page.svelte | 242 - .../components/form-notification/+page.svelte | 309 -- .../form-required-test/+page.svelte | 137 - .../components/form-required/+page.svelte | 138 - .../components/form-select-test/+page.svelte | 409 -- .../components/form-select/+page.svelte | 201 - .../(docs)/components/forms/+page.svelte | 122 - .../components/header-navigation/+page.svelte | 95 - .../example-content-wrapper/+page@.svelte | 99 - .../example-form-button/+page@.svelte | 117 - .../+page@.svelte | 231 - .../example-logo-above/+page@.svelte | 150 - .../example-logo/+page@.svelte | 119 - .../example-multiple-menus/+page@.svelte | 105 - .../header-navigation/example/+page@.svelte | 95 - .../components/heading-base-set/+page.svelte | 502 -- .../components/headings-test/+page.svelte | 48 - .../(docs)/components/headings/+page.svelte | 659 --- .../(docs)/components/hidden/+page.svelte | 93 - .../horizontal-center-test/+page.svelte | 186 - .../components/horizontal-center/+page.svelte | 145 - .../horizontal-scroll-test/+page.svelte | 565 --- .../components/horizontal-scroll/+page.svelte | 470 -- .../horizontal-view-test/+page.svelte | 183 - .../components/horizontal-view/+page.svelte | 172 - .../(docs)/components/icons/+page.svelte | 170 - .../components/icons/add-set/+page.svelte | 235 - .../(docs)/components/icons/test/+page.svelte | 530 --- .../components/image-cover-test/+page.svelte | 142 - .../components/image-cover/+page.svelte | 194 - .../(docs)/components/image-icon/+page.svelte | 56 - .../components/image-round-test/+page.svelte | 159 - .../components/image-round/+page.svelte | 221 - .../components/image-square-test/+page.svelte | 159 - .../components/image-square/+page.svelte | 221 - .../language-selector-test/+page.svelte | 105 - .../components/language-selector/+page.svelte | 491 -- .../layout-authentication-test/+page.svelte | 169 - .../layout-authentication/+page.svelte | 125 - .../layout-centered-test/+page.svelte | 223 - .../components/layout-centered/+page.svelte | 89 - .../layout-column-2-test/+page.svelte | 414 -- .../components/layout-column-2/+page.svelte | 117 - .../layout-column-3-test/+page.svelte | 540 --- .../components/layout-column-3/+page.svelte | 138 - .../layout-column-4-test/+page.svelte | 666 --- .../components/layout-column-4/+page.svelte | 159 - .../layout-fifty-fifty-test/+page.svelte | 463 -- .../layout-fifty-fifty/+page.svelte | 215 - .../components/layout-form/+page.svelte | 288 -- .../+page.svelte | 554 --- .../layout-one-third-two-thirds/+page.svelte | 203 - .../(docs)/components/layout-set/+page.svelte | 253 - .../+page.svelte | 585 --- .../layout-two-thirds-one-third/+page.svelte | 203 - .../(docs)/components/link/+page.svelte | 263 -- .../components/login-meta-test/+page.svelte | 81 - .../(docs)/components/login-meta/+page.svelte | 97 - .../(docs)/components/logo/+page.svelte | 71 - .../main-content-wrapper/+page.svelte | 219 - .../+page.svelte | 98 - .../components/main-test-direct/+page.svelte | 95 - .../components/main-test-div/+page.svelte | 119 - .../(docs)/components/main-test/+page.svelte | 113 - .../(docs)/components/main/+page.svelte | 216 - .../components/max-line-length/+page.svelte | 177 - .../components/message-counter/+page.svelte | 111 - .../(docs)/components/navigation/+page.svelte | 359 -- .../components/nota-bene-test/+page.svelte | 72 - .../(docs)/components/nota-bene/+page.svelte | 132 - .../notification-confirmation/+page.svelte | 666 --- .../notification-error/+page.svelte | 475 -- .../notification-explanation/+page.svelte | 468 -- .../notification-system-message/+page.svelte | 465 -- .../notification-warning/+page.svelte | 475 -- .../+page.svelte | 835 ---- .../notifications-block-element/+page.svelte | 197 - .../+page.svelte | 304 -- .../+page.svelte | 68 - .../+page.svelte | 305 -- .../+page.svelte | 305 -- .../+page.svelte | 305 -- .../notifications-page/+page.svelte | 81 - .../notifications-paragraph-test/+page.svelte | 109 - .../notifications-paragraph/+page.svelte | 162 - .../notifications-table-test/+page.svelte | 95 - .../notifications-table/+page.svelte | 129 - .../components/notifications/+page.svelte | 77 - .../components/nowrap-test/+page.svelte | 884 ---- .../(docs)/components/nowrap/+page.svelte | 192 - .../components/pagination-test/+page.svelte | 239 - .../(docs)/components/pagination/+page.svelte | 244 - .../components/paragraph-test/+page.svelte | 38 - .../(docs)/components/paragraph/+page.svelte | 182 - .../section-content-wrapper-test/+page.svelte | 149 - .../section-content-wrapper/+page.svelte | 223 - .../components/section-test/+page.svelte | 119 - .../(docs)/components/section/+page.svelte | 221 - .../(docs)/components/sidemenu/+page.svelte | 47 - .../sidemenu/in-page-collapsible/+page.svelte | 173 - .../components/sidemenu/in-page/+page.svelte | 173 - .../next-to-page-collapsible/+page@.svelte | 225 - .../sidemenu/next-to-page/+page@.svelte | 155 - .../(docs)/components/spot-large/+page.svelte | 515 --- .../components/spot-medium/+page.svelte | 409 -- .../(docs)/components/spot-mini/+page.svelte | 309 -- .../(docs)/components/spot-small/+page.svelte | 359 -- .../table-action-buttons-test/+page.svelte | 206 - .../table-action-buttons/+page.svelte | 252 - .../(docs)/components/table-base/+page.svelte | 216 - .../table-caption-test/+page.svelte | 65 - .../components/table-caption/+page.svelte | 158 - .../table-checkbox-test/+page.svelte | 203 - .../components/table-checkbox/+page.svelte | 214 - .../table-condensed-test/+page.svelte | 93 - .../components/table-condensed/+page.svelte | 148 - .../components/table-expando-row/+page.svelte | 367 -- .../table-multiple-columns-test/+page.svelte | 79 - .../table-multiple-columns/+page.svelte | 125 - .../table-multiple-rows-test/+page.svelte | 89 - .../table-multiple-rows/+page.svelte | 136 - .../table-notifications-test/+page.svelte | 114 - .../table-notifications/+page.svelte | 172 - .../table-numerical-data-test/+page.svelte | 83 - .../table-numerical-data/+page.svelte | 140 - .../components/table-scope-test/+page.svelte | 85 - .../components/table-scope/+page.svelte | 140 - .../components/table-sortable/+page.svelte | 323 -- .../table-sticky-header-test/+page.svelte | 158 - .../table-sticky-header/+page.svelte | 216 - .../table-summary-test/+page.svelte | 215 - .../components/table-summary/+page.svelte | 231 - .../(docs)/components/table/+page.svelte | 85 - .../(docs)/components/tabs-test/+page.svelte | 149 - .../(docs)/components/tabs/+page.svelte | 187 - .../routes/(docs)/components/tag/+page.svelte | 301 -- .../(docs)/components/tags-6-3/+page.svelte | 1036 ----- .../(docs)/components/tags-6/+page.svelte | 372 -- .../(docs)/components/tags/+page.svelte | 355 -- .../components/tile-cover-image/+page.svelte | 191 - .../components/tile-groups-test/+page.svelte | 462 -- .../components/tile-groups/+page.svelte | 125 - .../(docs)/components/tiles-test/+page.svelte | 320 -- .../(docs)/components/tiles/+page.svelte | 222 - .../routes/(docs)/documentation/+page.svelte | 181 - .../(docs)/documentation/add-js/+page.svelte | 18 - .../documentation/import-styling/+page.svelte | 111 - .../use-css-variable/+page.svelte | 84 - .../documentation/variables/+page.svelte | 796 ---- icore_open_docs/src/routes/+layout.js | 16 - icore_open_docs/src/routes/+layout.server.js | 8 - icore_open_docs/src/routes/+layout.svelte | 13 - icore_open_docs/src/scss/docs-icons.scss | 19 - icore_open_docs/src/scss/docs.scss | 8 - .../scss/documentation-example-footer.scss | 11 - .../src/scss/documentation-example-main.scss | 8 - icore_open_docs/src/scss/main.scss | 11 - icore_open_docs/svelte.config.js | 25 - icore_open_docs/vite.config.js | 11 - pnpm-lock.yaml | 49 - 505 files changed, 1308 insertions(+), 64016 deletions(-) rename {icore_open_docs => docs}/src/scss/manon-components.scss (100%) delete mode 100644 docs/src/scss/manon.scss delete mode 100644 icore_open_docs/.gitignore delete mode 100644 icore_open_docs/.nvmrc delete mode 100644 icore_open_docs/.prettierignore delete mode 100644 icore_open_docs/.prettierrc.cjs delete mode 100644 icore_open_docs/jsconfig.json delete mode 100644 icore_open_docs/package.json delete mode 100644 icore_open_docs/src/app.d.ts delete mode 100644 icore_open_docs/src/app.html delete mode 100644 icore_open_docs/src/icons/manon-docs-icons-0.1.eot delete mode 100644 icore_open_docs/src/icons/manon-docs-icons-0.1.svg delete mode 100644 icore_open_docs/src/icons/manon-docs-icons-0.1.ttf delete mode 100644 icore_open_docs/src/icons/manon-docs-icons-0.1.woff delete mode 100644 icore_open_docs/src/img/cat-white.svg delete mode 100644 icore_open_docs/src/img/cat.svg delete mode 100644 icore_open_docs/src/img/chevron-filled-down.svg delete mode 100644 icore_open_docs/src/img/chevron-filled-up.svg delete mode 100644 icore_open_docs/src/img/favicon.ico delete mode 100644 icore_open_docs/src/img/favicon.svg delete mode 100644 icore_open_docs/src/img/layout-content-block.svg delete mode 100644 icore_open_docs/src/img/layout-direct.svg delete mode 100644 icore_open_docs/src/img/logo-white.svg delete mode 100644 icore_open_docs/src/img/logo.svg delete mode 100644 icore_open_docs/src/img/sortable.svg delete mode 100644 icore_open_docs/src/img/strand.jpg delete mode 100644 icore_open_docs/src/lib/BreadcrumbNav.svelte delete mode 100644 icore_open_docs/src/lib/Code.svelte delete mode 100644 icore_open_docs/src/lib/DefaultFooter.svelte delete mode 100644 icore_open_docs/src/lib/DefaultHeader.svelte delete mode 100644 icore_open_docs/src/lib/NavLink.svelte delete mode 100644 icore_open_docs/src/lib/SideMenu.svelte delete mode 100644 icore_open_docs/src/lib/SiteNav.svelte delete mode 100644 icore_open_docs/src/lib/SiteNavLinks.svelte delete mode 100644 icore_open_docs/src/lib/breadcrumbs.js delete mode 100644 icore_open_docs/src/lib/manon.js delete mode 100644 icore_open_docs/src/lib/types.d.ts delete mode 100644 icore_open_docs/src/redirects.js delete mode 100644 icore_open_docs/src/routes/(docs)/+layout.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/accordion-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/accordion/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/application-base/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/article-content-wrapper-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/article-content-wrapper/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/article-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/article/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/body-text-set/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/branding-colors/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/breadcrumb-bar-example/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/breadcrumb-bar/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-base/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-call-to-action-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-call-to-action/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-container-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-container/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-destructive-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-destructive/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-dropdown/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-ghost-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-ghost/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-icon-only/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-icon/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button-to-top/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/button/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/card/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/checkbox-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/checkbox/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/collapsible-menu/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/collapsible/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/css/link-variables.css delete mode 100644 icore_open_docs/src/routes/(docs)/components/de-emphasized-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/de-emphasized/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/description-list/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/div-content-wrapper-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/div-content-wrapper/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/div-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/div/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/emphasized-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/emphasized/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/fieldset-checkbox-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/fieldset-checkbox/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/fieldset-radio/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/filter-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/filter/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/finn-large/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/finn-medium/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/finn-small/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/focus-only-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/focus-only/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/font/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/footer-two-thirds-one-third/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/footer/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-accent-color-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-accent-color/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-base-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-base/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-columns-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-columns/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-combined-fields-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-combined-fields/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-fieldset-invisible/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-fieldset/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-help-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-help/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-horizontal-view-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-horizontal-view/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-inline-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-inline/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-color-filled-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-color-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-color/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-date-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-date/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-email-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-email/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-file-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-file/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-password-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-password/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-radio-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-radio/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-range-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-range/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-textarea-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input-textarea/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-input/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-notification-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-notification/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-required-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-required/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-select-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/form-select/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/forms/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/header-navigation/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/header-navigation/example-content-wrapper/+page@.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/header-navigation/example-form-button/+page@.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/header-navigation/example-language-select-list/+page@.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/header-navigation/example-logo-above/+page@.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/header-navigation/example-logo/+page@.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/header-navigation/example-multiple-menus/+page@.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/header-navigation/example/+page@.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/heading-base-set/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/headings-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/headings/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/hidden/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/horizontal-center-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/horizontal-center/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/horizontal-scroll-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/horizontal-view-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/horizontal-view/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/icons/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/icons/add-set/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/icons/test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/image-cover-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/image-cover/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/image-icon/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/image-round-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/image-round/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/image-square-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/image-square/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/language-selector-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/language-selector/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-authentication-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-authentication/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-centered-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-centered/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-column-2-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-column-2/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-column-3-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-column-3/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-column-4-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-column-4/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-fifty-fifty-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-form/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-one-third-two-thirds-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-one-third-two-thirds/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-set/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-two-thirds-one-third-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/layout-two-thirds-one-third/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/link/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/login-meta-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/login-meta/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/logo/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/main-content-wrapper/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/main-test-content-wrapper-div/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/main-test-direct/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/main-test-div/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/main-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/main/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/max-line-length/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/message-counter/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/navigation/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/nota-bene-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/nota-bene/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notification-confirmation/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notification-error/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notification-explanation/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notification-system-message/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notification-warning/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-block-element-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-block-element/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-page-example-confirmation/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-page-example-error/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-page-example-explanation/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-page-example-system/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-page-example-warning/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-page/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-paragraph-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-paragraph/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-table-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications-table/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/notifications/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/nowrap-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/nowrap/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/pagination-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/pagination/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/paragraph-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/paragraph/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/section-content-wrapper-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/section-content-wrapper/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/section-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/section/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/sidemenu/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/sidemenu/in-page-collapsible/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/sidemenu/in-page/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/sidemenu/next-to-page-collapsible/+page@.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/sidemenu/next-to-page/+page@.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/spot-large/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/spot-medium/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/spot-mini/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/spot-small/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-action-buttons-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-action-buttons/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-base/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-caption-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-caption/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-checkbox-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-checkbox/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-condensed-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-condensed/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-expando-row/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-multiple-columns-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-multiple-columns/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-multiple-rows-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-multiple-rows/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-notifications-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-notifications/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-numerical-data-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-numerical-data/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-scope-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-scope/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-sortable/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-sticky-header-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-sticky-header/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-summary-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table-summary/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/table/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tabs-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tabs/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tag/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tags-6-3/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tags-6/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tags/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tile-cover-image/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tile-groups-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tile-groups/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tiles-test/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/components/tiles/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/documentation/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/documentation/add-js/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/documentation/import-styling/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/documentation/use-css-variable/+page.svelte delete mode 100644 icore_open_docs/src/routes/(docs)/documentation/variables/+page.svelte delete mode 100644 icore_open_docs/src/routes/+layout.js delete mode 100644 icore_open_docs/src/routes/+layout.server.js delete mode 100644 icore_open_docs/src/routes/+layout.svelte delete mode 100644 icore_open_docs/src/scss/docs-icons.scss delete mode 100644 icore_open_docs/src/scss/docs.scss delete mode 100644 icore_open_docs/src/scss/documentation-example-footer.scss delete mode 100644 icore_open_docs/src/scss/documentation-example-main.scss delete mode 100644 icore_open_docs/src/scss/main.scss delete mode 100644 icore_open_docs/svelte.config.js delete mode 100644 icore_open_docs/vite.config.js diff --git a/docs/src/routes/(docs)/+page.svelte b/docs/src/routes/(docs)/+page.svelte index e67da3b2..3431c9e8 100644 --- a/docs/src/routes/(docs)/+page.svelte +++ b/docs/src/routes/(docs)/+page.svelte @@ -11,7 +11,7 @@
-
+

Let op: Aan deze handleiding wordt nog gewerkt. @@ -19,38 +19,17 @@

-
+

Welkom bij Manon

- Manon is een variabel en instelbaar front-end framework. Een Open Source-project ontwikkeld + Manon is een variabel en instelbaar front-end framework. Het is Open Source en ontwikkeld door het Ministerie van Volksgezondheid, Welzijn en Sport.

-
-

Ontstaan van Manon

-

- Tijdens de vaccinatiecampagne werden er in korte tijd veel websites gelanceerd en in beheer - genomen. Om onnodige herhalingen te voorkomen en om snel volgens de rijkshuisstijl te kunnen - bouwen is door het Ministerie van VWS in korte tijd een framework gebouwd. -

-

- Door vanuit een centraal punt te werken konden problemen direct voor alle websites - tegelijkertijd opgelost worden. -

-

- Om dit pakket aan te kunnen bieden aan een breder publiek is Manon herschreven. Hierbij is - Manon instelbaar geworden zodat het werkt met een huisstijl naar keuze. Daarnaast is Manon - nu zo geschreven dat alleen benodigde code ingeladen kan worden. Deze handleiding helpt je - met het gebruik ervan. -

-
-
- -

Wat is Manon

@@ -67,11 +46,11 @@

Gedachte achter Manon

- Uitgangspunt bij het bouwen van een website is de scheiding tussen content, markup, beeld, - CSS en eventueel javascript. Hoe strikter deze gescheiden zijn, des te eenvoudiger is het om - een toegankelijke en goed te beheren website te bouwen. Het is niet eenvoudig om een goed - framework te vinden waarin dit consequent wordt toegepast. Hiervoor is 'Manon' geschreven, - dat een strikte scheiding hanteert tussen de content, markup en styles. + Een belangrijk uitgangspunt bij het bouwen van een website is de scheiding tussen content, + markup, beeld, CSS en eventueel JavaScript. Hoe strikter deze gescheiden zijn, hoe + eenvoudiger het is om een toegankelijke en goed te beheren website te bouwen. Het is niet + eenvoudig om een goed framework te vinden waarin dit consequent wordt toegepast. Hiervoor is + 'Manon' geschreven, dat een strikte scheiding hanteert tussen de content, markup en styles.

diff --git a/docs/src/routes/(docs)/components/+page.svelte b/docs/src/routes/(docs)/components/+page.svelte index ac0c0dbe..95b4b37b 100644 --- a/docs/src/routes/(docs)/components/+page.svelte +++ b/docs/src/routes/(docs)/components/+page.svelte @@ -12,235 +12,219 @@
-
+

Componenten

-

- Gebruik de gewenste componenten. Voeg de bijbehorende CSS bestanden en html toe aan het - project. Veel componenten zijn instelbaar qua vormgeving zodat ze aan kunnen sluiten bij de - huisstijl. -

-
-
-

Basisopmaak

-
- +
+

Basisopmaak

+
+ +
+
+ +
+

Layout

+
+ + + +
+
+ +
+

Componenten

+ +
+
+
-
-
-
-
-

Layout

-
-
-
-
-

Componenten

- -
-
- -
- - -
-
+
+

Helper-classes

+
-
-
- -
-
+
+

Overig

+

+ Let op: de documentatie over deze onderdelen is waarschijnlijk onvolledig of incorrect. +

+

+ Dit zijn onderdelen die geïmplementeerd zijn in Manon, maar overbodig geworden of juist nog + niet (volledig) ondersteund worden door het iCore Open-thema. +

+
diff --git a/docs/src/routes/(docs)/components/accordion-test/+page.svelte b/docs/src/routes/(docs)/components/accordion-test/+page.svelte index d8780845..0a166b24 100644 --- a/docs/src/routes/(docs)/components/accordion-test/+page.svelte +++ b/docs/src/routes/(docs)/components/accordion-test/+page.svelte @@ -276,7 +276,9 @@ `} /> -

Expliciete aria-expanded="true" (ander onderdeel standaard opengeklapt)

+

+ Expliciete aria-expanded="true" (ander onderdeel standaard opengeklapt) +

  • diff --git a/docs/src/routes/(docs)/components/accordion/+page.svelte b/docs/src/routes/(docs)/components/accordion/+page.svelte index 8ca1fe15..2555f9cb 100644 --- a/docs/src/routes/(docs)/components/accordion/+page.svelte +++ b/docs/src/routes/(docs)/components/accordion/+page.svelte @@ -21,7 +21,7 @@
  • Gerelateerde pagina's
-
+

Accordeon

@@ -364,7 +364,6 @@ >Componenten gebruiken en styling toevoegen

-

Importeer component via npm

CSS-voorbeeld:

Bijbehorende bestanden -
+

Stijlkeuzes op applicatie-niveau

@@ -85,7 +85,9 @@

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen + Componenten gebruiken en styling toevoegen

Aandachtspunten:

@@ -132,7 +134,10 @@ application-base --application-base-background-color - background-color + background-color - #fff - @@ -149,7 +154,10 @@ application-base-tint-1 --application-base-tint-1-background-color - background-color + background-color - #f5f5f5 - diff --git a/docs/src/routes/(docs)/components/article-content-wrapper-test/+page.svelte b/docs/src/routes/(docs)/components/article-content-wrapper-test/+page.svelte index 4b80d788..1c097fc7 100644 --- a/docs/src/routes/(docs)/components/article-content-wrapper-test/+page.svelte +++ b/docs/src/routes/(docs)/components/article-content-wrapper-test/+page.svelte @@ -12,7 +12,7 @@
-
+

Article content wrapper

Componenten gegroepeerd in article's.

@@ -22,7 +22,7 @@ language="html" code={`
-
+
@@ -42,7 +42,7 @@ >

-

npm-componenten

+

Importeer component via npm

CSS-voorbeeld:

-
+

Article content wrapper

@@ -62,7 +62,7 @@ +
@@ -75,7 +75,9 @@

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen + Componenten gebruiken en styling toevoegen

Importeer component via npm

@@ -115,7 +117,8 @@ --article-content-wrapper-justify-content - justify-content + justify-content var(--content-justify-content) - - diff --git a/docs/src/routes/(docs)/components/article-test/+page.svelte b/docs/src/routes/(docs)/components/article-test/+page.svelte index 17fe8511..cac8b45a 100644 --- a/docs/src/routes/(docs)/components/article-test/+page.svelte +++ b/docs/src/routes/(docs)/components/article-test/+page.svelte @@ -12,7 +12,7 @@
-
+

article

Componenten gegroepeerd in article's.

@@ -21,7 +21,7 @@ language="html" code={`
-
+
@@ -29,7 +29,7 @@ />
-
+

Gebruikte componenten

Voor meer informatie over importeren en instellen van componenten. Zie:

-
+

Ingestelde waarden

CSS-voorbeeld

-
+

Artikel - article

@@ -62,7 +62,7 @@ +
`} @@ -73,7 +73,9 @@

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen + Componenten gebruiken en styling toevoegen

Importeer component via npm

@@ -113,7 +115,8 @@ --article-justify-content - justify-content + justify-content var(--content-justify-content) - - diff --git a/docs/src/routes/(docs)/components/body-text-set/+page.svelte b/docs/src/routes/(docs)/components/body-text-set/+page.svelte index d331b76c..0bafaa42 100644 --- a/docs/src/routes/(docs)/components/body-text-set/+page.svelte +++ b/docs/src/routes/(docs)/components/body-text-set/+page.svelte @@ -20,7 +20,7 @@
  • Bijbehorende bestanden
    • -
    +

    Body text set

    @@ -107,7 +107,9 @@

    Bijbehorende bestanden

    Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen + Componenten gebruiken en styling toevoegen

    Importeer component via npm

    diff --git a/docs/src/routes/(docs)/components/branding-colors/+page.svelte b/docs/src/routes/(docs)/components/branding-colors/+page.svelte index e99b00db..633cdf16 100644 --- a/docs/src/routes/(docs)/components/branding-colors/+page.svelte +++ b/docs/src/routes/(docs)/components/branding-colors/+page.svelte @@ -17,7 +17,7 @@
  • Introductie
    • -
    +

    Kleurensets

    @@ -37,15 +37,25 @@

    Spot

    Huisstijlkleuren met accentkleuren

    diff --git a/docs/src/routes/(docs)/components/breadcrumb-bar-example/+page.svelte b/docs/src/routes/(docs)/components/breadcrumb-bar-example/+page.svelte index 50652ef8..244488e2 100644 --- a/docs/src/routes/(docs)/components/breadcrumb-bar-example/+page.svelte +++ b/docs/src/routes/(docs)/components/breadcrumb-bar-example/+page.svelte @@ -19,7 +19,7 @@
  • Voorbeelden
    • -
    +

    Header visueel voorbeeld

    diff --git a/docs/src/routes/(docs)/components/breadcrumb-bar/+page.svelte b/docs/src/routes/(docs)/components/breadcrumb-bar/+page.svelte index 1051f966..95c78222 100644 --- a/docs/src/routes/(docs)/components/breadcrumb-bar/+page.svelte +++ b/docs/src/routes/(docs)/components/breadcrumb-bar/+page.svelte @@ -20,7 +20,7 @@
  • Bijbehorende bestanden
    • -
    +

    Kruimelpad - breadcrumb-bar

    @@ -59,7 +59,9 @@

    Bijbehorende bestanden

    Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen + Componenten gebruiken en styling toevoegen

    Importeer component via npm

    diff --git a/docs/src/routes/(docs)/components/button-base/+page.svelte b/docs/src/routes/(docs)/components/button-base/+page.svelte index a6c01af3..087062fe 100644 --- a/docs/src/routes/(docs)/components/button-base/+page.svelte +++ b/docs/src/routes/(docs)/components/button-base/+page.svelte @@ -15,7 +15,7 @@

    Basisweergave

    -
    +

    button

    Visuele weergave:

    @@ -43,7 +43,7 @@ />
    -
    +

    input type="button"

    Visuele weergave:

    @@ -71,11 +71,13 @@ />
    -
    +

    Bijbehorende bestanden

    Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen + Componenten gebruiken en styling toevoegen

    Import scss-file

    -
    -

    Instelbare variabelen

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Instelbare variabelen tabel:
    NaamVariabeleCSS-attribuutManon ingestelde waarde
    --button-base-flex--button-base-flexdisplayinline-flex
    --button-base-gap--button-base-gapgap0.5rem
    --button-base-padding-top--button-base-padding-toppadding-top0.25rem
    --button-base-padding-right--button-base-padding-rightpadding-right1rem
    --button-base-padding-bottom--button-base-padding-bottompadding-bottom0.25rem
    --button-base-padding-left--button-base-padding-leftpadding-left1rem
    --button-base-justify-content--button-base-justify-contentjustify-contentcenter
    --button-base-min-width--button-base-min-widthmin-width8rem
    --button-base-min-height--button-base-min-heightmin-height2.75rem
    --button-base-background-color--button-base-background-colorbackground-colorvar(--application-base-accent-color)
    --button-base-text-color--button-base-text-colorcolorvar(--application-base-accent-color-text-color)
    --button-base-border-width--button-base-border-widthborder-widthnone
    --button-base-border-style--button-base-border-styleborder-styleunset
    --button-base-border-color--button-base-border-colorborder-colortransparent
    --button-base-font-size--button-base-font-sizefont-sizevar(--application-base-font-size)
    --button-base-line-height--button-base-line-heightline-heightvar(--application-base-line-height)
    --button-base-font-weight--button-base-font-weightfont-weightvar(--application-base-font-weight)
    --button-base-text-decoration--button-base-text-decorationtext-decorationnone
    --button-base-border-radius--button-base-border-radiusborder-radiusvar(--application-base-border-radius)
    -
    -
    - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-inline/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-inline/+page.svelte deleted file mode 100644 index 8a97d33b..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-inline/+page.svelte +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - "inline"-formulier - - -
    - - - -
    -
    -
    -

    "inline"-formulier

    -

    - In sommige gevallen is er om technische redenen een formulier nodig rondom een knop maar - is het niet nodig om deze visueel binnen een formulier te plaatsen. Voor die situaties is - dit voorbeeld geschikt. -

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. Voeg class="inline" toe aan het formulier.
      3. -
    -
    - -
    -

    Voorbeelden

    -

    Het basisvoorbeeld met een invoerveld en een verzendknop.

    - -

    Basis

    -

    Visueel voorbeeld:

    -
    - -
    - -

    HTML-voorbeeld:

    - - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • form/form-inline.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • form/form-inline-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    - - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-color-filled-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-color-filled-test/+page.svelte deleted file mode 100644 index 651f5b35..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-color-filled-test/+page.svelte +++ /dev/null @@ -1,144 +0,0 @@ - - - - - - Kleurselector volledig gevuld - - -
    -
    -
    -
    -

    Kleurselector volledig gevuld

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    - - - - -
    - -

    HTML-voorbeeld:

    - - - - - - -`} - /> - -

    Input en label gegroepeerd binnen een div

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - -`} - /> - -

    Input en label gegroepeerd binnen een section

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - -`} - /> - -

    Input en label gegroepeerd binnen een fieldset

    -

    Visueel voorbeeld:

    -
    -
    - Kleurselector volledig gevuld voorbeeld - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - Kleurselector volledig gevuld voorbeeld - - -
    - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte deleted file mode 100644 index beb540b1..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte +++ /dev/null @@ -1,122 +0,0 @@ - - - - - - Kleurselector volledig gevuld - - -
    - - - -
    -
    -

    - Waarschuwing: Dit element maakt gebruik van experimentele CSS componenten: - ::-webkit-color-swatch-wrapper en ::-webkit-color-swatch. - Aangeraden wordt om dit component in deze vorm daarom niet in productie te gebruiken - aangezien het kan zijn dat het component er anders uit ziet in verschillende browsers of dat - de styling bij toekomstige updates kapot gaat. Als dit geen probleem is binnen jouw project - kun je er voor kiezen dit component te gebruiken. -

    - -
    -

    Kleurselector volledig gevuld

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. voeg type="color" toe aan het invoerveld.
      3. -
    3. - Voeg basiskleurwaarde met een hexidecimalekleurcode aan binnen: - value. Voorbeeld: value="#ffffff". De ingevoerde kleur is de - kleur waarin het selectievak getoond wordt binnen het formulier voordat de gebruiker een - andere keuze maakt. -
      4. -
    -
    - -
    -

    Voorbeelden

    - -

    Visueel voorbeeld:

    -

    direct

    -
    - - - - -
    - -

    HTML-voorbeeld:

    -

    section

    - - - - - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • form/form-input.scss
      • -
    • form/form-input-color-filled.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • form/form-input-variables.scss
      • -
    • form/form-input-color-filled-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-color-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-color-test/+page.svelte deleted file mode 100644 index a6eef997..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-color-test/+page.svelte +++ /dev/null @@ -1,137 +0,0 @@ - - - - - - Datum - - -
    -
    -
    -
    -

    Datum

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    - - - - -
    - -

    HTML-voorbeeld:

    - - - - - - -`} - /> - -

    Input en label gegroepeerd binnen een div

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - - -`} - /> - -

    Input en label gegroepeerd binnen een section

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - - -`} - /> - -

    Input en label gegroepeerd binnen een fieldset

    -

    Visueel voorbeeld:

    -
    -
    - Kleurselector invoerveld voorbeeld - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - Kleurselector invoerveld voorbeeld - - -
    - - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-color/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-color/+page.svelte deleted file mode 100644 index fc073ead..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-color/+page.svelte +++ /dev/null @@ -1,111 +0,0 @@ - - - - - - Kleurselector - - -
    - - - -
    -
    -
    -

    Kleurselector

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. voeg type="color" toe aan het invoerveld.
      3. -
    3. - Voeg basiskleurwaarde met een hexidecimalekleurcode aan binnen: - value. Voorbeeld: value="#ffffff". De ingevoerde kleur is de - kleur waarin het selectievak getoont wordt binnen het formulier voordat de gebruiker een - andere keuze maakt. -
      4. -
    -
    - -
    -

    Voorbeelden

    - -

    Visueel voorbeeld:

    -

    direct

    -
    - - - - -
    - -

    HTML-voorbeeld:

    -

    section

    - - - - - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • form/form-input.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • form/form-input-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-date-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-date-test/+page.svelte deleted file mode 100644 index 26129755..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-date-test/+page.svelte +++ /dev/null @@ -1,119 +0,0 @@ - - - - - - Datum - - -
    -
    -
    -
    -

    Datum

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    - - - -
    - -

    HTML-voorbeeld:

    - - - - - -`} - /> - -

    Input en label gegroepeerd binnen een div

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - -`} - /> - -

    Input en label gegroepeerd binnen een section

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - -`} - /> - -

    Input en label gegroepeerd binnen een fieldset

    -

    Visueel voorbeeld:

    -
    -
    - Datumveld voorbeeld - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    -Datumveld voorbeeld - - -
    - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-date/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-date/+page.svelte deleted file mode 100644 index 5e707d4b..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-date/+page.svelte +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - Datum - - -
    - - - -
    -
    -
    -

    Datum

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. Voeg <type="date"> toe aan het invoerveld.
      3. -
    -
    - -
    -

    Voorbeelden

    - -

    Visueel voorbeeld:

    -

    direct

    -
    - - - -
    - -

    HTML-voorbeeld:

    -

    section

    - - - - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • form/form-input.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • form/form-input-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-email-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-email-test/+page.svelte deleted file mode 100644 index 04cd03d3..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-email-test/+page.svelte +++ /dev/null @@ -1,119 +0,0 @@ - - - - - - Email - - -
    -
    -
    -
    -

    Email

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    - - - -
    - -

    HTML-voorbeeld:

    - - - - - -`} - /> - -

    Input en label gegroepeerd binnen een div

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - -`} - /> - -

    Input en label gegroepeerd binnen een section

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - -`} - /> - -

    Input en label gegroepeerd binnen een fieldset

    -

    Visueel voorbeeld:

    -
    -
    - Voorbeeld emailveld - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    -Voorbeeld emailveld - - -
    - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-email/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-email/+page.svelte deleted file mode 100644 index 0cd262f4..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-email/+page.svelte +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - Email - - -
    - - - -
    -
    -
    -

    Email

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. Voeg <type="email"> toe aan het invoerveld.
      3. -
    -
    - -
    -

    Voorbeelden

    - -

    Visueel voorbeeld:

    -

    direct

    -
    - - - -
    - -

    HTML-voorbeeld:

    -

    section

    - - - - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • form/form-input.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • form/form-input-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-file-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-file-test/+page.svelte deleted file mode 100644 index b3614ea4..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-file-test/+page.svelte +++ /dev/null @@ -1,135 +0,0 @@ - - - - - - Bestand testpagina - - -
    -
    -
    -
    -

    Bestand testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    - - -
    - -

    HTML-voorbeeld:

    - - - - -`} - /> - -

    Bestand gegroepeerd binnen div

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> - -

    Bestand gegroepeerd binnen section

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> - -

    Bestand gegroepeerd binnen fieldset

    -

    Visueel voorbeeld:

    -
    -
    - Bestand-upload binnen een fieldset voorbeeld - - -
    -
    - -

    HTML-voorbeeld:

    -

    fieldset

    - -
    - - - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-file/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-file/+page.svelte deleted file mode 100644 index 837e78b4..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-file/+page.svelte +++ /dev/null @@ -1,108 +0,0 @@ - - - - - - Bestand - - -
    - - - -
    -
    -
    -

    Bestand

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de <input> toe. Zie onderstaand voorbeeld voor meer informatie. -
      3. -
    - -

    - Tip: Om bereik-invoervelden een eigen gekozen kleur mee te geven kan - gebruik gemaakt worden van - accentkleur op formulierelementen. -

    -
    - -
    -

    Voorbeelden

    - -

    Basis

    -

    Visueel voorbeeld:

    -
    - - -
    - -

    HTML-voorbeeld:

    - - - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Optioneel

    -
      -
    • form/form-base.scss
      • -
    • form/form-base-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-password-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-password-test/+page.svelte deleted file mode 100644 index 11276440..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-password-test/+page.svelte +++ /dev/null @@ -1,202 +0,0 @@ - - - - - - Wachtwoord testpagina - - -
    -
    -
    -
    -

    Wachtwoord testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, - 1 kleine letter en 1 cijfer. -

    - - -
    - -

    HTML-voorbeeld:

    - - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, - 1 kleine letter en 1 cijfer. -

    - - - -`} - /> - -

    - Toelichting gegroepeerd met het invoerveld binnen een - div -

    -

    Visueel voorbeeld:

    -
    -
    - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 - hoofdletter, 1 kleine letter en 1 cijfer. -

    - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 - hoofdletter, 1 kleine letter en 1 cijfer. -

    - -
    - - -`} - /> - -

    Gegroepeerd binnen een section

    -

    Visueel voorbeeld:

    -
    -
    - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 - hoofdletter, 1 kleine letter en 1 cijfer. -

    - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 - hoofdletter, 1 kleine letter en 1 cijfer. -

    - -
    - - -`} - /> - -

    Gegroepeerd binnen een fieldset

    -

    Visueel voorbeeld:

    -
    -
    - Wachtwoord binnen fieldset voorbeeld - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 - hoofdletter, 1 kleine letter en 1 cijfer. -

    - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - Wachtwoord binnen fieldset voorbeeld - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 - hoofdletter, 1 kleine letter en 1 cijfer. -

    - -
    - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-password/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-password/+page.svelte deleted file mode 100644 index 61f82e11..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-password/+page.svelte +++ /dev/null @@ -1,183 +0,0 @@ - - - - - - Wachtwoord - - -
    - - - -
    -
    -
    -

    Wachtwoord

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    - -

    Aandachtspunten:

    -
      -
    • - Vertel de gebruiker welke eisen er gesteld zijn. Dit kan met een notificatie of met een - openklapbare hulptekst. Voor meer informatie zie: - toelichting - paragraaf - en hulpteksten. -
      • -
    • - Om berichten visueel te koppelen aan een inputveld kunnen de - <input> en het bericht gegroepeerd worden binnen een - <div>. -
      • -
    -
    - -
    -

    Voorbeelden

    - -

    Visueel voorbeeld:

    -

    Basis

    -
    - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, - 1 kleine letter en 1 cijfer. -

    - - -
    - -

    HTML-voorbeeld:

    -

    section

    - - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, - 1 kleine letter en 1 cijfer. -

    - - - -`} - /> - -

    Toelichting gegroepeerd met het invoerveld

    -
    -
    - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 - hoofdletter, 1 kleine letter en 1 cijfer. -

    - -
    - -
    - -

    HTML-voorbeeld:

    -

    section

    - -
    - -

    - Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 - hoofdletter, 1 kleine letter en 1 cijfer. -

    - -
    - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • form/form-input.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • form/form-input-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-radio-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-radio-test/+page.svelte deleted file mode 100644 index 0a6e2999..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-radio-test/+page.svelte +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - Radio-selecteerknop testpagina - - -
    -
    -
    -
    -

    Radio-selecteerknop - textarea testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> - -

    Radioselecteerknop gegroepeerd binnen section

    -

    Visueel voorbeeld:

    -
    -
    -
    - - -
    -
    -
    - -

    HTML-voorbeeld:

    - -
    -
    - - -
    -
    - -`} - /> - -

    Radioselecteerknop gegroepeerd binnen fieldset

    -

    Visueel voorbeeld:

    -
    -
    - Radioselecteerknop binnen een fieldset voorbeeld -
    - - -
    -
    -
    - -

    HTML-voorbeeld:

    - -
    - Radioselecteerknop binnen een fieldset voorbeeld -
    - - -
    -
    - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-radio/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-radio/+page.svelte deleted file mode 100644 index 94f59b64..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-radio/+page.svelte +++ /dev/null @@ -1,266 +0,0 @@ - - - - - - Radio-selecteerknop - radio - - -
    - - - -
    -
    -
    -

    Radio-selecteerknop - radio-button

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de bijbehorende HTML toe. Voor meer informatie zie Voorbeelden. -
      3. -
    -
    - -
    -

    Voorbeelden

    - -

    Basis

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> - -

    Verplicht

    -

    Visueel voorbeeld:

    -
    -
    - Dit veld is verplicht -
    - - -
    -
    -
    - -

    HTML-voorbeeld:

    - -
    - Dit veld is verplicht -
    - - -
    -
    - -`} - /> - -

    Uitgeschakeld

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Aandachtspunten:

    -
      -
    • - De standaard ingestelde waarden binnen Manon maken gebruik van de Body text set. Om gebruik te maken van deze set. Laad de set eenmalig in voordat overige componenten - er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie. -
      • -
    - -

    Importeer component via npm

    - -

    CSS-voorbeeld:

    - -
    - -
    -

    Instelbare variabelen

    -

    - Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in - combinatie met de class horizotal-view. -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Beschikbare instelbare variabelen:
    VariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    --radio-gapgap0.75rem-radio-button
    --radio-align-itemsalign-itemscenter-
    --radio-widthwidth1.25rem-
    --radio-heightheight1.25rem-
    --radio-accent-coloraccent-colorvar(--branding-color-1, initial)-
    --radio-label-widthwidthauto-
    --radio-required-gapgapvar(--application-base-gap-small)-
    -
    - -

    CSS

    -

    - Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw - project. Kies en gebruik de benodigde variabelen. -

    - -
    - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-range-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-range-test/+page.svelte deleted file mode 100644 index 48a428ab..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-range-test/+page.svelte +++ /dev/null @@ -1,209 +0,0 @@ - - - - - - Bereik testpagina - - -
    -
    -
    -
    -

    Bereik - textarea testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    - - -
    - -

    HTML-voorbeeld:

    - - - - -`} - /> - -

    Bereik gegroepeerd binnen div

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> - -

    Bereik gegroepeerd binnen div horizontaal uitgelijnd

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> - -

    Bereik gegroepeerd binnen section

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> - -

    Bereik gegroepeerd binnen section horizontaal uitgelijnd

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> - -

    Bereik gegroepeerd binnen fieldset

    -

    Visueel voorbeeld:

    -
    -
    - bereik-invoerveld binnen een fieldset voorbeeld - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - bereik-invoerveld binnen een fieldset voorbeeld - - -
    - -`} - /> - -

    Bereik gegroepeerd binnen fieldset horizontaal uitgelijnd

    -

    Visueel voorbeeld:

    -
    -
    - bereik-invoerveld binnen een fieldset voorbeeld - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - bereik-invoerveld binnen een fieldset voorbeeld - - -
    - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-range/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-range/+page.svelte deleted file mode 100644 index 6c4cf61e..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-range/+page.svelte +++ /dev/null @@ -1,128 +0,0 @@ - - - - - - Bereik - - -
    - - - -
    -
    -
    -

    Bereik - range

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de <range> toe. Zie onderstaand voorbeeld voor meer informatie. -
      3. -
    - -

    - Tip: Om bereik-invoervelden een eigen gekozen kleur mee te geven kan - gebruik gemaakt worden van - accentkleur op formulierelementen. -

    -
    - -
    -

    Voorbeelden

    - -

    Basis

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> - -

    Horizontaal uitgelijnd

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - - Componenten gebruiken en styling toevoegen - -

    - -

    Optioneel

    -
      -
    • form/form-base.scss
      • -
    • form/form-base-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-test/+page.svelte deleted file mode 100644 index 2bda9707..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-test/+page.svelte +++ /dev/null @@ -1,143 +0,0 @@ - - - - - - Invoerveld testpagina - - -
    -
    -
    -
    -

    Invoerveld testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Input direct binnen form

    -

    Visueel voorbeeld:

    -
    - - - -
    - -

    HTML-voorbeeld:

    - - - - - -`} - /> - -

    Input en label gegroepeerd binnen een div

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - -`} - /> - -

    Input en label gegroepeerd binnen een section

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - -`} - /> - -

    Input en label gegroepeerd binnen een fieldset

    -

    Visueel voorbeeld:

    -
    -
    - Invoerveld test - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - Invoerveld test - - -
    - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-textarea-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-textarea-test/+page.svelte deleted file mode 100644 index c7fefab3..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-textarea-test/+page.svelte +++ /dev/null @@ -1,133 +0,0 @@ - - - - - - Tekstveld testpagina - - -
    -
    -
    -
    -

    Tekstveld - textarea testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    - - - -
    - -

    HTML-voorbeeld:

    - - - - - -`} - /> - -

    Tekstveld gegroepeerd binnen div

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - -`} - /> - -

    Tekstveld gegroepeerd binnen section

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - -`} - /> - -

    Tekstveld gegroepeerd binnen fieldset

    -

    Visueel voorbeeld:

    -
    -
    - Tekstveld binnen een fieldset voorbeeld - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - Tekstveld binnen een fieldset voorbeeld - - -
    - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input-textarea/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input-textarea/+page.svelte deleted file mode 100644 index 7260c7bf..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input-textarea/+page.svelte +++ /dev/null @@ -1,150 +0,0 @@ - - - - - - Tekstveld - - -
    - - - -
    -
    -
    -

    Tekstveld - textarea

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de <textarea> toe. Zie onderstaand voorbeeld voor meer informatie. -
      3. -
    - -

    Aandachtspunten:

    -
      -
    • - Zorg er voor gebruiksvriendelijkheid voor dat het tekstveld een duidelijke vraag en/of - duidelijk doel heeft. Voeg een omschrijvend <label> toe en stel een - vraag of geef duidelijke richtlijnen mee door middel van een - nota-bene. -
      • -
    • - rows="number" geeft de initiële hoogte van het tekstveld aan in de hoeveelheid - regels. Als er een langer bericht verwacht of aangemoedigd wordt is het voor de gebruiker - fijn om een hoger initieel tekstveld te hebben. -
      • -
    -
    - -
    -

    Voorbeelden

    - -

    Visueel voorbeeld:

    -

    Basis

    -
    - - Stel jouw vraag of voeg jouw opmerking toe - - - - -
    - -

    HTML-voorbeeld:

    - - - - Stel jouw vraag of voeg jouw opmerking toe: - - - - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • form/form-textarea.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • form/form-textarea-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    - - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-input/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-input/+page.svelte deleted file mode 100644 index 8cfa993a..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-input/+page.svelte +++ /dev/null @@ -1,204 +0,0 @@ - - - - - - Invoerveld - - -
    - - - -
    -
    -
    -

    Invoerveld

    -

    Invoervelden worden gebruikt voor het vragen van korte informatie.

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    - -

    Aandachtspunten

    -
      -
    • - Voeg de volledige code toe die in de voorbeelden staat om alle gebruikers een goede - gebruikerservaring the bieden. Denk hierbij aan gebruikers die kleurenblind zijn of - gebruikers die gebruik maken van hulptechnologiën. -
      • -
    -
    - -
    -

    Voorbeelden

    - -

    Basis

    -

    Visueel voorbeeld:

    -
    - - - -
    - -

    HTML-voorbeeld:

    - - - - - -`} - /> - -

    Verplicht invoerveld

    -

    Aandachtspunten:

    -
      -
    • - Geef op de <input> aan dat het invoerveld verplicht is met het - required attribuut. -
      • -
    • - Voeg een span toe boven het invoerveld. Het is belangrijk om het bericht boven het - invoerveld te plaatsen zodat de volgorde ook klopt voor gebruikers die gebruik maken van - hulpmiddelen zoals een screenreader. -
      • -
    • - Groeppeer de <input> en de <span> samen in een - <div> binnen horizontaal uitgelijnde formulieren. -
      • -
    -

    Visueel voorbeeld:

    -
    - - Dit veld is verplicht - - -
    - -

    HTML-voorbeeld:

    - - - Dit veld is verplicht - - - -`} - /> - -

    Invoerveld uitgeschakeld

    -

    Aandachtspunten:

    -
      -
    • - Geef op de <input> aan dat het invoerveld uitgeschakeld is met het - disabled attribuut. -
      • -
    -

    Visueel voorbeeld:

    -
    - - - -
    - -

    HTML-voorbeeld:

    - - - - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • form/form-input.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • form/form-input-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-notification-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-notification-test/+page.svelte deleted file mode 100644 index 7ea245b0..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-notification-test/+page.svelte +++ /dev/null @@ -1,242 +0,0 @@ - - - - - - Notificatie binnen formulier - - -
    -
    -
    -
    -

    Notificatie binnen formulier testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Voorbeelden

    -

    Het basisvoorbeeld met een invoerveld en een verzendknop.

    - -

    Notificatie op invoerveld

    -

    Visueel voorbeeld foutmelding:

    -
    - -
    - -

    - Foutmelding: Lorem ipsum dolor sit amet -

    -
    - -
    - -

    HTML-voorbeeld:

    - - -
    - -

    - Foutmelding: Lorem ipsum dolor sit amet -

    -
    - - -`} - /> - -

    Visueel voorbeeld toelichting:

    -
    - -
    -

    - Toelichting: Lorem ipsum dolor sit amet -

    - -
    - -
    - -

    HTML-voorbeeld:

    - - -
    -

    - Toelichting: Lorem ipsum dolor sit amet -

    - -
    - - -`} - /> - -

    Visueel voorbeeld waarschuwing:

    -
    - -
    -

    - Waarschuwing: Lorem ipsum dolor sit amet -

    - -
    - -
    - -

    HTML-voorbeeld:

    - - -
    -

    - Waarschuwing: Lorem ipsum dolor sit amet -

    - -
    - - -`} - /> - -

    Visueel voorbeeld bevestiging:

    -
    - -
    -

    - Bevestiging: Lorem ipsum dolor sit amet -

    - -
    - -
    - -

    HTML-voorbeeld:

    - - -
    -

    - Bevestiging: Lorem ipsum dolor sit amet -

    - -
    - - -`} - /> - -

    Visueel voorbeeld systeembericht

    -
    - -
    -

    - Systeembericht: Lorem ipsum dolor sit amet -

    - -
    - -
    - -

    HTML-voorbeeld:

    - - -
    -

    - Systeembericht: Lorem ipsum dolor sit amet -

    - -
    - - - -`} - /> - -

    Link binnen notificatie

    -

    Visueel voorbeeld foutmelding:

    -
    - -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - - -
    - - -
    - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-notification/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-notification/+page.svelte deleted file mode 100644 index 97a5579a..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-notification/+page.svelte +++ /dev/null @@ -1,309 +0,0 @@ - - - - - - Notificatie binnen formulier - - -
    - - - -
    -
    -
    -

    Notificatie binnen formulier

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de benodigde HTML toe. Voor meer informatie zie Voorbeelden -
      3. -
    - -

    Aandachtspunten:

    -
      -
    • - Let op: visuele feedback op het invoerveld is op zichzelf onvoldoende om - toegankelijkheid en een goede gebruikerservaring te waarborgen. -
      • -
    • - Vertel de gebruiker altijd wat de vervolgstappen zijn die zij kunnen nemen om het - probleem op te lossen of om zelf verder te kunnen. -
      • -
    • - Voeg de class toe met het type melding op het invoerveld om gebruik te maken van visuele - feedback direct op het invoerveld. Voorbeeld: class="error". -
      • -
    • - Voeg voor screenreader gebruikers aria-invalid="true" toe aan invoervelden met - een error. In de HTML-voorbeelden is dit meegenomen. -
      • -
    • - Plaats toelichting met betrekking tot het invullen van velden boven het invoerveld, - zodat de gebruiker eerst de toelichtig leest en daarna het bijbehorende invoerveld - tegenkomt. Hierdoor weet de gebruiker hoe het invoerveld ingevuld dient te worden - voordat deze gepresenteerd wordt. Uitzondering hierop zijn toelichtingsteksten die de - gerbruiker zelf activeert door middel van de hulpknop. Die teksten worden onder het - gekozen invoerveld geplaatst zodat de structuur van het formulier en het element waar de - gebruiker interactie mee heeft zo min mogelijk verspringt. -
      • -
    • - Plaats foutmeldingen altijd onder het invoerveld. Dit zorgt ervoor dat de gebruiker - eerst te zien krijgt wat de context van de foutmelding is wat het begrijpen van de - foutmelding toegankelijker maakt. -
      • -
    • - Voor meer informatie over beschikbare notificatie-types en het gebruik zie: Notificaties. -
      • -
    -
    - -
    -

    Voorbeelden

    -

    Het basisvoorbeeld met een invoerveld en een verzendknop.

    - -

    Notificatie op invoerveld

    -

    Visueel voorbeeld foutmelding:

    -
    - -
    - -

    - Foutmelding: Lorem ipsum dolor sit amet -

    -
    - -
    - -

    HTML-voorbeeld:

    - - -
    - -

    - Foutmelding: Lorem ipsum dolor sit amet -

    -
    - - -`} - /> - -

    Visueel voorbeeld toelichting:

    -
    - -
    -

    - Toelichting: Lorem ipsum dolor sit amet -

    - -
    - -
    - -

    HTML-voorbeeld:

    - - -
    -

    - Toelichting: Lorem ipsum dolor sit amet -

    - -
    - - -`} - /> - -

    Visueel voorbeeld waarschuwing:

    -
    - -
    -

    - Waarschuwing: Lorem ipsum dolor sit amet -

    - -
    - -
    - -

    HTML-voorbeeld:

    - - -
    -

    - Waarschuwing: Lorem ipsum dolor sit amet -

    - -
    - - -`} - /> - -

    Visueel voorbeeld bevestiging:

    -
    - -
    -

    - Bevestiging: Lorem ipsum dolor sit amet -

    - -
    - -
    - -

    HTML-voorbeeld:

    - - -
    -

    - Bevestiging: Lorem ipsum dolor sit amet -

    - -
    - - -`} - /> - -

    Visueel voorbeeld systeembericht

    -
    - -
    -

    - Systeembericht: Lorem ipsum dolor sit amet -

    - -
    - -
    - -

    HTML-voorbeeld:

    - - -
    -

    - Systeembericht: Lorem ipsum dolor sit amet -

    - -
    - - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Gerelateerd:

    -
      -
    • - Voor meer informatie over beschikbare notificatie-types en het gebruik zie: Notificaties. -
      • -
    - -

    Importeer component via npm

    - -

    CSS-voorbeeld:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-required-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-required-test/+page.svelte deleted file mode 100644 index 22ba4e64..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-required-test/+page.svelte +++ /dev/null @@ -1,137 +0,0 @@ - - - - - - Verplichte testpagina - - -
    -
    -
    -
    -

    Invoerveld verplicht testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Invoerveld verplicht

    -

    Visueel voorbeeld:

    - -
    - -
    - Dit veld is verplicht - -
    - -
    - -
    -
    - -
    - Dit veld is verplicht - -
    -
    - -
    - -
    -
    - -
    - Dit veld is verplicht - -
    -
    - -
    - -

    HTML-voorbeeld:

    - -
    - -
    - Dit veld is verplicht - -
    -
    - - -`} - /> - -

    Invoerveld verplicht

    -

    Visueel voorbeeld:

    - -
    -
    - -
    - Dit veld is verplicht - -
    -
    - -
    - -

    HTML-voorbeeld:

    - -
    - -
    - Dit veld is verplicht - -
    -
    - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-required/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-required/+page.svelte deleted file mode 100644 index b0fd0faf..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-required/+page.svelte +++ /dev/null @@ -1,138 +0,0 @@ - - - - - - Verplichte velden - - -
    - - - -
    -
    -
    -

    Verplichte velden

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Geef op de <input> aan dat het invoerveld verplicht is met het - required attribuut. -
      3. -
    3. - Voeg een <span> toe boven het inputveld. Het is belangrijk om het bericht - boven het invoerveld te plaatsen zodat de volgorde ook klopt voor gebruikers die gebruik - maken van hulpmiddelen zoals een screenreader. -
      4. -
    4. - Indien het formulier horizontaal uitgelijnd is: groeppeer de - <input> en de <span> samen in een - <div>. Voor meer informatie zie - Horizontaal uitgelijnd formulier. -
      5. -
    -
    - -
    -

    Voorbeelden

    - -

    Invoerveld verplicht

    -

    Visueel voorbeeld:

    - -
    -
    - -
    - Dit veld is verplicht - -
    -
    - -
    - -

    HTML-voorbeeld:

    - -
    - -
    - Dit veld is verplicht - -
    -
    - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • form/form-nota-bene.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • form/form-nota-bene-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-select-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-select-test/+page.svelte deleted file mode 100644 index df443e7f..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-select-test/+page.svelte +++ /dev/null @@ -1,409 +0,0 @@ - - - - - - Selectielijst testpagina - - -
    -
    -
    -
    -

    Selectielijst - select testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    - - - - -
    - -

    HTML-voorbeeld:

    - - - - - - -`} - /> - -

    Selectielijst gegroepeerd binnen div

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - - -`} - /> - -

    Selectielijst gegroepeerd binnen div horizontaal uitgelijnd

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - - -`} - /> - -

    Selectielijst binnen section

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - - -`} - /> - -

    Selectielijst gegroepeerd binnen section horizontaal uitgelijnd

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - - -`} - /> - -

    Selectielijst binnen fieldset

    -

    Visueel voorbeeld:

    -
    -
    - Selectielijst binnen een fieldset voorbeeld - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - Selectielijst binnen een fieldset voorbeeld - - -
    - - - -`} - /> - -

    Selectielijst gegroepeerd binnen fieldset horizontaal uitgelijnd

    -

    Visueel voorbeeld:

    -
    -
    - Selectielijst binnen een fieldset voorbeeld -
    - - -
    -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - Selectielijst binnen een fieldset voorbeeld -
    - - -
    -
    - - - -`} - /> - -

    Verplicht

    -

    Visueel voorbeeld:

    -
    - - Dit veld is verplicht - - - -
    - -

    HTML-voorbeeld:

    - - - - Dit veld is verplicht - - - - -`} - /> - -

    Uitgeschakeld

    -

    Visueel voorbeeld:

    -
    - - - - -
    - -

    HTML-voorbeeld:

    - - - - - - - -`} - /> - -

    Voorgeselecteerde optie

    -

    Visueel voorbeeld:

    -
    - - - - -
    - -

    HTML-voorbeeld:

    - - - - - - -`} - /> - -

    Gegroepeerde opties

    -

    Visueel voorbeeld:

    -
    - - - - -
    - -

    HTML-voorbeeld:

    - - - - - - -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/form-select/+page.svelte b/icore_open_docs/src/routes/(docs)/components/form-select/+page.svelte deleted file mode 100644 index 25d8042c..00000000 --- a/icore_open_docs/src/routes/(docs)/components/form-select/+page.svelte +++ /dev/null @@ -1,201 +0,0 @@ - - - - - - Selectielijst - - -
    - - - -
    -
    -

    - Waarschuwing: Het select-element wordt binnen browsers en - bestuurssystemen verschillend weergegeven. Hierdoor kan aangepaste styling onverwachte - resultaten opleveren. Test daarom altijd grondig of gebruik de standaard weergave zonder - visuele aanpassingen. -

    -
    -

    Selectielijst - select

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de <range> toe. Zie onderstaand voorbeeld voor meer informatie. -
      3. -
    - -

    Aandachtspunten:

    -
      -
    • - Als een selectielijst een verplicht invoerveld is, voeg dan altijd als eerste optie een - lege optie toe: - <option value="">--Please choose an option--</option> - Zie - Verplichte selectielijst - voor meer informatie. -
      • -
    -
    - -
    -

    Voorbeelden

    - -

    Basis

    -

    Visueel voorbeeld:

    -
    - - - - -
    - -

    HTML-voorbeeld:

    - - - - - - -`} - /> - -

    Horizontaal uitgelijnd

    -

    Visueel voorbeeld:

    -
    -
    - - -
    - - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - - - -`} - /> - -

    Verplicht

    -

    Voorbeeld

    -

    Visueel voorbeeld:

    -
    - - Dit veld is verplicht - - - -
    - -

    HTML-voorbeeld:

    - - - - Dit veld is verplicht - - - - -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • form/form-select-variables.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • form/form-select-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    - -

    Bijbehorende elementen:

    - -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/forms/+page.svelte b/icore_open_docs/src/routes/(docs)/components/forms/+page.svelte deleted file mode 100644 index e0562ed7..00000000 --- a/icore_open_docs/src/routes/(docs)/components/forms/+page.svelte +++ /dev/null @@ -1,122 +0,0 @@ - - - - - - Formulieren - - -
    -
    -
    -
    -

    Formulieren

    -

    - Formulieren worden gebruikt om informatie op te vragen en te ontvangen van gebruikers. -

    -
    - -
    -

    Beschikbare weergaven

    -
    - - - - - - - -
    -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/header-navigation/+page.svelte b/icore_open_docs/src/routes/(docs)/components/header-navigation/+page.svelte deleted file mode 100644 index 680979f3..00000000 --- a/icore_open_docs/src/routes/(docs)/components/header-navigation/+page.svelte +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - Header - - -
    - - - -
    -
    -
    -

    Header

    -

    - De header-navigation wordt vaak gebruikt als extra navigatiepunt en om aan te geven aan de - gebruiker dat het einde van de pagina bereikt is. -

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden. -
      3. -
    -
    - -
    -

    Voorbeelden:

    - -
    - -
    -

    Bijbehorende bestanden

    -

    Voeg de (s)css-bestanden toe aan het project of importeer de bestanden.

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Importeer component via npm

    -

    CSS-voorbeeld:

    - -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-content-wrapper/+page@.svelte b/icore_open_docs/src/routes/(docs)/components/header-navigation/example-content-wrapper/+page@.svelte deleted file mode 100644 index 0187874f..00000000 --- a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-content-wrapper/+page@.svelte +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - - - Header content wrapper visueel voorbeeld - - -
    -
    - - -
    -
    - -
    - - - -
    -
    -
    -

    Header visueel voorbeeld

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden. -
      2. -
    -
    - -
    -

    Voorbeelden:

    -

    Voor het visuele voorbeeld zie de header van deze pagina.

    -

    HTML-voorbeeld:

    - - - -`} - /> -
    -
    -
    -
    - - diff --git a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-form-button/+page@.svelte b/icore_open_docs/src/routes/(docs)/components/header-navigation/example-form-button/+page@.svelte deleted file mode 100644 index 49cb6137..00000000 --- a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-form-button/+page@.svelte +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - - - Header met navigatie met meerdere menus en form button - - -
    -
    - - -
    -
    - -
    - - - -
    -
    -
    -

    Header met navigatie met meerdere menus en form button

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden. -
      2. -
    -
    - -
    -

    Voorbeelden:

    -

    Voor het visuele voorbeeld zie de header van deze pagina.

    -

    HTML-voorbeeld:

    - -
    - - - -
    - -`} - /> -
    -
    -
    -
    - - diff --git a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-language-select-list/+page@.svelte b/icore_open_docs/src/routes/(docs)/components/header-navigation/example-language-select-list/+page@.svelte deleted file mode 100644 index a51f780d..00000000 --- a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-language-select-list/+page@.svelte +++ /dev/null @@ -1,231 +0,0 @@ - - - - - - - - Header met language selector list - - -
    -
    - - - -
    -

    Kies een taal:

    - - -
    -
    -
    - -
    - -
    -
    -
    -

    Header met language selector list visueel voorbeeld

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden. -
      2. -
    -
    - -
    -

    Voorbeelden:

    -

    Voor het visuele voorbeeld zie de header van deze pagina.

    -

    HTML-voorbeeld:

    - - - - - -
    - - -
    -

    Kies een taal:

    - - -
    - - -
    - -`} - /> - -

    CSS-voorbeeld:

    -

    Ingestelde variabelen voor deze weergave

    - -
    -
    -
    -
    - - - - diff --git a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-logo-above/+page@.svelte b/icore_open_docs/src/routes/(docs)/components/header-navigation/example-logo-above/+page@.svelte deleted file mode 100644 index cd421d7d..00000000 --- a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-logo-above/+page@.svelte +++ /dev/null @@ -1,150 +0,0 @@ - - - - - - - - Header met logo bovenaan - - -
    - - - -
    - -
    - - - -
    -
    -
    -

    Header met logo bovenaan visueel voorbeeld

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden. -
      2. -
    -
    - -
    -

    Voorbeelden:

    -

    Voor het visuele voorbeeld zie de header van deze pagina.

    -

    HTML-voorbeeld:

    - - - - - - - -`} - /> - -

    CSS-voorbeeld:

    -

    Ingestelde variabelen voor deze weergave

    - -
    -
    -
    -
    - - diff --git a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-logo/+page@.svelte b/icore_open_docs/src/routes/(docs)/components/header-navigation/example-logo/+page@.svelte deleted file mode 100644 index 9ef52801..00000000 --- a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-logo/+page@.svelte +++ /dev/null @@ -1,119 +0,0 @@ - - - - - - - - Header voorbeeld met logo - - -
    - -
    - -
    - - - -
    -
    -
    -

    Header voorbeeld met logo visueel voorbeeld

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden. -
      2. -
    -
    - -
    -

    Voorbeelden:

    -

    Voor het visuele voorbeeld zie de header van deze pagina.

    -

    HTML-voorbeeld:

    - - - -`} - /> -
    -
    -
    -
    - - - - diff --git a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-multiple-menus/+page@.svelte b/icore_open_docs/src/routes/(docs)/components/header-navigation/example-multiple-menus/+page@.svelte deleted file mode 100644 index 19dbad40..00000000 --- a/icore_open_docs/src/routes/(docs)/components/header-navigation/example-multiple-menus/+page@.svelte +++ /dev/null @@ -1,105 +0,0 @@ - - - - - - - - Header met navigatie met meerdere menus - - -
    -
    - - -
    -
    - -
    - - - -
    -
    -
    -

    Header met meerdere menus visueel voorbeeld

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden. -
      2. -
    -
    - -
    -

    Voorbeelden:

    -

    Voor het visuele voorbeeld zie de header van deze pagina.

    -

    HTML-voorbeeld:

    - -
    - - - -
    - -`} - /> -
    -
    -
    -
    - - diff --git a/icore_open_docs/src/routes/(docs)/components/header-navigation/example/+page@.svelte b/icore_open_docs/src/routes/(docs)/components/header-navigation/example/+page@.svelte deleted file mode 100644 index a3f020e0..00000000 --- a/icore_open_docs/src/routes/(docs)/components/header-navigation/example/+page@.svelte +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - Header visueel voorbeeld - - -
    - - -
    - -
    - - - -
    -
    -
    -

    Header visueel voorbeeld

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden. -
      2. -
    -
    - -
    -

    Voorbeelden:

    -

    Voor het visuele voorbeeld zie de header van deze pagina.

    -

    HTML-voorbeeld:

    - - - - - - -`} - /> -
    -
    -
    -
    - - diff --git a/icore_open_docs/src/routes/(docs)/components/heading-base-set/+page.svelte b/icore_open_docs/src/routes/(docs)/components/heading-base-set/+page.svelte deleted file mode 100644 index 4ce0fbe9..00000000 --- a/icore_open_docs/src/routes/(docs)/components/heading-base-set/+page.svelte +++ /dev/null @@ -1,502 +0,0 @@ - - - - - - Titel basisset - - -
    - - - -
    -
    -
    -

    Titel basisset

    -

    Basisset voor het stylen van titels.

    - -
    -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. -
        -
      • - Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden. -
        • -
      • - Vul de variabelen met de gewenste weergaven. Voor meer informatie zie het - overzicht met instelbare variabelen. -
        • -
      • - Pas de titelweergaven toe waar nodig. De titelweergaven kunnen op twee manieren - toegepast worden. Door middel van variabelen binnen de CSS of door middel van - classes binnen de HTML. Maak gebruik van de CSS-variabelen waar mogelijk en voeg - alleen de classes toe in de HTML voor uitzonderingen om de code aanpasbaar en - overzichtelijk te houden. Voor meer informatie hierover zie CSS-variabelen gebruiken. -
        • -
      -
      2. -
    -
    -
    - -
    -

    Voorbeelden

    - -

    Beschikbare opties

    -
      -
    • heading-xxl
      • -
    • heading-xl
      • -
    • heading-large
      • -
    • heading-normal
      • -
    • heading-small
      • -
    • heading-xs
      • -
    - -

    HTML-element stijling ingesteld via CSS voorbeeld

    -

    Visueel voorbeeld:

    - -
    -

    h1 met weergave heading XXL

    -

    h2 met weergave heading XL

    -

    h3 met weergave heading Large

    -

    h4 met weergave heading Normal

    -
    h5 met weergave heading Small
    -
    h6 met weergave heading XS
    -
    - -

    HTML-voorbeeld:

    - h1 met weergave heading XXL -

    h2 met weergave heading XL

    -

    h3 met weergave heading Large

    -

    h4 met weergave heading Normal

    -
    h5 met weergave heading Small
    -
    h6 met weergave heading XS
    -`} - /> - -

    Variabele gebruiken binnen een andere variabele

    -

    - In dit voorbeeld is de styling ingesteld door een van de variabelen uit deze set in te - laden binnen de variabele om de h1 te stylen. -

    -

    CSS-voorbeeld:

    - -

    - Voor meer informatie hierover zie CSS-variabelen gebruiken. -

    - -

    Class gebruiken binnen de HTML

    -

    - Dit voorbeeld maakt gebruik van de classes uit deze set direct op de HTML-elementen. Dit - is een geschikte manier voor uitzonderingen. -

    -

    - Waarschuwing: Waar mogelijk is het altijd aan te raden zo min mogelijk classes - te gebruiken maar om gebruik te maken van het overerven van CSS. Maar omdat een uitzondering - soms nodig is, is het mogelijk om de titelweergaven ook direct in de html te kunnen definiëren - door middel van een classes. -

    - -

    Visueel voorbeeld:

    -
    -

    Heading XXL

    -

    Heading XL

    -

    Heading Large

    -

    Heading Normal

    -

    Heading Small

    -

    Heading XS

    -
    - -

    HTML-voorbeeld:

    - Heading XXL -

    Heading XL

    -

    Heading Large

    -

    Heading Normal

    -

    Heading Small

    -

    Heading XS

    -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Importeer component via npm

    - -

    CSS-voorbeeld:

    - -
    - -
    -

    Instelbare variabelen

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Instelbare variabelen tabel:
    NaamVariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    heading-base-set--headings-base-set-font-familyfont-familyvar(--application-base-font-family)--
    --headings-base-set-font-sizefont-size1.5rem-
    --headings-base-set-font-weightfont-weightbold-
    --headings-base-set-line-heightline-heightvar(--application-base-line-height)-
    --headings-base-set-text-colorcolorvar(--application-base-text-color)-
    --headings-base-set-marginmargin0-
    heading-xxl--heading-xxl-font-familyfont-familyvar(--headings-base-set-font-family)-heading-xxl
    --heading-xxl-font-sizefont-size2.5rem-
    --heading-xxl-font-weightfont-weightvar(--headings-base-set-font-weight)-
    --heading-xxl-line-heightline-heightvar(--headings-base-set-line-height)-
    --heading-xxl-text-colorcolorvar(--headings-base-set-text-color)-
    --heading-xxl-marginmarginvar(--headings-base-set-margin)-
    heading-xl--heading-xl-font-familyfont-familyvar(--headings-base-set-font-family)-heading-xl
    --heading-xl-font-sizefont-size2rem-
    --heading-xl-font-weightfont-weightvar(--headings-base-set-font-weight)-
    --heading-xl-line-heightline-heightvar(--headings-base-set-line-height)-
    --heading-xl-text-colorcolorvar(--headings-base-set-text-color)-
    --heading-xl-marginmarginvar(--headings-base-set-margin)-
    heading-large--heading-large-font-familyfont-familyvar(--headings-base-set-font-family)-heading-large
    --heading-large-font-sizefont-size1.5rem-
    --heading-large-font-weightfont-weightvar(--headings-base-set-font-weight)-
    --heading-large-line-heightline-heightvar(--headings-base-set-line-height)-
    --heading-large-text-colorcolorvar(--headings-base-set-text-color)-
    --heading-large-marginmarginvar(--headings-base-set-margin)-
    heading-normal--heading-normal-font-familyfont-familyvar(--headings-base-set-font-family)-heading-normal
    --heading-normal-font-sizefont-size1rem-
    --heading-normal-font-weightfont-weightvar(--headings-base-set-font-weight)-
    --heading-normal-line-heightline-heightvar(--headings-base-set-line-height)-
    --heading-normal-text-colorcolorvar(--headings-base-set-text-color)-
    --heading-normal-marginmarginvar(--headings-base-set-margin)-
    heading-small--heading-small-font-familyfont-familyvar(--headings-base-set-font-family)-heading-small
    --heading-small-font-sizefont-size0.8rem-
    --heading-small-font-weightfont-weightvar(--headings-base-set-font-weight)-
    --heading-small-line-heightline-heightvar(--headings-base-set-line-height)-
    --heading-small-text-colorcolorvar(--headings-base-set-text-color)-
    --heading-small-marginmarginvar(--headings-base-set-margin)-
    heading-xs--heading-xs-font-familyfont-familyvar(--headings-base-set-font-family)-heading-xs
    --heading-xs-font-sizefont-size0.7rem-
    --heading-xs-font-weightfont-weightvar(--headings-base-set-font-weight)-
    --heading-xs-line-heightline-heightvar(--headings-base-set-line-height)-
    --heading-xs-text-colorcolorvar(--headings-base-set-text-color)-
    --heading-xs-marginmarginvar(--headings-base-set-margin)-
    -
    -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/headings-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/headings-test/+page.svelte deleted file mode 100644 index e0592f76..00000000 --- a/icore_open_docs/src/routes/(docs)/components/headings-test/+page.svelte +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - Titel testpagina - - -
    -
    -
    -
    -

    Titel testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -
    -

    Dit is een h1

    -

    Dit is een h2

    -

    Dit is een h3

    -

    Dit is een h4

    -
    Dit is een h5
    -
    Dit is een h6
    -
    - -

    HTML-voorbeeld:

    - Dit is een h1 -

    Dit is een h2

    -

    Dit is een h3

    -

    Dit is een h4

    -
    Dit is een h5
    -
    Dit is een h6
    -`} - /> -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/headings/+page.svelte b/icore_open_docs/src/routes/(docs)/components/headings/+page.svelte deleted file mode 100644 index 8317d9aa..00000000 --- a/icore_open_docs/src/routes/(docs)/components/headings/+page.svelte +++ /dev/null @@ -1,659 +0,0 @@ - - - - - - Titel - - -
    - - - -
    -
    -
    -

    Titels

    -

    Gebruik titels om structuur binnen de pagina aan te geven.

    - -
    -

    Aandachtspunten:

    -
      -
    • Gebruik altijd een h1 per pagina.*
      • -
    • - Kies altijd het juiste titel-element uit h1 > h6 op basis - van de structuur in de HTML. Niet op basis van de visuele weergave. -
      • -
    • - HTML-elementen h1 > h6 kunnen via de css voorzien worden van stijl. Voor meer - informatie zie: voorbeelden. -
      • -
    • - Als niet ieder gelijkwaardig titel-element, bijvoorbeeld een h1, dezelfde visuele - stijling gebruikt kan de stijl gezet worden door middel van een voorgedefineerde set. - Binnen deze set worden de beschikbare "heading-styles" vastgelegd. Denk bijvoorbeeld - aan een "heading-large" of een "heading-small". Voor meer informatie hierover zie: Titel basisset. -
      • -
    - - * Eerder was het gebruik van meerdere h1's per pagina toegestaan. Dit is - gewijzigd in de HTML-specs van whatwg. Voor meer informatie hierover zie: - de commit op whatwg. -
    -
    - -
    -

    Voorbeelden:

    -

    Visueel voorbeeld:

    - -
    -

    Dit is een h1

    -

    Dit is een h2

    -

    Dit is een h3

    -

    Dit is een h4

    -
    Dit is een h5
    -
    Dit is een h6
    -
    - -

    HTML-voorbeeld:

    - Dit is een h1 -

    Dit is een h2

    -

    Dit is een h3

    -

    Dit is een h4

    -
    Dit is een h5
    -
    Dit is een h6
    `} - /> - -

    Design-keuzes instellen voor alle of meerdere titels

    -

    - Een set aan algemene varibelen zijn toegevoegd. Deze kunnen gebruikt worden om op een plek - een waarde in te vullen en die te gebruiken binnen verschillende titel-types. Bijvoorbeeld - om alle titels hetzelfde lettertype of dezelfde font-weight mee te geven. Het - gebruik van gedeelde variabelen helpt herhaling te voorkomen en daarmee de kans op fouten bij - toekomstige wijzigingen. -

    - -

    CSS-voorbeeld instellen:

    - - -

    CSS-voorbeeld gebruik:

    -

    - In dit voorbeeld wordt de eerder ingestelde "--headings-font-family" waarde doorgevoerd - binnen de beschikbare heading-types. -

    - - -

    Gebruik maken van een heading-set

    -

    - Heading-sets kunnen gebruikt worden om op een centrale plek de stijlkeuzes vast te leggen - voor de beschikbare titel-weergaven. -

    - -

    Beschikbare styling sets voor headings zijn:

    - - -

    CSS-voorbeeld instellen:

    -

    Gebruik de variabelen die beschikbaar zijn binnen de gekozen heading-set.

    -

    - Het onderstaande voorbeeld maakt gebruik van @minvws/manon/headings-base-set. -

    - -

    - Voor meer informatie en alle beschikbare variabelen binnen deze set zie: Heading-basisset. -

    - - -

    CSS-voorbeeld gebruik:

    -

    - In dit voorbeeld worden de eerder ingestelde "font-size"-waardes doorgevoerd binnen de - beschikbare heading-types. -

    - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Importeer component via npm

    - -

    SCSS-voorbeeld:

    - -
    - -
    -

    Aandachtspunten:

    -
      -
    • - De standaard ingestelde waarden binnen Manon maken gebruik van de headings-base-set. -
      • -
    • - De "headings"-variabelen zijn te gebruiken om een waarde in te stellen voor een of - meerdere heading-types. Voor meer informatie zie: Design-keuzes instellen voor alle of meerdere titels. -
      • -
    - -

    Instelbare variabelen

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Instelbare variabelen tabel:
    NaamVariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    headings--headings-font-familyfont-familyvar(--application-base-font-family)--
    --headings-font-sizefont-size1.5rem--
    --headings-font-weightfont-weightbold--
    --headings-line-heightline-heightvar(--application-base-line-height)--
    --headings-text-colortext-colorvar(--application-base-text-color)--
    --headings-marginmargin1rem--
    h1--h1-font-familyfont-familyvar(--headings-font-family)--
    --h1-font-sizefont-sizevar(--heading-xxl-font-size)--
    --h1-font-weightfont-weightvar(--heading-xxl-font-weight)--
    --h1-line-heightline-heightvar(--heading-xxl-line-height)--
    --h1-text-colortext-colorvar(--heading-xxl-text-color)--
    --h1-marginmarginvar(--heading-xxl-margin)--
    h2--h2-font-familyfont-familyvar(--headings-font-family)--
    --h2-font-sizefont-sizevar(--heading-xl-font-size)--
    --h2-font-weightfont-weightvar(--heading-xl-font-weight)--
    --h2-line-heightline-heightvar(--heading-xl-line-height)--
    --h2-text-colortext-colorvar(--heading-xl-text-color)--
    --h2-marginmarginvar(--heading-xl-margin)--
    h3--h3-font-familyfont-familyvar(--headings-font-family)--
    --h3-font-sizefont-sizevar(--heading-large-font-size)--
    --h3-font-weightfont-weightvar(--heading-large-font-weight)--
    --h3-line-heightline-heightvar(--heading-large-line-height)--
    --h3-text-colortext-colorvar(--heading-large-text-color)--
    --h3-marginmarginvar(--heading-large-margin)--
    h4--h4-font-familyfont-familyvar(--headings-font-family)--
    --h4-font-sizefont-sizevar(--heading-normal-font-size)--
    --h4-font-weightfont-weightvar(--heading-normal-font-weight)--
    --h4-line-heightline-heightvar(--heading-normal-line-height)--
    --h4-text-colortext-colorvar(--heading-normal-text-color)--
    --h4-marginmarginvar(--heading-normal-margin)--
    h5--h5-font-familyfont-familyvar(--headings-font-family)--
    --h5-font-sizefont-sizevar(--heading-small-font-size)--
    --h5-font-weightfont-weightvar(--heading-small-font-weight)--
    --h5-line-heightline-heightvar(--heading-small-line-height)--
    --h5-text-colortext-colorvar(--heading-small-text-color)--
    --h5-marginmarginvar(--heading-small-margin)--
    h6--h6-font-familyfont-familyvar(--headings-font-family)--
    --h6-font-sizefont-sizevar(--heading-xs-font-size)--
    --h6-font-weightfont-weightvar(--heading-xs-font-weight)--
    --h6-line-heightline-heightvar(--heading-xs-line-height)--
    --h6-text-colortext-colorvar(--heading-xs-text-color)--
    --h6-marginmarginvar(--heading-xs-margin)--
    -
    - -

    CSS

    -

    - Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw - project. Kies en gebruik de benodigde variabelen. -

    - -

    - Om stijlkeuzes door te voeren op alle titels gebruik de onderstaande variabelen. Hierbij - kan ook verwezen worden naar stijlkeuzes in heading-sets als deze toegevoegd zijn aan - het project. Voor een voorbeeld zie: heading-base-set. -

    - - -

    - Om uitzonderingen toe te voegen op specifieke headings gebruik (een selectie van) de - onderstaande variabelen. -

    - -
    - - -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/hidden/+page.svelte b/icore_open_docs/src/routes/(docs)/components/hidden/+page.svelte deleted file mode 100644 index 1c093c06..00000000 --- a/icore_open_docs/src/routes/(docs)/components/hidden/+page.svelte +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - Verbergen - - -
    - - - - -
    -
    -
    -

    Verbergen - hidden

    -

    - Object verbergen. Door middel van een display:none wordt het object verborgen. -

    -

    - Let op: Screenreaders slaan over het algemeen ook objecten met - "display: none" over voor hun gebruikers. -

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de class hidden aan het gewenste element. -
      3. -
    -
    - -
    -

    Voorbeeld

    -

    Onderstaand voorbeeld bevat drie paragrafen waarvan er twee verborgen worden.

    - -
    - - -

    Voorbeeld paragraaf 3.

    -
    - -

    HTML-voorbeeld:

    - - - -

    Voorbeeld paragraaf 3.

    -
    -`} - /> -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • hidden.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/horizontal-center-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/horizontal-center-test/+page.svelte deleted file mode 100644 index c043a99f..00000000 --- a/icore_open_docs/src/routes/(docs)/components/horizontal-center-test/+page.svelte +++ /dev/null @@ -1,186 +0,0 @@ - - - - - - Horizontaal gecentreerd testpagina - - -
    - - - -
    -
    -
    -

    Horizontaal gecentreerd testpagina

    -
    - -
    -

    div

    - -

    Visueel voorbeeld:

    -
    -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris - luctus, vel pharetra arcu egestas. -

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris luctus, vel pharetra arcu egestas.

    -
    -`} - /> - -

    section

    - -

    Visueel voorbeeld:

    -
    -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris - luctus, vel pharetra arcu egestas. -

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris luctus, vel pharetra arcu egestas.

    -
    -`} - /> - -

    article

    - -

    Visueel voorbeeld:

    -
    -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris - luctus, vel pharetra arcu egestas. -

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris luctus, vel pharetra arcu egestas.

    -
    -`} - /> - -

    Formulier

    - -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    -
    - - -
    - - -`} - /> -
    - -
    -

    article direct binnen main

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris - luctus, vel pharetra arcu egestas. -

    - -

    HTML-voorbeeld:

    - -

    article direct binnen main

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris luctus, vel pharetra arcu egestas.

    -
    -`} - /> -
    - -
    -

    section direct binnen main

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris - luctus, vel pharetra arcu egestas. -

    - -

    HTML-voorbeeld:

    - -

    section direct binnen main

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris luctus, vel pharetra arcu egestas.

    -
    -`} - /> -
    - -
    -

    div direct binnen main

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris - luctus, vel pharetra arcu egestas. -

    - -

    HTML-voorbeeld:

    - -

    div direct binnen main

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris luctus, vel pharetra arcu egestas.

    -
    -`} - /> - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/horizontal-center/+page.svelte b/icore_open_docs/src/routes/(docs)/components/horizontal-center/+page.svelte deleted file mode 100644 index 6c7842bc..00000000 --- a/icore_open_docs/src/routes/(docs)/components/horizontal-center/+page.svelte +++ /dev/null @@ -1,145 +0,0 @@ - - - - - - Horizontaal gecentreerd - - -
    - - - -
    -
    -
    -

    Horizontaal gecentreerd

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de class horizontal-center toe op het horizontaal uit te lijnen element. -
      3. -
    -
    - -
    -

    Voorbeelden

    - -

    Horizontaal gecentreerd

    -

    Visueel voorbeeld:

    - -
    -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris - luctus, vel pharetra arcu egestas. -

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper odio at mauris luctus, vel pharetra arcu egestas.

    -
    -`} - /> - -

    HTML-structuur-voorbeeld:

    - - - -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Importeer component via npm

    - -

    CSS-voorbeeld:

    - -
    - -
    -

    Instelbare variabelen

    -
    - - - - - - - - - - - - - - - - - - - - -
    Beschikbare instelbare variabelen:
    VariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    --horizontal-center-max-widthmax-widthvar(--body-text-small-max-width)-horizontal-center
    -
    - -

    CSS

    -

    - Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw - project. Kies en gebruik de benodigde variabelen. -

    - -
    - - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/horizontal-scroll-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/horizontal-scroll-test/+page.svelte deleted file mode 100644 index 72a5dc6f..00000000 --- a/icore_open_docs/src/routes/(docs)/components/horizontal-scroll-test/+page.svelte +++ /dev/null @@ -1,565 +0,0 @@ - - - - - - Horizontale scroll testpagina - - -
    -
    -
    -
    -

    Horizontale scroll testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -

    - Let op: het effect van de horizontale scroll is alleen zichtbaar als de - content niet meer binnen de schermbreedte past. -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7Table header heading 8Table header heading 9Table header heading 10
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    -
    - -

    HTML-voorbeeld:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    -
    -`} - /> - -

    nowrap op omliggende div

    -

    Visueel voorbeeld:

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7Table header heading 8Table header heading 9Table header heading 10
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    -
    - -

    HTML-voorbeeld:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    - -`} - /> - -

    nowrap op table

    -

    Visueel voorbeeld:

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7Table header heading 8Table header heading 9Table header heading 10
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    -
    - -

    HTML-voorbeeld:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    - -`} - /> - -

    nowrap op thead

    -

    Visueel voorbeeld:

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7Table header heading 8Table header heading 9Table header heading 10
    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis nunc. - Sed metus massa, tristique quis purus et, pulvinar ornare est. Lorem ipsum dolor - sit amet, consectetur adipiscing elit. - Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    Dolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor setDolor set
    -
    - -

    HTML-voorbeeld:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at mattis nunc. Sed metus massa, tristique quis purus et, pulvinar ornare est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.IpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    - -`} - /> - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte b/icore_open_docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte deleted file mode 100644 index 35f04465..00000000 --- a/icore_open_docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte +++ /dev/null @@ -1,470 +0,0 @@ - - - - - - Horizontale scroll - - -
    - - - -
    -
    -
    -

    Horizontale scroll

    -

    - Voor componenten die breder zijn dan het scherm maar wel horizontaal weergegeven dienen te - worden. -

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de class horizontal-scroll toe om het element over de horizontale as te - laten scrollen als de content niet meer binnen de breedte van het scherm past. -
      3. -
    -
    - -
    -

    Voorbeelden

    -

    Basis

    -

    Visueel voorbeeld:

    -

    - Let op: het effect van de horizontale scroll is alleen zichtbaar als de - content niet meer binnen de schermbreedte past. -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    -
    - -

    HTML-voorbeeld:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    -
    -`} - /> - -

    HTML-structuur-voorbeeld:

    - - <-- Content --> - -`} - /> - -

    Tabeltitel op een regel

    -

    Visueel voorbeeld:

    -

    - Om te voorkomen dat de tabeltitels op meerdere regels getoond worden kan de class - nowrap toegevoegd worden aan de <thead>. -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    -
    - -

    HTML-voorbeeld:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    - -`} - /> - -

    Tabeltitel en content op een regel

    -

    Visueel voorbeeld:

    -

    - Om te voorkomen dat de tabeltitels en content op meerdere regels getoont worden kan de - class nowrap toegevoegd worden aan de omliggende <div> of - de <table>. -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    -
    - -

    HTML-voorbeeld:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Basisvoorbeeld tabel:
    Table header heading 1Table header heading 2Table header heading 3Table header heading 4Table header heading 5Table header heading 6Table header heading 7
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    LoremIpsumDolor setDolor setDolor setDolor setDolor set
    - -`} - /> - -

    HTML-structuur-voorbeeld:

    - - - <-- Content --> -
    - -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Benodigd

    -
      -
    • helpers/horizontal-scroll.scss
      • -
    - -

    Optioneel

    -
      -
    • nowrap.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    -
    - - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/horizontal-view-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/horizontal-view-test/+page.svelte deleted file mode 100644 index d914cf8a..00000000 --- a/icore_open_docs/src/routes/(docs)/components/horizontal-view-test/+page.svelte +++ /dev/null @@ -1,183 +0,0 @@ - - - - - - Horizontaal uitgelijnd testpagina - - -
    -
    -
    -
    -

    Horizontaal uitgelijnd testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Horizontaal uitgelijnd

    -

    Visueel voorbeeld:

    - -
    - - -
    - -

    HTML-voorbeeld:

    - - - -
    -`} - /> - -

    HTML-structuur-voorbeeld:

    - - - -`} - /> - -

    Object met horizontaal uitgelijnde elementen

    -

    Visueel voorbeeld:

    - -
    -
    - - -
    - -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -
    - - -
    - -`} - /> - -

    HTML-structuur-voorbeeld:

    - -
    - -
    - -
    - -
    - -`} - /> - -

    Horizontaal uitgelijnd formulier

    -

    Visueel voorbeeld:

    - -
    -
    - - -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    -
    - - -
    - - -`} - /> - -

    Horizontaal uitgelijnd formulier fieldset

    -

    Visueel voorbeeld:

    - -
    -
    - Lorem ipsum -
    - - -
    -
    - - -
    -
    - -
    - -

    HTML-voorbeeld:

    - -
    - Lorem ipsum -
    - - -
    -
    - - -
    -
    - - -`} - /> - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/horizontal-view/+page.svelte b/icore_open_docs/src/routes/(docs)/components/horizontal-view/+page.svelte deleted file mode 100644 index 52db816d..00000000 --- a/icore_open_docs/src/routes/(docs)/components/horizontal-view/+page.svelte +++ /dev/null @@ -1,172 +0,0 @@ - - - - - - Horizontaal uitgelijnd - - -
    - - - -
    -
    -
    -

    Horizontaal uitgelijnd

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: - Bijbehorende bestanden. -
      2. -
    2. - Voeg de class horizontal-view toe op het horizontaal uit te lijnen element. -
      3. -
    - -

    Suggesties:

    -
      -
    1. - Voor het horizontaal uitlijnen van meerdere objecten binnen een element voeg de class horizontal-view-group. Voor meer informatie zie: - Object met horizontaal uitgelijnde componenten -
      2. -
    -
    - -
    -

    Voorbeelden

    - -

    Horizontaal uitgelijnd

    -

    Visueel voorbeeld:

    - -
    - - -
    - -

    HTML-voorbeeld:

    - - - -
    -`} - /> - -

    HTML-structuur-voorbeeld:

    - - - -`} - /> - -

    Object met horizontaal uitgelijnde elementen

    -

    Visueel voorbeeld:

    - -
    -
    - - -
    - -
    - - -
    -
    - -

    HTML-voorbeeld:

    - -
    - - -
    - -
    - - -
    - -`} - /> - -

    HTML-structuur-voorbeeld:

    - -
    - -
    - -
    - -
    - -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Benodigd

    -
      -
    • form/form-base.scss
      • -
    • helper/horizontal-view.scss
      • -
    - -

    Optioneel

    -
      -
    • form/form-base-variables.scss
      • -
    • helper/horizontal-view-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    - -
    - - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/icons/+page.svelte b/icore_open_docs/src/routes/(docs)/components/icons/+page.svelte deleted file mode 100644 index e7866ae0..00000000 --- a/icore_open_docs/src/routes/(docs)/components/icons/+page.svelte +++ /dev/null @@ -1,170 +0,0 @@ - - - - - - Iconen - - -
    - - - -
    -
    -
    -

    Iconen

    -

    - Voor het toevoegen van iconen binnen de website kan gebruik gemaakt worden van een - icoon-lettertype via de classes icon en - icon-{"{naam}"}. -

    -

    - Standaard maken deze classes gebruik van het meegeleverde icoon-lettertype van het thema. - Zie beschikbare iconen voor meer informatie over deze - standaard iconen. Daarnaast is het mogelijk om applicatie-specifieke iconen toe te voegen. - Zie hiervoor andere iconen toevoegen. -

    -
    -
    -

    Iconen gebruiken

    -

    - Iconen kunnen toegepast worden op allerlei HTML-elementen, waaronder span, - a, p en button. -

    -

    Benodigde stappen

    -
      -
    1. Voeg de icon class toe aan het element.
      2. -
    2. - Voeg een icon-{"{naam}"} class toe, bijvoorbeeld - icon-check - om het check-icoon te gebruiken. -
      3. -
    3. - Voeg een toegankelijke naam toe binnen het element. Deze wordt visueel verborgen, maar - is belangrijk voor screenreader-gebruikers en voor wanneer CSS niet geladen kan worden. -
      4. -
    -
    -
    -

    Voorbeelden

    -

    span

    -

    Visueel voorbeeld

    - Gebruiker -

    HTML-voorbeeld

    - Gebruiker`} /> -

    button

    -

    Visueel voorbeeld

    - -

    HTML-voorbeeld

    - Aan- of uitschakelen`} - /> -
    -
    -

    Beschikbare iconen

    -

    - De thema's worden geleverd met een icoon-lettertype en met icon-{"{naam}"} - classes voor een set standaard iconen: -

    -
      - {#each icons as icon} -
    • -
      • - {/each} -
    -

    - Elk thema zou ernaar moeten streven de iconen in deze set te implementeren. Iconen die in - een thema niet beschikbaar zijn, moeten door het thema als □ (het unicode-character U+25A1 "missing glyph") aangeboden worden. Extra iconen kunnen als - aparte module aangeboden worden. -

    -
    -
    -

    Andere iconen toevoegen

    -

    - Er zijn twee manieren om iconen te gebruiken die niet beschikbaar zijn in de icoon-sets - van het thema: -

    - -
    - -
    -
    -
    - - diff --git a/icore_open_docs/src/routes/(docs)/components/icons/add-set/+page.svelte b/icore_open_docs/src/routes/(docs)/components/icons/add-set/+page.svelte deleted file mode 100644 index 9433bba4..00000000 --- a/icore_open_docs/src/routes/(docs)/components/icons/add-set/+page.svelte +++ /dev/null @@ -1,235 +0,0 @@ - - - - - - Icoon-set toevoegen - - -
    -
    -
    -
    -

    Icoon-set toevoegen

    -

    Er zijn twee situaties waarin het nodig kan zijn om een icoon-set toe te voegen:

    - -
    -
    -

    Een applicatie-specifieke icoon-set toevoegen

    -

    - Een applicatie-specifieke icoon-set bestaat uit een extra icoon-lettertype en een extra - set icon-{"{naam}"} classes, die samen aan een specifieke applicatie toegevoegd - worden. Deze extra icoon-set kan nieuwe iconen toevoegen, die niet in het thema beschikbaar - zijn, of juist bestaande iconen overschrijven. -

    -

    Volg de volgende stappen:

    -
      -
    1. - Maak een icoon-lettertype met behulp van software of online tools om lettertypes en svg - fonts mee te maken. Maak notitie van de UTF-8 codes van de verschillende iconen. -
      2. -
    2. - Gebruik @font-face - om het lettertype toe te voegen binnen het project: - -
      3. -
    3. -

      - Voeg de icon-{"{naam}"} classes voor de iconen toe aan het project. Geef - elk van de classes een content met de UTF-8 code van het icoon en een - font-family - met de naam van het lettertype. -

      -

      Kies één van deze twee manieren om de classes toe te voegen:

      -
        -
      • - Handmatig: - -
        • -
      • - ...of met de define-icons mixin van Manon: - -
        • -
      -
      4. -
    -
    -
    -

    Icoon-sets maken voor een thema

    -
      -
    1. -

      - Maak een icoon-lettertype met behulp van software of online tools om lettertypes en - svg fonts mee te maken. Maak notitie van de UTF-8 codes van de verschillende iconen. - Zorg er bij voorkeur voor dat het icoon-lettertype alle iconen uit de standaard-sets bevat. -

      -
      2. -
    2. - Gebruik @font-face - om het lettertype toe te voegen aan het thema. Maak hierbij bij voorkeur gebruik van een - Sass-variabele voor het basis-pad naar het lettertype: - - Zie eventueel één van de standaard Manon-thema's voor een voorbeeld van hoe een - variables-module gebruikt kan worden. -
      3. -
    3. - Stel de thema-variabele --icon-font-family in met de naam van het - icoon-lettertype: - - -
      4. -
    4. -

      - Voeg de icon-{"{naam}"} classes voor de iconen toe aan het project. Geef - elk van de classes een content met de UTF-8 code van het icoon. In - tegenstelling tot bij een applicatie-specifieke icoon-set is het toevoegen van een - font-family niet nodig. -

      -

      - Let op: voeg classes toe voor alle iconen uit de standaard - icoon-sets, ook als het icoon-lettertype niet alle iconen bevat. Gebruik voor - ontbrekende iconen het UTF-8-karakter "\25A1" ("missing glyph"). -

      -

      Gebruik bij voorkeur de define-icons mixin van Manon:

      - -

      Neem de volledige lijst eventueel over uit één van de standaard Manon-thema's.

      -

      - Let op: geef bij het aanroepen van de define-icons mixin - in dit geval géén lettertype mee. De iconen gebruiken standaard het lettertype dat via - de --icon-font-family property ingesteld is. -

      -
      5. -
    5. - Stel de juiste UTF-8-karakters in voor componenten die een pseudo-element gebruiken voor - een icoon. Als je de define-icons mixin gebruikt heb en dus een Sass map - voor de icoon-glyphs, dan kan je deze uitlezen met de map.get-functie uit - sass:map: - -
      6. -
    -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/icons/test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/icons/test/+page.svelte deleted file mode 100644 index b9068ae5..00000000 --- a/icore_open_docs/src/routes/(docs)/components/icons/test/+page.svelte +++ /dev/null @@ -1,530 +0,0 @@ - - - - - - Iconen testpagina - - -
    -
    -
    -
    -

    Iconen testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    - -

    button

    -

    Visueel voorbeeld:

    - - -

    HTML-voorbeeld:

    - Kat -`} - /> - -

    button disabled

    -

    Visueel voorbeeld:

    - - -

    HTML-voorbeeld:

    - Kat -`} - /> -

    States

    -
      -
      • -
      • -
      • -
      • -
    - -

    button met een afbeelding

    -

    Visueel voorbeeld:

    - - -

    HTML-voorbeeld:

    - Lorem ipsum Kat -`} - /> - -

    button met een afbeelding: disabled

    -

    Visueel voorbeeld:

    - - -

    HTML-voorbeeld:

    - Lorem ipsum Kat -`} - /> - -

    States

    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    - -

    Link als knop

    -

    Visueel voorbeeld:

    - Lorem ipsum - -

    HTML-voorbeeld:

    - Lorem ipsum -`} - /> - -

    Link als knop icoon erachter

    -

    Visueel voorbeeld:

    - Lorem ipsum - -

    HTML-voorbeeld:

    - Lorem ipsum -`} - /> - -

    States

    - - -

    Link als knop: met een afbeelding

    -

    Visueel voorbeeld:

    - Lorem ipsum Kat - -

    HTML-voorbeeld:

    - Lorem ipsum Kat -`} - /> - -

    button type="submit"

    -

    Visueel voorbeeld:

    - - -

    HTML-voorbeeld:

    - Lorem ipsum -`} - /> - -

    button type="submit": disabled

    -

    Visueel voorbeeld:

    - - -

    HTML-voorbeeld:

    - -`} - /> - -

    States

    -

    Visueel voorbeeld:

    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    - -

    button type="reset"

    -

    Visueel voorbeeld:

    - - -

    HTML-voorbeeld:

    - Lorem ipsum -`} - /> - -

    button type="reset": disabled

    -

    Visueel voorbeeld:

    - - -

    HTML-voorbeeld:

    - -`} - /> - -

    States

    -

    Visueel voorbeeld:

    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    - -

    Link

    -

    Visueel voorbeeld:

    - Lorem ipsum - -

    HTML-voorbeeld:

    - Lorem ipsum -`} - /> - -

    States

    -

    Visueel voorbeeld:

    - - -

    Link met afbeelding als icoon

    -

    Visueel voorbeeld:

    - KatLorem ipsum - -

    HTML-voorbeeld:

    - KatLorem ipsum -`} - /> - -

    States

    -

    Visueel voorbeeld:

    - - -

    span

    -

    Visueel voorbeeld:

    - Lorem ipsum - -

    HTML-voorbeeld:

    - Lorem ipsum -`} - /> - -

    span met afbeelding als icoon

    -

    Visueel voorbeeld:

    - KatLorem ipsum - -

    HTML-voorbeeld:

    - KatLorem ipsum -`} - /> - -

    li

    -

    Visueel voorbeeld:

    -
      -
    • Lorem ipsum
      • -
    - -

    HTML-voorbeeld:

    - -
  • Lorem ipsum
    • - -`} - /> - -

    div

    -

    Visueel voorbeeld:

    -
    Lorem ipsum
    - -

    HTML-voorbeeld:

    - Lorem ipsum
    -`} - /> - -

    div met afbeelding als icoon

    -

    Visueel voorbeeld:

    -
    KatLorem ipsum
    - -

    HTML-voorbeeld:

    - KatLorem ipsum -`} - /> - -

    table

    -

    Visueel voorbeeld:

    -
    - - - - - - - - - - - - - - - - - - - - -
    Tabelvoorbeeld met actieknoppen:
    GebruikersnaamBekijk profielWijzig wachtwoordDeactiveerVerwijder
    Jane doe -
    - -
    -     		-
    - -
    -     		-
    - -
    -     		-
    - -
    -
    -
    - -

    HTML-voorbeeld:

    - - - - - - - - - - - - - - - - - - - - - -
    Tabelvoorbeeld met actieknoppen:
    GebruikersnaamBekijk profielWijzig wachtwoordDeactiveerVerwijder
    Jane doe -
    - -
    -     		-
    - -
    -     		-
    - -
    -     		-
    - -
    -
    - -`} - /> - -

    Language selector

    -

    Visueel voorbeeld

    -
    -

    Kies een taal:

    - - -
    - -

    HTML-Voorbeeld

    - -

    Kies een taal:

    - - - -`} - /> - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/image-cover-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/image-cover-test/+page.svelte deleted file mode 100644 index c42a279b..00000000 --- a/icore_open_docs/src/routes/(docs)/components/image-cover-test/+page.svelte +++ /dev/null @@ -1,142 +0,0 @@ - - - - - - Cover-afbeelding testpagina - - -
    -
    -
    -
    -

    Cover-afbeelding testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Op div

    -
    - Foto van een strand -
    - -

    HTML-voorbeeld:

    - -Foto van een strand -
    -`} - /> - -

    Op section

    -
    - Foto van een strand -
    - -

    HTML-voorbeeld:

    - -Foto van een strand - -`} - /> - -

    Op een tegel

    -

    - Dit voorbeeld maakt gebruik van - Tegelweergave. -

    -
    - Foto van een strand -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit - amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien. -

    -
    - -

    HTML-voorbeeld:

    - -Foto van een strand -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

    - -`} - /> - -

    Op een groep met tegels

    -

    - Dit voorbeeld maakt gebruik van - Tegelweergave. -

    -
    -
    - Foto van een strand -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit - amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien. -

    -
    - -
    - Foto van een strand -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit - amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien. -

    -
    - -
    - Foto van een strand -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit - amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -Foto van een strand -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

    -
    - -
    -Foto van een strand -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

    -
    - -
    -Foto van een strand -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

    -
    - -`} - /> - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/image-cover/+page.svelte b/icore_open_docs/src/routes/(docs)/components/image-cover/+page.svelte deleted file mode 100644 index 594c92af..00000000 --- a/icore_open_docs/src/routes/(docs)/components/image-cover/+page.svelte +++ /dev/null @@ -1,194 +0,0 @@ - - - - - - Cover-afbeelding - - -
    - - - -
    -
    -
    -

    Cover-afbeelding

    -

    - Afbeelding die de volledige breedte en hoogte van het uitgekozen object vult met de - gekozen afbeelding. -

    - -

    - Voeg de class image-cover toe aan het omliggende element waar de - img zich in bevind of direct op het img-element. -

    -
    - -
    -

    Voorbeelden:

    - -

    Op div

    -
    - Foto van een strand -
    - -

    HTML-voorbeeld:

    - - Foto van het strand in schoorl -
    -`} - /> - -

    Op section

    -
    - Foto van een strand -
    - -

    HTML-voorbeeld:

    - - Foto van het strand in schoorl - -`} - /> - -

    Op een tegel

    -

    - Dit voorbeeld maakt gebruik van - Tegelweergave. -

    -
    - Foto van een strand -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit - amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien. -

    -
    - -

    HTML-voorbeeld:

    - - Foto van een strand -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

    - -`} - /> - -

    Op een groep met tegels

    -

    - Dit voorbeeld maakt gebruik van - Tegelweergave. -

    -
    -
    - Foto van een strand -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit - amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien. -

    -
    - -
    - Foto van een strand -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit - amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien. -

    -
    - -
    - Foto van een strand -

    Lorem ipsum

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit - amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    - Foto van een strand -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

    -
    - -
    - Foto van een strand -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

    -
    - -
    - Foto van een strand -

    Lorem ipsum

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.

    -
    - -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • image/image-cover.scss
      • -
    - -

    Optioneel

    -
      -
    • image/image-cover-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    - -
    - - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/image-icon/+page.svelte b/icore_open_docs/src/routes/(docs)/components/image-icon/+page.svelte deleted file mode 100644 index 91608b36..00000000 --- a/icore_open_docs/src/routes/(docs)/components/image-icon/+page.svelte +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - Icoon-afbeelding - - -
    -
    -
    -
    -

    Icoon-afbeelding

    -

    - Het Icoon-component kan gebruikt wordt met unicode-codes - om een van de iconen uit de standaard icoon-set te gebruiken. -

    - -

    - Als een icoon nodig is dat niet onderdeel is van de standaard icoon-set, dan kan ervoor - gekozen worden om een applicatie-specifieke icoon-set toe te voegen. In sommige gevallen - is dat niet wenselijk, bijvoorbeeld omdat het icoon maar op één plek gebruikt wordt. In - dat geval is het ook mogelijk om een normale afbeelding als icoon te gebruiken. -

    - -

    - Voeg hiervoor de class icon toe aan het {``} element om gebruik - te maken van de visuele weergave van een icoon. -

    - -

    Voorbeeld

    - -

    Visueel voorbeeld:

    - Kat - -

    HTML-voorbeeld:

    - -`} - /> -
    - - -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/image-round-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/image-round-test/+page.svelte deleted file mode 100644 index 1922a0b4..00000000 --- a/icore_open_docs/src/routes/(docs)/components/image-round-test/+page.svelte +++ /dev/null @@ -1,159 +0,0 @@ - - - - - - Ronde afbeelding testpagina - - -
    -
    -
    -
    -

    Ronde afbeelding testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Enkel element

    -
    -
    - Foto van een strand -
    -
    - -

    HTML-voorbeeld:

    - -
    - Foto van een strand -
    -
    -`} - /> - -

    Op div

    -
    -
    -
    - Foto van een strand -
    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. - Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque - venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui - id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, - tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit - tincidunt maximus. Maecenas quis gravida metus. -

    -
    - -

    HTML-voorbeeld:

    - -
    -
    - Foto van een strand -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.

    - -`} - /> - -

    Op elementen binnen div

    -
    -
    -
    - Foto van een strand -
    -
    - -
    -
    - Foto van een strand -
    -
    - -
    -
    - Foto van een strand -
    -
    -
    - -

    HTML-voorbeeld:

    - -
    -
    - Foto van een strand -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.

    - -`} - /> - -

    Op elementen binnen ul

    -
      -
    • -
      - Foto van een strand -
      -
      • - -
    • -
      - Foto van een strand -
      -
      • - -
    • -
      - Foto van een strand -
      -
      • -
    - -

    HTML-voorbeeld:

    - -
  • -
    - Foto van een strand -
    -
    • - -
  • -
    - Foto van een strand -
    -
    • - -
  • -
    - Foto van een strand -
    -
    • - -`} - /> - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/image-round/+page.svelte b/icore_open_docs/src/routes/(docs)/components/image-round/+page.svelte deleted file mode 100644 index 455c814a..00000000 --- a/icore_open_docs/src/routes/(docs)/components/image-round/+page.svelte +++ /dev/null @@ -1,221 +0,0 @@ - - - - - - Ronde afbeelding - - -
    - - - -
    -
    -
    -

    Ronde afbeelding

    - -

    Benodigde stappen

    -
      -
    1. - Voeg de class image-round toe aan het omliggende element waar de - img zich in bevindt of direct op het img-element. -
      2. -
    2. - Voeg de container voor de afbeelding toe. Voorbeeld: - <div class="image-container">. Het toevoegen van de class-naam is in - dit geval optioneel en toegevoegd voor leesbaarheid van de html. Een omliggende - div is ook voldoende. De container is nodig om de afbeelding variabel naar ratio - te kunnen schalen. -
      3. -
    -
    - -
    -

    Voorbeelden:

    - -

    Enkel element

    -

    - De afbeelding vult tot de maximale beschikbare breedte en schaalt de hoogte in dezelfde - ratio. Dit betekent dat de afbeelding altijd rond blijft. -

    -
    -
    - Foto van een strand -
    -
    - -

    HTML-voorbeeld:

    - -
    - Foto van een strand -
    -
    -`} - /> - -

    Op div

    -
    -
    -
    - Foto van een strand -
    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. - Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque - venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui - id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, - tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit - tincidunt maximus. Maecenas quis gravida metus. -

    -
    - -

    HTML-voorbeeld:

    - -
    -
    - Foto van een strand -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.

    - -`} - /> - -

    Op elementen binnen div

    -
    -
    - Foto van een strand -
    - -
    - Foto van een strand -
    - -
    - Foto van een strand -
    -
    - -

    HTML-voorbeeld:

    - -
    - Foto van een strand -
    - -
    - Foto van een strand -
    - -
    - Foto van een strand -
    - -`} - /> - -

    Op elementen binnen ul

    -
      -
    • -
      - Foto van een strand -
      -
      • - -
    • -
      - Foto van een strand -
      -
      • - -
    • -
      - Foto van een strand -
      -
      • -
    - -

    HTML-voorbeeld:

    - -
  • -
    - Foto van een strand -
    -
    • - -
  • -
    - Foto van een strand -
    -
    • - -
  • -
    - Foto van een strand -
    -
    • - -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • image/image-round.scss
      • -
    - -

    Optioneel

    -
      -
    • image/image-round-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    - -
    - - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/image-square-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/image-square-test/+page.svelte deleted file mode 100644 index 9f81da3d..00000000 --- a/icore_open_docs/src/routes/(docs)/components/image-square-test/+page.svelte +++ /dev/null @@ -1,159 +0,0 @@ - - - - - - Vierkante afbeelding testpagina - - -
    -
    -
    -
    -

    Vierkante afbeelding testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Enkel element

    -
    -
    - Foto van een strand -
    -
    - -

    HTML-voorbeeld:

    - -
    - Foto van een strand -
    -
    -`} - /> - -

    Op div

    -
    -
    -
    - Foto van een strand -
    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. - Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque - venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui - id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, - tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit - tincidunt maximus. Maecenas quis gravida metus. -

    -
    - -

    HTML-voorbeeld:

    - -
    -
    - Foto van een strand -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.

    - -`} - /> - -

    Op elementen binnen div

    -
    -
    -
    - Foto van een strand -
    -
    - -
    -
    - Foto van een strand -
    -
    - -
    -
    - Foto van een strand -
    -
    -
    - -

    HTML-voorbeeld:

    - -
    -
    - Foto van een strand -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.

    - -`} - /> - -

    Op elementen binnen ul

    -
      -
    • -
      - Foto van een strand -
      -
      • - -
    • -
      - Foto van een strand -
      -
      • - -
    • -
      - Foto van een strand -
      -
      • -
    - -

    HTML-voorbeeld:

    - -
  • -
    - Foto van een strand -
    -
    • - -
  • -
    - Foto van een strand -
    -
    • - -
  • -
    - Foto van een strand -
    -
    • - -`} - /> - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/image-square/+page.svelte b/icore_open_docs/src/routes/(docs)/components/image-square/+page.svelte deleted file mode 100644 index c832563a..00000000 --- a/icore_open_docs/src/routes/(docs)/components/image-square/+page.svelte +++ /dev/null @@ -1,221 +0,0 @@ - - - - - - Vierkante afbeelding - - -
    - - - -
    -
    -
    -

    Vierkante afbeelding

    - -

    Benodigde stappen

    -
      -
    1. - Voeg de class image-square toe aan het omliggende element waar de - img zich in bevindt of direct op het img-element. -
      2. -
    2. - Voeg de container voor de afbeelding toe. Voorbeeld: - <div class="image-container">. Het toevoegen van de class-naam is in - dit geval optioneel en toegevoegd voor leesbaarheid van de html. Een omliggende - div is ook voldoende. De container is nodig om de afbeelding variabel naar ratio - te kunnen schalen. -
      3. -
    -
    - -
    -

    Voorbeelden:

    - -

    Enkel element

    -

    - De afbeelding vult tot de maximale beschikbare breedte en schaalt de hoogte in dezelfde - ratio. Dit betekent dat de afbeelding altijd rond blijft. -

    -
    -
    - Foto van een strand -
    -
    - -

    HTML-voorbeeld:

    - -
    - Foto van een strand -
    -
    -`} - /> - -

    Op div

    -
    -
    -
    - Foto van een strand -
    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. - Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque - venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui - id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, - tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit - tincidunt maximus. Maecenas quis gravida metus. -

    -
    - -

    HTML-voorbeeld:

    - -
    -
    - Foto van een strand -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget mattis lorem. Vivamus dapibus viverra quam, sit amet posuere ligula tristique eget. Pellentesque venenatis neque et placerat placerat. Proin nec porttitor nisl. Pellentesque vitae dui id lectus facilisis vehicula. Curabitur id sapien ultrices, consectetur ipsum in, tincidunt erat. Praesent a rutrum est, rutrum lacinia justo. Donec ut odio nec elit tincidunt maximus. Maecenas quis gravida metus.

    - -`} - /> - -

    Op elementen binnen div

    -
    -
    - Foto van een strand -
    - -
    - Foto van een strand -
    - -
    - Foto van een strand -
    -
    - -

    HTML-voorbeeld:

    - -
    - Foto van een strand -
    - -
    - Foto van een strand -
    - -
    - Foto van een strand -
    - -`} - /> - -

    Op elementen binnen ul

    -
      -
    • -
      - Foto van een strand -
      -
      • - -
    • -
      - Foto van een strand -
      -
      • - -
    • -
      - Foto van een strand -
      -
      • -
    - -

    HTML-voorbeeld:

    - -
  • -
    - Foto van een strand -
    -
    • - -
  • -
    - Foto van een strand -
    -
    • - -
  • -
    - Foto van een strand -
    -
    • - -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • image/image-square.scss
      • -
    - -

    Optioneel

    -
      -
    • image/image-square-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    - -
    - - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/language-selector-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/language-selector-test/+page.svelte deleted file mode 100644 index 0dccf0ef..00000000 --- a/icore_open_docs/src/routes/(docs)/components/language-selector-test/+page.svelte +++ /dev/null @@ -1,105 +0,0 @@ - - - - - - Taalselectie testpagina - - -
    -
    -
    -
    -

    Taalselectie testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Basis

    -

    Visueel voorbeeld:

    -
    -

    Kies een taal:

    - - -
    - -

    HTML-voorbeeld:

    - -

    Kies een taal:

    - - -
    -`} - /> - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/language-selector/+page.svelte b/icore_open_docs/src/routes/(docs)/components/language-selector/+page.svelte deleted file mode 100644 index 6b55f39f..00000000 --- a/icore_open_docs/src/routes/(docs)/components/language-selector/+page.svelte +++ /dev/null @@ -1,491 +0,0 @@ - - - - - - Taalselectie - - -
    - - - -
    -
    -
    -

    Taalselectie

    -

    Een taalselectie element biedt een verticale keuzelijst die openklapt.

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: Bijbehorende bestanden. -
      2. -
    2. - Voeg de benodigde HTML toe. Voor meer informatie zie: Voorbeelden. -
      3. -
    -
    - -
    -

    Voorbeelden:

    - -

    Paragraaf

    -

    Visueel voorbeeld:

    -
    -

    Kies een taal:

    - -
    - -

    HTML-voorbeeld:

    - -

    Kies een taal:

    - -
    -`} - /> - -

    Structuurvoorbeeld:

    - - - -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Importeer component via npm

    - -

    CSS-voorbeeld:

    - -
    - -
    -

    Instelbare variabelen

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Beschikbare instelbare variabelen:
    VariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    --language-selector-list-label-font-sizefont-sizevar(--de-emphasized-font-size)-language
    --language-selector-list-label-text-colortext-colorvar(--de-emphasized-text-color, inherit)-
    --language-selector-list-font-sizefont-sizevar(--de-emphasized-font-size)-
    --language-selector-list-font-weightfont-weightvar(--application-base-font-weight)-
    --language-selector-list-widthwidth100%-
    --language-selector-list-max-widthmax-width100%-
    --language-selector-list-border-widthborder-width1px-
    --language-selector-list-border-styleborder-stylesolid-
    --language-selector-list-border-colorborder-colorvar(--grey-2)-
    --language-selector-list-border-radiusborder-radius0px-
    --language-selector-list-item-background-colorbackground-colorvar(--application-base-background-color)-
    --language-selector-list-item-text-colortext-colorvar(--application-base-text-color)-
    --language-selector-list-item-link-border-widthborder-width1px-
    --language-selector-list-item-link-border-styleborder-stylesolid-
    --language-selector-list-item-link-border-colorborder-colorvar(--grey-2)-
    --language-selector-list-item-hover-background-colorbackground-colorvar(--branding-color-1-background-color)-
    --language-selector-list-item-hover-text-colortext-colorvar(--branding-color-1-text-color)-
    --language-selector-list-item-hover-font-sizefont-sizevar(--language-selector-list-font-size)-
    --language-selector-list-item-hover-font-weightfont-weightvar(--language-selector-list-font-weight)-
    --language-selector-list-item-active-background-colorbackground-colorvar(--branding-color-2-background-color)-
    --language-selector-list-item-active-text-colortext-colorvar(--branding-color-2-text-color)-
    --language-selector-list-item-active-font-sizefont-sizevar(--language-selector-list-font-size)-
    --language-selector-list-item-active-font-weightfont-weightvar(--language-selector-list-font-weight)-
    --language-selector-list-button-background-colorbackground-colortransparent-
    --language-selector-list-button-text-colortext-colorvar(--de-emphasized-text-color)-
    --language-selector-list-button-font-sizefont-sizevar(--de-emphasized-font-size)-
    --language-selector-list-button-border-widthborder-width1px-
    --language-selector-list-button-border-styleborder-stylesolid-
    --language-selector-list-button-border-colorborder-colorvar(--grey-2)-
    --language-selector-list-button-padding-toppadding-top0.125rem-
    --language-selector-list-button-padding-rightpadding0.5rem-
    --language-selector-list-button-padding-bottompadding-bottom0.125rem-
    --language-selector-list-button-padding-leftpadding0.5rem-
    --language-selector-list-button-line-heightline-height1.5rem-
    -
    - -

    CSS

    -

    - Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw - project. Kies en gebruik de benodigde variabelen. -

    - -
    - - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-authentication-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-authentication-test/+page.svelte deleted file mode 100644 index cecc915c..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-authentication-test/+page.svelte +++ /dev/null @@ -1,169 +0,0 @@ - - - - - - Layout authenticatie testpagina - - -
    -
    -
    -
    -

    Layout authenticatie testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    div

    -

    div met class="layout-authentication".

    -

    Visueel voorbeeld:

    -
    -
    -
    - - -
    -
    - - -
    - -
    -
    - -

    HTML-voorbeeld:

    - -
    -
    - - -
    -
    - - -
    - -
    -
    -`} - /> - -

    section

    -

    section met class="layout-authentication".

    -

    Visueel voorbeeld:

    -
    -
    -
    - - -
    -
    - - -
    - -
    -
    - -

    HTML-voorbeeld:

    - -
    -
    - - -
    -
    - - -
    - -
    - -`} - /> - -

    article

    -

    article met class="layout-authentication".

    -

    Visueel voorbeeld:

    -
    -
    -
    - - -
    -
    - - -
    - -
    -
    - -

    HTML-voorbeeld:

    - -
    -
    - - -
    -
    - - -
    - -
    -
    -`} - /> - -

    form

    -

    form met class="layout-authentication".

    -

    Visueel voorbeeld:

    -
    -
    - - -
    -
    - - -
    - -
    - -

    HTML-voorbeeld:

    - -
    - - -
    -
    - - -
    - - -`} - /> - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-authentication/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-authentication/+page.svelte deleted file mode 100644 index 0cac16e0..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-authentication/+page.svelte +++ /dev/null @@ -1,125 +0,0 @@ - - - - - - Layout authentication - - -
    -
    -
    -
    -

    Layout authenticatie

    -

    - Weergave voor authenticatie-elementen. Login formulieren hebben vaak belang bij een - smallere weergave dan overige formulieren. -

    -
    - -
    -

    Benodigde bestanden

    -

    - Om gebruik te maken van de styling dienen de onderstaande bestanden ingeladen te zijn via - het - manon.scss bestand. -

    -
      -
    • layout/layout-base/layout-base.scss
      • -
    • layout/layout-base-variables.scss
      • -
    • - layout/layout-authentication/layout-authentication.scss -
      • -
    • layout/layout-authentication-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    - -
    - -
    -

    Voorbeeld

    -

    Visueel voorbeeld:

    -
    -
    -
    - - -
    -
    - - -
    - -
    -
    - -

    HTML-voorbeeld:

    - -

    div:

    - - -
    -`} - /> - -

    section:

    - -
    - -
    - -`} - /> - -

    article:

    - -
    - -
    -
    -`} - /> - -

    form:

    - - - -`} - /> - - - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-centered-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-centered-test/+page.svelte deleted file mode 100644 index c8105f49..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-centered-test/+page.svelte +++ /dev/null @@ -1,223 +0,0 @@ - - - - - - Layout gecentreerd testpagina - - -
    -
    -
    -
    -

    Layout gecentreerd testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    Losse content

    -

    - Elementen centreren direct binnen een element met de class - centered. -

    -

    Visueel voorbeeld:

    -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    -`} - /> - -

    section

    -

    - Elementen centreren direct binnen een section met de class - centered. -

    -

    Visueel voorbeeld:

    -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum

    -

    Dolor sit amet.

    - -`} - /> - -

    section met gegroepeerde content

    -

    - div centreren binnen een section met de class - centered. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    - -`} - /> - -

    article

    -

    - Elementen centreren direct binnen een article met de class - centered. -

    -

    Visueel voorbeeld:

    -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    -`} - /> - -

    article met gegroepeerde content

    -

    - div centreren binnen een article met de class - centered. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    - -`} - /> - -

    div

    -

    - Elementen centreren direct binnen een div met de class - centered. -

    -

    Visueel voorbeeld:

    -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum

    -

    Dolor sit amet.

    - -`} - /> - -

    div met gegroepeerde content

    -

    - div centreren binnen een div met de class - centered. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    - -`} - /> - -

    List-item - li

    -

    Visueel voorbeeld:

    -
      -
    • -

      Lorem ipsum

      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      -
      • - -
    • -

      Lorem ipsum

      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      -
      • - -
    • -

      Lorem ipsum

      -

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      -
      • -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    - -`} - /> - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-centered/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-centered/+page.svelte deleted file mode 100644 index 9450537b..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-centered/+page.svelte +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - Layout gecentreerd - - -
    - - - - -
    -
    -
    -

    Layout gecentreerd

    -

    Centreerd de inhoud van het element op zowel de horizontale als de verticale as.

    -

    - Toelichting: de inhoud van het blok wordt gecenteerd. Als de inhoud 100% breed - is kan het lijken alsof deze helper niet werkt. Pas in dat geval de breedte van de onderliggende - elementen aan of kies een andere geschikte layout. Tekst binnen de elementen wordt niet gecentreerd. -

    -
    - -
    -

    Voorbeeld

    -

    Visueel voorbeeld:

    -
    -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum

    -

    Dolor sit amet.

    -
    -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    -

    Benodigd

    -
      -
    • layout/layout-base.scss
      • -
    • layout/layout-centered.scss
      • -
    - -

    Optioneel

    -
      -
    • layout/layout-base-variables.scss
      • -
    -
    - -
    -

    Instelbare variabelen

    -

    Dit element heeft zelf geen instelbare variabelen.

    -
    - - - -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-column-2-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-column-2-test/+page.svelte deleted file mode 100644 index bffdf960..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-column-2-test/+page.svelte +++ /dev/null @@ -1,414 +0,0 @@ - - - - - - Layout twee kolommen testpagina - - -
    -
    -
    -
    -

    Layout twee kolommen testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    div

    -

    div met daarbinnen gegroepeerde content binnen div's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    div

    -

    - div met daarbinnen gegroepeerde content binnen section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    div

    -

    - div met daarbinnen gegroepeerde content binnen article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen div's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen - section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen - article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen div's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen - section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen - article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-column-2/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-column-2/+page.svelte deleted file mode 100644 index adaebcbf..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-column-2/+page.svelte +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - Layout twee kolommen - - -
    -
    -
    -
    -

    Layout twee kolommen

    -

    Verdeling 50% - 50% vanaf het ingestelde breekpunt.

    -
    - -
    -

    Benodigde bestanden

    -

    - Om gebruik te maken van de styling dienen de onderstaande bestanden ingeladen te zijn via - het - manon.scss bestand. -

    -
      -
    • layout/layout-base.scss
      • -
    • layout/layout-base-variables.scss
      • -
    • layout/layout-column-2.scss
      • -
    • layout/layout-column-2-variables.scss
      • -
    -
    - -
    -

    Voorbeeld

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -

    div:

    - -
    - -
    - -
    - -
    -
    -`} - /> - -

    section:

    - -
    - -
    - -
    - -
    - -`} - /> - -

    article:

    - -
    - -
    - -
    - -
    -
    -`} - /> - - - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-column-3-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-column-3-test/+page.svelte deleted file mode 100644 index ecc02f45..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-column-3-test/+page.svelte +++ /dev/null @@ -1,540 +0,0 @@ - - - - - - Layout drie kolommen testpagina - - -
    -
    -
    -
    -

    Layout drie kolommen testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    div

    -

    div met daarbinnen gegroepeerde content binnen div's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    div

    -

    - div met daarbinnen gegroepeerde content binnen section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    div

    -

    - div met daarbinnen gegroepeerde content binnen article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen div's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen - section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen - article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen div's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen - section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen - article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-column-3/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-column-3/+page.svelte deleted file mode 100644 index d2dea540..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-column-3/+page.svelte +++ /dev/null @@ -1,138 +0,0 @@ - - - - - - Layout drie kolommen - - -
    -
    -
    -
    -

    Layout drie kolommen

    -

    Verdeling in drie gelijke kolommen vanaf de ingestelde breekpunten.

    -
    - -
    -

    Benodigde bestanden

    -

    - Om gebruik te maken van de styling dienen de onderstaande bestanden ingeladen te zijn via - het - manon.scss bestand. -

    -
      -
    • layout/layout-base.scss
      • -
    • layout/layout-base-variables.scss
      • -
    • layout/layout-column-3.scss
      • -
    • layout/layout-column-3-variables.scss
      • -
    -
    - -
    -

    Voorbeeld

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -

    div:

    - -
    - -
    - -
    - -
    - -
    - -
    -
    -`} - /> - -

    section:

    - -
    - -
    - -
    - -
    - -
    - -
    - -`} - /> - -

    article:

    - -
    - -
    - -
    - -
    - -
    - -
    -
    -`} - /> - - - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-column-4-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-column-4-test/+page.svelte deleted file mode 100644 index f3b93f66..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-column-4-test/+page.svelte +++ /dev/null @@ -1,666 +0,0 @@ - - - - - - Layout vier kolommen testpagina - - -
    -
    -
    -
    -

    Layout vier kolommen testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    div

    -

    div met daarbinnen gegroepeerde content binnen div's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    div

    -

    - div met daarbinnen gegroepeerde content binnen section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    div

    -

    - div met daarbinnen gegroepeerde content binnen article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen div's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen - section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen - article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen div's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen - section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen - article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-column-4/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-column-4/+page.svelte deleted file mode 100644 index b135b316..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-column-4/+page.svelte +++ /dev/null @@ -1,159 +0,0 @@ - - - - - - Layout vier kolommen - - -
    -
    -
    -
    -

    Layout vier kolommen

    -

    Verdeling in drie gelijke kolommen vanaf de ingestelde breekpunten.

    -
    - -
    -

    Benodigde bestanden

    -

    - Om gebruik te maken van de styling dienen de onderstaande bestanden ingeladen te zijn via - het - manon.scss bestand. -

    -
      -
    • layout/layout-base.scss
      • -
    • layout/layout-base-variables.scss
      • -
    • layout/layout-column-4.scss
      • -
    • layout/layout-column-4-variables.scss
      • -
    -
    - -
    -

    Voorbeeld

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -

    div:

    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    -`} - /> - -

    section:

    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -`} - /> - -

    article:

    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    -`} - /> - - - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-fifty-fifty-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-fifty-fifty-test/+page.svelte deleted file mode 100644 index cdb06453..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-fifty-fifty-test/+page.svelte +++ /dev/null @@ -1,463 +0,0 @@ - - - - - - Layout fifty-fifty testpagina - - -
    -
    -
    -
    -

    Layout fifty-fifty testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    div

    -

    div met daarbinnen gegroepeerde content binnen div's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    div

    -

    - div met daarbinnen gegroepeerde content binnen section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    div met afbeeldingen

    -

    - div met daarbinnen gegroepeerde content binnen section's. -

    -

    Visueel voorbeeld:

    -
    - Foto van een strand - - Foto van een strand - - Foto van een strand - - Foto van een strand -
    - -

    HTML-voorbeeld:

    - - Foto van een strand - - Foto van een strand - - Foto van een strand - - Foto van een strand - -`} - /> - -

    div

    -

    - div met daarbinnen gegroepeerde content binnen article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen div's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen - section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    - section met daarbinnen gegroepeerde content binnen - article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen div's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen - section's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    - article met daarbinnen gegroepeerde content binnen - article's. -

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte deleted file mode 100644 index 6b968c6b..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte +++ /dev/null @@ -1,215 +0,0 @@ - - - - - - Layout fifty-fifty - - -
    - - - -
    -
    -
    -

    Layout fifty-fifty

    -

    Verdeling 50% - 50% vanaf het ingestelde breekpunt.

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. -
        -
      • - Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden. -
        • -
      • - Voeg de class fifty-fifty toe op het gewenste element. Voor meer - informatie over het implementeren zie de voorbeelden. -
        • -
      -
      2. -
    -
    - -
    -

    Voorbeelden

    - -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -

    div:

    - -
    - -
    - -
    - -
    -
    -`} - /> - -

    section:

    - -
    - -
    - -
    - -
    - -`} - /> - -

    article:

    - -
    - -
    - -
    - -
    -
    -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Importeer component via npm

    - -

    - Het is mogelijk om gebruik te maken van de layout-set. Door hier gebruik van te maken - blijft de breedte tussen de blokken gelijk aan de daar gedefinieerde breedte. -

    - -

    CSS-voorbeeld:

    - - -
    -

    Instelbare variabelen

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Beschikbare instelbare variabelen:
    VariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    --layout-fifty-fifty-gapgapvar(--content-gap, 2rem)42rem-
    --layout-fifty-fifty-breakpoint-gapgapvar(--layout-fifty-fifty-gap)42rem-
    -
    - -

    CSS

    -

    - Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw - project. Kies en gebruik de benodigde variabelen. -

    - -

    - Om stijlkeuzes door te voeren op alle titels gebruik de onderstaande variabelen. Hierbij - kan ook verwezen worden naar stijlkeuzes in heading-sets als deze toegevoegd zijn aan - het project. Voor een voorbeeld zie: heading-base-set. -

    - -
    - - -
    - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-form/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-form/+page.svelte deleted file mode 100644 index 46a6f2da..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-form/+page.svelte +++ /dev/null @@ -1,288 +0,0 @@ - - - - - - Layout form - - -
    -
    -
    -
    -

    Layout form

    -

    Weergave opties voor pagina's met als formulieren als hoofdfunctie.

    -

    - Het is ook mogelijk om de weergave van alle formulieren aan te passen. Gebruik daarvoor: Basis formulieren. -

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: Bijbehorende bestanden. -
      2. -
    2. - Vul de variabelen met de gewenste stijlkeuzes. Voor meer informatie zie het overzicht - met instelbare variabelen. -
      3. -
    3. - Voeg de class de-emphasized toe aan de gewenste elementen. Voor meer - informatie zie: Voorbeelden. -
      4. -
    -
    - -
    -

    Voorbeelden:

    - -

    Div

    -
    -
    -
    - - -
    -
    - - -
    - -
    -
    - -

    HTML-voorbeeld:

    - -

    div:

    - - -
    -`} - /> - -

    section:

    - -
    - -
    - -`} - /> - -

    article:

    - -
    - -
    -
    -`} - /> - -

    form:

    - - - -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Aandachtspunten:

    -
      -
    • - De standaard ingestelde waarden binnen Manon maken gebruik van de Body text set. Om gebruik te maken van deze set. Laad de set eenmalig in voordat overige componenten - er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie. -
      • -
    - -

    Importeer component via npm

    - -

    CSS-voorbeeld:

    - -
    - -
    -

    Instelbare variabelen

    -

    - Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in - combinatie met de class horizotal-view. -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Beschikbare instelbare variabelen:
    VariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    --layout-form-paddingpaddingvar(--content-padding-top, 0)-layout-form
    --layout-form-padding-rightpadding-rightvar(--content-padding-right, 0)
    --layout-form-padding-bottompadding-bottomvar(--content-padding-bottom, 0)
    --layout-form-padding-leftpadding-leftvar(--content-padding-left, 0)
    --layout-form-max-widthmax-width50rem
    --layout-form-breakpoint-1-paddingpaddingvar(--layout-form-padding-top)24rem
    --layout-form-breakpoint-1-padding-rightpadding-rightvar(--layout-form-padding-right)
    --layout-form-breakpoint-1-padding-bottompadding-bottomvar(--layout-form-padding-bottom)
    --layout-form-breakpoint-1-padding-leftpadding-leftvar(--layout-form-padding-left)
    --layout-form-breakpoint-1-max-widthmax-widthvar(--layout-form-max-width)
    --layout-form-breakpoint-2-padding-toppadding-topvar(--layout-form-breakpoint-1-padding-top)42rem
    --layout-form-breakpoint-2-padding-rightpadding-rightvar(--layout-form-breakpoint-1-padding-right)
    --layout-form-breakpoint-2-padding-bottompadding-bottomvar(--layout-form-breakpoint-1-padding-bottom)
    --layout-form-breakpoint-2-padding-leftpadding-leftvar(--layout-form-breakpoint-1-padding-left)
    --layout-form-breakpoint-2-max-widthmax-widthvar(--layout-form-breakpoint-1-max-width)
    -
    - -

    CSS

    -

    - Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw - project. Kies en gebruik de benodigde variabelen. -

    - -
    - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-one-third-two-thirds-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-one-third-two-thirds-test/+page.svelte deleted file mode 100644 index d2a81a3e..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-one-third-two-thirds-test/+page.svelte +++ /dev/null @@ -1,554 +0,0 @@ - - - - - - Layout eenderde tweederde testpagina - - -
    -
    -
    -
    -

    Layout eenderde tweederde testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    div

    -

    Gegroepeerde content binnen een div met div's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    span

    -

    span en p binnen tweederde eenderde uitlijning.

    -

    Visueel voorbeeld:

    -
    - Lorem ipsum dolor set -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, - tempus in massa. -

    -
    - -

    HTML-voorbeeld:

    - - Lorem ipsum dolor set -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    - -`} - /> - -

    p

    -

    Paragrafen binnen tweederde eenderde uitlijning.

    -

    Visueel voorbeeld:

    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, - tempus in massa. -

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    - -`} - /> - -

    ul

    -

    Lijst binnen tweederde eenderde uitlijning.

    -

    Visueel voorbeeld:

    -
    -
      -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, - tempus in massa. -

    -
    - -

    HTML-voorbeeld:

    - -
      -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    - -`} - /> - -

    p en ul

    -

    Lijst binnen tweederde eenderde uitlijning.

    -

    Visueel voorbeeld:

    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, - tempus in massa. -

    -
      -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    -
    - -

    HTML-voorbeeld:

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
      -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    - -`} - /> - -

    div

    -

    Gegroepeerde content binnen een div met section's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    div

    -

    Gegroepeerde content binnen een div met article's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    Elementen uitlijnen binnen een section met div's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    Elementen uitlijnen binnen een section met section's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    Elementen uitlijnen binnen een section met article's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    Elementen uitlijnen binnen een article met div's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    article

    -

    Elementen uitlijnen binnen een article met section's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    Elementen uitlijnen binnen een article met article's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-one-third-two-thirds/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-one-third-two-thirds/+page.svelte deleted file mode 100644 index 69aa90e7..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-one-third-two-thirds/+page.svelte +++ /dev/null @@ -1,203 +0,0 @@ - - - - - - Layout - - -
    - - - -
    -
    -
    -

    Layout eenderde tweederde

    -

    Verdeling 33.33% - 66.66% vanaf het ingestelde breekpunt.

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: Bijbehorende bestanden. -
      2. -
    2. - Voeg de class one-third-two-thirds toe aan de gewenste componenten. Voor - meer informatie zie: Voorbeelden. -
      3. -
    -
    - -
    -

    Voorbeelden

    -

    Visueel voorbeeld:

    - -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -

    div:

    - -
    - -
    - -
    - -
    -
    -`} - /> - -

    section:

    - -
    - -
    - -
    - -
    - -`} - /> - -

    article:

    - -
    - -
    - -
    - -
    -
    -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Aandachtspunten:

    -
      -
    • - De standaard ingestelde waarden binnen Manon maken gebruik van de Layout set. Om gebruik te maken van deze set. Laad de set eenmalig in voordat overige componenten - er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie. -
      • -
    - -

    Importeer component via npm

    - -

    CSS-voorbeeld:

    - -
    - -
    -

    Instelbare variabelen

    -

    - Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in - combinatie met de class horizotal-view. -

    -
    - - - - - - - - - - - - - - - - - - - - -
    Beschikbare instelbare variabelen:
    VariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    --layout-one-third-two-thirds-gapgapvar(--content-gap)42remone-third-two-thirds
    -
    - -

    CSS

    -

    - Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw - project. Kies en gebruik de benodigde variabelen. -

    - -
    - - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-set/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-set/+page.svelte deleted file mode 100644 index b415e210..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-set/+page.svelte +++ /dev/null @@ -1,253 +0,0 @@ - - - - - - Layout set - - -
    - - - -
    -
    -
    -

    Layout set

    -

    Basisset voor het vastleggen van layout-keuzes vanuit een centraal punt.

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. -
        -
      • - Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden. -
        • -
      • - Vul de variabelen met de gewenste weergaven. Voor meer informatie zie het overzicht - met instelbare variabelen. -
        • -
      • - Pas de layoutkeuzes toe waar nodig. De layoutkeuzes kunnen door middel van - variabelen binnen de CSS worden toegevoegd. Voor meer informatie hierover zie CSS-variabelen gebruiken. -
        • -
      -
      2. -
    -
    - -
    -

    Voorbeelden

    - -

    Variabele gebruiken binnen een andere variabele

    -

    - In dit voorbeeld stellen we de padding aan de bovenkant van de main in op - basis van een variabelen die gezet is binnen deze set. In dit geval zetten we de witruimte - aan de bovenkant van de pagina bovenaan de main. -

    -

    CSS-voorbeeld:

    - -

    - Voor meer informatie hierover zie CSS-variabelen gebruiken. -

    -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Importeer component via npm

    - -

    CSS-voorbeeld:

    - -
    - -
    -

    Instelbare variabelen

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Instelbare variabelen tabel:
    VariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    --page-whitespace-top-4rem--
    --page-whitespace-right-2%--
    --page-whitespace-bottom-4rem--
    --page-whitespace-left-2%--
    --content-flex-directionflex-directioncolumn--
    --content-justify-contentjustify-contentflex-start--
    --content-align-itemsalign-itemsflex-start--
    --content-gapgap2rem--
    --content-padding-toppadding-top2rem--
    --content-padding-rightpadding-right0--
    --content-padding-bottompadding-bottom2rem--
    --content-padding-leftpadding-left0--
    --content-max-widthmax-width100%--
    -
    - -

    CSS

    -

    - Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw - project. Kies en gebruik de benodigde variabelen. -

    - -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-two-thirds-one-third-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-two-thirds-one-third-test/+page.svelte deleted file mode 100644 index 8df90c6a..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-two-thirds-one-third-test/+page.svelte +++ /dev/null @@ -1,585 +0,0 @@ - - - - - - Layout tweederde eenderde testpagina - - -
    -
    -
    -
    -

    Layout tweederde eenderde testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    div

    -

    Gegroepeerde content binnen een div met div's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    div

    -

    Gegroepeerde content binnen een div met section's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    span

    -

    span en p binnen tweederde eenderde uitlijning.

    -

    Visueel voorbeeld:

    -
    - Lorem ipsum dolor set -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, - tempus in massa. -

    -
    - -

    HTML-voorbeeld:

    - - Lorem ipsum dolor set -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    - -`} - /> - -

    p

    -

    Paragrafen binnen tweederde eenderde uitlijning.

    -

    Visueel voorbeeld:

    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, - tempus in massa. -

    -
    - -

    HTML-voorbeeld:

    - -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    - -`} - /> - -

    ul

    -

    Lijst binnen tweederde eenderde uitlijning.

    -

    Visueel voorbeeld:

    -
    -
      -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, - tempus in massa. -

    -
    - -

    HTML-voorbeeld:

    - -
      -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    - -`} - /> - -

    p en ul

    -

    Lijst binnen tweederde eenderde uitlijning.

    -

    Visueel voorbeeld:

    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, - tempus in massa. -

    -
      -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    -
    - -

    HTML-voorbeeld:

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
      -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    • Lorem ipsum
      • -
    - -`} - /> - -

    div met afbeelding

    -

    Gegroepeerde content binnen een div met section's.

    -

    Visueel voorbeeld:

    -
    - Foto van een strand - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - - Foto van een strand - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    div

    -

    Gegroepeerde content binnen een div met article's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    Elementen uitlijnen binnen een section met div's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    Elementen uitlijnen binnen een section met section's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    section

    -

    Elementen uitlijnen binnen een section met article's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    Elementen uitlijnen binnen een article met div's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    -
    -`} - /> - -

    article

    -

    Elementen uitlijnen binnen een article met section's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - -

    article

    -

    Elementen uitlijnen binnen een article met article's.

    -

    Visueel voorbeeld:

    -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -
    -

    Lorem ipsum dolor set

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie sed, tempus in massa.

    -
    - -`} - /> - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/layout-two-thirds-one-third/+page.svelte b/icore_open_docs/src/routes/(docs)/components/layout-two-thirds-one-third/+page.svelte deleted file mode 100644 index cc9fd815..00000000 --- a/icore_open_docs/src/routes/(docs)/components/layout-two-thirds-one-third/+page.svelte +++ /dev/null @@ -1,203 +0,0 @@ - - - - - - Layout - - -
    - - - -
    -
    -
    -

    Layout tweederde eenderde

    -

    Verdeling 66.66% - 33.33% vanaf het ingestelde breekpunt.

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: Bijbehorende bestanden. -
      2. -
    2. - Voeg de class two-thirds-one-third toe aan de gewenste componenten. Voor - meer informatie zie: Voorbeelden. -
      3. -
    -
    - -
    -

    Voorbeelden

    -

    Visueel voorbeeld:

    - -
    -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    - -
    -

    Lorem ipsum dolor set

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue ac enim - luctus, vitae iaculis magna vestibulum. Aenean est mauris, condimentum et molestie - sed, tempus in massa. -

    -
    -
    - -

    HTML-voorbeeld:

    - -

    div:

    - -
    - -
    - -
    - -
    -
    -`} - /> - -

    section:

    - -
    - -
    - -
    - -
    - -`} - /> - -

    article:

    - -
    - -
    - -
    - -
    -
    -`} - /> - - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Aandachtspunten:

    -
      -
    • - De standaard ingestelde waarden binnen Manon maken gebruik van de Layout set. Om gebruik te maken van deze set. Laad de set eenmalig in voordat overige componenten - er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie. -
      • -
    - -

    Importeer component via npm

    - -

    CSS-voorbeeld:

    - -
    - -
    -

    Instelbare variabelen

    -

    - Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in - combinatie met de class horizotal-view. -

    -
    - - - - - - - - - - - - - - - - - - - - -
    Beschikbare instelbare variabelen:
    VariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    --layout-two-thirds-one-third-gapgapvar(--content-gap)42remtwo-thirds-one-third
    -
    - -

    CSS

    -

    - Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw - project. Kies en gebruik de benodigde variabelen. -

    - -
    - - - - -
    diff --git a/icore_open_docs/src/routes/(docs)/components/link/+page.svelte b/icore_open_docs/src/routes/(docs)/components/link/+page.svelte deleted file mode 100644 index 0c2bc654..00000000 --- a/icore_open_docs/src/routes/(docs)/components/link/+page.svelte +++ /dev/null @@ -1,263 +0,0 @@ - - - - - - Links - - -
    - - - -
    -
    -
    -

    Links

    - -

    Benodigde stappen:

    -
      -
    1. - Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en - optionele bestanden zie: Bijbehorende bestanden. -
      2. -
    2. - Vul de variabelen met de gewenste stijlkeuzes. Voor meer informatie zie het overzicht - met instelbare variabelen. -
      3. -
    3. - Voeg de benodigde HTML toe. Voor meer informatie zie: Voorbeelden. -
      4. -
    -
    - -
    -

    Voorbeelden:

    - -

    Visueel voorbeeld:

    - Basis - Met :before - Met :afterKat icoon - - Hover :hover - Hover met :before:hover - Hover met :before:hover - - Actieve link - Actieve link met icoon - Actieve link met icoon achteraan - Actieve link op hover - Actieve link met icoon op hover - Actieve link met icoon achteraan op hover - - Link gefocust - Link gefocust met icoon - Link gefocust met icoon achteraan - Link gefocust op hover - Link gefocust met icoon op hover - Link gefocust met icoon achteraan op hover - - Bezochte link - Bezochte link met icoon - Bezochte link met icoon achteraan - Bezochte link op hover - Bezochte link met icoon op hover - Bezochte link met icoon achteraan op hover - - Externe link - -

    HTML-voorbeeld:

    - -
    - -
    -

    Bijbehorende bestanden

    -

    - Voor meer informatie over importeren en instellen van componenten. Zie: - Componenten gebruiken en styling toevoegen -

    - -

    Aandachtspunten:

    -
      -
    • - De standaard ingestelde waarden binnen Manon maken gebruik van de Body text set. Om gebruik te maken van deze set. Laad de set eenmalig in voordat overige componenten - er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie. -
      • -
    - -

    Importeer component via npm

    - -

    CSS-voorbeeld:

    - -
    - -
    -

    Instelbare variabelen

    -

    - Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in - combinatie met de class horizotal-view. -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Beschikbare instelbare variabelen:
    VariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
    --link-background-colorbackground-colortransparent-links
    --link-text-colorcolor#2f2f9a-
    --link-text-decorationtext-decorationinitial-
    -
    - -

    CSS

    -

    - Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw - project. Kies en gebruik de benodigde variabelen. -

    - -
    -
    -
    -
    diff --git a/icore_open_docs/src/routes/(docs)/components/login-meta-test/+page.svelte b/icore_open_docs/src/routes/(docs)/components/login-meta-test/+page.svelte deleted file mode 100644 index 14252000..00000000 --- a/icore_open_docs/src/routes/(docs)/components/login-meta-test/+page.svelte +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - Ingelogd als testpagina - - -
    -
    -
    -
    -

    Ingelogd als testpagina

    -

    Overzicht van het element in mogelijke structuren om te testen.

    -
    - -
    -

    Tests

    -

    div

    -

    Visueel voorbeeld:

    - - -

    HTML-voorbeeld:

    -