Change Details

## Background - **Description:** Create a CSS/LESS only implementation of Codex components (maybe just a subset of them) - **History:** This is an approach that has been followed by many other design systems; it will help Codex to cover use-cases where using Vue (or JS at all) would not be appropriate - **Known use case(s):** - Main use case: Allow teams who have performance or security constraints to achieve visual consistency with the design system without using JS/Vue - Secondary use case: Enable rapid prototyping - Secondary use case: Create a pathway for building Codex-compliant features that doesn't require JS or Vue knowledge - **Considerations:** Can we avoid duplication by having the CSS "components" share styles with the Vue components? Would it make sense to publish a `codex-styles` package that contains LESS mixing, which then gets used in the Codex Vue components? ### User stories - As a developer of a feature that cannot use JS for performance or security reasons, I'd like my UI to have visual consistency with the wider design system. I'd also like to be able to simply re-use pre-defined styles that look and behave correctly instead of having to write them myself. ### Previous implementations - **OOUI:** The OOUI PHP work is relevant here - **mediawiki.ui** is of concern. Former and current modules - anchor `a` - `form` - `label` - `button` - `input[type="text"]` - `input[type="search"]` - `input[type="radio"]` - `input[type="checkbox"]` - `select` (limited) - icon ### Considerations Other frameworks typically distribute CSS styles with pre-defined classes (Bootstrap's `.btn`, `.btn-primary`, etc). This approach offers good ease-of-use, but creates some coupling between the markup and the framework styles. An alternative approach would be to distribute Codex styles as pure LESS mixins, where the consumer decides where the styles should ultimately be applied. This approach is described more in [[ https://doc.wikimedia.org/codex/main/using-codex/adrs/04-adr-less-mixins.html | Codex ADR 04 ]].

## Background - **Description:** Create a CSS/LESS only implementation of Codex components (probably just a subset of them) - **History:** This is an approach that has been followed by many other design systems; it will help Codex to cover use-cases where using Vue (or JS at all) would not be appropriate - **Known use case(s):** - Main use case: Allow teams who have performance or security constraints to achieve visual consistency with the design system without using JS/Vue - Secondary use case: Enable rapid prototyping - Secondary use case: Create a pathway for building Codex-compliant features that doesn't require JS or Vue knowledge - **Considerations:** Can we avoid duplication by having the CSS "components" share styles with the Vue components? Would it make sense to publish a `codex-styles` package that contains LESS mixin, which then gets used in the Codex Vue components? ### User stories - As a developer of a feature that cannot use JS for performance or security reasons, I'd like my UI to have visual consistency with the wider design system. I'd also like to be able to simply re-use pre-defined styles that look and behave correctly instead of having to write them myself. ### Previous implementations - **OOUI:** The OOUI PHP work is relevant here - **mediawiki.ui** is of concern. Former and current modules - anchor `a` - `form` - `label` - `button` - `input[type="text"]` - `input[type="search"]` - `input[type="radio"]` - `input[type="checkbox"]` - `select` (limited) - icon ### Considerations Other frameworks typically distribute CSS styles with pre-defined classes (Bootstrap's `.btn`, `.btn-primary`, etc). This approach offers good ease-of-use, but creates some coupling between the markup and the framework styles. An alternative approach would be to distribute Codex styles as pure LESS mixins, where the consumer decides where the styles should ultimately be applied. This approach is described more in [[ https://doc.wikimedia.org/codex/main/using-codex/adrs/04-adr-less-mixins.html | Codex ADR 04 ]].

## Background - **Description:** Create a CSS/LESS only implementation of Codex components (maybeprobably just a subset of them) - **History:** This is an approach that has been followed by many other design systems; it will help Codex to cover use-cases where using Vue (or JS at all) would not be appropriate - **Known use case(s):** - Main use case: Allow teams who have performance or security constraints to achieve visual consistency with the design system without using JS/Vue - Secondary use case: Enable rapid prototyping - Secondary use case: Create a pathway for building Codex-compliant features that doesn't require JS or Vue knowledge - **Considerations:** Can we avoid duplication by having the CSS "components" share styles with the Vue components? Would it make sense to publish a `codex-styles` package that contains LESS mixing, which then gets used in the Codex Vue components? ### User stories - As a developer of a feature that cannot use JS for performance or security reasons, I'd like my UI to have visual consistency with the wider design system. I'd also like to be able to simply re-use pre-defined styles that look and behave correctly instead of having to write them myself. ### Previous implementations - **OOUI:** The OOUI PHP work is relevant here - **mediawiki.ui** is of concern. Former and current modules - anchor `a` - `form` - `label` - `button` - `input[type="text"]` - `input[type="search"]` - `input[type="radio"]` - `input[type="checkbox"]` - `select` (limited) - icon ### Considerations Other frameworks typically distribute CSS styles with pre-defined classes (Bootstrap's `.btn`, `.btn-primary`, etc). This approach offers good ease-of-use, but creates some coupling between the markup and the framework styles. An alternative approach would be to distribute Codex styles as pure LESS mixins, where the consumer decides where the styles should ultimately be applied. This approach is described more in [[ https://doc.wikimedia.org/codex/main/using-codex/adrs/04-adr-less-mixins.html | Codex ADR 04 ]].