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/version-2.1/03-faq.mdx
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -31,7 +31,7 @@ import { KolLink } from '@public-ui/react';
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="/en/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
@@ -40,21 +40,21 @@ import { KolLink } from '@public-ui/react';
40
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
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="_blank" />. Our <KolLink_href="/designer/"_label="Theme Designer"_target="_blank" /> is also helpful for creating and maintaining themes.
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="/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).
48
+
KoliBri is based on a sophisticated <KolLink_label="Architecture"_href="/en/docs/concepts/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="/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.
54
+
In order to be able to break out of this restriction, there is the <KolLink_label="Expert-Slot"_href="/en/docs/concepts/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="/en/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_label="Properties"_href="/en/docs/concepts/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"_icons="codicon codicon-mail" />.
60
+
If you still have questions, please send us an email to <KolLink_label="kolibri@itzbund.de"_href="mailto:kolibri@itzbund.de"_icons="codicon codicon-mail" />.
All packages/artifacts of KoliBri are provided versioned in the public <kol-link_href="https://www.npmjs.com/search?q=%40public-ui"_target="npmjs">NPM-Registry</kol-link>.
11
+
All packages/artifacts of KoliBri are provided versioned in the public <KolLink_label="NPM-Registry"_href="https://www.npmjs.com/search?q=%40public-ui"_target="_blank" />.
and are therefore reusable in all web-based projects. In the following figure, these components are represented by the
42
-
gray-dashed shapes in the center.
12
+
The unique feature of <KoliBri /> is the <strong>reference implementation</strong> of components that are <strong>semantically W3C- and WCAG-compliant</strong> from the ground up and thus <strong>completely accessible</strong> regarding assistive support. All components are implemented as <KolLink_label="Web Components"_href="https://developer.mozilla.org/en-US/docs/Web/Web_Components"_target="_blank" />
13
+
and are therefore reusable in all web-based projects. In the following figure, these components are represented by the gray-dashed shapes in the center.
43
14
</p>
44
15
<p>
45
16
<KolIndentedText>
@@ -48,40 +19,20 @@ import { Mermaid } from '@site/src/components/Mermaid';
48
19
</p>
49
20
50
21
<img
51
-
src="/assets/abgrenzung.jpg"
22
+
src="/en/assets/abgrenzung.jpg"
52
23
alt="Illustration of how components become custom components using various style guides."
53
24
/>
54
25
55
26
<p>
56
27
In the first release (v1.0) <KoliBri /> had directly implemented the individualization of the standard design using
(<KolLink_label="Design-Tokens"_href="https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71"_target="_blank" />, <KolLink_label="Tailwind CSS"_href="https://tailwindcss.com"_target="_blank" />). With the implementation of further themes, however, we have found that we would have to introduce more and more CSS-Properties to be able to implement the flexibility for the desired design/UX (Corporate Design/Style guide). In
30
+
case of doubt, a separate property would have to be provided for each customizability. The example of the <KolLink_label="MUI-Button CSS"_href="https://mui.com/material-ui/api/button/#css"_target="_blank" /> shows well how the CSS properties (design tokens) become more and more.
76
31
</p>
77
32
<p>
78
33
<KolIndentedText>
79
34
<strong>
80
-
2. We have completely decoupled the whole CSS from the components (like{''}
2. We have completely decoupled the whole CSS from the components (like <KolLink_label="Styled-Components"_href="https://styled-components.com"_target="_blank" />).
85
36
</strong>
86
37
</KolIndentedText>
87
38
</p>
@@ -141,20 +92,20 @@ stateDiagram-v2
141
92
142
93
<p>
143
94
For example, the UI/UX team specifies the components of their design system with Figma. When the specification is
144
-
transferred to implementation, the design is “transferred” to the basic components in the form of pure CSS using{''}
145
-
<KolLink_href="/en/docs/concepts/styling/designer">KoliBri-Designers</KolLink>. If customizability is desired in your
95
+
transferred to implementation, the design is “transferred” to the basic components in the form of pure CSS using the
96
+
<KolLink_label="KoliBri-Designer"_href="/en/docs/concepts/styling/designer" />. If customizability is desired in your
146
97
design system, CSS properties or design tokens can be defined in the Designer for this purpose. So that the own theme
147
98
can be shared across projects, the theme is packaged in an NPM package and can be made available via any registry.
148
99
</p>
149
100
<p>
150
-
<KolDetails_summary="Design-Tokens">
101
+
<KolDetails_label="Design-Tokens">
151
102
Optionally, design schemes can be exported from Figma, for example, using design tokens. These can then be
152
103
transferred into separate CSS files that contain the respective values for the CSS properties. Later, one of these
153
104
CSS files is used to apply the concrete design in combination with the Web Components and the theme on the website.
154
105
</KolDetails>
155
106
</p>
156
107
<p>
157
-
<KolDetails_summary="Dark-Mode">
108
+
<KolDetails_label="Dark-Mode">
158
109
Optionally, a “dark mode” theme can also be implemented. For this, the required CSS can be stored in the globals of
159
110
the KoliBri theme.
160
111
</KolDetails>
@@ -164,10 +115,6 @@ stateDiagram-v2
164
115
<p>
165
116
Own specific components, which are not provided by KoliBri and unfortunately do not fit to the KoliBri component
166
117
variety, can be built in own component libraries and maintained independently. For this purpose, we offer the
<span>Click here to open the designer in a new browser window.</span>
24
-
</div>
25
-
</KolLink>
6
+
<KolCard_label="Create own theme"_level={2}>
7
+
<KolLink_label="Click here to open the designer in a new browser window."_href="/designer"_target="_blank"_icons={{ left:'codicon codicon-paintcan' }} />
Copy file name to clipboardExpand all lines: i18n/en/docusaurus-plugin-content-docs/version-2.1/20-concepts/07-swizzling.md
+3-1Lines changed: 3 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -8,6 +8,8 @@ tags:
8
8
- concept
9
9
---
10
10
11
+
import { KolLink } from '@public-ui/react';
12
+
11
13
## Motivation
12
14
13
15
Numerous, sometimes complex requirements for components of design systems or component libraries would not have to be considered over and over again if there were small-scale, easily reusable basic components to carry these requirements.
@@ -24,4 +26,4 @@ The easiest method to customize a KoliBri component is wrapping. Here, an own co
24
26
25
27
### Overwriting
26
28
27
-
Another variant of swizzling is the overwriting of the inner component construction. In Web Components, this is often done using slots. In KoliBri, we have introduced the <kol-link_href="expert-slot"_label="expert slots"></kol-link> for this purpose.
29
+
Another variant of swizzling is the overwriting of the inner component construction. In Web Components, this is often done using slots. In KoliBri, we have introduced the <KolLink_label="expert slots"_href="expert-slot" /> for this purpose.
Copy file name to clipboardExpand all lines: i18n/en/docusaurus-plugin-content-docs/version-2.1/20-concepts/09-formular.mdx
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -8,17 +8,17 @@ tags:
8
8
- concept
9
9
---
10
10
11
-
As part of the refactoring to improve the developer experience, we have restructured the input components and converted them into separate components according to the <kol-link_href="https://html.spec.whatwg.org/multipage/input.html"_target="w3c">W3C-Aufteilung</kol-link>.
11
+
import { KolLink } from'@public-ui/react';
12
+
13
+
As part of the refactoring to improve the developer experience, we have restructured the input components and converted them into separate components according to the <KolLink_label="W3C separation"_href="https://html.spec.whatwg.org/multipage/input.html"_target="_blank" />.
12
14
In this way, the respective components only provide the properties that also have a function for the respective type. Properties that were previously maintained but had no function were removed from the programming.
, then all types of an input field are implemented with only one tag (component). This results in the fact that all properties (attributes/properties) are
19
+
If you look at the <KolLink_label=""_href="https://developer.mozilla.org/de/docs/Web/HTML/Element/Input"_target="_blank">
</KolLink>, then all types of an input field are implemented with only one tag (component). This results in the fact that all properties (attributes/properties) are
22
22
possible, but have no function depending on the type.
Copy file name to clipboardExpand all lines: i18n/en/docusaurus-plugin-content-docs/version-2.1/20-concepts/10-datenschutz.mdx
+4-2Lines changed: 4 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -7,14 +7,16 @@ tags:
7
7
- concept
8
8
---
9
9
10
+
import { KolLink } from'@public-ui/react';
11
+
10
12
# Privacy concept
11
13
12
14
This concept addresses and explains the aspects of the KoliBri component library that are relevant from a data protection perspective.
13
15
14
-
> The <kol-link_href="/docs_en/datenschutz">privacy policy</kol-link> regarding the open source approach is described in a separate document.
16
+
> The <KolLink_label="privacy policy"_href="/docs_en/datenschutz" /> regarding the open source approach is described in a separate document.
15
17
16
18
## Introduction
17
19
18
-
The component library KoliBri has an obvious and focused target area of its technical functional expression, which is described in detail in the <kol-link_href="/docs_en/manifest">manifest</kol-link>.
20
+
The component library KoliBri has an obvious and focused target area of its technical functional expression, which is described in detail in the <KolLink_label="manifest"_href="/docs_en/manifest" />.
19
21
20
22
KoliBri is a collection of small, semantically accessible and flexibly reusable web components without any business logic or other data processing functionalities. In particular, it does not contain any functionalities for sending data. The aim is exclusively to ensure semantically accessible HTML markup of the various elements (components) in different style guides.
<KolLink_label="European Union Public Licence (EUPL)"_href="https://ec.europa.eu/info/european-union-public-licence_en"_target="_blank" /> can be found.
0 commit comments