├── .eleventy.js ├── .gitignore ├── .nojekyll ├── CHANGELOG.md ├── LICENCE ├── README.md ├── docs ├── _eleventy_redirect │ └── index.html ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── browserconfig.xml ├── dist │ ├── codebase.css │ └── codebase.css.map ├── docs │ ├── 1-getting-started │ │ ├── accessibility │ │ │ └── index.html │ │ ├── css-variables │ │ │ └── index.html │ │ ├── element-grid │ │ │ └── index.html │ │ ├── improvements-since-codebase-4 │ │ │ └── index.html │ │ ├── introduction │ │ │ └── index.html │ │ └── responsive-design │ │ │ └── index.html │ ├── 2-classless-basics │ │ ├── block-elements │ │ │ └── index.html │ │ ├── form-elements │ │ │ └── index.html │ │ ├── inline-elements │ │ │ └── index.html │ │ └── media │ │ │ └── index.html │ ├── 3-layout-utilities │ │ ├── aspect-ratios │ │ │ └── index.html │ │ ├── blocks │ │ │ └── index.html │ │ ├── containers │ │ │ └── index.html │ │ ├── dimensions │ │ │ └── index.html │ │ ├── flexbox │ │ │ └── index.html │ │ ├── floats │ │ │ └── index.html │ │ ├── grid │ │ │ └── index.html │ │ ├── invisibility │ │ │ └── index.html │ │ ├── overflows │ │ │ └── index.html │ │ └── positions │ │ │ └── index.html │ ├── 4-decoration-utilities │ │ ├── borders │ │ │ └── index.html │ │ ├── box-shadows │ │ │ └── index.html │ │ ├── colors │ │ │ └── index.html │ │ ├── forms │ │ │ └── index.html │ │ ├── glass │ │ │ └── index.html │ │ ├── images │ │ │ └── index.html │ │ ├── rounded-corners │ │ │ └── index.html │ │ └── spacing │ │ │ └── index.html │ ├── 5-typographic-utilities │ │ ├── font-stacks │ │ │ └── index.html │ │ ├── headings │ │ │ └── index.html │ │ ├── inline-text │ │ │ └── index.html │ │ ├── list-formats │ │ │ └── index.html │ │ ├── making-text-bigger │ │ │ └── index.html │ │ ├── text-alignment │ │ │ └── index.html │ │ └── text-columns │ │ │ └── index.html │ ├── 6-simple-components │ │ ├── badges │ │ │ └── index.html │ │ ├── buttons │ │ │ └── index.html │ │ ├── cards │ │ │ └── index.html │ │ ├── heros │ │ │ └── index.html │ │ ├── labels │ │ │ └── index.html │ │ ├── media-objects │ │ │ └── index.html │ │ ├── menus-and-menubars │ │ │ └── index.html │ │ ├── panel-links │ │ │ └── index.html │ │ └── tables │ │ │ └── index.html │ └── 7-alpinejs-components │ │ ├── animations │ │ └── index.html │ │ ├── collapse │ │ └── index.html │ │ ├── dropdowns │ │ └── index.html │ │ ├── modals │ │ └── index.html │ │ ├── offcanvas │ │ └── index.html │ │ ├── slideshows │ │ └── index.html │ │ └── tabs │ │ └── index.html ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── favicon.svg ├── img │ ├── cover-images.svg │ ├── element-grid.svg │ ├── grid.svg │ ├── pexels-andrew-hawkes-5063027-tall.jpg │ ├── pexels-daniyal-ghanavati-110320.jpg │ ├── pexels-erik-karits-3738673.jpg │ ├── pexels-oleg-magni-1837592.jpg │ ├── pexels-ollie-craig-6398582.jpg │ ├── pexels-pixabay-206762-short.jpg │ ├── pexels-pixabay-372470.jpg │ ├── pexels-pixabay-416179.jpg │ ├── pexels-trudie-roden-2419158.jpg │ └── responsive-design.svg ├── index.html ├── mstile-150x150.png ├── pagefind │ ├── fragment │ │ ├── en_116aa5a.pf_fragment │ │ ├── en_154171b.pf_fragment │ │ ├── en_1597f55.pf_fragment │ │ ├── en_162a211.pf_fragment │ │ ├── en_16613be.pf_fragment │ │ ├── en_184053e.pf_fragment │ │ ├── en_19e99da.pf_fragment │ │ ├── en_1ea5d59.pf_fragment │ │ ├── en_1ec5746.pf_fragment │ │ ├── en_201070b.pf_fragment │ │ ├── en_222615d.pf_fragment │ │ ├── en_274fa0a.pf_fragment │ │ ├── en_2b95ae4.pf_fragment │ │ ├── en_2babb33.pf_fragment │ │ ├── en_2eed2b1.pf_fragment │ │ ├── en_2fd3976.pf_fragment │ │ ├── en_3229d8b.pf_fragment │ │ ├── en_32cf13f.pf_fragment │ │ ├── en_36a6dda.pf_fragment │ │ ├── en_38ff96e.pf_fragment │ │ ├── en_3f61558.pf_fragment │ │ ├── en_3fb9248.pf_fragment │ │ ├── en_4027b4a.pf_fragment │ │ ├── en_405682c.pf_fragment │ │ ├── en_465949a.pf_fragment │ │ ├── en_47943ac.pf_fragment │ │ ├── en_49f43ec.pf_fragment │ │ ├── en_4d819f2.pf_fragment │ │ ├── en_4db239a.pf_fragment │ │ ├── en_4e9874f.pf_fragment │ │ ├── en_50d5daa.pf_fragment │ │ ├── en_5661e94.pf_fragment │ │ ├── en_5b7e814.pf_fragment │ │ ├── en_5fe5195.pf_fragment │ │ ├── en_61d9eb9.pf_fragment │ │ ├── en_65b76e9.pf_fragment │ │ ├── en_6c14c22.pf_fragment │ │ ├── en_73bc514.pf_fragment │ │ ├── en_77641c8.pf_fragment │ │ ├── en_7e96b13.pf_fragment │ │ ├── en_8025cea.pf_fragment │ │ ├── en_8267829.pf_fragment │ │ ├── en_83932cb.pf_fragment │ │ ├── en_882c99d.pf_fragment │ │ ├── en_8882989.pf_fragment │ │ ├── en_8ba3c41.pf_fragment │ │ ├── en_8d14685.pf_fragment │ │ ├── en_8dd23cd.pf_fragment │ │ ├── en_9098215.pf_fragment │ │ ├── en_91339d3.pf_fragment │ │ ├── en_97e24e6.pf_fragment │ │ ├── en_9a695ec.pf_fragment │ │ ├── en_9b57adb.pf_fragment │ │ ├── en_9db2f8f.pf_fragment │ │ ├── en_a286b8a.pf_fragment │ │ ├── en_a43d522.pf_fragment │ │ ├── en_a6a9596.pf_fragment │ │ ├── en_a6e9ad9.pf_fragment │ │ ├── en_a71fb14.pf_fragment │ │ ├── en_a8729ed.pf_fragment │ │ ├── en_aacc84b.pf_fragment │ │ ├── en_ab5367f.pf_fragment │ │ ├── en_ad3343e.pf_fragment │ │ ├── en_ae18473.pf_fragment │ │ ├── en_b015671.pf_fragment │ │ ├── en_b112b9f.pf_fragment │ │ ├── en_b226a02.pf_fragment │ │ ├── en_b541038.pf_fragment │ │ ├── en_b78ab82.pf_fragment │ │ ├── en_b98d4de.pf_fragment │ │ ├── en_ba9b57a.pf_fragment │ │ ├── en_baa9514.pf_fragment │ │ ├── en_bb5aa84.pf_fragment │ │ ├── en_bb6d911.pf_fragment │ │ ├── en_bc2fe13.pf_fragment │ │ ├── en_bed7ef5.pf_fragment │ │ ├── en_c18cde8.pf_fragment │ │ ├── en_c35fc02.pf_fragment │ │ ├── en_c389d71.pf_fragment │ │ ├── en_c399fe8.pf_fragment │ │ ├── en_c823938.pf_fragment │ │ ├── en_c8af877.pf_fragment │ │ ├── en_c9759e1.pf_fragment │ │ ├── en_cdd02e6.pf_fragment │ │ ├── en_d1d9296.pf_fragment │ │ ├── en_d27ad3f.pf_fragment │ │ ├── en_d420d94.pf_fragment │ │ ├── en_d64d55b.pf_fragment │ │ ├── en_e323db2.pf_fragment │ │ ├── en_e47d237.pf_fragment │ │ ├── en_eb760b8.pf_fragment │ │ ├── en_ebc5ae4.pf_fragment │ │ ├── en_ede4a84.pf_fragment │ │ ├── en_ee6b2b8.pf_fragment │ │ ├── en_ee7d577.pf_fragment │ │ ├── en_f735936.pf_fragment │ │ ├── en_f776602.pf_fragment │ │ ├── en_f7c2cb3.pf_fragment │ │ ├── en_f899ef6.pf_fragment │ │ ├── en_fc22f4f.pf_fragment │ │ ├── en_fcb7708.pf_fragment │ │ ├── en_fcea888.pf_fragment │ │ └── en_fdfecf8.pf_fragment │ ├── index │ │ ├── en_1eb914e.pf_index │ │ ├── en_251fa65.pf_index │ │ ├── en_3e56acc.pf_index │ │ ├── en_b23fca3.pf_index │ │ ├── en_b8eb146.pf_index │ │ ├── en_cd8cd7b.pf_index │ │ ├── en_dab166c.pf_index │ │ └── en_fb51f0c.pf_index │ ├── pagefind-entry.json │ ├── pagefind-highlight.js │ ├── pagefind-modular-ui.css │ ├── pagefind-modular-ui.js │ ├── pagefind-ui.css │ ├── pagefind-ui.js │ ├── pagefind.en_45ca8dd66d.pf_meta │ ├── pagefind.en_a76b93c0a9.pf_meta │ ├── pagefind.js │ ├── wasm.en.pagefind │ └── wasm.unknown.pagefind ├── prism │ └── prism.css ├── safari-pinned-tab.svg └── site.webmanifest ├── package-lock.json ├── package.json └── src ├── _data └── metadata.json ├── _includes ├── _html-foot.njk ├── _html-head.njk ├── layout.njk ├── site-footer.njk ├── site-side-nav.njk └── site-top-bar.njk ├── codebase └── scss │ ├── 00_setup │ └── _default-variables.scss │ ├── 01_basics │ ├── _accessibility.scss │ ├── _base.scss │ ├── _form-elements.scss │ ├── _media.scss │ └── _text.scss │ ├── 02_components │ ├── _badges-and-labels.scss │ ├── _buttons.scss │ ├── _offcanvas.scss │ ├── _tables.scss │ └── _tabs.scss │ ├── 03_utilities │ ├── _aspect-ratios.scss │ ├── _blocks.scss │ ├── _border-radius.scss │ ├── _box-model.scss │ ├── _box-shadows.scss │ ├── _colors.scss │ ├── _containers.scss │ ├── _dimensions.scss │ ├── _flexbox.scss │ ├── _floats.scss │ ├── _glass.scss │ ├── _grid.scss │ ├── _images.scss │ ├── _invisibility.scss │ ├── _overflows.scss │ ├── _positions.scss │ ├── _transformations.scss │ ├── _transitions.scss │ └── _typography.scss │ └── codebase.scss ├── dist ├── codebase.css └── codebase.css.map ├── docs ├── 1-getting-started │ ├── accessibility.md │ ├── css-variables.md │ ├── element-grid.md │ ├── improvements-since-codebase-4.md │ ├── introduction.md │ └── responsive-design.md ├── 2-classless-basics │ ├── block-elements.md │ ├── form-elements.md │ ├── inline-elements.md │ └── media.md ├── 3-layout-utilities │ ├── aspect-ratios.md │ ├── blocks.md │ ├── containers.md │ ├── dimensions.md │ ├── flexbox.md │ ├── floats.md │ ├── grid.md │ ├── invisibility.md │ ├── overflows.md │ └── positions.md ├── 4-decoration-utilities │ ├── borders.md │ ├── box-shadows.md │ ├── colors.md │ ├── forms.md │ ├── glass.md │ ├── images.md │ ├── rounded-corners.md │ └── spacing.md ├── 5-typographic-utilities │ ├── font-stacks.md │ ├── headings.md │ ├── inline-text.md │ ├── list-formats.md │ ├── making-text-bigger.md │ ├── text-alignment.md │ └── text-columns.md ├── 6-simple-components │ ├── badges.md │ ├── buttons.md │ ├── cards.md │ ├── heros.md │ ├── labels.md │ ├── media-objects.md │ ├── menus-and-menubars.md │ ├── panel-links.md │ └── tables.md └── 7-alpinejs-components │ ├── animations.md │ ├── collapse.md │ ├── dropdowns.md │ ├── modals.md │ ├── offcanvas.md │ ├── slideshows.md │ └── tabs.md ├── favicon ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── favicon.svg ├── mstile-150x150.png ├── safari-pinned-tab.svg └── site.webmanifest ├── img ├── cover-images.svg ├── element-grid.svg ├── grid.svg ├── pexels-andrew-hawkes-5063027-tall.jpg ├── pexels-daniyal-ghanavati-110320.jpg ├── pexels-erik-karits-3738673.jpg ├── pexels-oleg-magni-1837592.jpg ├── pexels-ollie-craig-6398582.jpg ├── pexels-pixabay-206762-short.jpg ├── pexels-pixabay-372470.jpg ├── pexels-pixabay-416179.jpg ├── pexels-trudie-roden-2419158.jpg └── responsive-design.svg ├── index.njk └── prism └── prism.css /.eleventy.js: -------------------------------------------------------------------------------- 1 | const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); 2 | 3 | module.exports = function(eleventyConfig) { 4 | 5 | const markdownIt = require("markdown-it"); 6 | const markdownItAnchor = require("markdown-it-anchor"); 7 | 8 | const markdownLib = markdownIt({ html: true }).use(markdownItAnchor); 9 | eleventyConfig.setLibrary("md", markdownLib); 10 | 11 | eleventyConfig.addPlugin(syntaxHighlight, { 12 | templateFormats: ["*"] 13 | }); 14 | 15 | eleventyConfig.addPassthroughCopy("src/img"); 16 | eleventyConfig.addPassthroughCopy("src/dist"); 17 | eleventyConfig.addPassthroughCopy("src/prism"); 18 | eleventyConfig.addPassthroughCopy({"src/favicon": "/"}); 19 | 20 | return { 21 | dir: { 22 | input: "src", 23 | output: "docs" 24 | }, 25 | pathPrefix: "/codebase-5/" 26 | }; 27 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | 3 | .DS_Store 4 | .DS_Store? 5 | ._* 6 | .Spotlight-V100 7 | .Trashes 8 | ehthumbs.db 9 | Thumbs.db 10 | 11 | node_modules/ -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/.nojekyll -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Codebase 5 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Codebase 5 2 | 3 | Codebase is a business class CSS style library for the modern web. 4 | 5 | Designed for static site generators and content management systems, Codebase is a package of lessons learned from semantic component frameworks and utility libraries – with some new techniques. 6 | 7 | Plus, Codebase pairs well with [AlpineJS](https://alpinejs.dev). 8 | 9 | * New in v.5.3.4: focus state styling based on that of the NHS.uk and GOV.UK design systems 10 | * New in v.5.3: CSS `color-mix(in OKLAB ...)` functions. 11 | * New in v.5.2: CSS `var()` custom properties. 12 | 13 | *** 14 | 15 | Stylesheet (and sourcemap): https://github.com/codebase-frontend-library/codebase-5/tree/main/src/dist 16 | 17 | Docs: https://codebase-frontend-library.github.io/codebase-5/ 18 | 19 | Install via Git: https://github.com/codebase-frontend-library/codebase-5.git 20 | 21 | *** 22 | 23 | * Current version: 5.3.6 -- see [changelog](https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md) 24 | * CSS file size: 96 KB 25 | * Licence: MIT 26 | * Developer: Simon Padbury 27 | -------------------------------------------------------------------------------- /docs/_eleventy_redirect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Browsersync pathPrefix Redirect 4 | Go to /codebase-5/ -------------------------------------------------------------------------------- /docs/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/android-chrome-192x192.png -------------------------------------------------------------------------------- /docs/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/android-chrome-512x512.png -------------------------------------------------------------------------------- /docs/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #9f00a7 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/favicon-16x16.png -------------------------------------------------------------------------------- /docs/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/favicon-32x32.png -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/favicon.ico -------------------------------------------------------------------------------- /docs/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/img/cover-images.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Your `img-cover` image on a large device 12 | 13 | 14 | Your `img-cover` image on a small device 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | You set 26 | 27 | 28 | this height 29 | 30 | 31 | constraint* 32 | 33 | 34 | 35 | 36 | 37 | * Best practice is to make this set height 38 | 39 | 40 | responsive, or smaller for smaller viewports. 41 | 42 | 43 | 44 | 45 | Visitors may 46 | 47 | 48 | see most of 49 | 50 | 51 | your image 52 | 53 | 54 | 55 | 56 | Visitors may 57 | 58 | 59 | see only this 60 | 61 | 62 | middle slice of 63 | 64 | 65 | your image 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /docs/img/element-grid.svg: -------------------------------------------------------------------------------- 1 | Margin for paragraphs and headings:Lorem ipsumPadding for buttons and table cells:Lorem ipsumDefault text line-height: 1.5rem= 3 element grid unitsmargin-bottom: 1rem= 2 element grid units0.5rem = 1 element grid unit0.5rem = 1 element grid unit1.5rem = 3 element grid units(default text)1rem= 2 element grid units1rem= 2 element grid units -------------------------------------------------------------------------------- /docs/img/grid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | <div class="grid gap"> 19 | 20 | 21 | 22 | <div class="col-1"> 23 | 24 | 25 | 26 | <div class="col-2 rows-1-2"> 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /docs/img/pexels-andrew-hawkes-5063027-tall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/img/pexels-andrew-hawkes-5063027-tall.jpg -------------------------------------------------------------------------------- /docs/img/pexels-daniyal-ghanavati-110320.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/img/pexels-daniyal-ghanavati-110320.jpg -------------------------------------------------------------------------------- /docs/img/pexels-erik-karits-3738673.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/img/pexels-erik-karits-3738673.jpg -------------------------------------------------------------------------------- /docs/img/pexels-oleg-magni-1837592.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/img/pexels-oleg-magni-1837592.jpg -------------------------------------------------------------------------------- /docs/img/pexels-ollie-craig-6398582.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/img/pexels-ollie-craig-6398582.jpg -------------------------------------------------------------------------------- /docs/img/pexels-pixabay-206762-short.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/img/pexels-pixabay-206762-short.jpg -------------------------------------------------------------------------------- /docs/img/pexels-pixabay-372470.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/img/pexels-pixabay-372470.jpg -------------------------------------------------------------------------------- /docs/img/pexels-pixabay-416179.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/img/pexels-pixabay-416179.jpg -------------------------------------------------------------------------------- /docs/img/pexels-trudie-roden-2419158.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/img/pexels-trudie-roden-2419158.jpg -------------------------------------------------------------------------------- /docs/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/mstile-150x150.png -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_116aa5a.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_116aa5a.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_154171b.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_154171b.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_1597f55.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_1597f55.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_162a211.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_162a211.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_16613be.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_16613be.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_184053e.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_184053e.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_19e99da.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_19e99da.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_1ea5d59.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_1ea5d59.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_1ec5746.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_1ec5746.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_201070b.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_201070b.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_222615d.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_222615d.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_274fa0a.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_274fa0a.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_2b95ae4.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_2b95ae4.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_2babb33.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_2babb33.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_2eed2b1.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_2eed2b1.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_2fd3976.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_2fd3976.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_3229d8b.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_3229d8b.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_32cf13f.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_32cf13f.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_36a6dda.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_36a6dda.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_38ff96e.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_38ff96e.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_3f61558.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_3f61558.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_3fb9248.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_3fb9248.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_4027b4a.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_4027b4a.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_405682c.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_405682c.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_465949a.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_465949a.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_47943ac.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_47943ac.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_49f43ec.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_49f43ec.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_4d819f2.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_4d819f2.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_4db239a.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_4db239a.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_4e9874f.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_4e9874f.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_50d5daa.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_50d5daa.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_5661e94.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_5661e94.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_5b7e814.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_5b7e814.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_5fe5195.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_5fe5195.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_61d9eb9.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_61d9eb9.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_65b76e9.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_65b76e9.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_6c14c22.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_6c14c22.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_73bc514.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_73bc514.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_77641c8.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_77641c8.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_7e96b13.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_7e96b13.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_8025cea.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_8025cea.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_8267829.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_8267829.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_83932cb.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_83932cb.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_882c99d.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_882c99d.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_8882989.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_8882989.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_8ba3c41.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_8ba3c41.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_8d14685.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_8d14685.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_8dd23cd.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_8dd23cd.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_9098215.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_9098215.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_91339d3.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_91339d3.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_97e24e6.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_97e24e6.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_9a695ec.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_9a695ec.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_9b57adb.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_9b57adb.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_9db2f8f.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_9db2f8f.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_a286b8a.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_a286b8a.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_a43d522.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_a43d522.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_a6a9596.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_a6a9596.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_a6e9ad9.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_a6e9ad9.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_a71fb14.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_a71fb14.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_a8729ed.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_a8729ed.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_aacc84b.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_aacc84b.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_ab5367f.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_ab5367f.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_ad3343e.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_ad3343e.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_ae18473.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_ae18473.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_b015671.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_b015671.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_b112b9f.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_b112b9f.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_b226a02.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_b226a02.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_b541038.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_b541038.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_b78ab82.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_b78ab82.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_b98d4de.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_b98d4de.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_ba9b57a.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_ba9b57a.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_baa9514.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_baa9514.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_bb5aa84.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_bb5aa84.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_bb6d911.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_bb6d911.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_bc2fe13.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_bc2fe13.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_bed7ef5.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_bed7ef5.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_c18cde8.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_c18cde8.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_c35fc02.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_c35fc02.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_c389d71.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_c389d71.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_c399fe8.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_c399fe8.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_c823938.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_c823938.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_c8af877.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_c8af877.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_c9759e1.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_c9759e1.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_cdd02e6.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_cdd02e6.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_d1d9296.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_d1d9296.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_d27ad3f.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_d27ad3f.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_d420d94.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_d420d94.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_d64d55b.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_d64d55b.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_e323db2.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_e323db2.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_e47d237.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_e47d237.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_eb760b8.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_eb760b8.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_ebc5ae4.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_ebc5ae4.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_ede4a84.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_ede4a84.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_ee6b2b8.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_ee6b2b8.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_ee7d577.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_ee7d577.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_f735936.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_f735936.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_f776602.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_f776602.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_f7c2cb3.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_f7c2cb3.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_f899ef6.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_f899ef6.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_fc22f4f.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_fc22f4f.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_fcb7708.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_fcb7708.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_fcea888.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_fcea888.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/fragment/en_fdfecf8.pf_fragment: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/fragment/en_fdfecf8.pf_fragment -------------------------------------------------------------------------------- /docs/pagefind/index/en_1eb914e.pf_index: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/index/en_1eb914e.pf_index -------------------------------------------------------------------------------- /docs/pagefind/index/en_251fa65.pf_index: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/index/en_251fa65.pf_index -------------------------------------------------------------------------------- /docs/pagefind/index/en_3e56acc.pf_index: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/index/en_3e56acc.pf_index -------------------------------------------------------------------------------- /docs/pagefind/index/en_b23fca3.pf_index: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/index/en_b23fca3.pf_index -------------------------------------------------------------------------------- /docs/pagefind/index/en_b8eb146.pf_index: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/index/en_b8eb146.pf_index -------------------------------------------------------------------------------- /docs/pagefind/index/en_cd8cd7b.pf_index: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/index/en_cd8cd7b.pf_index -------------------------------------------------------------------------------- /docs/pagefind/index/en_dab166c.pf_index: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/index/en_dab166c.pf_index -------------------------------------------------------------------------------- /docs/pagefind/index/en_fb51f0c.pf_index: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/index/en_fb51f0c.pf_index -------------------------------------------------------------------------------- /docs/pagefind/pagefind-entry.json: -------------------------------------------------------------------------------- 1 | {"version":"1.3.0","languages":{"en":{"hash":"en_45ca8dd66d","wasm":"en","page_count":52}}} -------------------------------------------------------------------------------- /docs/pagefind/pagefind.en_45ca8dd66d.pf_meta: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/pagefind.en_45ca8dd66d.pf_meta -------------------------------------------------------------------------------- /docs/pagefind/pagefind.en_a76b93c0a9.pf_meta: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/pagefind.en_a76b93c0a9.pf_meta -------------------------------------------------------------------------------- /docs/pagefind/wasm.en.pagefind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/wasm.en.pagefind -------------------------------------------------------------------------------- /docs/pagefind/wasm.unknown.pagefind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebase-frontend-library/codebase-5/764ba4a7a9e241f1fd7967f78a95f01707c797ec/docs/pagefind/wasm.unknown.pagefind -------------------------------------------------------------------------------- /docs/prism/prism.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.24.1 2 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+scss */ 3 | /** 4 | * prism.js default theme for JavaScript, CSS and HTML 5 | * Based on dabblet (http://dabblet.com) 6 | * @author Lea Verou 7 | */ 8 | /* Modified here by Simon Padbury for Codebase 5 */ 9 | 10 | code[class*="language-"], 11 | pre[class*="language-"] { 12 | max-height: 36rem; 13 | color: black; 14 | font-size: 1rem; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | word-wrap: normal; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | /* Code blocks */ 32 | /* pre[class*="language-"] { 33 | margin-bottom: 1.5rem; 34 | border-radius: .5rem; 35 | overflow: auto; 36 | } */ 37 | 38 | /* code[class*="language-"] { 39 | border: 1px solid var(--teal-200); 40 | border-radius: .5rem; 41 | background-color: var(--teal-100); 42 | } */ 43 | code[class*="language-"] * { 44 | background-color: unset !important; 45 | } 46 | 47 | /* Inline code */ 48 | :not(pre) > code[class*="language-"] { 49 | padding: 0.1em; 50 | border-radius: 0.5em; 51 | white-space: normal; 52 | } 53 | 54 | .token.comment, 55 | .token.prolog, 56 | .token.doctype, 57 | .token.cdata { 58 | color: slategray; 59 | } 60 | 61 | .token.punctuation { 62 | color: #999; 63 | } 64 | 65 | .token.namespace { 66 | opacity: 0.7; 67 | } 68 | 69 | .token.property, 70 | .token.tag, 71 | .token.boolean, 72 | .token.number, 73 | .token.constant, 74 | .token.symbol, 75 | .token.deleted { 76 | color: #905; 77 | } 78 | 79 | .token.selector, 80 | .token.attr-name, 81 | .token.string, 82 | .token.char, 83 | .token.builtin, 84 | .token.inserted { 85 | color: #690; 86 | } 87 | 88 | .token.operator, 89 | .token.entity, 90 | .token.url, 91 | .language-css .token.string, 92 | .style .token.string { 93 | color: #9a6e3a; 94 | } 95 | 96 | .token.atrule, 97 | .token.attr-value, 98 | .token.keyword { 99 | color: #07a; 100 | } 101 | 102 | .token.function, 103 | .token.class-name { 104 | color: #dd4a68; 105 | } 106 | 107 | .token.regex, 108 | .token.important, 109 | .token.variable { 110 | color: #e90; 111 | } 112 | 113 | .token.important, 114 | .token.bold { 115 | font-weight: bold; 116 | } 117 | .token.italic { 118 | font-style: italic; 119 | } 120 | 121 | .token.entity { 122 | cursor: help; 123 | } -------------------------------------------------------------------------------- /docs/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 25 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /docs/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codebase-5", 3 | "version": "5.3.6", 4 | "description": "Codebase is a modern SCSS library. Pairs well with AlpineJS for HTML/JavaScript components.", 5 | "scripts": { 6 | "sass": "npx sass src/codebase/scss:src/dist --watch --style compressed", 7 | "eleventy": "npx @11ty/eleventy --serve --quiet", 8 | "dev": "npm-run-all --parallel sass eleventy" 9 | }, 10 | "keywords": [ 11 | "css", 12 | "css variables", 13 | "color-mix()", 14 | "OKLCH", 15 | "sass", 16 | "js", 17 | "responsive", 18 | "frontend", 19 | "library", 20 | "framework", 21 | "utility classes", 22 | "HTML components", 23 | "AlpineJS", 24 | "Eleventy", 25 | "documentation" 26 | ], 27 | "author": "", 28 | "license": "MIT", 29 | "repository": { 30 | "type": "git", 31 | "url": "https://github.com/codebase-frontend-library/codebase-5" 32 | }, 33 | "devDependencies": { 34 | "@11ty/eleventy": "^3.0.0", 35 | "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0", 36 | "markdown-it-anchor": "^8.4.1", 37 | "npm-run-all": "^4.1.5", 38 | "sass": "^1.47.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/_data/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Codebase", 3 | "version": "5.3.6", 4 | "css_filesize": "96 KB" 5 | } -------------------------------------------------------------------------------- /src/_includes/_html-foot.njk: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/_includes/site-footer.njk: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/_includes/site-top-bar.njk: -------------------------------------------------------------------------------- 1 | 63 | 64 |
65 |
66 | 67 | 68 |
72 | 82 |
83 | 84 |
85 | 92 | 93 | 94 | 95 | 96 | Codebase CSS v.{{ metadata.version }} 97 | 98 |
99 | 100 |
101 |
102 |
Download CSS
103 |
Github
104 |
Changelog
105 |
106 |
107 | 108 |
109 |
110 | 111 | 112 | -------------------------------------------------------------------------------- /src/codebase/scss/01_basics/_accessibility.scss: -------------------------------------------------------------------------------- 1 | // BASICS: ACCESSIBILITY (interactive elements) 2 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3 | // As of November 2024: Based on design systems of nhs.co.uk and .gov.uk 4 | // -- https://service-manual.nhs.uk/design-system/styles/focus-state 5 | // -- https://design-system.service.gov.uk/ 6 | 7 | @use "../00_setup/default-variables" as *; 8 | 9 | // Links (and “panel links”) 10 | // ========================= 11 | 12 | a, .panel-link-title, .t-link, .t-underline { 13 | text-decoration: underline; 14 | text-underline-offset: var(--link-underline-offset); 15 | text-decoration-thickness: var(--link-underline); 16 | } 17 | 18 | a { 19 | color: var(--c-link); 20 | cursor: pointer; 21 | transition: var(--ease); 22 | 23 | &:hover, 24 | &:active { 25 | color: var(--c-link-hover); 26 | text-decoration-thickness: var(--link-underline-hover); 27 | } 28 | 29 | &.t-underline-hover-only:hover { 30 | text-decoration: underline; 31 | text-decoration-thickness: var(--link-underline-hover); 32 | } 33 | 34 | @if $link-color-visited==true { 35 | &:visited { 36 | color: var(--c-link-visited); 37 | } 38 | } 39 | } 40 | 41 | .panel-link, 42 | .t-link-inside { 43 | display: block; 44 | } 45 | 46 | .panel-link, 47 | .t-underline-none, 48 | 49 | .t-underline-none .panel-link-title, 50 | .t-underline-none:hover .panel-link-title, 51 | 52 | .t-underline-none .t-link, 53 | .t-underline-none:hover .t-link, 54 | 55 | .t-underline-hover-only:not(:hover), 56 | 57 | .t-underline-hover-only .panel-link-title, 58 | .t-underline-hover-only.panel-link:hover, 59 | 60 | .t-underline-hover-only .t-link, 61 | .t-underline-hover-only.t-ink-inside:hover, 62 | 63 | .links-underline-none a, 64 | .links-underline-none a:hover, 65 | .links-underline-hover-only a { 66 | text-decoration: none; 67 | } 68 | 69 | .links-underline-hover-only a:hover { 70 | text-decoration: underline; 71 | text-decoration-thickness: var(--link-underline-hover); 72 | } 73 | 74 | .t-underline-hover-only.panel-link:hover .panel-link-title, 75 | .t-underline-hover-only.t-link-inside:hover .t-link { 76 | text-decoration: underline; 77 | text-underline-offset: var(--link-underline-offset); 78 | text-decoration-thickness: var(--link-underline-hover); 79 | } 80 | 81 | a.panel-link:hover .panel-link-title, 82 | a.t-link-inside:hover .t-link { 83 | text-underline-offset: var(--link-underline-offset); 84 | text-decoration-thickness: var(--link-underline-hover); 85 | } 86 | 87 | // Focus states 88 | // ============ 89 | // Based on the design systems of the UK National Health Service (NHS) and UK Government (GOV.UK) 90 | // https://service-manual.nhs.uk/design-system/styles/focus-state 91 | // https://design-system.service.gov.uk/get-started/focus-states/ 92 | 93 | a:not(.panel-link):not(.t-link-inside):focus-visible { 94 | outline: none; 95 | color: black !important; // to override utility class text color 96 | text-decoration: underline; 97 | text-underline-offset: var(--link-underline-offset); 98 | text-decoration-thickness: max(2px, .125em); 99 | background-color: var(--amber-500); 100 | } 101 | 102 | a.panel-link:focus-visible, 103 | a.t-link-inside:focus-visible { 104 | outline: none; 105 | background-color: var(--amber-500); 106 | } 107 | 108 | a.panel-link:focus-visible .panel-link-title, 109 | a.t-link-inside:focus-visible .t-link { 110 | color: black !important; // to override utility class text color 111 | text-decoration: underline; 112 | text-underline-offset: var(--link-underline-offset); 113 | text-decoration-thickness: max(2px, .125em); 114 | } 115 | 116 | a.panel-link:focus-visible :not(.panel-link-title), 117 | a.t-link-inside:focus-visible :not(.t-link) { 118 | color: var(--amber-800) 119 | } 120 | 121 | 122 | input:focus, 123 | textarea:focus, 124 | select:focus, 125 | form button:focus, 126 | :focus-visible:not(a) { 127 | box-shadow: 0 0 0 3px black; 128 | outline: 3px solid var(--amber-500); 129 | outline-offset: 3px; 130 | z-index: 1; 131 | } 132 | 133 | a:focus-visible img { 134 | filter: opacity(65%); 135 | } 136 | 137 | 138 | // Visually hidden utility (screen reader only) 139 | // ============================================ 140 | // From: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ 141 | 142 | .visually-hidden:not(:focus):not(:active), 143 | .screen-reader-only:not(:focus):not(:active) { 144 | clip: rect(0 0 0 0); 145 | clip-path: inset(50%); 146 | width: 1px; 147 | height: 1px; 148 | overflow: hidden; 149 | position: absolute; 150 | white-space: nowrap; 151 | } 152 | -------------------------------------------------------------------------------- /src/codebase/scss/01_basics/_base.scss: -------------------------------------------------------------------------------- 1 | // BASICS: BASE (resets and other stuff) 2 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3 | // Based on https://github.com/sindresorhus/modern-normalize v.1.0 4 | 5 | @use "../00_setup/default-variables" as *; 6 | 7 | // For AlpineJS ======================= 8 | [x-cloak] { 9 | display: none !important; 10 | } 11 | // ==================================== 12 | 13 | *, 14 | *::before, 15 | *::after { 16 | box-sizing: border-box; 17 | } 18 | 19 | body { 20 | min-height: 100dvh; 21 | scroll-behavior: smooth; 22 | margin: 0; 23 | font-family: var(--font-base); 24 | font-size: var(--t-fs); 25 | line-height: var(--t-base-lh); 26 | -webkit-font-smoothing: antialiased; 27 | font-feature-settings: "liga" on; 28 | font-kerning: normal; 29 | text-rendering: optimizeLegibility; 30 | color: var(--c-text); 31 | background-color: var(--c-page-bg); 32 | } 33 | 34 | @if $font-size-bump == true { 35 | @include break-min(w-sm) { 36 | body { 37 | font-size: var(--t-fs-bump); 38 | } 39 | } 40 | } 41 | 42 | :root { 43 | -moz-tab-size: 4; 44 | tab-size: 4; 45 | } 46 | 47 | abbr[title] { 48 | text-decoration: underline dotted; 49 | text-underline-offset: 3px; 50 | } 51 | 52 | b, 53 | strong { 54 | font-weight: var(--t-bold); 55 | } 56 | 57 | sub, 58 | sup { 59 | font-size: 75%; 60 | line-height: 0; 61 | position: relative; 62 | vertical-align: baseline; 63 | } 64 | 65 | sub { 66 | bottom: -0.25em; 67 | } 68 | 69 | sup { 70 | top: -0.5em; 71 | } 72 | 73 | :-moz-ui-invalid { 74 | box-shadow: none; 75 | } 76 | 77 | small { 78 | font-size: 85%; 79 | } 80 | 81 | ::selection { 82 | background-color: var(--c-selection); 83 | } 84 | 85 | img { 86 | max-width: 100%; 87 | } 88 | 89 | figure { 90 | padding: 0; 91 | margin: 0; 92 | } 93 | 94 | audio, 95 | canvas, 96 | progress, 97 | video { 98 | display: block; 99 | width: 100%; 100 | } 101 | 102 | iframe { 103 | border: 0; 104 | } 105 | 106 | [type="number"] { 107 | ::-webkit-inner-spin-button, 108 | ::-webkit-outer-spin-button { 109 | height: auto; 110 | } 111 | } 112 | 113 | [type="search"] { 114 | -webkit-appearance: textfield; 115 | appearance: textfield; 116 | 117 | ::-webkit-search-decoration { 118 | -webkit-appearance: none; 119 | appearance: none; 120 | } 121 | } -------------------------------------------------------------------------------- /src/codebase/scss/01_basics/_form-elements.scss: -------------------------------------------------------------------------------- 1 | // BASICS: FORM ELEMENTS (INCLUDING BUTTONS) 2 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | @use "sass:math"; 6 | 7 | fieldset { 8 | border: var(--line); 9 | } 10 | 11 | label, 12 | legend { 13 | font-size: 1rem; 14 | font-family: var(--base); 15 | } 16 | 17 | ::placeholder { 18 | color: var(--ctext); 19 | opacity: 0.7; 20 | } 21 | 22 | input, 23 | textarea, 24 | select { 25 | width: 100%; 26 | min-height: var(--form-size); 27 | border: var(--line); 28 | padding: var(--form-p); 29 | font-family: var(--form-font); 30 | font-size: 1rem; 31 | text-align: start; 32 | 33 | @if $form-input-rounded-corners == true { 34 | --rad: var(--rad-sm); 35 | border-radius: var(--rad); 36 | } 37 | @else { 38 | border-radius: 0; 39 | } 40 | 41 | @if $form-input-background-color == true { 42 | background-color: var(--c-form-bg) 43 | } 44 | 45 | transition: var(--ease); 46 | } 47 | 48 | select:not([multiple]) { 49 | height: var(--form-size); 50 | } 51 | 52 | [type="color"] { 53 | width: var(--form-size); 54 | height: var(--form-size); 55 | padding: .25em 56 | } 57 | 58 | input[type="checkbox"], 59 | input[type="radio"] { 60 | display: inline; 61 | margin-inline: 0.25rem; 62 | width: 1em; 63 | height: 1em; 64 | min-height: unset; 65 | } 66 | 67 | input::file-selector-button { 68 | border: 0; 69 | font-size: 1em; 70 | color: white; 71 | background: var(--c-tertiary); 72 | } 73 | 74 | input.form-element-sm, 75 | select.form-element-sm { 76 | height: var(--form-size-sm); 77 | min-height: unset; 78 | padding: var(--form-p-sm); 79 | font-size: var(--form-size-sm-fs); 80 | } 81 | 82 | textarea.form-element-sm { 83 | padding: var(--form-p-sm); 84 | font-size: var(--form-size-sm-fs); 85 | } 86 | 87 | .form-element-lg { 88 | height: var(--form-size-lg); 89 | min-height: unset; 90 | padding: var(--form-p-lg); 91 | font-size: var(--form-size-lg-fs); 92 | } 93 | 94 | .inline-block input { 95 | display: inline-block; 96 | } 97 | 98 | :disabled, 99 | .disabled { 100 | position: relative; 101 | opacity: 0.5; 102 | pointer-events: none; 103 | } 104 | 105 | @mixin button { 106 | position: relative; 107 | -webkit-appearance: none; 108 | height: var(--form-size); 109 | display: inline-flex; 110 | justify-content: center; 111 | align-items: center; 112 | margin: 0; 113 | border: var(--line); 114 | 115 | @if $form-input-rounded-corners ==true { 116 | --rad: var(--rad-sm); 117 | border-radius: var(--rad); 118 | } 119 | @else { 120 | border-radius: 0; 121 | } 122 | 123 | padding: var(--btn-p); 124 | font-family: var(--form-font); 125 | font-size: 100%; 126 | font-weight: var(--btn); 127 | text-decoration: none; 128 | white-space: nowrap; 129 | color: var(--c-text); 130 | background-color: transparent; 131 | transition: var(--ease); 132 | 133 | &:hover, 134 | &:active, 135 | &.active { 136 | color: var(--c-btn-text); 137 | background-color: var(--c-btn-hover); 138 | cursor: pointer; 139 | } 140 | 141 | &.block { 142 | text-align: center; 143 | } 144 | } 145 | 146 | button, 147 | [type="button"], 148 | [type="submit"], 149 | [type="reset"] { 150 | width: unset; 151 | @include button; 152 | } 153 | 154 | .btn { 155 | @include button; 156 | } 157 | 158 | :disabled:hover, 159 | .disabled:hover { 160 | cursor: not-allowed; 161 | } -------------------------------------------------------------------------------- /src/codebase/scss/01_basics/_media.scss: -------------------------------------------------------------------------------- 1 | // BASICS: MEDIA 2 | // ~~~~~~~~~~~~~ 3 | 4 | img, picture, video, canvas, svg { 5 | display: block; 6 | max-width: 100%; 7 | } -------------------------------------------------------------------------------- /src/codebase/scss/01_basics/_text.scss: -------------------------------------------------------------------------------- 1 | // BASICS: TYPOGRAPHY 2 | // ~~~~~~~~~~~~~~~~~~ 3 | 4 | // See also `.t-` utilities. 5 | 6 | @use "../00_setup/default-variables" as *; 7 | @use "sass:math"; 8 | 9 | h1, 10 | h2, 11 | h3, 12 | h4, 13 | h5, 14 | h6 { 15 | margin-block: var(--hd-m-block); 16 | font-weight: var(--hd-weight); 17 | line-height: var(--hd-lh); 18 | overflow-wrap: break-word; 19 | &:first-child { 20 | margin-top: 0; 21 | } 22 | } 23 | 24 | h1, 25 | .h1 { 26 | font-size: var(--h1); 27 | } 28 | 29 | h2, 30 | .h2 { 31 | font-size: var(--h2); 32 | } 33 | 34 | h3, 35 | .h3 { 36 | font-size: var(--h3); 37 | } 38 | 39 | h4, 40 | .h4 { 41 | font-size: var(--h4); 42 | } 43 | 44 | h5, 45 | .h5 { 46 | font-size: var(--h5); 47 | } 48 | 49 | h6, 50 | .h6 { 51 | font-size: var(--h6); 52 | } 53 | 54 | .h1, .h2, .h3, .h4, .h5, .h6 { 55 | line-height: var(--hd-lh); 56 | } 57 | 58 | p, 59 | blockquote, 60 | dl { 61 | margin-block: 0 var(--t-base-mb); 62 | overflow-wrap: break-word; 63 | } 64 | 65 | ol, 66 | ul { 67 | margin-block: 0 var(--t-base-mb); 68 | padding-left: calc(var(--t-base-lh) * 1rem); 69 | } 70 | 71 | menu { 72 | margin-block: 0 var(--t-base-mb); 73 | padding-left: 1rem; 74 | } 75 | 76 | menu ul, 77 | nav ul, 78 | li ul, 79 | li ol { 80 | margin-bottom: 0; 81 | } 82 | 83 | td ol:last-of-type, 84 | td ul:last-of-type, 85 | td p:last-of-type { 86 | margin-bottom: 0; 87 | } 88 | 89 | dd { 90 | margin-bottom: var(--t-base-mb); 91 | } 92 | 93 | dt { 94 | font-weight: var(--t-bold); 95 | } 96 | 97 | dd { 98 | margin-left: 2em; 99 | } 100 | 101 | details { 102 | margin-bottom: var(--t-base-mb); 103 | } 104 | 105 | summary { 106 | font-weight: var(--t-bold); 107 | } 108 | 109 | summary:hover { 110 | cursor: pointer; 111 | } 112 | 113 | hr { 114 | height: 0; 115 | width: 100%; 116 | margin-block: calc(var(--hr-y) * 1rem); 117 | border: 0; 118 | border-top: var(--line); 119 | } 120 | 121 | blockquote { 122 | margin: var(--t-base-mb) 0; 123 | padding-right: 1.5rem; 124 | padding-left: 1.5rem; 125 | padding-inline: var(--bq-x); 126 | font-size: var(--bq-fs); 127 | } 128 | 129 | pre { 130 | margin-bottom: var(--t-base-mb); 131 | font-family: var(--font-base); 132 | &:not(:has(code)) { 133 | overflow: auto; 134 | } 135 | code { 136 | display: block; 137 | overflow: auto; 138 | } 139 | } 140 | 141 | code, 142 | kbd, 143 | samp { 144 | display: inline-block; 145 | font-family: var(--font-mono); 146 | font-size: 0.9em; 147 | line-height: 1.5em; 148 | padding: 0.1em 0.4em; 149 | } 150 | 151 | code { 152 | border: 1px solid var(--c-code-b); 153 | border-radius: var(--rad-sm); 154 | color: var(--c-code); 155 | background-color: var(--c-code-bg); 156 | } 157 | 158 | pre code { 159 | padding: var(--sp-2); 160 | } -------------------------------------------------------------------------------- /src/codebase/scss/02_components/_badges-and-labels.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: BADGES AND LABELS 2 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | @use "sass:list"; 6 | 7 | // Badges 8 | 9 | .badge { 10 | position: relative; 11 | display: inline-flex; 12 | align-items: center; 13 | justify-content: center; 14 | min-width: 1.625em; 15 | height: 1.625em; 16 | border-radius: 2em; 17 | padding: 0 0.325em; 18 | text-align: center; 19 | white-space: nowrap; 20 | background-color: var(--c-page-bg-alt); 21 | } 22 | 23 | .badge { 24 | &-top-right { 25 | position: absolute; 26 | top: -.75em; 27 | right: -.75em; 28 | } 29 | 30 | &-top-left { 31 | position: absolute; 32 | top: -.75em; 33 | left: -.75em; 34 | } 35 | 36 | &-bottom-right { 37 | position: absolute; 38 | bottom: -.75em; 39 | right: -.75em; 40 | } 41 | 42 | &-bottom-left { 43 | position: absolute; 44 | bottom: -.75em; 45 | left: -.75em; 46 | } 47 | } 48 | 49 | // Labels 50 | 51 | .label { 52 | position: relative; 53 | display: inline-block; 54 | 55 | @if $label-rounded-corners==true { 56 | border-radius: var(--rad-sm); 57 | } 58 | 59 | line-height: 1.5em; 60 | padding: 0 0.4em 0.1em; 61 | white-space: nowrap; 62 | background-color: var(--c-page-bg-alt); 63 | } 64 | 65 | // UI colors 66 | 67 | @if $ui-color-utilities == true { 68 | @each $key, 69 | $val in $ui-setup { 70 | .badge-#{$key}, 71 | .label-#{$key} { 72 | background-color: list.nth($val, 1); 73 | color: list.nth($val, 3) 74 | } 75 | } 76 | } -------------------------------------------------------------------------------- /src/codebase/scss/02_components/_buttons.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: BUTTONS 2 | // ~~~~~~~~~~~~~~~~~~ 3 | 4 | // NOTE: for the bacic button styling (including `.btn`), see `01_basics/_form-elements.scss` 5 | 6 | @use "../00_setup/default-variables" as *; 7 | @use "sass:list"; 8 | 9 | // Button size 10 | .btn { 11 | &-sm { 12 | height: var(--form-size-sm); 13 | min-height: unset; 14 | padding: var(--btn-p-sm); 15 | font-size: var(--form-size-sm-fs); 16 | } 17 | 18 | &-lg { 19 | height: var(--form-size-lg); 20 | min-height: unset; 21 | padding: var(--btn-p-lg); 22 | font-size: var(--form-size-lg-fs); 23 | } 24 | } 25 | 26 | // Button icon (makes square) 27 | .btn-icon { 28 | padding: 0 !important; 29 | height: var(--form-size); 30 | min-width: var(--form-size); 31 | 32 | &.btn-sm { 33 | height: var(--form-size-sm); 34 | min-width: var(--form-size-sm); 35 | } 36 | 37 | &.btn-lg { 38 | height: var(--form-size-lg); 39 | min-width: var(--form-size-lg); 40 | } 41 | 42 | } 43 | 44 | // UI colors 45 | 46 | @if $ui-color-utilities == true { 47 | @each $key, 48 | $val in $ui-setup { 49 | .btn-#{$key} { 50 | border-color: list.nth($val, 1); 51 | background-color: list.nth($val, 1); 52 | color: list.nth($val, 3); 53 | 54 | &:hover, 55 | &:active, 56 | &.active { 57 | border-color: list.nth($val, 2); 58 | background-color: list.nth($val, 2); 59 | color: list.nth($val, 4); 60 | } 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /src/codebase/scss/02_components/_offcanvas.scss: -------------------------------------------------------------------------------- 1 | // COMPONENTS: OFFCANVAS 2 | // ~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | .offcanvas { 7 | position: fixed; 8 | z-index: 999; 9 | } 10 | 11 | .offcanvas-top { 12 | top: 0; 13 | right: 0; 14 | left: 0; 15 | } 16 | 17 | .offcanvas-right { 18 | top: 0; 19 | right: 0; 20 | bottom: 0; 21 | } 22 | 23 | .offcanvas-bottom { 24 | right: 0; 25 | bottom: 0; 26 | left: 0; 27 | } 28 | 29 | .offcanvas-left { 30 | top: 0; 31 | bottom: 0; 32 | left: 0; 33 | } 34 | 35 | @mixin offcanvas-override { 36 | position: unset !important; 37 | z-index: unset !important; 38 | overflow: unset !important; 39 | box-shadow: none !important; 40 | } 41 | 42 | .sm\:offcanvas-override { 43 | @include break-min(w-sm) { 44 | @include offcanvas-override; 45 | } 46 | } 47 | 48 | .md\:offcanvas-override { 49 | @include break-min(w-md) { 50 | @include offcanvas-override; 51 | } 52 | } 53 | 54 | .lg\:offcanvas-override { 55 | @include break-min(w-lg) { 56 | @include offcanvas-override; 57 | } 58 | } -------------------------------------------------------------------------------- /src/codebase/scss/02_components/_tables.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: TABLES 2 | // ~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | .table { 7 | width: 100%; 8 | margin-bottom: var(--t-base-mb); 9 | border-collapse: collapse; 10 | border-spacing: 0; 11 | 12 | &:not(.table-borderless, .table-lined) { 13 | th, 14 | td { 15 | border: var(--line); 16 | } 17 | } 18 | 19 | th, 20 | td { 21 | padding: var(--sp-cell); 22 | vertical-align: top; 23 | text-align: unset; 24 | } 25 | } 26 | 27 | // Table variations 28 | .table { 29 | &-lined { 30 | border-top: var(--line); 31 | border-bottom: var(--line); 32 | tbody tr { 33 | border-top: var(--line); 34 | } 35 | } 36 | &-compact { 37 | th, 38 | td { 39 | padding: 0.25rem 0.5rem; 40 | } 41 | } 42 | 43 | &-fixed { 44 | table-layout: fixed; 45 | } 46 | 47 | &-striped { 48 | thead, 49 | tbody tr:nth-child(even) { 50 | background-color: rgba(255, 255, 255, 0.05); 51 | } 52 | 53 | tbody tr:nth-child(odd) { 54 | background-color: rgba(29, 28, 31, 0.05); 55 | 56 | } 57 | } 58 | } 59 | 60 | // Cell alignments 61 | 62 | [class*=table] .t-center { 63 | text-align: center !important; 64 | } 65 | 66 | [class*=table] .t-right { 67 | text-align: right !important; 68 | } 69 | 70 | [class*=table] .vertical-align { 71 | &-top { 72 | vertical-align: top; 73 | } 74 | 75 | &-middle { 76 | vertical-align: middle; 77 | } 78 | 79 | &-bottom { 80 | vertical-align: bottom; 81 | } 82 | } -------------------------------------------------------------------------------- /src/codebase/scss/02_components/_tabs.scss: -------------------------------------------------------------------------------- 1 | // COMPONENTS: TABS 2 | // ~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | .tablist { 7 | position: relative; 8 | bottom: calc(var(--b-thin) * -1); 9 | } 10 | 11 | .tab { 12 | position: relative; 13 | background-color: var(--c-page-bg-alt); 14 | } 15 | 16 | .tab[aria-selected="true"] { 17 | z-index: 2; 18 | background-color: var(--c-page-bg); 19 | // Remove border-bottom to make tab label look “attached” to its respective panel 20 | border-bottom: 0; 21 | } 22 | 23 | .tabpanel { 24 | position: relative; 25 | z-index: 1; 26 | background-color: var(--c-page-bg); 27 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_aspect-ratios.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: ASPECT RATIOS 2 | // ~~~~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | @mixin aspect-ratio { 7 | 8 | // Image/video aspect ratios 9 | 10 | &-6x16 { 11 | aspect-ratio: 6 / 16; 12 | } 13 | 14 | &-9x16 { 15 | aspect-ratio: 9 / 16; 16 | } 17 | 18 | &-16x9 { 19 | aspect-ratio: 16 / 9; 20 | } 21 | 22 | &-21x9 { 23 | aspect-ratio: 21 / 9; 24 | } 25 | 26 | &-24x9 { 27 | aspect-ratio: 24 / 9; 28 | } 29 | 30 | &-32x9 { 31 | aspect-ratio: 32 / 9; 32 | } 33 | 34 | &-unset { 35 | aspect-ratio: unset; 36 | } 37 | } 38 | 39 | @mixin aspect-ratio-squared-tiles { 40 | &-1x1 { 41 | aspect-ratio: 1 / 1; 42 | } 43 | 44 | &-1x2 { 45 | aspect-ratio: 1 / 2; 46 | } 47 | 48 | &-1x3 { 49 | aspect-ratio: 1 / 3; 50 | } 51 | 52 | &-1x4 { 53 | aspect-ratio: 1 / 4; 54 | } 55 | 56 | &-1x5 { 57 | aspect-ratio: 1 / 5; 58 | } 59 | 60 | &-1x6 { 61 | aspect-ratio: 1 / 6; 62 | } 63 | 64 | &-2x1 { 65 | aspect-ratio: 2 / 1; 66 | } 67 | 68 | &-3x1 { 69 | aspect-ratio: 3 / 1; 70 | } 71 | 72 | &-4x1 { 73 | aspect-ratio: 4 / 1; 74 | } 75 | 76 | &-5x1 { 77 | aspect-ratio: 5 / 1; 78 | } 79 | 80 | &-6x1 { 81 | aspect-ratio: 6 / 1; 82 | } 83 | 84 | &-2x3 { 85 | aspect-ratio: 2 / 3; 86 | } 87 | 88 | &-3x2 { 89 | aspect-ratio: 3 / 2; 90 | } 91 | 92 | &-3x4 { 93 | aspect-ratio: 3 / 4; 94 | } 95 | 96 | &-4x3 { 97 | aspect-ratio: 4 / 3; 98 | } 99 | 100 | &-2x5 { 101 | aspect-ratio: 2 / 5; 102 | } 103 | 104 | &-5x2 { 105 | aspect-ratio: 5 / 2; 106 | } 107 | 108 | &-3x5 { 109 | aspect-ratio: 3 / 5; 110 | } 111 | 112 | &-5x3 { 113 | aspect-ratio: 5 / 3; 114 | } 115 | 116 | &-4x5 { 117 | aspect-ratio: 4 / 5; 118 | } 119 | 120 | &-5x4 { 121 | aspect-ratio: 5 / 4; 122 | } 123 | 124 | &-6x5 { 125 | aspect-ratio: 6 / 5; 126 | } 127 | 128 | &-5x6 { 129 | aspect-ratio: 5 / 6; 130 | } 131 | } 132 | 133 | // Builder 134 | 135 | .aspect-ratio { 136 | @include aspect-ratio; 137 | @include aspect-ratio-squared-tiles; 138 | } 139 | 140 | @each $mq-key, 141 | $mq-value in $mq-width { 142 | @include break-min(#{$mq-value}) { 143 | .#{$mq-key}\:aspect-ratio { 144 | @include aspect-ratio; 145 | @include aspect-ratio-squared-tiles; 146 | } 147 | } 148 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_blocks.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: BLOCKS 2 | // ~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | // For `display: none;` see `_invisibility.scss` 7 | 8 | @mixin block { 9 | display: block; 10 | width: 100%; 11 | } 12 | 13 | .block { 14 | @include block; 15 | } 16 | @each $mq-key, $mq-value in $mq-width { 17 | @include break-min(#{$mq-value}) { 18 | .#{$mq-key}\:block { 19 | @include block; 20 | } 21 | } 22 | } 23 | 24 | @mixin inline-block { 25 | display: inline-block; 26 | width: unset; // overrides for width: 100% on form inputs 27 | } 28 | 29 | .inline-block { 30 | @include inline-block; 31 | } 32 | @each $mq-key, $mq-value in $mq-width { 33 | @include break-min(#{$mq-value}) { 34 | .#{$mq-key}\:inline-block { 35 | @include inline-block; 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: BORDER RADIUS (ROUNDED CORNERS) 2 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | .unrounded { 7 | border-radius: 0; 8 | } 9 | 10 | .rounded { 11 | --rad: var(--rad-md); 12 | border-radius: var(--rad) var(--rad) var(--rad) var(--rad); 13 | &-tl { 14 | border-top-left-radius: var(--rad); 15 | } 16 | &-tr { 17 | border-top-right-radius: var(--rad); 18 | } 19 | &-br { 20 | border-bottom-right-radius: var(--rad); 21 | } 22 | &-bl { 23 | border-bottom-left-radius: var(--rad); 24 | } 25 | 26 | &-sm { 27 | --rad: var(--rad-sm); 28 | } 29 | 30 | &-md { 31 | --rad: var(--rad-md); 32 | } 33 | 34 | &-lg { 35 | --rad: var(--rad-lg); 36 | } 37 | 38 | &-xl { 39 | --rad: var(--rad-xl); 40 | } 41 | 42 | &-pill { 43 | --rad: var(--rad-pill); 44 | } 45 | } 46 | 47 | // .rounded { 48 | // border-radius: var(--rad-md); 49 | 50 | // &-sm { 51 | // border-radius: var(--rad-sm); 52 | // } 53 | 54 | // &-md { 55 | // border-radius: var(--rad-md); 56 | // } 57 | 58 | // &-lg { 59 | // border-radius: var(--rad-lg); 60 | // } 61 | 62 | // &-xl { 63 | // border-radius: var(--rad-xl); 64 | // } 65 | 66 | // &-pill { 67 | // border-radius: var(--rad-pill); 68 | // } 69 | 70 | // &-circle, 71 | // &-full { 72 | // border-radius: var(--rad-circle); 73 | // } 74 | // } 75 | 76 | // .unrounded { 77 | // border-radius: 0; 78 | 79 | // &-top-right { 80 | // border-top-right-radius: 0; 81 | // } 82 | 83 | // &-bottom-right { 84 | // border-bottom-right-radius: 0; 85 | // } 86 | 87 | // &-bottom-left { 88 | // border-bottom-left-radius: 0; 89 | // } 90 | 91 | // &-top-left { 92 | // border-top-left-radius: 0; 93 | // } 94 | 95 | // &-top { 96 | // border-top-left-radius: 0; 97 | // border-top-right-radius: 0; 98 | // } 99 | 100 | // &-right { 101 | // border-top-right-radius: 0; 102 | // border-bottom-right-radius: 0; 103 | // } 104 | 105 | // &-bottom { 106 | // border-bottom-right-radius: 0; 107 | // border-bottom-left-radius: 0; 108 | // } 109 | 110 | // &-left { 111 | // border-bottom-left-radius: 0; 112 | // border-top-left-radius: 0; 113 | // } 114 | // &-all { 115 | // border-radius: 0 116 | // } 117 | // } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_box-model.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: BOX MODEL 2 | // (margin / border / padding) 3 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 4 | 5 | @use "../00_setup/default-variables" as *; 6 | 7 | // EXTRAS -- coded first, so that they can be overridden 8 | // (the main `@each` generator is below the extras) 9 | 10 | // Margin extras 11 | // See mx-auto centering (below) 12 | 13 | // (Border extras -- none) 14 | 15 | // Padding extras 16 | .p-cell, 17 | .p-block { 18 | padding: var(--sp-cell); 19 | } 20 | 21 | // Box model generator 22 | 23 | // All viewports 24 | @each $key, 25 | $val in $spacing { 26 | .m-#{$key} { 27 | margin: $val; 28 | } 29 | 30 | .mt-#{$key} { 31 | margin-top: $val; 32 | } 33 | 34 | .mr-#{$key} { 35 | margin-right: $val; 36 | } 37 | 38 | .mb-#{$key} { 39 | margin-bottom: $val; 40 | } 41 | 42 | .ml-#{$key} { 43 | margin-left: $val; 44 | } 45 | 46 | .my-#{$key} { 47 | margin-block: $val; 48 | } 49 | 50 | .mx-#{$key} { 51 | margin-inline: $val; 52 | } 53 | 54 | .m-auto { 55 | margin: auto; 56 | } 57 | 58 | .mr-auto { 59 | margin-right: auto; 60 | } 61 | 62 | .ml-auto { 63 | margin-left: auto; 64 | } 65 | 66 | .mx-auto { 67 | margin-inline: auto; 68 | } 69 | 70 | .p-#{$key} { 71 | padding: $val; 72 | } 73 | 74 | .pt-#{$key} { 75 | padding-top: $val; 76 | } 77 | 78 | .pr-#{$key} { 79 | padding-right: $val; 80 | } 81 | 82 | .pb-#{$key} { 83 | padding-bottom: $val; 84 | } 85 | 86 | .pl-#{$key} { 87 | padding-left: $val; 88 | } 89 | 90 | .py-#{$key} { 91 | padding-block: $val; 92 | } 93 | 94 | .px-#{$key} { 95 | padding-inline: $val; 96 | } 97 | } 98 | 99 | @each $key, 100 | $val in $borders { 101 | .#{$key}-0 { 102 | #{$val}: none !important; 103 | } 104 | 105 | .#{$key}-dashed { 106 | #{$val}: var(--b-thin) dashed var(--c-detail); 107 | } 108 | 109 | .#{$key}-thin { 110 | #{$val}: var(--b-thin) solid var(--c-detail); 111 | } 112 | 113 | .#{$key}-thick { 114 | #{$val}: var(--b-thick) solid var(--c-detail); 115 | } 116 | 117 | .#{$key}-heavy { 118 | #{$val}: var(--b-heavy) solid var(--c-detail); 119 | } 120 | } 121 | 122 | // MQ responsive 123 | @each $mq-key, 124 | $mq-value in $mq-width { 125 | @include break-min(#{$mq-value}) { 126 | 127 | @each $key, 128 | $val in $spacing { 129 | .#{$mq-key}\:m-#{$key} { 130 | margin: $val; 131 | } 132 | 133 | .#{$mq-key}\:mt-#{$key} { 134 | margin-top: $val; 135 | } 136 | 137 | .#{$mq-key}\:mr-#{$key} { 138 | margin-right: $val; 139 | } 140 | 141 | .#{$mq-key}\:mb-#{$key} { 142 | margin-bottom: $val; 143 | } 144 | 145 | .#{$mq-key}\:ml-#{$key} { 146 | margin-left: $val; 147 | } 148 | 149 | .#{$mq-key}\:my-#{$key} { 150 | margin-block: $val; 151 | } 152 | 153 | .#{$mq-key}\:mx-#{$key} { 154 | margin-inline: $val; 155 | } 156 | 157 | .#{$mq-key}\:mr-auto { 158 | margin-right: auto; 159 | } 160 | 161 | .#{$mq-key}\:ml-auto { 162 | margin-left: auto; 163 | } 164 | 165 | .#{$mq-key}\:mx-auto { 166 | margin-inline: auto; 167 | } 168 | 169 | .#{$mq-key}\:p-#{$key} { 170 | padding: $val; 171 | } 172 | 173 | .#{$mq-key}\:pt-#{$key} { 174 | padding-top: $val; 175 | } 176 | 177 | .#{$mq-key}\:pr-#{$key} { 178 | padding-right: $val; 179 | } 180 | 181 | .#{$mq-key}\:pb-#{$key} { 182 | padding-bottom: $val; 183 | } 184 | 185 | .#{$mq-key}\:pl-#{$key} { 186 | padding-left: $val; 187 | } 188 | 189 | .#{$mq-key}\:py-#{$key} { 190 | padding-block: $val; 191 | } 192 | 193 | .#{$mq-key}\:px-#{$key} { 194 | padding-inline: $val; 195 | } 196 | 197 | .#{$mq-key}\:p-block { 198 | padding: var(--sp-cell); 199 | } 200 | } 201 | 202 | @each $key, 203 | $val in $borders { 204 | .#{$mq-key}\:#{$key}-0 { 205 | #{$val}: 0; 206 | } 207 | 208 | .#{$mq-key}\:#{$key}-dashed { 209 | #{$val}: var(--b-thin) dashed var(--c-detail); 210 | } 211 | 212 | .#{$mq-key}\:#{$key}-thin { 213 | #{$val}: var(--b-thin) solid var(--c-detail); 214 | } 215 | 216 | .#{$mq-key}\:#{$key}-thick { 217 | #{$val}: var(--b-thick) solid var(--c-detail); 218 | } 219 | 220 | .#{$mq-key}\:#{$key}-heavy { 221 | #{$val}: var(--b-heavy) solid var(--c-detail); 222 | } 223 | } 224 | } 225 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_box-shadows.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: BOX SHADOWS 2 | // ~~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | .bs-0 { 7 | box-shadow: none; 8 | } 9 | 10 | // see responsive bs-0 below 11 | 12 | .bs-1, 13 | .hover\:bs-1:hover { 14 | transition: box-shadow 0.15s ease-in-out; 15 | box-shadow: 16 | // z-axis lift 17 | 0 1px 4px rgba(0, 0, 0, .25), 18 | // spread 19 | 0 2px 12px rgba(0, 0, 0, .05); 20 | } 21 | 22 | .bs-2, 23 | .hover\:bs-2:hover { 24 | transition: box-shadow 0.15s ease-in-out; 25 | box-shadow: 26 | // z-axis lift 27 | 0 2px 8px rgba(0, 0, 0, .2), 28 | // spread 29 | 0 4px 24px rgba(0, 0, 0, .1); 30 | } 31 | 32 | .bs-3, 33 | .hover\:bs-3:hover { 34 | transition: box-shadow 0.15s ease-in-out; 35 | box-shadow: 36 | // z-axis lift 37 | 0 4px 12px rgba(0, 0, 0, .15), 38 | // spread 39 | 0 8px 48px rgba(0, 0, 0, .1); 40 | } 41 | 42 | .bs-4, 43 | .hover\:bs-4:hover { 44 | transition: box-shadow 0.15s ease-in-out; 45 | box-shadow: 46 | // z-axis lift 47 | 0 8px 24px rgba(0, 0, 0, .1), 48 | // spread 49 | 0 16px 60px rgba(0, 0, 0, .1); 50 | } 51 | 52 | .bs-5, 53 | .hover\:bs-5:hover { 54 | transition: box-shadow 0.15s ease-in-out; 55 | box-shadow: 56 | // z-axis lift 57 | 0 12px 48px rgba(0, 0, 0, .075), 58 | // spread 59 | 0 24px 84px rgba(0, 0, 0, .075); 60 | } 61 | 62 | @each $mq-key, 63 | $mq-value in $mq-width { 64 | @include break-min(#{$mq-value}) { 65 | .#{$mq-key}\:bs-0 { 66 | box-shadow: none; 67 | } 68 | } 69 | } 70 | 71 | @each $mq-key, 72 | $mq-value in $mq-width { 73 | @include break-max(#{$mq-value}) { 74 | .#{$mq-key}\:bs-0-below { 75 | box-shadow: none; 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_colors.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: COLORS 2 | // ~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | // .bg- background color 7 | // .t- text color 8 | // .b- border color 9 | 10 | 11 | // UI colors 12 | @if $ui-color-utilities == true { 13 | @each $key, 14 | $val in $ui-color { 15 | .bg-#{$key} { 16 | background-color: $val 17 | } 18 | 19 | .t-#{$key} { 20 | color: $val 21 | } 22 | 23 | .b-#{$key} { 24 | border-color: $val 25 | } 26 | } 27 | } 28 | 29 | // Shades of named theme colors 30 | @if $color-shade-utilities == true { 31 | 32 | @each $key, $val in $theme-color { 33 | 34 | @each $key2, $val2 in $lightness { 35 | 36 | .b-#{$key}-#{$key2}, 37 | .hover\:b-#{$key}-#{$key2}:hover { 38 | border-color: var(--#{$key}-#{$key2}); 39 | } 40 | 41 | .bg-#{$key}-#{$key2}, 42 | .hover\:bg-#{$key}-#{$key2}:hover { 43 | background-color: var(--#{$key}-#{$key2}); 44 | } 45 | 46 | .t-#{$key}-#{$key2}, 47 | .hover\:t-#{$key}-#{$key2}:hover { 48 | color: var(--#{$key}-#{$key2}); 49 | } 50 | } 51 | } 52 | } 53 | 54 | [class*="hover"] { 55 | transition: var(--ease); 56 | } 57 | 58 | .bg-under-border { 59 | background-origin: border-box; 60 | } 61 | 62 | .bg-transparent, 63 | .hover\:bg-transparent:hover { 64 | background-color: transparent; 65 | } 66 | 67 | .b-transparent, 68 | .hover\:b-transparent:hover { 69 | border-color: transparent; 70 | } 71 | 72 | .bg-white, 73 | .hover\:bg-white:hover { 74 | background-color: white; 75 | } 76 | 77 | .t-white, 78 | .hover\:t-white:hover { 79 | color: white; 80 | } 81 | 82 | .b-white, 83 | .hover\:b-white:hover { 84 | border-color: white; 85 | } 86 | 87 | .bg-black, 88 | .hover\:bg-black:hover { 89 | background-color: black; 90 | } 91 | 92 | .t-black, 93 | .hover\:t-black:hover { 94 | color: black; 95 | } 96 | 97 | .b-black, 98 | .hover\:b-black:hover { 99 | border-color: black; 100 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_containers.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: CONTAINERS 2 | // ~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | .container { 7 | width: min(100% - (var(--container-x) * 2), var(--container)); 8 | margin-inline: auto; 9 | &-xxl { 10 | width: min(100% - (var(--container-x) * 2), var(--w-xxl)); 11 | margin-inline: auto; 12 | } 13 | 14 | &-xl { 15 | width: min(100% - (var(--container-x) * 2), var(--w-xl)); 16 | margin-inline: auto; 17 | } 18 | 19 | &-lg { 20 | width: min(100% - (var(--container-x) * 2), var(--w-lg)); 21 | margin-inline: auto; 22 | } 23 | 24 | &-md { 25 | width: min(100% - (var(--container-x) * 2), var(--w-md)); 26 | margin-inline: auto; 27 | } 28 | 29 | &-sm { 30 | width: min(100% - (var(--container-x) * 2), var(--w-sm)); 31 | margin-inline: auto; 32 | } 33 | 34 | &-xs { 35 | width: min(100% - (var(--container-x) * 2), var(--w-xs)); 36 | margin-inline: auto; 37 | } 38 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_dimensions.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: DIMENSIONS 2 | // ~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | @use "sass:math"; 6 | 7 | @mixin widths { 8 | &-xxs { 9 | width: min(100%, var(--w-xxs)); 10 | } 11 | 12 | &-xs { 13 | width: min(100%, var(--w-xs)); 14 | } 15 | 16 | &-sm { 17 | width: min(100%, var(--w-sm)); 18 | } 19 | 20 | &-md { 21 | width: min(100%, var(--w-md)); 22 | } 23 | 24 | &-lg { 25 | width: min(100%, var(--w-lg)); 26 | } 27 | 28 | &-xl { 29 | width: min(100%, var(--w-xl)); 30 | } 31 | 32 | &-xxl { 33 | width: min(100%, var(--w-xxl)); 34 | } 35 | 36 | &-auto { 37 | max-width: unset; 38 | width: auto !important; 39 | } 40 | 41 | &-fit-content { 42 | width: fit-content; 43 | } 44 | } 45 | 46 | .w { 47 | @include widths; 48 | } 49 | 50 | @each $mq-key, 51 | $mq-value in $mq-width { 52 | @include break-min(#{$mq-value}) { 53 | .#{$mq-key}\:w { 54 | @include widths; 55 | } 56 | } 57 | } 58 | 59 | .w { 60 | 61 | &-100\% { 62 | width: 100%; 63 | } 64 | 65 | &-max-100\% { 66 | max-width: 100%; 67 | } 68 | 69 | &-100vw { 70 | width: 100vw; 71 | } 72 | 73 | &-max-100vw { 74 | max-width: 100vw; 75 | } 76 | } 77 | 78 | .h { 79 | &-100\% { 80 | height: 100%; 81 | } 82 | 83 | &-max-100\% { 84 | max-height: 100%; 85 | } 86 | 87 | &-50vh { 88 | min-height: 50vh; 89 | } 90 | 91 | &-100vh, 92 | &-100dvh { 93 | min-height: 100dvh; 94 | } 95 | 96 | &-max-100vh, 97 | &-max-100dvh { 98 | max-height: 100dvh; 99 | } 100 | } 101 | 102 | // Squares 103 | 104 | .square { 105 | min-width: var(--sq); 106 | width: var(--sq); 107 | min-height: var(--sq); 108 | height: var(--sq); 109 | 110 | &-sm { 111 | min-width: var(--sq-sm); 112 | width: var(--sq-sm); 113 | min-height: var(--sq-sm); 114 | height: var(--sq-sm); 115 | } 116 | 117 | &-md { 118 | min-width: var(--sq); 119 | width: var(--sq); 120 | min-height: var(--sq); 121 | height: var(--sq); 122 | } 123 | 124 | &-lg { 125 | min-width: var(--sq-lg); 126 | width: var(--sq-lg); 127 | min-height: var(--sq-lg); 128 | height: var(--sq-lg); 129 | } 130 | } 131 | 132 | @each $mq-key, 133 | $mq-value in $mq-width { 134 | @include break-min(#{$mq-value}) { 135 | .#{$mq-key}\:square { 136 | min-width: var(--sq); 137 | width: var(--sq); 138 | min-height: var(--sq); 139 | height: var(--sq); 140 | 141 | &-sm { 142 | min-width: var(--sq-sm); 143 | width: var(--sq-sm); 144 | min-height: var(--sq-sm); 145 | height: var(--sq-sm); 146 | } 147 | 148 | &-md { 149 | min-width: var(--sq); 150 | width: var(--sq); 151 | min-height: var(--sq); 152 | height: var(--sq); 153 | } 154 | 155 | &-lg { 156 | min-width: var(--sq-lg); 157 | width: var(--sq-lg); 158 | min-height: var(--sq-lg); 159 | height: var(--sq-lg); 160 | } 161 | } 162 | } 163 | } 164 | 165 | // Box stretching (requires a `.relative` wrapper) 166 | 167 | .box { 168 | position: absolute; 169 | inset: 0; 170 | 171 | &.fixed { 172 | position: fixed; 173 | } 174 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_flexbox.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: FLEXBOX 2 | // ~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | @use "sass:math"; 6 | 7 | // For flexbox gap -- see grid (it's the same) 8 | 9 | @mixin flex { 10 | display: flex; 11 | 12 | &-wrap { 13 | flex-wrap: wrap; 14 | } 15 | 16 | &-row { 17 | flex-direction: row; 18 | } 19 | 20 | &-row-reverse { 21 | flex-direction: row-reverse; 22 | } 23 | 24 | &-column { 25 | flex-direction: column; 26 | } 27 | 28 | &-column-reverse { 29 | flex-direction: column-reverse; 30 | } 31 | 32 | // Stretching 33 | &-grow-equal { 34 | >* { 35 | flex: 1; 36 | } 37 | } 38 | 39 | &-grow-auto { 40 | >* { 41 | flex: auto; 42 | } 43 | } 44 | 45 | // Spacing 46 | &-space-around { 47 | justify-content: space-around; 48 | } 49 | 50 | &-space-between { 51 | justify-content: space-between; 52 | } 53 | 54 | &-space-evenly { 55 | justify-content: space-evenly; 56 | } 57 | 58 | // Positioning 59 | &-start { 60 | justify-content: flex-start; 61 | } 62 | 63 | &-center { 64 | justify-content: center; 65 | } 66 | 67 | &-end { 68 | justify-content: flex-end; 69 | } 70 | 71 | &-top { 72 | align-items: flex-start; 73 | } 74 | 75 | &-middle { 76 | align-items: center; 77 | } 78 | 79 | &-bottom { 80 | align-items: flex-end; 81 | } 82 | } 83 | 84 | .inline-flex { 85 | display: inline-flex; 86 | } 87 | 88 | @each $mq-key, 89 | $mq-value in $mq-width { 90 | .#{$mq-key}\:inline-flex { 91 | @include break-min(#{$mq-value}) { 92 | display: inline-flex; 93 | } 94 | } 95 | } 96 | 97 | .flex { 98 | @include flex; 99 | } 100 | 101 | @each $mq-key, 102 | $mq-value in $mq-width { 103 | .#{$mq-key}\:flex { 104 | @include break-min(#{$mq-value}) { 105 | @include flex; 106 | } 107 | } 108 | } 109 | 110 | // Individual flex items 111 | .grow { 112 | flex-grow: 1; 113 | } 114 | 115 | .order-start { 116 | order: 0; 117 | } 118 | 119 | .order-end { 120 | order: 9999; 121 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_floats.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: FLOATS 2 | // ~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | .float { 7 | &-left { 8 | float: left; 9 | } 10 | &-right { 11 | float: right; 12 | } 13 | } 14 | 15 | .clearfix { 16 | &:before, 17 | &:after { 18 | content: ''; 19 | display: table; 20 | } 21 | &:after { 22 | clear: both; 23 | } 24 | } 25 | 26 | @each $mq-key, $mq-value in $mq-width { 27 | .#{$mq-key}\:float-left { 28 | @include break-min(#{$mq-value}) { 29 | float: left; 30 | } 31 | } 32 | .#{$mq-key}\:float-right { 33 | @include break-min(#{$mq-value}) { 34 | float: right; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_glass.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: GLASS 2 | // ~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | // Black glassmorphic 7 | .bg-black-glass-1 { 8 | background-color: rgba(0, 0, 0, var(--alpha-1)); 9 | -webkit-backdrop-filter: var(--glass-1); 10 | backdrop-filter: var(--glass-1); 11 | } 12 | .bg-black-glass-2 { 13 | background-color: rgba(0, 0, 0, var(--alpha-2)); 14 | -webkit-backdrop-filter: var(--glass-2); 15 | backdrop-filter: var(--glass-2); 16 | } 17 | .bg-black-glass-3 { 18 | background-color: rgba(0, 0, 0, var(--alpha-3)); 19 | -webkit-backdrop-filter: var(--glass-3); 20 | backdrop-filter: var(--glass-3); 21 | } 22 | .bg-black-glass-4 { 23 | background-color: rgba(0, 0, 0, var(--alpha-4)); 24 | -webkit-backdrop-filter: var(--glass-4); 25 | backdrop-filter: var(--glass-4); 26 | } 27 | .bg-black-glass-5 { 28 | background-color: rgba(0, 0, 0, var(--alpha-5)); 29 | -webkit-backdrop-filter: var(--glass-5); 30 | backdrop-filter: var(--glass-5); 31 | } 32 | 33 | // White glassmorphic 34 | .bg-white-glass-1 { 35 | background-color: rgba(255, 255, 255, var(--alpha-1)); 36 | -webkit-backdrop-filter: var(--glass-1); 37 | backdrop-filter: var(--glass-1); 38 | } 39 | .bg-white-glass-2 { 40 | background-color: rgba(255, 255, 255, var(--alpha-2)); 41 | backdrop-filter: var(--glass-2); 42 | -webkit-backdrop-filter: var(--glass-2); 43 | } 44 | .bg-white-glass-3 { 45 | background-color: rgba(255, 255, 255, var(--alpha-3)); 46 | -webkit-backdrop-filter: var(--glass-3); 47 | backdrop-filter: var(--glass-3); 48 | } 49 | .bg-white-glass-4 { 50 | background-color: rgba(255, 255, 255, var(--alpha-4)); 51 | -webkit-backdrop-filter: var(--glass-4); 52 | backdrop-filter: var(--glass-4); 53 | } 54 | .bg-white-glass-5 { 55 | background-color: rgba(255, 255, 255, var(--alpha-5)); 56 | -webkit-backdrop-filter: var(--glass-5); 57 | backdrop-filter: var(--glass-5); 58 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_grid.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: GRID 2 | // ~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | @mixin grid-auto { 7 | &-2-cols { 8 | grid-template-columns: repeat(2, minmax(1rem, auto)); 9 | } 10 | 11 | &-3-cols { 12 | grid-template-columns: repeat(3, minmax(1rem, auto)); 13 | } 14 | 15 | &-4-cols { 16 | grid-template-columns: repeat(4, minmax(1rem, auto)); 17 | } 18 | 19 | &-5-cols { 20 | grid-template-columns: repeat(5, minmax(1rem, auto)); 21 | } 22 | 23 | &-6-cols { 24 | grid-template-columns: repeat(6, minmax(1rem, auto)); 25 | } 26 | } 27 | 28 | @mixin grid-equal { 29 | &-2-cols { 30 | grid-template-columns: repeat(2, minmax(1rem, 1fr)); 31 | } 32 | 33 | &-3-cols { 34 | grid-template-columns: repeat(3, minmax(1rem, 1fr)); 35 | } 36 | 37 | &-4-cols { 38 | grid-template-columns: repeat(4, minmax(1rem, 1fr)); 39 | } 40 | 41 | &-5-cols { 42 | grid-template-columns: repeat(5, minmax(1rem, 1fr)); 43 | } 44 | 45 | &-6-cols { 46 | grid-template-columns: repeat(6, minmax(1rem, 1fr)); 47 | } 48 | } 49 | 50 | @mixin grid-columns { 51 | &-1 { 52 | grid-column: 1 53 | } 54 | 55 | &s-1-2 { 56 | grid-column: 1 / span 2 57 | } 58 | 59 | &s-1-3 { 60 | grid-column: 1 / span 3 61 | } 62 | 63 | &s-1-4 { 64 | grid-column: 1 / span 4 65 | } 66 | 67 | &s-1-5 { 68 | grid-column: 1 / span 5 69 | } 70 | 71 | &s-1-6 { 72 | grid-column: 1 / span 6 73 | } 74 | 75 | &-2 { 76 | grid-column: 2 77 | } 78 | 79 | &s-2-3 { 80 | grid-column: 2 / span 2 81 | } 82 | 83 | &s-2-4 { 84 | grid-column: 2 / span 3 85 | } 86 | 87 | &s-2-5 { 88 | grid-column: 2 / span 4 89 | } 90 | 91 | &s-2-6 { 92 | grid-column: 2 / span 5 93 | } 94 | 95 | &-3 { 96 | grid-column: 3 97 | } 98 | 99 | &s-3-4 { 100 | grid-column: 3 / span 2 101 | } 102 | 103 | &s-3-5 { 104 | grid-column: 3 / span 3 105 | } 106 | 107 | &s-3-6 { 108 | grid-column: 3 / span 4 109 | } 110 | 111 | &-4 { 112 | grid-column: 4 113 | } 114 | 115 | &s-4-5 { 116 | grid-column: 4 / span 2 117 | } 118 | 119 | &s-4-6 { 120 | grid-column: 4 / span 3 121 | } 122 | 123 | &-5 { 124 | grid-column: 5 125 | } 126 | 127 | &s-5-6 { 128 | grid-column: 5 / span 2 129 | } 130 | 131 | &-6 { 132 | grid-column: 6 133 | } 134 | } 135 | 136 | @mixin grid-rows { 137 | &-1 { 138 | grid-row: 1 139 | } 140 | 141 | &s-1-2 { 142 | grid-row: 1 / span 2 143 | } 144 | 145 | &s-1-3 { 146 | grid-row: 1 / span 3 147 | } 148 | 149 | &s-1-4 { 150 | grid-row: 1 / span 4 151 | } 152 | 153 | &s-1-5 { 154 | grid-row: 1 / span 5 155 | } 156 | 157 | &s-1-6 { 158 | grid-row: 1 / span 6 159 | } 160 | 161 | &-2 { 162 | grid-row: 2 163 | } 164 | 165 | &s-2-3 { 166 | grid-row: 2 / span 2 167 | } 168 | 169 | &s-2-4 { 170 | grid-row: 2 / span 3 171 | } 172 | 173 | &s-2-5 { 174 | grid-row: 2 / span 4 175 | } 176 | 177 | &s-2-6 { 178 | grid-row: 2 / span 5 179 | } 180 | 181 | &-3 { 182 | grid-row: 3 183 | } 184 | 185 | &s-3-4 { 186 | grid-row: 3 / span 2 187 | } 188 | 189 | &s-3-5 { 190 | grid-row: 3 / span 3 191 | } 192 | 193 | &s-3-6 { 194 | grid-row: 3 / span 4 195 | } 196 | 197 | &-4 { 198 | grid-row: 4 199 | } 200 | 201 | &s-4-5 { 202 | grid-row: 4 / span 2 203 | } 204 | 205 | &s-4-6 { 206 | grid-row: 4 / span 3 207 | } 208 | 209 | &-5 { 210 | grid-row: 5 211 | } 212 | 213 | &s-5-6 { 214 | grid-row: 5 / span 2 215 | } 216 | 217 | &-6 { 218 | grid-row: 6 219 | } 220 | } 221 | 222 | .grid { 223 | display: grid; 224 | 225 | &-dense { 226 | grid-auto-flow: dense; 227 | } 228 | } 229 | 230 | .auto { 231 | @include grid-auto; 232 | } 233 | 234 | .equal { 235 | @include grid-equal; 236 | } 237 | 238 | .col { 239 | @include grid-columns; 240 | } 241 | 242 | .row { 243 | @include grid-rows 244 | } 245 | 246 | @mixin gap { 247 | 248 | @each $key, 249 | $val in $spacing { 250 | &-#{$key} { 251 | gap: $val; 252 | } 253 | } 254 | } 255 | 256 | @mixin col-gap { 257 | 258 | @each $key, 259 | $val in $spacing { 260 | &-#{$key} { 261 | column-gap: $val; 262 | } 263 | } 264 | } 265 | 266 | @mixin row-gap { 267 | 268 | @each $key, 269 | $val in $spacing { 270 | &-#{$key} { 271 | row-gap: $val; 272 | } 273 | } 274 | } 275 | 276 | .gap { 277 | @include gap; 278 | } 279 | 280 | .col-gap { 281 | @include col-gap; 282 | } 283 | 284 | .row-gap { 285 | @include row-gap; 286 | } 287 | 288 | @each $mq-key, 289 | $mq-value in $mq-width { 290 | .#{$mq-key} { 291 | @include break-min(#{$mq-value}) { 292 | &\:grid { 293 | display: grid; 294 | } 295 | 296 | &\:auto { 297 | @include grid-auto; 298 | } 299 | 300 | &\:equal { 301 | @include grid-equal; 302 | } 303 | 304 | &\:gap { 305 | @include gap; 306 | } 307 | 308 | &\:col-gap { 309 | @include col-gap; 310 | } 311 | 312 | &\:row-gap { 313 | @include row-gap; 314 | } 315 | 316 | &\:col { 317 | @include grid-columns; 318 | } 319 | 320 | &\:row { 321 | @include grid-rows 322 | } 323 | } 324 | } 325 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_images.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: IMAGES 2 | // ~~~~~~~~~~~~~~~~~ 3 | 4 | img { 5 | display: block; 6 | max-width: 100%; 7 | height: auto; 8 | } 9 | 10 | .img-cover { 11 | width: 100%; 12 | height: 100%; 13 | object-fit: cover !important; 14 | object-position: center; 15 | overflow: clip; 16 | 17 | &-right-top { 18 | object-position: right top; 19 | } 20 | 21 | &-right { 22 | object-position: right; 23 | } 24 | 25 | &-right-bottom { 26 | object-position: right bottom; 27 | } 28 | 29 | &-bottom { 30 | object-position: bottom; 31 | } 32 | 33 | &-left-bottom { 34 | object-position: left bottom; 35 | } 36 | 37 | &-left { 38 | object-position: left; 39 | } 40 | 41 | &-left-top { 42 | object-position: left top; 43 | } 44 | 45 | &-top { 46 | object-position: top; 47 | } 48 | } 49 | 50 | .img-contain { 51 | width: 100%; 52 | height: 100%; 53 | object-fit: contain !important; 54 | } 55 | 56 | .img-grayscale { 57 | filter: grayscale(100%); 58 | } 59 | 60 | .img-blur { 61 | filter: blur(5px); 62 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_invisibility.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: INVISIBILITY 2 | // ~~~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | .hidden { // all viewports 7 | display: none; 8 | } 9 | 10 | @each $mq-key, $mq-value in $mq-width { 11 | @include break-max(#{$mq-value}) { 12 | .#{$mq-key}\:hidden-below { 13 | display: none !important; 14 | } 15 | } 16 | } 17 | 18 | @each $mq-key, $mq-value in $mq-width { 19 | @include break-min(#{$mq-value}) { 20 | .#{$mq-key}\:hidden { 21 | display: none !important; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_overflows.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: OVERFLOWS 2 | // ~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | .overflow-x { 7 | overflow-x: auto; 8 | -webkit-overflow-scrolling: touch; 9 | max-width: 100vw; 10 | } 11 | .overflow-x > table[class*=table] { 12 | margin: 0; 13 | } 14 | 15 | .overflow-y { 16 | overflow-y: auto; 17 | -webkit-overflow-scrolling: touch; 18 | max-height: 100vh; 19 | } 20 | .overflow-xy { 21 | overflow: auto; 22 | -webkit-overflow-scrolling: touch; 23 | max-width: 100vw; 24 | max-height: 100vh; 25 | } 26 | 27 | .overflow-hidden, 28 | .overflow-clip { 29 | overflow: hidden; 30 | overflow: clip; 31 | } 32 | 33 | .overflow-visible { 34 | overflow: visible; 35 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_positions.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: LAYOUT 2 | // ~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | .relative { 7 | position: relative; 8 | } 9 | 10 | .absolute { 11 | position: absolute; 12 | } 13 | 14 | .fixed { 15 | position: fixed; 16 | } 17 | 18 | .static { 19 | position: static; 20 | } 21 | 22 | .z-index-1 { 23 | z-index: 1; 24 | } 25 | 26 | .z-index-2 { 27 | z-index: 2; 28 | } 29 | 30 | .z-index-3 { 31 | z-index: 3; 32 | } 33 | 34 | .z-index-997 { 35 | z-index: 997; 36 | } 37 | 38 | .z-index-998 { 39 | z-index: 998; 40 | } 41 | 42 | .z-index-999 { 43 | z-index: 999; 44 | } 45 | 46 | @mixin sticky { 47 | position: sticky; 48 | top: 0; 49 | } 50 | 51 | .sticky { 52 | @include sticky; 53 | } 54 | 55 | .top { 56 | top: 0; 57 | } 58 | 59 | .right { 60 | right: 0; 61 | } 62 | 63 | .bottom { 64 | bottom: 0; 65 | } 66 | 67 | .left { 68 | left: 0; 69 | } 70 | 71 | @each $mq-key, $mq-value in $mq-width { 72 | @include break-min(#{$mq-value}) { 73 | .#{$mq-key}\:sticky { 74 | @include sticky; 75 | } 76 | 77 | .#{$mq-key}\:fixed { 78 | position: fixed; 79 | } 80 | 81 | .#{$mq-key}\:absolute { 82 | position: absolute; 83 | } 84 | 85 | .#{$mq-key}\:relative { 86 | position: relative; 87 | } 88 | 89 | .#{$mq-key}\:static { 90 | position: static; 91 | } 92 | 93 | .#{$mq-key}\:top { 94 | top: 0 95 | } 96 | 97 | .#{$mq-key}\:right { 98 | right: 0; 99 | } 100 | 101 | .#{$mq-key}\:bottom { 102 | bottom: 0; 103 | } 104 | 105 | .#{$mq-key}\:left { 106 | left: 0; 107 | } 108 | } 109 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_transformations.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: TRANSFORMATIONS 2 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | .translate { 5 | &-up-100\% { 6 | transform: translateY(-100%); 7 | } 8 | &-left-100\% { 9 | transform: translateX(-100%); 10 | } 11 | &-bottom-100\% { 12 | transform: translateY(100%); 13 | } 14 | &-right-100\% { 15 | transform: translateX(100%); 16 | } 17 | &-0 { 18 | transform: translate3d(0); 19 | } 20 | } 21 | 22 | .scale { 23 | &-200\% { 24 | transform: scale(2); 25 | } 26 | &-175\% { 27 | transform: scale(1.75); 28 | } 29 | &-150\% { 30 | transform: scale(1.5); 31 | } 32 | &-125\% { 33 | transform: scale(1.25); 34 | } 35 | &-100\% { 36 | transform: scale(1); 37 | } 38 | &-75\% { 39 | transform: scale(.75); 40 | } 41 | &-50\% { 42 | transform: scale(.5); 43 | } 44 | &-25\% { 45 | transform: scale(.25); 46 | } 47 | &-0 { 48 | transform: scale(0); 49 | } 50 | } 51 | 52 | .rotate { 53 | &-90 { 54 | transform: rotate(90deg); 55 | } 56 | &-minus-90 { 57 | transform: rotate(-90deg); 58 | } 59 | &-180 { 60 | transform: rotate(180deg); 61 | } 62 | &-minus-180 { 63 | transform: rotate(-180deg); 64 | } 65 | &-270 { 66 | transform: rotate(270deg); 67 | } 68 | } 69 | 70 | .flip { 71 | perspective: 1000px; 72 | //-webkit-perspective: 1000px; 73 | } 74 | 75 | .flip-x { 76 | transform: rotateX(180deg); 77 | transform: rotateY(0); 78 | } 79 | 80 | .flip-y { 81 | transform: rotateX(0); 82 | transform: rotateY(180deg); 83 | } 84 | 85 | .backface-hidden { 86 | backface-visibility: hidden; 87 | } 88 | 89 | .preserve-3d { 90 | transform-style: preserve-3d; 91 | } 92 | 93 | .transform-origin { 94 | &-top { 95 | transform-origin: top; 96 | } 97 | &-top-right { 98 | transform-origin: top right; 99 | } 100 | &-top-left { 101 | transform-origin: top left; 102 | } 103 | &-right { 104 | transform-origin: right; 105 | } 106 | &-bottom-right { 107 | transform-origin: bottom right; 108 | } 109 | &-bottom { 110 | transform-origin: bottom; 111 | } 112 | &-bottom-left { 113 | transform-origin: bottom left; 114 | } 115 | &-left { 116 | transform-origin: left; 117 | } 118 | } 119 | 120 | .opacity { 121 | &-100\% { 122 | opacity: 1; 123 | } 124 | &-75\% { 125 | opacity: .75; 126 | } 127 | &-50\% { 128 | opacity: .5; 129 | } 130 | &-25\% { 131 | opacity: .25; 132 | } 133 | &-0 { 134 | opacity: 0; 135 | } 136 | } 137 | 138 | .hover\:opacity { 139 | &-100\%:hover { 140 | opacity: 1; 141 | } 142 | &-75\%:hover { 143 | opacity: .75; 144 | } 145 | &-50\%:hover { 146 | opacity: .5; 147 | } 148 | &-25\%:hover { 149 | opacity: .25; 150 | } 151 | &-0:hover { 152 | opacity: 0; 153 | } 154 | } 155 | 156 | @keyframes fadeIn { 157 | 0% { opacity:0; } 158 | 100% { opacity:1; } 159 | } 160 | 161 | @keyframes fadeOut { 162 | 0% { opacity:1; } 163 | 100% { opacity:0; } 164 | } 165 | 166 | @keyframes scaleIn { 167 | 0% { transform: scale(.75); } 168 | 100% { transform: scale(1); } 169 | } 170 | 171 | @keyframes scaleOut { 172 | 0% { transform: scale(1); } 173 | 100% { transform: scale(.75); } 174 | } 175 | 176 | .fade-in { 177 | animation: fadeIn 300ms; 178 | } 179 | 180 | .fade-out { 181 | animation: fadeOut 300ms; 182 | opacity: 0; 183 | } 184 | 185 | .scale-in { 186 | animation: scaleIn 300ms; 187 | } 188 | 189 | .scale-out { 190 | animation: scaleOut 300ms; 191 | transform: scale(.75); 192 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_transitions.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: TRANSITIONS 2 | // ~~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | .transition-all-150ms { 5 | transition: all 150ms ease-in-out; 6 | } 7 | .transition-all-300ms { 8 | transition: all 300ms ease-in-out; 9 | } 10 | .transition-all-600ms { 11 | transition: all 600ms ease-in-out; 12 | } 13 | .transition-all-900ms { 14 | transition: all 900ms ease-in-out; 15 | } 16 | .transition-all-1200ms { 17 | transition: all 1200ms ease-in-out; 18 | } 19 | .transition-all-1800ms { 20 | transition: all 1800ms ease-in-out; 21 | } 22 | .transition-all-1500ms { 23 | transition: all 1500ms ease-in-out; 24 | } 25 | .transition-all-2400ms { 26 | transition: all 2400ms ease-in-out; 27 | } 28 | 29 | .transition-transform-150ms { 30 | transition: transform 150ms ease-in-out; 31 | } 32 | .transition-transform-300ms { 33 | transition: transform 300ms ease-in-out; 34 | } 35 | .transition-transform-600ms { 36 | transition: transform 600ms ease-in-out; 37 | } 38 | .transition-transform-900ms { 39 | transition: transform 900ms ease-in-out; 40 | } 41 | .transition-transform-1200ms { 42 | transition: transform 1200ms ease-in-out; 43 | } 44 | .transition-transform-1500ms { 45 | transition: transform 1500ms ease-in-out; 46 | } 47 | .transition-transform-1800ms { 48 | transition: transform 1800ms ease-in-out; 49 | } 50 | .transition-transform-2400ms { 51 | transition: transform 2400ms ease-in-out; 52 | } -------------------------------------------------------------------------------- /src/codebase/scss/03_utilities/_typography.scss: -------------------------------------------------------------------------------- 1 | // UTILITIES: TYPOGRAPHIC 2 | // ~~~~~~~~~~~~~~~~~~~~~~ 3 | 4 | @use "../00_setup/default-variables" as *; 5 | 6 | // Also see `.t-` colors. 7 | 8 | // Text alignment 9 | @mixin text-alignment { 10 | &-left { 11 | text-align: left; 12 | } 13 | 14 | &-center { 15 | text-align: center; 16 | } 17 | 18 | &-right { 19 | text-align: right; 20 | } 21 | } 22 | 23 | .t { 24 | @include text-alignment; 25 | } 26 | 27 | @each $mq-key, 28 | $mq-value in $mq-width { 29 | .#{$mq-key}\:t { 30 | @include break-min(#{$mq-value}) { 31 | @include text-alignment; 32 | } 33 | } 34 | } 35 | 36 | // Text styles 37 | 38 | .t-ui { 39 | font-family: var(--font-ui); 40 | } 41 | 42 | .t-mono { 43 | font-family: var(--font-mono); 44 | } 45 | 46 | .t-brand { 47 | font-family: var(--font-brand); 48 | } 49 | 50 | .t-sans-serif { 51 | font-family: var(--font-sans-serif); 52 | } 53 | 54 | .t-serif { 55 | font-family: var(--font-serif); 56 | } 57 | 58 | .t-prose { 59 | font-family: var(--font-prose); 60 | } 61 | 62 | .t-bolder, 63 | .t-heavy { 64 | font-weight: var(--t-heavy); 65 | } 66 | 67 | .t-bold, 68 | .t-strong { 69 | font-weight: var(--t-bold); 70 | } 71 | 72 | .t-semibold { 73 | font-weight: var(--t-semibold); 74 | } 75 | 76 | .t-normal { 77 | font-weight: var(--t-normal); 78 | font-style: normal; 79 | } 80 | 81 | .t-default { 82 | font-size: 1rem; 83 | line-height: inherit; 84 | } 85 | 86 | .t-lighter, 87 | .t-thin { 88 | font-weight: var(--t-thin); 89 | } 90 | 91 | .t-italic, 92 | .t-em { 93 | font-style: italic; 94 | } 95 | 96 | .t-strike { 97 | text-decoration: line-through; 98 | } 99 | 100 | .t-underline { 101 | text-decoration: underline; 102 | } 103 | 104 | .t-muted { 105 | opacity: 0.4; 106 | } 107 | 108 | .t-uppercase { 109 | text-transform: uppercase; 110 | } 111 | 112 | .t-loose { 113 | letter-spacing: .025em; 114 | } 115 | 116 | .t-tight { 117 | letter-spacing: -.05em; 118 | } 119 | 120 | .t-balance { 121 | text-wrap: balance; 122 | } 123 | 124 | .t-columns { 125 | column-width: var(--t-cols); 126 | column-gap: 1.5rem; // fallback 127 | column-gap: var(--t-cols-gap); 128 | } 129 | 130 | small, 131 | .t-sm { 132 | font-size: var(--t-sm); 133 | line-height: inherit; 134 | } 135 | 136 | big, 137 | .t-lg { 138 | font-size: var(--t-lg); 139 | line-height: inherit; 140 | } 141 | 142 | .t-long-read { 143 | font-size: var(--t-long-read); 144 | } 145 | 146 | .t-display { 147 | font-size: var(--t-display); 148 | } 149 | 150 | mark, 151 | .t-mark, 152 | .t-highlight { 153 | color: currentColor; 154 | background-color: var(--c-highlight); 155 | } 156 | 157 | .t-nowrap { 158 | white-space: nowrap; 159 | } 160 | 161 | .list-style-type { 162 | &-none { 163 | list-style-type: none; 164 | } 165 | 166 | &-square { 167 | list-style-type: square; 168 | } 169 | 170 | &-disc { 171 | list-style-type: disc; 172 | } 173 | 174 | &-circle { 175 | list-style-type: circle; 176 | } 177 | 178 | &-lower-alpha { 179 | list-style-type: lower-alpha; 180 | } 181 | 182 | &-upper-alpha { 183 | list-style-type: upper-alpha; 184 | } 185 | 186 | &-lower-roman { 187 | list-style-type: lower-roman; 188 | } 189 | 190 | &-upper-roman { 191 | list-style-type: upper-roman; 192 | } 193 | 194 | &-decimal { 195 | list-style-type: decimal; 196 | } 197 | } -------------------------------------------------------------------------------- /src/codebase/scss/codebase.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * CODEBASE 5 3 | * MIT Licence 4 | * https://github.com/codebase-frontend-library/codebase-5 5 | * v.5.3.6 6 | */ 7 | 8 | // BASICS 9 | @use "01_basics/base"; 10 | @use "01_basics/accessibility"; 11 | @use "01_basics/text"; 12 | @use "01_basics/form-elements"; 13 | @use "01_basics/media"; 14 | 15 | // COMPONENTS 16 | @use "02_components/buttons"; 17 | @use "02_components/badges-and-labels"; 18 | @use "02_components/tables"; 19 | @use "02_components/tabs"; 20 | @use "02_components/offcanvas"; 21 | 22 | // UTILITIES 23 | @use "03_utilities/containers"; 24 | @use "03_utilities/positions"; 25 | @use "03_utilities/dimensions"; 26 | @use "03_utilities/flexbox"; 27 | @use "03_utilities/grid"; 28 | @use "03_utilities/aspect-ratios"; 29 | @use "03_utilities/box-model"; 30 | @use "03_utilities/border-radius"; 31 | @use "03_utilities/box-shadows"; 32 | @use "03_utilities/blocks"; 33 | @use "03_utilities/overflows"; 34 | @use "03_utilities/typography"; 35 | @use "03_utilities/colors"; 36 | @use "03_utilities/glass"; 37 | @use "03_utilities/images"; 38 | @use "03_utilities/floats"; 39 | @use "03_utilities/transformations"; 40 | @use "03_utilities/transitions"; 41 | @use "03_utilities/invisibility"; 42 | 43 | // NOTE: The “utility first” principle means that utility classes have priority from the point of view of the HTML/template creator -- therefore utilities must come _after_ component classes in the CSS. -------------------------------------------------------------------------------- /src/docs/1-getting-started/element-grid.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Element grid" 3 | headerTitle: "The Codebase element grid" 4 | layout: layout.njk 5 | prevPage: "/docs/1-getting-started/responsive-design" 6 | nextPage: "/docs/1-getting-started/css-variables" 7 | prevLink: "Responsive design" 8 | nextLink: "CSS variables" 9 | --- 10 | 11 | Codebase uses a “soft” 0.5rem element grid (default 8px) for consistently positioning elements relative to each other. 12 | 13 | This is similar in principle to various 8px grids out there (also known as 8-point or 8dp [device pixel] grids). For example: 14 | 15 | * [SpecFM’s 8-point grid](https://spec.fm/specifics/8-pt-grid) 16 | * [The Power of the 8pt Grid System in Design](https://medium.com/@mertyagci/the-power-of-the-8pt-grid-system-in-design-1c9dbc683ad8) by Mert Yagci 17 | 18 |

19 | In Codebase, one element grid unit = 0.5rem = 8px (default). 20 |

21 | 22 | ## How the element grid is used 23 | 24 | The Codebase element grid has been deployed a follows: 25 | 26 | 1. By default, the base typography vertical rhythm (line-height) is set at 1.5rem (= 3 element grid units). 27 | 2. Spacing utilities for margins, paddings and gaps (used in both flexbox and grid) have been set using values from the 0.5rem element grid. 28 | 29 | ```scss 30 | $spacing: ( 31 | "0": 0, 32 | "1": 0.5rem, 33 | "2": 1rem, 34 | "3": 1.5rem, 35 | "4": 2rem, 36 | "5": 2.5rem, 37 | "6": 3rem, 38 | ); 39 | 40 | $spacing-setup: ( 41 | "0": 0, 42 | "1": var(--sp-1), 43 | "2": var(--sp-2), 44 | "3": var(--sp-3), 45 | "4": var(--sp-4), 46 | "5": var(--sp-5), 47 | "6": var(--sp-6), 48 | ); 49 | ``` 50 | 51 | ## Infographic: the Codebase element grid 52 | 53 |
54 | 55 |
56 | 57 | **Note:** the padding for buttons and table cells corresponds to Codebase utility classes `px-2 py-1`. Since this would be used frequently for menu itams, tab labels, etc., Codebase also has `p-cell` that adds this margin (`margin: var(--sp-1) var(--sp-2);`) in one utility class. 58 | 59 | ## Utility class spacing 60 | 61 | The element grid has been used throughout Codebase’s classless (basic) styling. Where element grid units have been used in [spacing]({{ '/docs/5-decoration-utilities/spacing' | url }}) utility classes (i.e. margins and paddings), these are provided as follows: 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 |
Element grid measureCSS variableUtility class suffix
0.5rem--sp-1-1
1rem--sp-2-2
1.5rem = 1 line height--sp-3-3
2rem--sp-4-4
2.5rem--sp-5-5
3rem = 2 lines--sp-6-6
104 | -------------------------------------------------------------------------------- /src/docs/2-classless-basics/inline-elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Inline elements" 3 | layout: layout.njk 4 | prevPage: "/docs/2-classless-basics/block-elements" 5 | nextPage: "/docs/2-classless-basics/form-elements" 6 | prevLink: "Block elements" 7 | nextLink: "Form elements" 8 | --- 9 | 10 | In HTML, [inline-level elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) such as tags for bold text, italics, and hyperlinks, span only the width of their content, and they can wrap on to new lines. 11 | 12 | ## List of inline elements 13 | 14 |
15 |
16 | italics
emphasis
17 | bold
strong
18 | underlined
19 | citation
20 | deleted text (strikethough)
21 | definition
22 | abbreviation
23 | inserted text (underlined)
24 | user input
25 | sample output
26 |
27 |
28 | marked (highlighted) text
29 | small
30 | Superscript: e.g. E = mc2
31 | Subscript: e.g. H2O
32 | variable or placeholder text
33 | ndash –
34 | mdash —
35 | hyperlink
36 |
Address

37 | inline code
38 |
39 |
40 | 41 | ```html 42 | italics 43 | emphasis 44 | bold 45 | strong 46 | citation 47 | deleted text (strikethough) 48 | definition 49 | abbreviation 50 | inserted text 51 | user input 52 | sample output 53 | marked (highlighted) text 54 | small 55 | Superscript: e.g. E = mc2 56 | Subscript: e.g. H2O 57 | variable or placeholder text 58 | ndash – 59 | mdash — 60 | hyperlink 61 |
Address
62 | inline code 63 | ``` 64 | 65 | ## Buttons are inline elements 66 | 67 | Buttons are inline elements. But as buttons are also [form elements]({{ '/docs/2-classless-basics/form-elements/#buttons' | url }}), we will cover them there. 68 | -------------------------------------------------------------------------------- /src/docs/2-classless-basics/media.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Media" 3 | layout: layout.njk 4 | prevPage: "/docs/2-classless-basics/form-elements" 5 | nextPage: "/docs/3-layout-utilities/containers" 6 | prevLink: "Form elements" 7 | nextLink: "Containers" 8 | --- 9 | 10 | Various kinds of media can be embedded into web pages, such as images, audio, and video. 11 | 12 | ## Images 13 | 14 | In Codebase, the various embedded image tags (`img`, `svg`, `picture`, `canvas`, and `video`) are set as [block-level elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements), with a max-width of 100%. 15 | 16 | Photo by Pixabay from Pexels 17 | 18 | _Photo by [Pixabay](https://www.pexels.com/photo/animal-avian-beak-bird-416179/) from [Pexels](https://www.pexels.com)._ 19 | 20 | ```html 21 | 22 | ``` 23 | 24 | The `max-width: 100%` makes images “responsive”, so that oversized images shrink to fit within containers (or viewports) narrower than the actual image width. This is done so that they don’t break your webpage layout.

25 | 26 | The image below is wider than this column of text, but it is constrained to downsize proportionately to the width of the wrapper. 27 | 28 | Photo by Erik Karits from Pexels 29 | 30 | _Photo by [Eric Karits](https://www.pexels.com/@erik-karits-2093459) from [Pexels](https://www.pexels.com)._ 31 | 32 | ```html 33 | 34 | ``` 35 | 36 | ### Linked images 37 | 38 | Photo by Pixabay from Pexels 39 | 40 | If an `` is a child of an ``, then the image will become slightly transparent (using the opacity filter) when the `` has `:focus-visible`, allowing its amber background color to show through. See [accessibility focus styling]({{ "/docs/1-getting-started/accessibility/#focus-state-styling" | url }}). 41 | 42 | ### Lazy loading 43 | 44 | As in the example above, you can add the attribute `loading="lazy"` to images, especially if they are big and lower down the webpage (below the “fold”). Then the visitor’s browser can defer loading the image until the visitor has scrolled down to see it. This will improve your page’s performance, making it seem to load quicker. 45 | 46 | You must also set the image width and the height attributes, because the visitor’s browser needs these so that it can lay out the page correctly before the image is called and loaded. 47 | 48 | ### Figure images 49 | 50 | An image with a `
`, all enclosed in `
`: 51 | 52 |
53 | Photo by Erik Karits from Pexels 54 |
Photo by Eric Karits from Pexels.
55 |
56 | 57 | ```html 58 |
59 | 60 |
Here is the caption for the image above.
61 |
62 | ``` 63 | 64 | ## Audio 65 | 66 | Audio tags obtain their special controls from the web browser. What they look like, and what control they contain, depends on the browser and the operating system. 67 | 68 | Codebase sets the width of audio controls to 100%. Other than that, what you will see below is your browser’s default styling for these web components. 69 | 70 | 71 | 72 | ```html 73 | 74 | ``` 75 | 76 | ## Video 77 | 78 | Video tags obtain their special controls from the web browser. What they look like, and what control they contain, depends on the browser and the operating system. 79 | 80 | Codebase sets the width of video controls to 100%. Other than that, what you will see below is your browser’s default styling for these web components. 81 | 82 | 83 | 84 | ```html 85 | 86 | ``` -------------------------------------------------------------------------------- /src/docs/3-layout-utilities/blocks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Blocks" 3 | headerTitle: "Block utilities" 4 | layout: layout.njk 5 | prevPage: "/docs/3-layout-utilities/containers" 6 | nextPage: "/docs/3-layout-utilities/positions" 7 | prevLink: "Containers" 8 | nextLink: "Positions" 9 | --- 10 | 11 | Sometimes you need to override an element’s native block or inline-block behavior. 12 | 13 | ## Inline-block utility 14 | 15 | `inline-block` – makes any element behave as an inline-block element. Example using `inline-block` on a block element: 16 | 17 |
18 |
This is a <div> element (normally a block element).
19 |
20 | 21 | ```html 22 |
...
23 | ``` 24 | 25 | `inlne-block` has media query width variants, so the full set is: 26 | 27 | * `inlne-block` / `xs:inlne-block` / `sm:inlne-block` / `md:inlne-block` / `lg:inlne-block` 28 | 29 | ## Block utility 30 | 31 | `block` – makes any element behave as a block element. Example using `block` on an inline-block element, such as a `` or an ``: 32 | 33 |
34 | This is an <span> element (normally an inline element). 35 |
36 | 37 | ```html 38 | ... 39 | ``` 40 | 41 | `block` has media query width variants, so the full set is: 42 | 43 | * `block` / `xs:block` / `sm:block` / `md:block` / `lg:block` 44 | 45 | ## Notes on blocks and inline-blocks 46 | 47 | 1. The responsive block and inline-block utilities are useful in situations when you need to override a `flex` flexbox at a wider breakpoint. 48 | 2. Remember that CSS flexbox controls the behavior of its immediate child elements. So, if you are trying to use `block` or `inline-block` on an immediate child of a `flex` or `grid`, it won’t work. -------------------------------------------------------------------------------- /src/docs/3-layout-utilities/floats.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Floats" 3 | headerTitle: "Floats" 4 | layout: layout.njk 5 | prevPage: "/docs/3-layout-utilities/grid" 6 | nextPage: "/docs/3-layout-utilities/overflows" 7 | prevLink: "Grid" 8 | nextLink: "Overflows" 9 | --- 10 | 11 | Codebase has a set of responsive float utilities. 12 | 13 | **Note:** Remember that `flex` and `grid` control the behavior of their _immediate child elements_. So, if you are trying to use `float-left` or `float-right` on an immediate child of flexbox or CSS grid system, it won’t work. 14 | 15 | ## Float right 16 | 17 |
18 |
19 |
This is an example of
float-right
20 |
21 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis dolore quis iste fuga molestias necessitatibus. Autem quidem, consequuntur dicta illo rem nobis ratione vel? Cupiditate beatae similique nobis temporibus sequi rerum mollitia, saepe architecto ad, necessitatibus placeat repudiandae commodi laboriosam quos molestiae sed modi dignissimos nisi magni adipisci eligendi.

22 |
23 | 24 | ## Float left 25 | 26 |
27 |
28 |
This is an example of
float-left
29 |
30 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis dolore quis iste fuga molestias necessitatibus. Autem quidem, consequuntur dicta illo rem nobis ratione vel? Cupiditate beatae similique nobis temporibus sequi rerum mollitia, saepe architecto ad, necessitatibus placeat repudiandae commodi laboriosam quos molestiae sed modi dignissimos nisi magni adipisci eligendi.

31 |
32 | 33 | 34 | ```html 35 |
36 |
37 | This is an example of float-right 38 |
39 | Lorem, ipsum dolor sit amet... 40 |
41 | ``` 42 | 43 | ## Responsive floating 44 | 45 | * `float-right` / `xs:float-right` / `sm:float-right` / `md:float-right` / `lg:float-right` 46 | * `float-left` / `xs:float-left` / `sm:float-left` / `md:float-left` / `lg:float-left` 47 | 48 | ## Clearfix 49 | 50 | There’s also a `clearfix` utility if you need it. This [This w3schools article](https://www.w3schools.com/howto/howto_css_clearfix.asp) explains why you may need the “clearfix hack” sometimes. -------------------------------------------------------------------------------- /src/docs/3-layout-utilities/invisibility.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Invisibility" 3 | headerTitle: "Invisibility" 4 | layout: layout.njk 5 | prevPage: "/docs/3-layout-utilities/overflows" 6 | nextPage: "/docs/4-decoration-utilities/colors" 7 | prevLink: "Overflows" 8 | nextLink: "Colors" 9 | --- 10 | 11 | In some circumatances, you may need to hide stuff. 12 | 13 | ## Visually hidden (screen reader only) 14 | 15 | * `visually-hidden` (alias `screen-reader-only`) 16 | 17 | The code CSS code for this utility class has been copied from [Hide content (The A11y Project)](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/). 18 | 19 | This CSS visually removes an element from the webage, but a screen reader will still percieve it and include it in the spoken read-through of your webage content. 20 | 21 | Keyboard users can also get to visually hidden elements when they tab through the webpage’s accessibility tree (tab index). When someone tabs onto a visually hidden element, it becomes visible on the page. 22 | 23 | Therefore, for example, `visually-hidden` (or `screen-reader-only`) can be used to hide a “skip link” such as the one at `tabindex="1"` on this webpage. Skip links can provide people who rely on assistive technologies with a means of skipping over your site’s main navigation (menubar or megamenu), if they are already familiar with it. 24 | 25 | ```html 26 | 34 | 35 | 36 | ... 37 | 38 |
39 | ... 40 |
41 | ``` 42 | 43 | ## Responsive hiding 44 | 45 | The four media query breakpoint widths in Codebase (`xs`, `sm`, `md`, and `lg`) have both `hidden-below` and `hidden` (i.e. hidden-above) utility classes. 46 | 47 | The `*:hidden-below` classes hide stuff on viewport widths from zero up to (max-width: variable - 1px). 48 | 49 | So, for example, if you want to hide a sidebar on an iPad in portrait orientation but not on an iPad in landscape orientation, then you’ll want to use `md:hidden-below`. At `md` (1024px, default) and above, the sidebar will be displayed. 50 | 51 |

✓ = displayed; ✗ = hidden

52 | 53 |
54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 |
ClassExample≤567px568px–767px768px–1023px1024px–1280px≥1280px
xs:hidden-below 70 |
Example
71 | 		✗✓✓✓✓
sm:hidden-below 81 |
Example
82 | 		✗✗✓✓✓
md:hidden-below 92 |
Example
93 | 		✗✗✗✓✓
lg:hidden-below 103 |
Example
104 | 		✗✗✗✗✓
xs:hidden 114 |
Example
115 | 		✓✗✗✗✗
sm:hidden 125 |
Example
126 | 		✓✓✗✗✗
md:hidden 136 |
Example
137 | 		✓✓✓✗✗
lg:hidden 147 |
Example
148 | 		✓✓✓✓✗
157 |
-------------------------------------------------------------------------------- /src/docs/3-layout-utilities/overflows.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Overflows" 3 | layout: layout.njk 4 | prevPage: "/docs/3-layout-utilities/Floats" 5 | nextPage: "/docs/3-layout-utilities/invisibility" 6 | prevLink: "Floats" 7 | nextLink: "Invisibility" 8 | --- 9 | 10 | Sometimes you have more content than can fit in a particular region of your layout. 11 | 12 | ## X and/or Y overflows 13 | 14 | * `overflow-x` 15 | 16 | Use `overflow-x` when you may need a sideways scroll. (`overflow-x` shows horizontal scroll but not vertical scroll.) E.g. when you have an [oversized table]({{ '/docs/6-simple-components/tables#oversized-tables' | url }}). Or, you may have a simply sideways-scrolling gallery. 17 | 18 | * `overflow-y` 19 | 20 | Use `overflow-y` when you have content that is too tall for its wrapper. (`overflow-y` shows vertical scroll but not horizontal scroll.) E.g. see [AlpineJS modal with scrollable content]({{ '/docs/7-alpinejs-components/modals/#styling-modal-panels' | url }}). 21 | 22 | * `overflow-xy` 23 | 24 | Use `overflow-xy` when you have both width and height constraints but you want to show both horizontal and vertical scroll. This utility may be useful if you want to show a large map or [oversized table]({{ '/docs/6-simple-components/tables#oversized-tables' | url }}). 25 | 26 | ## Overflow clip 27 | 28 | * `overflow-clip` (alias `overflow-hidden`) 29 | 30 | Since Codebase v.5.3.1, these have the style rule `overflow: clip`, so that they do not create a scrolling context (see [Scroll-Driven Animations: You want overflow: clip, not overflow: hidden](https://www.bram.us/2024/02/14/scroll-driven-animations-you-want-overflow-clip-not-overflow-hidden/) by Bramus Van Damme). 31 | 32 | Use `overflow-clip` when you have too much content for displaying in a block element that has a constrained width and/or height, but you don’t want to show either horizontal or vertical scroll. 33 | 34 | (the Utility class named `overflow-hidden` is is still present for backwards compatability, but it now uses `overflow: clip` with `overflow: hidden` as a fallback.) 35 | -------------------------------------------------------------------------------- /src/docs/4-decoration-utilities/box-shadows.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Box shadows" 3 | layout: layout.njk 4 | prevPage: "/docs/4-decoration-utilities/rounded-corners" 5 | nextPage: "/docs/4-decoration-utilities/images" 6 | prevLink: "Rounded corners" 7 | nextLink: "Images" 8 | --- 9 | 10 | Box shadows can take your design to a new level. 11 | 12 | ## Box shadow levels 13 | 14 | * `bs-1` / `bs-2` / `bs-3` / `bs-4` / `bs-5` 15 | 16 |
17 |
18 |
19 |
bs-1
20 |
21 |
22 |
bs-2
23 |
24 |
25 |
bs-3
26 |
27 |
28 |
bs-4
29 |
30 |
31 |
bs-5
32 |
33 |
34 |
35 | 36 | ```html 37 |
...
38 | 39 |
...
40 | 41 |
...
42 | 43 |
...
44 | 45 |
...
46 | ``` 47 | 48 | ## Notes on box shadows 49 | 50 | 1. The `bs` suffix units `-1` through `-5` are meant to represent layer “lifts” along the z-axis. 51 | 2. The higher a layer is lifted from the page, the less sharpness and more spread the box shadow has. This also means that the higher the suffix, the fainter the shadow becomes as it is spread over a wider area. 52 | 3. Lighting is from the front top center, so more of the shadow is cast at the bottom the element (not pointing toward bottom-right or bottom-left). 53 | 54 | ## Box shadows on hover 55 | 56 | Since v.5.0.6 Codebase has hover states for each of the 5 levels of box shadows. Hover the panels below to see them in action 57 | 58 |
59 |
60 |
61 |
hover:bs-1
62 |
63 |
64 |
hover:bs-2
65 |
66 |
67 |
hover:bs-3
68 |
69 |
70 |
hover:bs-4
71 |
72 |
73 |
hover:bs-5
74 |
75 |
76 |
77 | 78 | ## Removing box shadows 79 | 80 | Codebase has the CSS class `bs-0` that can be added programmatically (e.g. by [AlpineJS](https://alpinejs.dev)) to remove box shadows under various conditions). Similarly, any of the box shadows above can be progamatically added under various conditions. 81 | 82 | Since v.5.0.7 Codebase also has responsive box shadow removal. Sometimes you want to remove box shadow at a box shadow on a box below or above a breakpoint (`xs`, `sm`, `md`, or `lg`). 83 | 84 | **Example 1:** you may have an offcanvas sidebar (requiring a box shadow) on small screens that becomes a normal on-canvas panel (requiring no box shadow) for medium screens up. 85 | 86 |
87 | bs-2 md:bs-0 88 |
89 | 90 | **Example 2:** you may have a box that is part of the page (or part of an offcanvas sidebar) for small screens, but the box becomes a dropdown panel (requiring a box shadow) for medium screens up. 91 | 92 |
93 | bs-2 md:bs-0-below 94 |
95 | 96 | -------------------------------------------------------------------------------- /src/docs/4-decoration-utilities/forms.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Forms" 3 | layout: layout.njk 4 | prevPage: "/docs/4-decoration-utilities/images" 5 | nextPage: "/docs/5-typographic-utilities/font-stacks" 6 | prevLink: "Images" 7 | nextLink: "Font Stacks" 8 | --- 9 | 10 | ## Form element utility classes 11 | 12 | There are only two _form_ utility classes, and these are: 13 | 14 | * `form-element-sm` (can be paired with `btn-sm`) 15 | * `form-element-lg` (can be paired with `btn-lg`) 16 | 17 | **Note:** since Codebase 5.2.3, smaller form elements have smaller text, and larger form elements have larger text. 18 | 19 | Examples: 20 | 21 |
22 |

form-element-sm

23 |

Default

24 |

form-element-sm

25 |

26 |

27 |

28 |
29 | 30 | ```html 31 | 32 | 33 | 34 | ``` 35 | 36 | ## Other things you can do with forms 37 | 38 | Besides the form-element classes above, you can change [border]({{ '/docs/4-decoration-utilities/borders' | url }}) thickness, background and border [colors]({{ '/docs/4-decoration-utilities/colors' | url }}), and [rounded corners]({{ '/docs/4-decoration-utilities/rounded-corners' | url }}). 39 | 40 | Go large – to grab people’s attention: 41 | 42 |
43 |
44 | 45 | 46 |
47 |
48 | 49 | ```html 50 | 57 | 62 | ``` 63 | 64 | Go small – to fit a form into a menubar, or into a table cell: 65 | 66 |
67 |
68 | 69 | 70 |
71 |
72 | 73 | ```html 74 | 83 | 89 | ``` 90 | 91 | See [buttons]({{ '/docs/6-simple-components/buttons' | url }}). -------------------------------------------------------------------------------- /src/docs/5-typographic-utilities/headings.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Headings" 3 | headerTitle: "Heading formats" 4 | layout: layout.njk 5 | prevPage: "/docs/5-typographic-utilities/font-stacks" 6 | nextPage: "/docs/5-typographic-utilities/text-alignment" 7 | prevLink: "Font stacks" 8 | nextLink: "Text alignment" 9 | --- 10 | 11 | Sometimes you may need to make some text as large as a heading, but without it actually being a heading. Or, sometimes you may need to change a heading size _without breaking the semantic heirarchical ordering_ – because that would be bad for SEO. 12 | 13 | These heading format utility classes will help you out. 14 | 15 | Since Codebase 5.3.0: Codebase `h1` through `h5` utilities onlyaffect font-size – they do not affect margins or font-weighs. 16 | 17 | ## Heading utility examples 18 | 19 | The following are all `
` elements, in disguise: 20 | 21 |
22 |
h1 Heading level 1
23 |
h2 Heading level 2
24 |
h3 Heading level 3
25 |
h4 Heading level 4
26 |
h5 Heading level 5
27 |
h6 Heading level 6
28 |
29 | 30 | ```html 31 |
Heading level 1
32 | 33 |
Heading level 2
34 | 35 |
Heading level 3
36 | 37 |
Heading level 4
38 | 39 |
Heading level 5
40 | 41 |
Heading level 6
42 | ``` 43 | 44 | ## Why you sometimes need heading utilities 45 | 46 | Why would you want to use heading utilities? In your web design, you may have situations where you want to enlarge some text (to make it look like a header), but not actually have it to be a header that would interupt the sematic hierarchical ordering. 47 | 48 | Consider the following examples: you may want a title in a sidebar, footer, card, or modal to be enlaged but not by using an actual `

` through `

` tag. -------------------------------------------------------------------------------- /src/docs/5-typographic-utilities/list-formats.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Lists" 3 | headerTitle: "List formats" 4 | layout: layout.njk 5 | prevPage: "/docs/5-typographic-utilities/inline-text" 6 | nextPage: "/docs/5-typographic-utilities/text-columns" 7 | prevLink: "Inline text" 8 | nextLink: "Text columns" 9 | --- 10 | 11 | Codebase has several `list-style-type-` utilities (to be used on `
    ` and `
      ` tags), for controlling list item indicators. 12 | 13 | ## Ordered lists 14 | 15 | Normal (classless): 16 | 17 |
        18 |
      1. First item
        2. 19 |
      2. Second item
        3. 20 |
      3. Third item
        4. 21 |
      22 | 23 | `list-style-type-none` 24 | 25 |
        26 |
      1. First item
        2. 27 |
      2. Second item
        3. 28 |
      3. Third item
        4. 29 |
      30 | 31 | `list-style-type-lower-alpha` 32 | 33 |
        34 |
      1. First item
        2. 35 |
      2. Second item
        3. 36 |
      3. Third item
        4. 37 |
      38 | 39 | `list-style-type-upper-alpha` 40 | 41 |
        42 |
      1. First item
        2. 43 |
      2. Second item
        3. 44 |
      3. Third item
        4. 45 |
      46 | 47 | `list-style-type-lower-roman` 48 | 49 |
        50 |
      1. First item
        2. 51 |
      2. Second item
        3. 52 |
      3. Third item
        4. 53 |
      54 | 55 | `list-style-type-upper-roman` 56 | 57 |
        58 |
      1. First item
        2. 59 |
      2. Second item
        3. 60 |
      3. Third item
        4. 61 |
      62 | 63 | `list-style-type-decimal` 64 | 65 |
        66 |
      1. First item
        2. 67 |
      2. Second item
        3. 68 |
      3. Third item
        4. 69 |
      70 | 71 | ## Unordered lists 72 | 73 | Normal (classless): 74 | 75 |
        76 |
      • First item
        • 77 |
      • Second item
        • 78 |
      • Third item
        • 79 |
      80 | 81 | `list-style-type-none` 82 | 83 |
        84 |
      • First item
        • 85 |
      • Second item
        • 86 |
      • Third item
        • 87 |
      88 | 89 | `list-style-type-square` 90 | 91 |
        92 |
      • First item
        • 93 |
      • Second item
        • 94 |
      • Third item
        • 95 |
      96 | 97 | `list-style-type-circle` 98 | 99 |
        100 |
      • First item
        • 101 |
      • Second item
        • 102 |
      • Third item
        • 103 |
      104 | 105 | `list-style-type-disc` 106 | 107 |
        108 |
      • First item
        • 109 |
      • Second item
        • 110 |
      • Third item
        • 111 |
      112 | 113 | ## Menus are usually lists 114 | 115 | At their most basic, web navigation menus are lists of hyperlinks. Usually they are styled up a bit, to make them look more interesting. And for accessabiilty, you should swap the (outer) `
        ` for `