├── .eleventy.js ├── .github └── workflows │ ├── build-deploy-pages.yml │ └── ci.yml ├── .gitignore ├── LICENSE ├── README.md ├── assets ├── docs.css ├── fonts │ ├── Red_Hat_Display │ │ ├── OFL.txt │ │ ├── RedHatDisplay-Black.ttf │ │ ├── RedHatDisplay-BlackItalic.ttf │ │ ├── RedHatDisplay-Bold.ttf │ │ ├── RedHatDisplay-BoldItalic.ttf │ │ ├── RedHatDisplay-Italic.ttf │ │ ├── RedHatDisplay-Medium.ttf │ │ ├── RedHatDisplay-MediumItalic.ttf │ │ └── RedHatDisplay-Regular.ttf │ └── Roboto │ │ ├── LICENSE.txt │ │ ├── Roboto-Black.ttf │ │ ├── Roboto-BlackItalic.ttf │ │ ├── Roboto-Bold.ttf │ │ ├── Roboto-BoldItalic.ttf │ │ ├── Roboto-Italic.ttf │ │ ├── Roboto-Light.ttf │ │ ├── Roboto-LightItalic.ttf │ │ ├── Roboto-Medium.ttf │ │ ├── Roboto-MediumItalic.ttf │ │ ├── Roboto-Regular.ttf │ │ ├── Roboto-Thin.ttf │ │ └── Roboto-ThinItalic.ttf └── js │ └── docs.js ├── docs └── CNAME ├── docs_src ├── _data │ ├── navigation.json │ ├── release.json │ └── site.json ├── _includes │ ├── head.html │ ├── header.html │ ├── layouts │ │ ├── home.html │ │ ├── page.html │ │ └── playground.html │ ├── scripts.html │ └── sidebar-nav.html ├── components │ ├── badges.md │ ├── bar.md │ ├── buttons.md │ ├── drop-panels.md │ ├── footer.md │ ├── header.md │ ├── index.md │ ├── inputs.md │ ├── item-lists.md │ ├── links.md │ ├── modals.md │ ├── nav.md │ ├── notices.md │ ├── pagination.md │ ├── tables.md │ └── widgets.md ├── index.html ├── playground.html ├── setup │ ├── improving.md │ ├── installation.md │ └── releasing.md ├── specific │ ├── category-header.md │ ├── diff.md │ ├── index.md │ ├── meter.md │ ├── toc.md │ └── tools.md └── utilities │ ├── basic-html.md │ ├── box.md │ ├── colors.md │ ├── index.md │ ├── javascript.md │ ├── layout.md │ └── typography.md ├── js_src ├── co-design.ts ├── dismiss.ts ├── droppanel.ts ├── header.ts ├── modal.ts └── toggle.ts ├── package-lock.json ├── package.json ├── src ├── _child.scss ├── codidact.scss ├── common │ ├── _badges.scss │ ├── _bar.scss │ ├── _box.scss │ ├── _buttons.scss │ ├── _colors.scss │ ├── _config.scss │ ├── _droppanel.scss │ ├── _fontface.scss │ ├── _footer.scss │ ├── _form.scss │ ├── _header.scss │ ├── _itemlists.scss │ ├── _layout.scss │ ├── _modals.scss │ ├── _nav.scss │ ├── _notices.scss │ ├── _pagination.scss │ ├── _typography.scss │ ├── _widgets.scss │ └── common.scss └── specific │ ├── _category-header.scss │ ├── _config.scss │ ├── _diff.scss │ ├── _meter.scss │ ├── _toc.scss │ ├── _tools.scss │ └── specific.scss └── tsconfig.json /.eleventy.js: -------------------------------------------------------------------------------- 1 | // This escapes the HTML inside the example code block 2 | function escapeHtml(unsafe) { 3 | return unsafe 4 | .replace(/\/g, "\n") 5 | .replace(/&/g, "&") 6 | .replace(//g, ">") 8 | .replace(/"/g, """) 9 | .replace(/'/g, "'"); 10 | } 11 | 12 | const { EleventyHtmlBasePlugin } = require("@11ty/eleventy"); 13 | 14 | module.exports = function (eleventyConfig) { 15 | eleventyConfig.addPlugin(EleventyHtmlBasePlugin); 16 | 17 | eleventyConfig.addLayoutAlias('home', 'layouts/home.html'); 18 | eleventyConfig.addLayoutAlias('page', 'layouts/page.html'); 19 | eleventyConfig.addLayoutAlias('playground', 'layouts/playground.html'); 20 | 21 | // When the linked css or javascript changes and we are in dev mode, update in the browser 22 | eleventyConfig.setServerPassthroughCopyBehavior("passthrough"); 23 | 24 | // Make sure to either copy (or passthrough from original location for dev server) needed files 25 | eleventyConfig.addPassthroughCopy("assets/**/*"); 26 | eleventyConfig.addPassthroughCopy("dist/**/*"); 27 | eleventyConfig.addPassthroughCopy("js/**/*.js"); 28 | 29 | // For source maps, pass through scss as well 30 | eleventyConfig.addPassthroughCopy("src/**/*.scss"); 31 | 32 | eleventyConfig.addPairedShortcode("example", function (content, id, application_notice, further_preview_class) { 33 | content = content.trim(); 34 | if (application_notice) { 35 | return `
Example
${escapeHtml(content)}
${content}

