feat: Add a skill for OUDS web users#3595
Open
vprothais wants to merge 4 commits into
Open
Conversation
github-project-automation
Bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
vprothais
changed the title
There was a problem hiding this comment.
Pull request overview
Adds a new “using-ouds-web” skill containing a structured reference for OUDS Web (Orange Unified Design System for Web) so assistants can generate correct markup/classes and follow OUDS-specific conventions (breakpoints, tokens, components, utilities, and accessibility patterns).
Changes:
- Introduces
skills/using-ouds-web/SKILL.mdwith the skill metadata, quick start, critical conventions, and an index to reference pages. - Adds “Getting started” reference pages (intro, download, JS, Sass, migrations, compatibility, etc.).
- Adds a large set of reference pages covering foundation, layout, utilities, and components.
Reviewed changes
Copilot reviewed 74 out of 74 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| skills/using-ouds-web/SKILL.md | Skill definition + index and quick start for OUDS Web usage. |
| skills/using-ouds-web/references/getting-started/introduction.md | Quick start + basic JS/CSS inclusion guidance. |
| skills/using-ouds-web/references/getting-started/download.md | Installation options (npm/yarn/bun/NuGet/CDN). |
| skills/using-ouds-web/references/getting-started/contents.md | Describes compiled file structure for CSS/JS. |
| skills/using-ouds-web/references/getting-started/javascript.md | JS usage (ESM/importmaps, data APIs, events, programmatic API). |
| skills/using-ouds-web/references/getting-started/sass.md | Sass import patterns and customization guidance. |
| skills/using-ouds-web/references/getting-started/accessibility.md | High-level accessibility guidance and key patterns. |
| skills/using-ouds-web/references/getting-started/browsers-devices.md | Supported browsers/devices summary. |
| skills/using-ouds-web/references/getting-started/component-versioning.md | Notes how component design versions map to releases. |
| skills/using-ouds-web/references/getting-started/migration.md | Migration notes between OUDS Web versions. |
| skills/using-ouds-web/references/getting-started/migration-from-boosted.md | Migration notes from Boosted to OUDS Web. |
| skills/using-ouds-web/references/foundation/approach.md | Design principles and conventions for OUDS Web. |
| skills/using-ouds-web/references/foundation/typography.md | Typography system and related utilities guidance. |
| skills/using-ouds-web/references/foundation/color-palette.md | Raw palette overview + usage guidance. |
| skills/using-ouds-web/references/foundation/color-modes.md | Color modes (data-bs-theme) and do/don’t guidance. |
| skills/using-ouds-web/references/foundation/css-variables.md | CSS variables usage and scoping explanation. |
| skills/using-ouds-web/references/foundation/options.md | Sass options flags and defaults. |
| skills/using-ouds-web/references/foundation/reboot.md | Reboot decisions + base element behavior. |
| skills/using-ouds-web/references/foundation/form-validation.md | Validation patterns (client/server) and a11y linking. |
| skills/using-ouds-web/references/foundation/component.md | Base/modifier component architecture notes. |
| skills/using-ouds-web/references/layout/breakpoints.md | Breakpoint system description and mixin usage. |
| skills/using-ouds-web/references/layout/containers.md | Container usage guidelines for OUDS Web layout. |
| skills/using-ouds-web/references/layout/grid.md | Flexbox grid usage patterns and guidelines. |
| skills/using-ouds-web/references/layout/columns.md | Column alignment/order/offset guidance. |
| skills/using-ouds-web/references/layout/gutters.md | Token-based gutters reference and examples. |
| skills/using-ouds-web/references/layout/css-grid.md | Experimental CSS grid system notes and examples. |
| skills/using-ouds-web/references/layout/utilities.md | Layout-utility quick reference (display/flex/spacing/visibility). |
| skills/using-ouds-web/references/layout/z-index.md | Z-index scale overview and guidance. |
| skills/using-ouds-web/references/utilities/api.md | Sass Utility API reference and customization patterns. |
| skills/using-ouds-web/references/utilities/aspect-ratio.md | Aspect ratio utilities reference. |
| skills/using-ouds-web/references/utilities/background.md | Background utilities + color-mode interplay guidance. |
| skills/using-ouds-web/references/utilities/border.md | Border utilities (width/color/radius) reference. |
| skills/using-ouds-web/references/utilities/color.md | Text color utilities and accessibility notes. |
| skills/using-ouds-web/references/utilities/color-background.md | Notes about avoiding Bootstrap text-bg-* helpers. |
| skills/using-ouds-web/references/utilities/colored-link.md | Notes about avoiding Bootstrap link-* helpers. |
| skills/using-ouds-web/references/utilities/display.md | Display utilities and responsive visibility patterns. |
| skills/using-ouds-web/references/utilities/flex.md | Flex utilities reference with responsive prefixing. |
| skills/using-ouds-web/references/utilities/float.md | Float utilities and responsive variants. |
| skills/using-ouds-web/references/utilities/interaction.md | User-select and pointer-events utilities guidance. |
| skills/using-ouds-web/references/utilities/object-fit.md | Object-fit utilities reference (incl. responsive variants). |
| skills/using-ouds-web/references/utilities/opacity.md | Opacity token utilities reference. |
| skills/using-ouds-web/references/utilities/overflow.md | Overflow utilities and keyboard accessibility notes. |
| skills/using-ouds-web/references/utilities/position.md | Position utilities including responsive sticky variants. |
| skills/using-ouds-web/references/utilities/shadow.md | Shadow/elevation utilities reference. |
| skills/using-ouds-web/references/utilities/sizing.md | Sizing utilities reference incl. .mw-none. |
| skills/using-ouds-web/references/utilities/spacing.md | Spacing tokens (fixed/scaled) and edge-to-edge patterns. |
| skills/using-ouds-web/references/utilities/stack.md | vstack/hstack usage and examples. |
| skills/using-ouds-web/references/utilities/stretched-link.md | Stretched-link usage and containing-block rules. |
| skills/using-ouds-web/references/utilities/text.md | Text utilities (alignment, wrapping, sizes, weight, decoration). |
| skills/using-ouds-web/references/utilities/text-truncation.md | .text-truncate usage reference. |
| skills/using-ouds-web/references/utilities/vertical-align.md | Vertical-align utilities reference. |
| skills/using-ouds-web/references/utilities/visibility.md | Visibility utilities and AT implications. |
| skills/using-ouds-web/references/utilities/visually-hidden.md | Visually hidden helpers and Sass mixins reference. |
| skills/using-ouds-web/references/utilities/z-index.md | Low-level z-index utility classes reference. |
| skills/using-ouds-web/references/components/alerts.md | Alerts component structure, variants, and JS notes. |
| skills/using-ouds-web/references/components/badges.md | Badges component variants, sizes, positioning. |
| skills/using-ouds-web/references/components/breadcrumb.md | Breadcrumb structure and truncation behavior. |
| skills/using-ouds-web/references/components/bullet-list.md | Bullet list component usage and customization. |
| skills/using-ouds-web/references/components/buttons.md | Button variants, states, navigation buttons, and a11y notes. |
| skills/using-ouds-web/references/components/checkbox.md | Checkbox control-item architecture and states. |
| skills/using-ouds-web/references/components/chips.md | Chips component (filter/suggestion) and structure. |
| skills/using-ouds-web/references/components/divider.md | Divider rules (<hr>, .vr) and border utilities usage. |
| skills/using-ouds-web/references/components/footer.md | Draft footer structure and required adaptations. |
| skills/using-ouds-web/references/components/header.md | Draft header structure and key elements. |
| skills/using-ouds-web/references/components/icon.md | Icon usage patterns (sprite/font/masks) and sizing. |
| skills/using-ouds-web/references/components/links.md | Standalone link component patterns and states. |
| skills/using-ouds-web/references/components/password-input.md | Password input composition based on text-input patterns. |
| skills/using-ouds-web/references/components/radio-button.md | Radio button control-item architecture and states. |
| skills/using-ouds-web/references/components/select-input.md | Select input wrapper/placeholder requirements and states. |
| skills/using-ouds-web/references/components/skeleton.md | Skeleton patterns with aria-busy/inert and helpers. |
| skills/using-ouds-web/references/components/switch.md | Switch control-item architecture, variants, and states. |
| skills/using-ouds-web/references/components/tags.md | Tags component variants, a11y notes, and layout patterns. |
| skills/using-ouds-web/references/components/text-area.md | Text area wrapper patterns and states. |
| skills/using-ouds-web/references/components/text-input.md | Text input wrapper patterns and states. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+35
to
+42
| <link | ||
| href="https://cdn.jsdelivr.net/npm/ouds-web/dist/css/ouds-web.min.css" | ||
| rel="stylesheet" | ||
| /> | ||
| </head> | ||
| <body> | ||
| <h1>Hello, world!</h1> | ||
| <script src="https://cdn.jsdelivr.net/npm/ouds-web/dist/js/ouds-web.bundle.min.js"></script> |
| </html> | ||
| ``` | ||
|
|
||
| Or install via npm: `npm install ouds-web` |
Comment on lines
+17
to
+28
| <link | ||
| href="https://cdn.jsdelivr.net/npm/ouds-web/dist/css/ouds-web.min.css" | ||
| rel="stylesheet" | ||
| crossorigin="anonymous" | ||
| /> | ||
| </head> | ||
| <body> | ||
| <h1>Hello, world!</h1> | ||
| <script | ||
| src="https://cdn.jsdelivr.net/npm/ouds-web/dist/js/ouds-web.bundle.min.js" | ||
| crossorigin="anonymous" | ||
| ></script> |
Comment on lines
+40
to
+43
| <script | ||
| src="https://cdn.jsdelivr.net/npm/ouds-web/dist/js/ouds-web.min.js" | ||
| crossorigin="anonymous" | ||
| ></script> |
Comment on lines
+16
to
+18
| const oudsWeb = require("oudsWeb"); | ||
| // or | ||
| import oudsWeb from "oudsWeb"; |
Comment on lines
+9
to
+18
| | Breakpoint | Class prefix | Min-width | | ||
| | ---------- | ------------ | ---------------- | | ||
| | 2x-small | _(none)_ | <320px (default) | | ||
| | X-small | `xs` | >=320px | | ||
| | Small | `sm` | >=480px | | ||
| | Medium | `md` | >=736px | | ||
| | Large | `lg` | >=1024px | | ||
| | X-large | `xl` | >=1320px | | ||
| | 2x-large | `2xl` | >=1640px | | ||
| | 3x-large | `3xl` | >=1880px | |
Comment on lines
+48
to
+50
| @include media-breakpoint-down(xs) { ... } // <320px | ||
| @include media-breakpoint-down(sm) { ... } // <480px | ||
| @include media-breakpoint-down(md) { ... } // <736px |
| ## Accessibility | ||
|
|
||
| - Always use `<label>` linked to form elements | ||
| - Specify validation rules via attributes: `required`, `pattern`, `min`, `minLength` |
Comment on lines
+101
to
+110
| Add `.is-invalid` to the input. Provide `.error-text` linked via `aria-describedby`: | ||
|
|
||
| ```html | ||
| <input | ||
| type="password" | ||
| class="text-input-field is-invalid" | ||
| aria-describedby="errorMsg" | ||
| placeholder=" " | ||
| value="12345" | ||
| /> |
Comment on lines
+23
to
+39
| @import "@ouds/web/scss/config"; | ||
| @import "@ouds/web/scss/functions"; | ||
| @import "@ouds/web/scss/tokens/raw"; | ||
| @import "@ouds/web/scss/tokens/semantic"; | ||
| @import "@ouds/web/scss/tokens/semantic-colors-custom-props"; | ||
| @import "@ouds/web/scss/tokens/composite"; | ||
| @import "@ouds/web/scss/tokens/component-colors-custom-props"; | ||
| @import "@ouds/web/scss/tokens/component"; | ||
| @import "@ouds/web/scss/variables"; | ||
| @import "@ouds/web/scss/variables-dark"; | ||
| @import "@ouds/web/scss/maps"; | ||
| @import "@ouds/web/scss/mixins"; | ||
| @import "@ouds/web/scss/utilities"; | ||
|
|
||
| // Customizations here... | ||
|
|
||
| @import "@ouds/web/scss/utilities/api"; |
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Types of change
Related issues
Closes #
Context & Motivation
Provide a Skill for OUDS Web users
Description
Checklists
Checklist (for Core Team only)
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews