You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: i18n/en/docusaurus-plugin-content-docs/current/00-welcome.mdx
+11-10Lines changed: 11 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -43,8 +43,8 @@ import { translate } from '@docusaurus/Translate';
43
43
/>
44
44
</div>
45
45
46
-
<KolAlert_type="info">
47
-
<KolLink_href="/docs/concepts/styling/theming"_label="Learn here why <KoliBri /> is so helpful." />
46
+
<KolAlert_type="info"_variant="card">
47
+
<KolLink_label="Learn here why KoliBri is so helpful."_href="/en/docs/concepts/styling/theming" />
48
48
</KolAlert>
49
49
50
50
<br />
@@ -63,10 +63,11 @@ import { translate } from '@docusaurus/Translate';
63
63
## Mission
64
64
65
65
<pclassName="col-12">
66
-
The <kol-link_href="https://html.spec.whatwg.org"_target="w3c">HTML web standard</kol-link>
67
-
is specified to be very "open" in order to be as durable and robust as possible. It therefore often happens that HTML
68
-
compositions are not readily accessible, semantic and valid. <KoliBri /> builds directly on the <kol-link_href="https://www.w3.org"_target="w3c">W3C</kol-link> <kol-link_href="https://www.w3.org/standards/webdesign/"_target="w3c">web standards</kol-link> (framework-agnostic), is thereby a generic reference implementation of the{''}
69
-
<kol-link_href="https://www.w3.org/WAI/standards-guidelines/wcag/"_target="wcag">WCAG standard</kol-link> and <kol-link_href="https://www.bitvtest.de/bitv_test.html"_target="bitv"> BITV</kol-link> for accessibility, and is implemented as a multi-theme-enabled presentation layer. There is no technical reference and
66
+
The <KolLink_label="HTML web standard"_href="https://html.spec.whatwg.org"_target="blank" /> is specified to be very "open" in order to be as durable and robust as possible. It therefore often happens that HTML compositions are not readily accessible, semantic and valid.
67
+
<KoliBri /> builds directly on the <KolLink_label="W3C"_href="https://www.w3.org"_target="blank"/>
68
+
<KolLink_label="web standards"_href="https://www.w3.org/standards/webdesign/"_target="blank" /> (framework-agnostic), is thereby a generic reference implementation of the
69
+
<KolLink_label="WCAG standard"_href="https://www.w3.org/WAI/standards-guidelines/wcag/"_target="blank" /> and
70
+
<KolLink_label="BITV"_href="https://www.bitvtest.de/bitv_test.html"_target="blank" /> for accessibility, and is implemented as a multi-theme-enabled presentation layer. There is no technical reference and
70
71
no data transfer functionalities. This makes <KoliBri /> equally reusable for the realization of static websites as
71
72
well as dynamic web applications of different corporate designs and style guides and thus very interesting for open
72
73
source.
@@ -98,7 +99,7 @@ import { translate } from '@docusaurus/Translate';
98
99
<ul>
99
100
<li>
100
101
<strong>Making accessible</strong>: The artifacts and source code can be reused freely and without charge by
101
-
anyone. In this way, the ITZBund makes a contribution in the sense of <kol-link_href="https://publiccode.eu/"_target="publiccode">“Public Money – Public Code”</kol-link>.
102
+
anyone. In this way, the ITZBund makes a contribution in the sense of <KolLink_label="“Public Money – Public Code”"_href="https://publiccode.eu/"_target="blank" />.
102
103
</li>
103
104
<li>
104
105
<strong>Warranty and liability disclaimer</strong>: No warranty or liability claims are associated with the reuse.
@@ -141,7 +142,7 @@ import { translate } from '@docusaurus/Translate';
141
142
142
143
<pclassName="col-12">
143
144
Web components can be rendered on the client side (CSR), prerendered (SSG), or on the server side (SSR). The rendering
144
-
depends on the respective technical framework conditions (<KolLink_href="https://web.dev/rendering-on-the-web/"_target="web.dev">https://web.dev</KolLink>, <KolLink_href="https://medium.com/nerd-for-tech/compare-and-contrast-csr-ssr-and-ssg-in-nextjs-58e3caf2e15e"_target="web.dev">https://medium.com</KolLink>).
145
+
depends on the respective technical framework conditions (<KolLink_label="https://web.dev"_href="https://web.dev/rendering-on-the-web/"_target="blank" />, <KolLink_label="https://medium.com"_href="https://medium.com/nerd-for-tech/compare-and-contrast-csr-ssr-and-ssg-in-nextjs-58e3caf2e15e"_target="blank" />).
145
146
</p>
146
147
<p>
147
148
<KolAlert_type="info"_variant="card">
@@ -156,7 +157,7 @@ import { translate } from '@docusaurus/Translate';
156
157
<KolAlert_type="info"_variant="card">
157
158
<small>
158
159
🧪 Server-side rendering of Web Components is an exciting new functionality where adjustments to the prerenderer
159
-
will still be necessary and is therefore classified as experimental on our part (<KolLink_href="https://web.dev/declarative-shadow-dom/"_target="web.dev">https://web.dev</KolLink>).
160
+
will still be necessary and is therefore classified as experimental on our part (<KolLink_label="https://web.dev"_href="https://web.dev/declarative-shadow-dom/"_target="blank" />).
160
161
</small>
161
162
</KolAlert>
162
163
</p>
@@ -208,7 +209,7 @@ import { translate } from '@docusaurus/Translate';
208
209
existing feature set.
209
210
</li>
210
211
</ul>
211
-
You can find the complete description of the SemVer here: <kol-link_href="https://semver.org"_target="semver">https://semver.org</kol-link>
212
+
You can find the complete description of the SemVer here: <KolLink_href="https://semver.org"_target="blank" />
Copy file name to clipboardExpand all lines: i18n/en/docusaurus-plugin-content-docs/current/03-faq.mdx
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -18,43 +18,43 @@ import { KolLink } from '@public-ui/react';
18
18
19
19
-**What is so special about KoliBri?**<br/>
20
20
KoliBri offers granular, easily reusable HTML compositions that are semantically accessible and decoupled from the design. Using the basic styling, which is limited exclusively to the layout, the components can be easily adapted to your own corporate design.
21
-
-**How do you save with KoliBri?**<br/>
21
+
-**How do you save with KoliBri?**<br/>
22
22
Websites/applications are implemented with different HTML elements and variants of elements. Each of these HTML structures must be semantically accessible and marked. KoliBri focuses on exactly such HTML structures and their variants and summarizes them in clearly defined components. The development teams that later reuse KoliBri can now use these components and adjust parameters to display different variants without having to think about the correctness of the HTML structure within the component. You are relieved and can focus more on the implementation of the actual technicality.<br/>
23
-
-**How can you not explain KoliBri technically?**<br/>
23
+
-**How can you not explain KoliBri technically?**<br/>
24
24
KoliBri is for accessibility like a Thermomix® is for cooking. It makes cooking easier because you can simply choose a suitable dish (component) without having to know how to cook it exactly. The Thermomix® (KoliBri) guides you through the cooking process (parameters for different variants) and ensures that the right dish (accessible user interface) comes out at the end.
25
-
-**How dependent will I be if I use KoliBri?**<br/>
25
+
-**How dependent will I be if I use KoliBri?**<br/>
26
26
If you compare KoliBri with a LEGO® set, you can simply mix the building blocks it contains with other building blocks to depict the overall application. You enter into a partial dependency (logical) in order to receive advantages in ensuring accessibility in return.
27
-
-**How can I influence a component if necessary?**<br/>
27
+
-**How can I influence a component if necessary?**<br/>
28
28
KoliBri components are very restrictive to ensure accessibility and are reused through composition. Adjustments from the outside can only be made through wrapping or the Expert slot. The styling is possible via the theme concept through configuration.
29
29
-**What do I do if a component or feature is missing?**<br/>
30
30
New technically neutral components or functions are to be implemented within KoliBri. Participation in this is expressly desired and will speed up implementation.
31
31
-**What does the licensing say?**<br/>
32
32
The EUPL allows unrestricted use of the artifacts, which can be customized in a configurative way to suit one's needs.
33
33
On the other hand, it forces the disclosure of changes made when copying source code from KoliBri (Copy-Left).
34
-
See the <KolLink_href="/docs/project/license"_label="License" /> for more information.
34
+
See the <KolLink_label="License"_href="/en/docs/project/license" /> for more information.
35
35
36
36
## Theming and styling
37
37
38
38
-**Who creates a theme if it doesn't already exist?**<br/>
39
39
The current situation is that the ITZBund has implemented and maintains numerous themes of its customer authorities and example themes. However, the theme concept provides that themes can be created and maintained independently. We are happy to answer any questions and can provide selective support. As soon as your own theme has been created, an independent accessibility test is necessary to ensure, for example, the contrast ratios of the color values. Themes that have been created and tested can now be used again in other projects.
40
-
-**How does theming work?**<br/>
40
+
-**How does theming work?**<br/>
41
41
Typically, web components are created with fixed styling. KoliBri separates the semantically accessible components from the styling and provides a register method for combining them. Since the web components must always be registered (defined) in the browser, there is the option here of loading the components with a defined theme.
42
-
-**How to create your own theme?**<br/>
43
-
We are always working to further simplify the creation and maintenance of themes. For example, the basic styling (pure layout) of the components from version 1.5 is used for this. You can set it up simply by creating a theme definition, e.g. with your own theme project (NPM package) using the <KolLink_href="https://github.com/public-ui/kolibri/blob/45726c50d7f28c9c595442b2241582816eca5670/packages/create-kolibri/templates/kolibri-library/packages/components/src/global/script.ts#L8"_label="TS file"_target="github"/>. Our <KolLink_href="/designer/"_label="Theme Designer"_target="designer"/> is also helpful for creating and maintaining themes.
42
+
-**How to create your own theme?**<br/>
43
+
We are always working to further simplify the creation and maintenance of themes. For example, the basic styling (pure layout) of the components from version 1.5 is used for this. You can set it up simply by creating a theme definition, e.g. with your own theme project (NPM package) using the <KolLink_label="TS file"_href="https://github.com/public-ui/kolibri/blob/45726c50d7f28c9c595442b2241582816eca5670/packages/create-kolibri/templates/kolibri-library/packages/components/src/global/script.ts#L8"_target="blank"/>. Our <KolLink_label="Theme Designer"_href="/designer/"_target="blank"/> is also helpful for creating and maintaining themes.
44
44
-**Why does CSS need to be managed in JavaScript?**<br/>
45
45
KoliBri components are not styled solely using embedded CSS or the use of CSS frameworks (such as Bootstrap, Material-UI, Tailwind CSS, etc.), but
46
46
about the technical setting of CSS on the component. This has the advantage that the components are independent of the external CSS. Robustness is an architectural quality objective. It is reflected in the fact that only the component itself decides on its styling.
47
47
-**Why do you need the scheme?**<br/>
48
-
KoliBri is based on a sophisticated <KolLink_href="/docs/concepts/architecture"_label="Architecture" />. For example, the small schema package (@public-ui/schema) is used to define the tag names and language keys of the KoliBri components independently of the concrete implementation. This enables completely detached work with auto-completion when creating the theme, but without needing the components and their dependencies. This has advantages in some integration scenarios, such as static pages or content management systems (CMS).
48
+
KoliBri is based on a sophisticated <KolLink_href="/en/docs/concepts/architecture"_label="Architecture" />. For example, the small schema package (@public-ui/schema) is used to define the tag names and language keys of the KoliBri components independently of the concrete implementation. This enables completely detached work with auto-completion when creating the theme, but without needing the components and their dependencies. This has advantages in some integration scenarios, such as static pages or content management systems (CMS).
49
49
50
50
## Technical
51
51
52
52
-**Why can KoliBri components really be accessible?**<br/>
53
53
The KoliBri components are designed in terms of software architecture in such a way that they can only be instrumented via properties and not via their own HTML that can be entered. This means that the components can only be controlled via the API (properties). This is a quality feature because the components cannot be manipulated from the outside. The components are very restrictive and can therefore always be accessible.<br/>
54
-
In order to be able to break out of this restriction, there is the <KolLink_href="/docs/concepts/expert-slot"_label="Expert-Slot" />, which makes it possible to embed your own HTML in the component. Accessibility via the expert slot is in the hands of the expert (developer) and should only be used in exceptional cases.
54
+
In order to be able to break out of this restriction, there is the <KolLink_href="/en/docs/concepts/expert-slot"_label="Expert-Slot" />, which makes it possible to embed your own HTML in the component. Accessibility via the expert slot is in the hands of the expert (developer) and should only be used in exceptional cases.
55
55
-**Why are component properties sometimes named differently from HTML naming?**<br/>
56
-
In order to keep KoliBri easy to learn, the HTML naming is usually used. But even the HTML standard is not uniform in its naming across several elements (components). And that is why we have chosen uniform names for similar properties in KoliBri. See concept <KolLink_href="/docs/concepts/properties"_label="Properties" /> for more information.
56
+
In order to keep KoliBri easy to learn, the HTML naming is usually used. But even the HTML standard is not uniform in its naming across several elements (components). And that is why we have chosen uniform names for similar properties in KoliBri. See concept <KolLink_href="/en/docs/concepts/properties"_label="Properties" /> for more information.
57
57
58
58
## Any questions?
59
59
60
-
If you still have questions, please send us an email to <KolLink_href="mailto:kolibri@itzbund.de"_label="kolibri@itzbund.de"_target="email"_icons="codicon codicon-mail" />.
60
+
If you still have questions, please send us an email to <KolLink_href="mailto:kolibri@itzbund.de"_label="kolibri@itzbund.de"_icons="codicon codicon-mail" />.
0 commit comments