${application_notice}

`; 36 | } 37 | return `
Example
${escapeHtml(content)}
${content}
`; 38 | }); 39 | 40 | eleventyConfig.addPairedShortcode("notice", function (content, title) { 41 | content = content.trim(); 42 | return `

${title}

${content}

`; 43 | }); 44 | 45 | return { 46 | pathPrefix: process.env.ELEVENTY_PATH_PREFIX || "", 47 | dir: { 48 | input: "docs_src", 49 | output: "docs" 50 | }, 51 | }; 52 | }; -------------------------------------------------------------------------------- /.github/workflows/build-deploy-pages.yml: -------------------------------------------------------------------------------- 1 | name: Pages 2 | 3 | on: 4 | push: 5 | branches: [ "master" ] 6 | 7 | # Allows you to run this workflow manually from the Actions tab 8 | workflow_dispatch: 9 | 10 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 11 | permissions: 12 | contents: read 13 | pages: write 14 | id-token: write 15 | 16 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 17 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 18 | concurrency: 19 | group: "pages" 20 | cancel-in-progress: false 21 | 22 | # Default to bash 23 | defaults: 24 | run: 25 | shell: bash 26 | 27 | jobs: 28 | # Build job 29 | build: 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v3 34 | - name: Detect package manager 35 | id: detect-package-manager 36 | run: | 37 | if [ -f "${{ github.workspace }}/yarn.lock" ]; then 38 | echo "manager=yarn" >> $GITHUB_OUTPUT 39 | echo "command=install" >> $GITHUB_OUTPUT 40 | exit 0 41 | elif [ -f "${{ github.workspace }}/package.json" ]; then 42 | echo "manager=npm" >> $GITHUB_OUTPUT 43 | echo "command=ci" >> $GITHUB_OUTPUT 44 | exit 0 45 | else 46 | echo "Unable to determine package manager" 47 | exit 1 48 | fi 49 | - name: Set-up Node 50 | uses: actions/setup-node@v3 51 | with: 52 | node-version: "18" 53 | cache: ${{ steps.detect-package-manager.outputs.manager }} 54 | - name: Setup Pages 55 | id: pages 56 | uses: actions/configure-pages@v3 57 | - name: Install dependencies 58 | run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} 59 | - name: Build Docs Site 60 | run: npm run build 61 | env: 62 | ELEVENTY_PATH_PREFIX: ${{ steps.pages.outputs.base_path }} 63 | - name: Upload artifact 64 | uses: actions/upload-pages-artifact@v2 65 | with: 66 | path: ./docs 67 | 68 | # Deployment job 69 | deploy: 70 | environment: 71 | name: github-pages 72 | url: ${{ steps.deployment.outputs.page_url }} 73 | runs-on: ubuntu-latest 74 | needs: build 75 | steps: 76 | - name: Deploy to GitHub Pages 77 | id: deployment 78 | uses: actions/deploy-pages@v2 79 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: 4 | pull_request: 5 | branches: [ "develop" ] 6 | 7 | # Allows you to run this workflow manually from the Actions tab 8 | workflow_dispatch: 9 | 10 | # Default to bash 11 | defaults: 12 | run: 13 | shell: bash 14 | 15 | jobs: 16 | # Build job 17 | build: 18 | runs-on: ubuntu-latest 19 | steps: 20 | - name: Checkout 21 | uses: actions/checkout@v3 22 | - name: Detect package manager 23 | id: detect-package-manager 24 | run: | 25 | if [ -f "${{ github.workspace }}/yarn.lock" ]; then 26 | echo "manager=yarn" >> $GITHUB_OUTPUT 27 | echo "command=install" >> $GITHUB_OUTPUT 28 | exit 0 29 | elif [ -f "${{ github.workspace }}/package.json" ]; then 30 | echo "manager=npm" >> $GITHUB_OUTPUT 31 | echo "command=ci" >> $GITHUB_OUTPUT 32 | exit 0 33 | else 34 | echo "Unable to determine package manager" 35 | exit 1 36 | fi 37 | - name: Set-up Node 38 | uses: actions/setup-node@v3 39 | with: 40 | node-version: "18" 41 | cache: ${{ steps.detect-package-manager.outputs.manager }} 42 | - name: Install dependencies 43 | run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} 44 | - name: Build all 45 | run: npm run build 46 | env: 47 | ELEVENTY_PATH_PREFIX: ${{ steps.pages.outputs.base_path }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | scratch/* 3 | .idea/ 4 | 5 | # Do not put from-MD-compiled-HTML into the repo 6 | /docs/ 7 | !/docs/CNAME 8 | 9 | # Do not put from-SASS-compiled-CSS into the repo 10 | /dist/ 11 | 12 | # Do not put from-TS-compiled-JS into the repo 13 | /js/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 luap42 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 | 2 |
3 |

Co-Design

4 |
5 | 6 |
7 | npm (scoped) 8 | GitHub 9 | GitHub last commit 10 |
11 | 12 | ### 13 | 14 | This is the official CSS framework for the [Codidact](https://codidact.org) Q&A platform/codidact.com. 15 | 16 | For detailed documentation and an overview of the framework features, visit the [**official homepage**](https://codidact.github.io/co-design/). 17 | 18 | ### Use 19 | 20 | To set up, simply run: 21 | 22 | npm install 23 | 24 | and to build all the files, run 25 | 26 | npm run build 27 | 28 | If you only want to rebuild CSS/JS/Docs, run one of 29 | 30 | npm run css_build 31 | npm run js_build 32 | npm run docs_build 33 | 34 | ### Development 35 | 36 | For easy development, run 37 | 38 | npm run dev 39 | 40 | and it will host the documentation at http://localhost:8080. 41 | The site will automatically update when you make changes. -------------------------------------------------------------------------------- /assets/docs.css: -------------------------------------------------------------------------------- 1 | html { 2 | min-height: 100vh; 3 | } 4 | .home { 5 | height: 100%; 6 | } 7 | .home .grid { 8 | height: 100%; 9 | width: 100%; 10 | margin: 0; 11 | } 12 | .home .grid .grid--cell { 13 | padding: 0; 14 | margin: 0; 15 | } 16 | .home h1 { 17 | font-size: 75px; 18 | } 19 | .home p.is-lead { 20 | font-size: 20px; 21 | color: inherit; 22 | } 23 | 24 | .home .home-left a:not(.button) { 25 | color: inherit; 26 | text-decoration: underline; 27 | } 28 | 29 | .home .home-left { 30 | display: flex; 31 | flex-direction: column; 32 | min-height: 100%; 33 | background-image: url(https://codidact.org/assets/img/hero-bg.svg); 34 | background-size: cover; 35 | background-repeat: no-repeat; 36 | background-position: center center; 37 | } 38 | 39 | .home .home-left .spacer { 40 | flex-grow: 1; 41 | } 42 | 43 | .home .home-left .vinfo { 44 | display: flex; 45 | opacity: 0.6; 46 | } 47 | 48 | .home .home-left .vinfo .entry { 49 | margin: 0 5px; 50 | } 51 | 52 | .home h2 { 53 | font-size: 40px; 54 | } 55 | .home .home-right .widget .widget--header { 56 | font-weight: bold; 57 | } 58 | .home .home-right .widget .widget--header a { 59 | color: inherit; 60 | } 61 | .home .home-right { 62 | max-height: 100vh; 63 | overflow: auto; 64 | } 65 | 66 | @media all and (max-width: 768px) { 67 | .home .home-right { 68 | max-height: none; 69 | } 70 | } 71 | 72 | .docs-is-active { 73 | background-color: rgba(0,0,0,0.075); 74 | box-shadow: 0 0 0 5px rgba(0,0,0,0.1); 75 | } 76 | 77 | .docs-nav .widget .widget--header { 78 | font-weight: bold; 79 | } 80 | .docs-nav .widget .widget--header a { 81 | color: inherit; 82 | } 83 | 84 | .d-example { 85 | padding: 4px; 86 | } 87 | 88 | .d-example pre.d-example-code { 89 | margin: 0; 90 | border: none; 91 | border-radius: 0; 92 | background-color: black; 93 | color: white; 94 | } 95 | 96 | .d-example .d-example-preview { 97 | border: 1px solid #ddd; 98 | padding: 16px; 99 | } 100 | .d-example .d-example-preview.d-more-padding { 101 | padding: 32px; 102 | } 103 | 104 | .grid.container { 105 | margin: 0 auto; 106 | } 107 | 108 | .d-example-preview:not(.d-slides-with-js-example) .header-slide, 109 | .d-example-preview .modal, 110 | .d-example-preview .bar, 111 | .d-example-preview:not(.d-dp-with-js-example) .droppanel { 112 | position: relative !important; 113 | top: 0 !important; 114 | left: 0 !important; 115 | right: 0 !important; 116 | bottom: 0 !important; 117 | } 118 | 119 | .d-example .d-slides-with-js-example { 120 | padding-bottom: 6em; 121 | } 122 | 123 | .container { 124 | max-width: 80rem; 125 | } 126 | .d-hide { 127 | display: none !important; 128 | } -------------------------------------------------------------------------------- /assets/fonts/Red_Hat_Display/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright 2019 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont) 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /assets/fonts/Red_Hat_Display/RedHatDisplay-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Red_Hat_Display/RedHatDisplay-Black.ttf -------------------------------------------------------------------------------- /assets/fonts/Red_Hat_Display/RedHatDisplay-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Red_Hat_Display/RedHatDisplay-BlackItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Red_Hat_Display/RedHatDisplay-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Red_Hat_Display/RedHatDisplay-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/Red_Hat_Display/RedHatDisplay-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Red_Hat_Display/RedHatDisplay-BoldItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Red_Hat_Display/RedHatDisplay-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Red_Hat_Display/RedHatDisplay-Italic.ttf -------------------------------------------------------------------------------- /assets/fonts/Red_Hat_Display/RedHatDisplay-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Red_Hat_Display/RedHatDisplay-Medium.ttf -------------------------------------------------------------------------------- /assets/fonts/Red_Hat_Display/RedHatDisplay-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Red_Hat_Display/RedHatDisplay-MediumItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Red_Hat_Display/RedHatDisplay-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Red_Hat_Display/RedHatDisplay-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-Black.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-BlackItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-BoldItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-Italic.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-LightItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-MediumItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-Thin.ttf -------------------------------------------------------------------------------- /assets/fonts/Roboto/Roboto-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codidact/co-design/57cea1f4b83f5fa119e0484ba7432b536574e8ee/assets/fonts/Roboto/Roboto-ThinItalic.ttf -------------------------------------------------------------------------------- /assets/js/docs.js: -------------------------------------------------------------------------------- 1 | // -------------------------- 2 | // Documentation JavaScript 3 | // -------------------------- 4 | // --- not for production --- 5 | // -------------------------- 6 | 7 | /* Category header color change */ 8 | const catHeaderColorChanger = document.querySelector(".js-docs-change-color"); 9 | 10 | !catHeaderColorChanger || catHeaderColorChanger.addEventListener("change", function (e) { 11 | const catHeader = document.querySelector(".d-example .category-header"); 12 | 13 | catHeader.classList.remove("is-turquoise", "is-green", "is-blue", "is-darkblue", "is-purple", "is-bluegray", "is-gray", "is-yellow", "is-orange", "is-pink", "is-red"); 14 | 15 | catHeader.classList.add("is-" + this.value); 16 | }); -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | design.codidact.org -------------------------------------------------------------------------------- /docs_src/_data/navigation.json: -------------------------------------------------------------------------------- 1 | { 2 | "sections": [ 3 | { 4 | "title": "Getting Started", 5 | "url": null, 6 | "links": [ 7 | { 8 | "title": "Installing Co-Design", 9 | "url": "/setup/installation/" 10 | }, 11 | { 12 | "title": "Improving Co-Design", 13 | "url": "/setup/improving/" 14 | }, 15 | { 16 | "title": "Releasing Co-Design", 17 | "url": "/setup/releasing/" 18 | } 19 | ] 20 | }, 21 | { 22 | "title": "Utilities", 23 | "url": "/utilities/", 24 | "links": [ 25 | { 26 | "title": "Basic HTML", 27 | "url": "/utilities/basic-html/" 28 | }, 29 | { 30 | "title": "Typography", 31 | "url": "/utilities/typography/" 32 | }, 33 | { 34 | "title": "Layout", 35 | "url": "/utilities/layout/" 36 | }, 37 | { 38 | "title": "Box Styles", 39 | "url": "/utilities/box/" 40 | }, 41 | { 42 | "title": "Colors", 43 | "url": "/utilities/colors/" 44 | }, 45 | { 46 | "title": "JavaScript", 47 | "url": "/utilities/javascript/" 48 | } 49 | ] 50 | }, 51 | { 52 | "title": "Components", 53 | "url": "/components/", 54 | "links": [ 55 | { 56 | "title": "Tables", 57 | "url": "/components/tables/" 58 | }, 59 | { 60 | "title": "Links", 61 | "url": "/components/links/" 62 | }, 63 | { 64 | "title": "Buttons", 65 | "url": "/components/buttons/" 66 | }, 67 | { 68 | "title": "Inputs", 69 | "url": "/components/inputs/" 70 | }, 71 | { 72 | "title": "Badges", 73 | "url": "/components/badges/" 74 | }, 75 | { 76 | "title": "Notices", 77 | "url": "/components/notices/" 78 | }, 79 | { 80 | "title": "Header", 81 | "url": "/components/header/" 82 | }, 83 | { 84 | "title": "Footer", 85 | "url": "/components/footer/" 86 | }, 87 | { 88 | "title": "Pagination", 89 | "url": "/components/pagination/" 90 | }, 91 | { 92 | "title": "Navigation", 93 | "url": "/components/nav/" 94 | }, 95 | { 96 | "title": "Widgets", 97 | "url": "/components/widgets/" 98 | }, 99 | { 100 | "title": "Modals", 101 | "url": "/components/modals/" 102 | }, 103 | { 104 | "title": "Bar", 105 | "url": "/components/bar/" 106 | }, 107 | { 108 | "title": "Item Lists", 109 | "url": "/components/item-lists/" 110 | }, 111 | { 112 | "title": "Drop Panels", 113 | "url": "/components/drop-panels/" 114 | } 115 | ] 116 | }, 117 | { 118 | "title": "Codidact-specific Components", 119 | "url": "/specific/", 120 | "links": [ 121 | { 122 | "title": "Category Header", 123 | "url": "/specific/category-header/" 124 | }, 125 | { 126 | "title": "Diff", 127 | "url": "/specific/diff/" 128 | }, 129 | { 130 | "title": "Table of Contents", 131 | "url": "/specific/toc/" 132 | }, 133 | { 134 | "title": "Meter", 135 | "url": "/specific/meter/" 136 | }, 137 | { 138 | "title": "Tools", 139 | "url": "/specific/tools/" 140 | } 141 | ] 142 | } 143 | ] 144 | } -------------------------------------------------------------------------------- /docs_src/_data/release.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.12.9" 3 | } 4 | -------------------------------------------------------------------------------- /docs_src/_data/site.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Co-Design", 3 | "url": "https://design.codidact.org", 4 | "baseurl": "" 5 | } -------------------------------------------------------------------------------- /docs_src/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {% if title %}{{ title | escape }} - {% endif %}{{ site.title | escape }} 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs_src/_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Co-Design 5 |
6 |
7 |
8 | 9 | 10 | 11 |
12 |
13 |
-------------------------------------------------------------------------------- /docs_src/_includes/layouts/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include "head.html" %} 4 | 5 | 6 |
7 |
8 | 9 |
10 |

Co-Design

11 |

Welcome to the official homepage of the Co-Design framework, the CSS framework for Codidact.

12 |
13 | Get Started 14 |
15 |
16 |
17 |
version: {{ release.version }}
18 |
hosted: on Github
19 |
open-source: MIT license
20 |
21 |
22 | 23 |
24 |
25 |
26 |

Documentation

27 | {% for section in navigation.sections %} 28 |
29 |
30 | {% if section.url %} 31 | {{ section.title }} 32 | {% else %} 33 | {{ section.title }} 34 | {% endif %} 35 |
36 | {% for link in section.links %} 37 |
38 | {{ link.title }} 39 |
40 | {% endfor %} 41 |
42 | {% endfor %} 43 |
44 |
45 |
46 | {% include "scripts.html" %} 47 | 48 | -------------------------------------------------------------------------------- /docs_src/_includes/layouts/page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include "head.html" %} 4 | 5 | 6 | {% include "header.html" %} 7 |
8 |
9 | 10 |
11 | 12 | {% include "sidebar-nav.html" %} 13 | 14 |
15 | 16 |
17 |
18 |
19 |

{{ title }}

20 |

{{ description }}

21 | {% if beta %} 22 |
This component is still in beta and cannot be considered stable.
23 | {% endif %} 24 | {% if deprecated %} 25 |
This component is deprecated and will be removed in a future release. Do not use it for new views and remove it from old.
26 | {% endif %} 27 | {% if jshelp %} 28 |
29 |

This component could benefit from some JavaScript. You can open a pull request for it.

30 |
31 | {% endif %} 32 | {{ content }} 33 |
34 |
35 |
36 | {% include "scripts.html" %} 37 | 38 | -------------------------------------------------------------------------------- /docs_src/_includes/layouts/playground.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include "head.html" %} 4 | 5 | 6 | {{ content }} 7 | {% include "scripts.html" %} 8 | 9 | -------------------------------------------------------------------------------- /docs_src/_includes/scripts.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs_src/_includes/sidebar-nav.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs_src/components/badges.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Badges 4 | description: Badges are a collection of small, graphic and distinct elements that have in common, that they label something or express properties of something. 5 | --- 6 | 7 | All badges have the CSS class `.badge`, and at least one other class in the form `.is-X`, where X describes the type of the badge. You can contract these two classes to the short form `.badge-X` **when neccessary for operator precedence issues**. 8 | 9 | ## Tags 10 | 11 | Tags are badges that allow classification of content. Often, tags are entered by your users. Tags are created with the CSS classes `.badge.is-tag`. 12 | 13 | There are two types of tags: normal tags and filled tags. Filled tags can be used for example for a group of tags, where on of them is required. Or filled tags could be categories. Filled tags have additionally the class `.is-filled` (deprecated, but also valid: `.is-master-tag`). 14 | 15 | {% example "tags" %} 16 | codidact 17 | design 18 | co-design 19 | {% endexample %} 20 | 21 | It's also possible to color tags, by giving them one of these classes `.is-red`, `.is-yellow`, `.is-green`, `.is-teal` or `.is-muted`. This can be combined with filled tags. You can also make smaller tags with `.is-small`. 22 | 23 | {% example "tags-colored" %} 24 |

Default styles

25 | red 26 | yellow 27 | green 28 | teal 29 | muted 30 |

Filled styles

31 | red 32 | yellow 33 | green 34 | teal 35 | muted 36 |

Small styles

37 | red 38 | yellow 39 | green 40 | teal 41 | muted 42 | {% endexample %} 43 | 44 | 45 | ## Status badges 46 | 47 | Status badges are shown on clickable components to inform the user, that changes or new things are available or that some amount has been selected. 48 | 49 | Create one by using the class `.badge.is-status`. It can (but isn't required to) contain a number indicating the amount of changes. The badge will be styled appropriately in both cases. Don't forget to keep accessibility in mind. 50 | 51 | {% example "status-on-button" %} 52 | 56 | {% endexample %} 57 | 58 | Or you could use it within a category header (here with both possible styles): 59 | 60 | {% example "status-on-category-header" %} 61 |
62 |
63 |
64 | Q&A2 65 | Wiki 66 | Blog 67 |
68 |
69 |
70 |
Q&A
71 |
72 | Questions 73 | Tags 74 | Search 75 |
76 | Ask Question 77 |
78 |
79 |
80 | {% endexample %} 81 | 82 | 83 | ## Awards 84 | 85 | Awards are badges that are given to users for doing good things. Often they are awarded automatically. Awards are created with the CSS classes `.badge.is-award`.

86 | 87 | It's also possible and recommended to add an icon in front of the award label. 88 | 89 | There are three types of awards: bronze, silver and gold. They can be created with the additional classes `.is-bronze`, `.is-silver` and `.is-gold`, respectively. 90 | 91 | {% example "awards" %} 92 | ❤First Upvote 93 | ❤Second Upvote 94 | ❤Third Upvote 95 | {% endexample %} 96 | 97 | 98 | ## User roles 99 | 100 | It's also possible to use badges to show someone's user role (for example: moderator status). These badges are created with the CSS classes `.badge.is-user-role`. They can also be muted with the class `.is-muted`. 101 | 102 | {% example "user-roles" %} 103 | mod 104 | mod 105 | {% endexample %} 106 | 107 | 108 | ## User trust levels 109 | 110 | It's also possible to use badges to show someone's user "trust level", which is a number expressing a user's trust and privilege. These badges are created with the CSS classes `.badge.is-user-trust-level`. They can also be muted with the class `.is-muted`. 111 | 112 | {% example "user-tl" %} 113 | 1 114 | 1382 115 | 42 116 | {% endexample %} -------------------------------------------------------------------------------- /docs_src/components/bar.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Bar 4 | description: The bar is a flexible component shown at the bottom of the screen. 5 | --- 6 | 7 | You can use the bar for many purposes, for example you can show annotations for the current page, add controls for the whole page, that should be permanently visible or add a [Table of Contents](/specific/toc) into it. 8 | 9 | It can contain any content you want. It's not going to become larger than 35% of the screen height, but if it needs less space, it will take less. 10 | 11 | A bar can be created by giving it the class `.bar` and adding a `.bar--container` (should be centered with `.container`) into it. A close button can also be added and will be positioned correctly. 12 | 13 | {% example "simple" %} 14 |
15 |
16 |
17 | 18 |
19 |

You have unsaved changes

20 |
21 |
22 | {% endexample %} 23 | 24 | You can also add more complex contents: 25 | 26 | {% example "simple" %} 27 |
28 | 29 |
30 |

Table of Contents

31 |
32 | 33 |
34 | +2 35 |
36 |
37 | -2 38 |
39 |
40 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem illo voluptatem...

41 |

2 days ago by luap42

42 |
43 | 44 | 45 |
46 | +2 47 |
48 |
49 | -2 50 |
51 |
52 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem illo voluptatem...

53 |

2 days ago by luap42

54 |
55 | 56 | 57 |
58 | +2 59 |
60 |
61 | -2 62 |
63 |
64 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem illo voluptatem...

65 |

2 days ago by luap42

66 |
67 | 68 | 69 |
70 | +2 71 |
72 |
73 | -2 74 |
75 |
76 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem illo voluptatem...

77 |

2 days ago by luap42

78 |
79 | 80 |
81 |
82 |
83 | {% endexample %} 84 | 85 | 86 | 87 |
88 | 89 |
90 |

Table of Contents

91 |
92 | 93 |
94 | +2 95 |
96 |
97 | -2 98 |
99 |
100 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem illo voluptatem...

101 |

2 days ago by luap42

102 |
103 | 104 | 105 |
106 | +2 107 |
108 |
109 | -2 110 |
111 |
112 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem illo voluptatem...

113 |

2 days ago by luap42

114 |
115 | 116 | 117 |
118 | +2 119 |
120 |
121 | -2 122 |
123 |
124 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem illo voluptatem...

125 |

2 days ago by luap42

126 |
127 | 128 | 129 |
130 | +2 131 |
132 |
133 | -2 134 |
135 |
136 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem illo voluptatem...

137 |

2 days ago by luap42

138 |
139 | 140 |
141 |
142 |
-------------------------------------------------------------------------------- /docs_src/components/buttons.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Buttons 4 | description: Links provide actions, and not navigation, unless this is required after doing the action. If you want to provide navigaton, you should use links. 5 | --- 6 | 7 | To mark an element as a button, it needs to have the `.button` class. 8 | 9 | ## Primary buttons 10 | 11 | Buttons come in three forms: primary, danger and muted. The one you'll need most, though, is primary. Therefore all buttons are considered primary, unless you specify something different. 12 | 13 | Primary buttons can have different levels of importance. There are default buttons, which have the least priority, then outlined and then filled buttons. You should only have one filled primary button in a view, as it is considered for the most important action. 14 | 15 | {% example "basic" %} 16 | 17 | 18 | 19 | {% endexample %} 20 | 21 | 22 | ## Danger buttons 23 | 24 | Not everything is nice and happy, though. In these cases, you should use a danger button, to denote, that an action might be dangerous, unintended, destructive or irreversible. 25 | 26 | As primary buttons, danger buttons can have different levels of importance. There are default buttons, which have the least priority, then outlined and then filled buttons. You should only have one filled danger button in a view, as it is considered for the most important action. 27 | 28 | {% example "danger" %} 29 | 30 | 31 | 32 | {% endexample %} 33 | 34 | You can also use any other available secondary colors to create a button of that color (for instance, for informational or success buttons): 35 | 36 | {% example "colors" %} 37 | 38 | 39 | 40 | 41 | 42 | {% endexample %} 43 | 44 | ## Muted buttons 45 | 46 | Sometimes actions are not available or should only be considered secondary to others. For these cases, it's possible to use muted buttons. 47 | 48 | As primary and danger buttons, muted buttons can have different levels of importance. There are default buttons, which have the least priority, then outlined and then filled buttons. 49 | 50 | {% example "muted" %} 51 | 52 | 53 | 54 | {% endexample %} 55 | 56 | ## Button sizes 57 | 58 | It's possible to modify the size of buttons. We have five sizes, besides the default one: small, (default), medium, large, very large, extemely large 59 | 60 | {% example "sizes" %} 61 | 62 | 63 | 64 | 65 | 66 | 67 | {% endexample %} 68 | 69 | ## Icon only buttons 70 | 71 | Sometimes you have buttons, which consist *only* of an icon. These are often used for vote buttons. You can mark a button as icon only, by giving it the class `.is-icon-only`. As normal buttons, they appear as primary/danger/muted buttons and they, too, have different sizes. 72 | 73 | Icon only buttons should have a descriptive `title="..."` attribute for accessibility reasons 74 | 75 | {% example "icon-only" %} 76 | 77 | 78 | 79 | 80 | {% endexample %} 81 | 82 | ## Close buttons 83 | 84 | Co-Design has "close buttons", which should be used, whenever a notice, modal, widget, etc. can be dismissed by the user. It should not trigger any action, besides those neccessary to close the modal. A close button is positioned automatically and cannot be styled with any of the other `.is-X` classes, besides `.is-active`. 85 | 86 | A close button has the class `.is-close-button`, and the HTML entity `&times` (×) as only content. 87 | 88 | {% example "close" %} 89 |
90 | 91 | Something important happened! 92 |
93 | {% endexample %} 94 | 95 | ## Active buttons 96 | 97 | It's possible to mark buttons as active (i.e. pressed), by adding the class `.is-active`. 98 | 99 | ## Button lists 100 | 101 | Co-Design also provides you with button lists, which allow you to group or collapse related buttons. Button lists can also be used for filters, where only one option can be enabled at a time. 102 | 103 | Create a button list, by wrapping your buttons into a container with the class `.button-list`. If you want to collapse them (no space between them), you need to give the container the class `.is-gutterless`. 104 | 105 | All buttons in one button list should have the same form (primary, danger, muted) and size. All buttons in one collapsed button list should have the same style (default, outlined, filled), too. 106 | 107 | {% example "lists" %} 108 |
109 | 110 | 111 | 112 | 113 | 114 |
115 |
116 |
117 | 118 | 119 | 120 | 121 | 122 |
123 | {% endexample %} -------------------------------------------------------------------------------- /docs_src/components/drop-panels.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Drop Panels 4 | description: Drop panels can be used for dropdowns and dropups and are automatically positioned through Co-Design's JavaScript. 5 | --- 6 | 7 | ## Basic 8 | 9 | You create a drop panel by using the class `.droppanel`. Drop panels can contain (among other elements): Drop panel headers (`.droppanel--header`) and drop panel menus (`.droppanel--menu`). The menu contains menu items (``), with active ones marked as `.is-active`. 10 | 11 | By default, drop panels are hidden. You need to give them the class `.is-active` to make them visible. In most cases, Co-Design's JavaScript should be able to do this for you. You can also make a drop panel larger (`.is-large`) or ultra-wide (`.is-wide`). 12 | 13 | {% example "basic" %} 14 |
15 |
16 | Search for... 17 |
18 | 19 |
20 | Order by... 21 |
22 |
23 | Score 24 | Creation date 25 | Last activity 26 | Answer count 27 |
28 |
29 | {% endexample %} 30 | 31 | Here is an example with different sizes 32 | 33 | {% example "sizes" %} 34 |
35 |

Large size.

36 |
37 |
38 |

Wide size.

39 |
40 | {% endexample %} 41 | 42 | ## JavaScript 43 | 44 | Co-Design's JavaScript provides full support for showing drop panels and aligning them automatically. 45 | 46 | Give the drop panel an id or unique class and add `data-drop="[query]"` to the trigger, where the query is a CSS selector for the drop panel. 47 | 48 |
Co-Design only supports one trigger per drop panel — attempting to use multiple triggers may cause bugs!
49 | 50 | If you want to toggle a class on the trigger (for example `.is-active`), you can add `data-drop-self-class-toggle="[class]"` to the trigger. If you want to force a direction (up or down), to which the drop panel should go, add `data-drop-force-dir="[up|down]"` to the trigger. 51 | 52 | {% example "js" "" "d-dp-with-js-example" %} 53 | 54 |
55 |
👋 Hello!
56 |

Welcome to my drop panel!

57 |
58 | {% endexample %} -------------------------------------------------------------------------------- /docs_src/components/footer.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Footer 4 | description: The footer is shown below every page and contains important links and legal information. 5 | --- 6 | 7 | ## Basic 8 | 9 | The footer component is very flexible. You can do both simple and complex footers with Co-Design. Every footer is within a `.footer` element. This should be a `