|
| 1 | +--- |
| 2 | +slug: / |
| 3 | +title: Welcome |
| 4 | +description: We want to jointly provide accessible basic components. |
| 5 | +tags: |
| 6 | + - Demo |
| 7 | + - Getting started |
| 8 | +--- |
| 9 | + |
| 10 | +import { |
| 11 | + KolAbbr, |
| 12 | + KolAlert, |
| 13 | + KolCard, |
| 14 | + KolHeading, |
| 15 | + KolIconIcofont, |
| 16 | + KolIndentedText, |
| 17 | + KolIcon, |
| 18 | + KolKolibri, |
| 19 | + KolDetails, |
| 20 | + KolLink, |
| 21 | + KolLogo, |
| 22 | + KolTable, |
| 23 | +} from '@public-ui/react'; |
| 24 | +import { KoliBri } from '@site/src/components/KoliBri'; |
| 25 | +import { KoliBriAbbr } from '@site/src/components/KoliBriAbbr'; |
| 26 | +import { WelcomeQualityTable, WelcomeSupportTable } from '@site/src/components/docs/Welcome'; |
| 27 | +import { translate } from '@docusaurus/Translate'; |
| 28 | + |
| 29 | +<div className="flex gap-4"> |
| 30 | + <KolLogo |
| 31 | + _org="ITZBund" |
| 32 | + style={{ |
| 33 | + display: 'block', |
| 34 | + width: '175px', |
| 35 | + marginTop: '1em', |
| 36 | + }} |
| 37 | + /> |
| 38 | + <KolKolibri |
| 39 | + style={{ |
| 40 | + display: 'block', |
| 41 | + width: '100px', |
| 42 | + marginBottom: '1em', |
| 43 | + }} |
| 44 | + /> |
| 45 | +</div> |
| 46 | + |
| 47 | +<KolAlert _type="info"> |
| 48 | + <KolLink _href="/docs/concepts/styling/theming"> |
| 49 | + {' '} |
| 50 | + Learn here why <KoliBri /> is so helpful. |
| 51 | + </KolLink> |
| 52 | +</KolAlert> |
| 53 | + |
| 54 | +<br /> |
| 55 | + |
| 56 | +<p className="col-12"> |
| 57 | + <KoliBriAbbr /> |
| 58 | +</p> |
| 59 | + |
| 60 | +## Vision |
| 61 | + |
| 62 | +<p className="col-12"> |
| 63 | + Together, we make <strong>HTML semantically accessible using reusable Web Components</strong> to ensure{' '} |
| 64 | + <strong>usability</strong> and <strong>accessibility</strong>. |
| 65 | +</p> |
| 66 | + |
| 67 | +## Mission |
| 68 | + |
| 69 | +<p className="col-12"> |
| 70 | + The{' '} |
| 71 | + <kol-link _href="https://html.spec.whatwg.org" _target="w3c"> |
| 72 | + HTML web standard |
| 73 | + </kol-link>{' '} |
| 74 | + is specified to be very "open" in order to be as durable and robust as possible. It therefore often happens that HTML |
| 75 | + compositions are not readily accessible, semantic and valid. <KoliBri /> builds directly on the{' '} |
| 76 | + <kol-link _href="https://www.w3.org" _target="w3c"> |
| 77 | + W3C |
| 78 | + </kol-link>{' '} |
| 79 | + <kol-link _href="https://www.w3.org/standards/webdesign/" _target="w3c"> |
| 80 | + web standards |
| 81 | + </kol-link>{' '} |
| 82 | + (framework-agnostic), is thereby a generic reference implementation of the{' '} |
| 83 | + <kol-link _href="https://www.w3.org/WAI/standards-guidelines/wcag/" _target="wcag"> |
| 84 | + WCAG standard |
| 85 | + </kol-link>{' '} |
| 86 | + and{' '} |
| 87 | + <kol-link _href="https://www.bitvtest.de/bitv_test.html" _target="bitv"> |
| 88 | + BITV |
| 89 | + </kol-link>{' '} |
| 90 | + for accessibility, and is implemented as a multi-theme-enabled presentation layer. There is no technical reference and |
| 91 | + no data transfer functionalities. This makes <KoliBri /> equally reusable for the realization of static websites as |
| 92 | + well as dynamic web applications of different corporate designs and style guides and thus very interesting for open |
| 93 | + source. |
| 94 | +</p> |
| 95 | + |
| 96 | +## Collaboration and cooperation |
| 97 | + |
| 98 | +<p> |
| 99 | + The <strong>focus</strong> of <KoliBri /> is on <strong>small</strong> (atomic), very <strong>flexible</strong> and |
| 100 | + well <strong>reusable</strong> HTML compositions (e.g. button). We provide an accessible, semantic and valid standard |
| 101 | + implementation of such components that can be reused for any higher-level HTML structure or component (molecule, |
| 102 | + organism or template). |
| 103 | +</p> |
| 104 | +<p> |
| 105 | + We should <strong>collaborate</strong> and <strong>cooperate</strong> on these atomic components in order to bundle |
| 106 | + our skills and knowledge. Through the synergy effects at the basic components, our own focus can be placed more on |
| 107 | + subject-specific content. |
| 108 | +</p> |
| 109 | +<p> |
| 110 | + Let <strong>us</strong> make <KoliBri /> <strong>better</strong> and more <strong>colorful</strong>{' '} |
| 111 | + <strong>together</strong>! |
| 112 | +</p> |
| 113 | + |
| 114 | +## License |
| 115 | + |
| 116 | +<p className="col-12"> |
| 117 | + <KoliBri /> is released under the <strong>EUROPEAN UNION PUBLIC LICENCE v1.2</strong> open source. The following |
| 118 | + aspects are in particular thereby considered: |
| 119 | + <br /> |
| 120 | + <ul> |
| 121 | + <li> |
| 122 | + <strong>Making accessible</strong>: The artifacts and source code can be reused freely and without charge by |
| 123 | + anyone. In this way, the ITZBund makes a contribution in the sense of{' '} |
| 124 | + <kol-link _href="https://publiccode.eu/" _target="publiccode"> |
| 125 | + “Public Money – Public Code” |
| 126 | + </kol-link> |
| 127 | + . |
| 128 | + </li> |
| 129 | + <li> |
| 130 | + <strong>Warranty and liability disclaimer</strong>: No warranty or liability claims are associated with the reuse. |
| 131 | + </li> |
| 132 | + <li> |
| 133 | + <strong>“Copyleft” clause</strong>: Copyleft states that any copy of <KoliBri /> (fork) must be re-released under |
| 134 | + the same or a compatible open-source license. |
| 135 | + </li> |
| 136 | + </ul> |
| 137 | +</p> |
| 138 | + |
| 139 | +## Delimitation |
| 140 | + |
| 141 | +<p className="col-12"> |
| 142 | + To use <KoliBri /> correctly, it is important to know where it unleashes its potential. <KoliBri /> is reusable in |
| 143 | + many ways because the styling has been completely decoupled and rendering is possible client-side but also |
| 144 | + server-side. |
| 145 | +</p> |
| 146 | + |
| 147 | +### Styling |
| 148 | + |
| 149 | +<p className="col-12"> |
| 150 | + <KoliBri /> is neither a CSS framework nor a design system, but a library of frequently used components that have |
| 151 | + accessibility and usability requirements. To avoid having to look at these requirements over and over again,{' '} |
| 152 | + <KoliBri /> uses Web Components to create an overarching uniform standard for all style guides here. |
| 153 | +</p> |
| 154 | +<p className="col-12"> |
| 155 | + The more relevant components are found and implemented, the more value is added to all web-based projects. However,{' '} |
| 156 | + <KoliBri /> does not aim to implement components without accessibility and usability requirements. Standard HTML and |
| 157 | + CSS or alternative CSS frameworks can be used for this purpose. |
| 158 | +</p> |
| 159 | +<p className="col-12"> |
| 160 | + <KolAlert _type="success"> |
| 161 | + <KoliBri /> components can be seamlessly integrated into existing websites or web applications and provide their |
| 162 | + style (guide) themselves, encapsulating it almost completely from the outside. |
| 163 | + </KolAlert> |
| 164 | +</p> |
| 165 | + |
| 166 | +### Rendering |
| 167 | + |
| 168 | +<p className="col-12"> |
| 169 | + Web components can be rendered on the client side (CSR), prerendered (SSG), or on the server side (SSR). The rendering |
| 170 | + depends on the respective technical framework conditions ( |
| 171 | + <KolLink _href="https://web.dev/rendering-on-the-web/" _target="web.dev"> |
| 172 | + https://web.dev |
| 173 | + </KolLink> |
| 174 | + ,{` `} |
| 175 | + <KolLink |
| 176 | + _href="https://medium.com/nerd-for-tech/compare-and-contrast-csr-ssr-and-ssg-in-nextjs-58e3caf2e15e" |
| 177 | + _target="web.dev" |
| 178 | + > |
| 179 | + https://medium.com |
| 180 | + </KolLink> |
| 181 | + ). |
| 182 | +</p> |
| 183 | +<p> |
| 184 | + <KolIndentedText className="col-12"> |
| 185 | + <small> |
| 186 | + 💡 It should be noted that Web Components is a JavaScript-based web standard. Server-side rendering allows the Web |
| 187 | + Component to be rendered for optimal display speed on the client. If client-side JavaScript is allowed, the full |
| 188 | + dynamics of the Web Component are also available client-side. However, if you want to avoid using JavaScript on |
| 189 | + the client side, the Web Component is rendered, but the dynamics are lost. |
| 190 | + </small> |
| 191 | + </KolIndentedText> |
| 192 | + <br /> |
| 193 | + <KolIndentedText className="col-12"> |
| 194 | + <small> |
| 195 | + 🧪 Server-side rendering of Web Components is an exciting new functionality where adjustments to the prerenderer |
| 196 | + will still be necessary and is therefore classified as experimental on our part ( |
| 197 | + <KolLink _href="https://web.dev/declarative-shadow-dom/" _target="web.dev"> |
| 198 | + https://web.dev |
| 199 | + </KolLink> |
| 200 | + ). |
| 201 | + </small> |
| 202 | + </KolIndentedText> |
| 203 | +</p> |
| 204 | + |
| 205 | +## Versioning |
| 206 | + |
| 207 | +<p className="col-12"> |
| 208 | + <KoliBri /> follows the principles of semantic versioning. |
| 209 | +</p> |
| 210 | +<p className="col-12"> |
| 211 | + Structure of a version: |
| 212 | + <ul> |
| 213 | + <li> |
| 214 | + It usually consists of 3 parts (e.g. 1.0.2) |
| 215 | + <ul> |
| 216 | + <li> |
| 217 | + Major, here the <i>1</i> |
| 218 | + </li> |
| 219 | + <li> |
| 220 | + Minor, here the <i>0</i> |
| 221 | + </li> |
| 222 | + <li> |
| 223 | + Patch, here the <i>2</i> |
| 224 | + </li> |
| 225 | + </ul> |
| 226 | + </li> |
| 227 | + <li> |
| 228 | + For the release phase of a version, you can use additional labels (e.g. 1.0.3-rc.2) |
| 229 | + <ul> |
| 230 | + <li> |
| 231 | + Label, here the <i>rc.2</i> |
| 232 | + </li> |
| 233 | + </ul> |
| 234 | + </li> |
| 235 | + </ul> |
| 236 | +</p> |
| 237 | +<p className="col-12"> |
| 238 | + The following main principles are applied: |
| 239 | + <ul> |
| 240 | + <li> |
| 241 | + <b>Patch</b>: Includes changes that improve the current functionality and do not change its use. |
| 242 | + </li> |
| 243 | + <li> |
| 244 | + <b>Minor</b>: Includes changes that extend the functional scope and do not change the existing functional scope in |
| 245 | + its use. |
| 246 | + </li> |
| 247 | + <li> |
| 248 | + <b>Major</b>: Includes changes that enable architectural realignment and are allowed to change the use of the |
| 249 | + existing feature set. |
| 250 | + </li> |
| 251 | + </ul> |
| 252 | + You can find the complete description of the SemVer here:{' '} |
| 253 | + <kol-link _href="https://semver.org" _target="semver"> |
| 254 | + https://semver.org |
| 255 | + </kol-link> |
| 256 | +</p> |
| 257 | + |
| 258 | +## Quality objectives |
| 259 | + |
| 260 | +<p className="col-12"> |
| 261 | + The following table lists the prioritized qualities of <KoliBri />: |
| 262 | +</p> |
| 263 | +<WelcomeQualityTable lang="en" /> |
| 264 | + |
| 265 | +## Device, operating system, browser and screen reader requirements |
| 266 | + |
| 267 | +<p className="col-12"> |
| 268 | + <KoliBri /> is intended for the implementation of any web-based user interfaces and should be able to be used on all |
| 269 | + modern devices (PC, tablet, mobile), operating systems (Windows, Linux, macOS, Android, iOS) and standards-compliant |
| 270 | + browsers. |
| 271 | + <br /> |
| 272 | + Microsoft Internet Explorer is explicitly not supported in order not to weaken the project and the development by |
| 273 | + legacy. Instead, <KoliBri /> consistently invests in the future. |
| 274 | +</p> |
| 275 | +<WelcomeSupportTable lang="en" /> |
0 commit comments