DOCSEARCHbyAlgolia
Submit Docs

OUDS Web (Orange Unified Design System)

repository·main·Indexed 42 days ago

https://github.com/orange-opensource/orange-boosted-bootstrap

A Bootstrap-based accessible and ergonomic components library for the Orange Unified Design System. It provides themed components, design tokens, and layout utilities via @ouds/web-common and theme-specific libraries like @ouds/web-orange. Includes the @ouds/web-migrate CLI for updating projects or migrating from older frameworks like boosted or ob1.

Tokens
284.1K
Snippets
771
Records
1.1K
Agent score
52%

What's inside OUDS Web

  1. Overview of the Bullet list component

    main

    The Bullet list is a UI element used to group related text items together. Items are typically prefixed with a bullet or a number. While generally non-interactive, the text items within a list can contain hypertext links.

    Bullet lists are implemented by applying the .bullet-list class to either an <ul> (unordered) or <ol> (ordered) element. Supported variations include:

    • Unordered lists
    • Ordered lists
    • Bare lists
    • Mixed lists

  2. Use Tags in OUDS Web

    main

    Tags are OUDS Web-specific components (using the .tag class) used to display status, categories, or metadata. There are two primary types:

    1. Tag: A display-only element used for information.
    2. Input tag: An interactive, removable element, typically implemented as a <button> with the .tag-input class.

    Note: Tags are not part of Bootstrap; they are unique to OUDS Web.

    <!-- Display-only Tag -->
<p class="tag">Tag</p>

<!-- Interactive Input Tag -->
<button type="button" class="tag tag-input">
  Input tag<span class="visually-hidden">Remove this tag</span>
</button>

  3. Understand the OUDS Web license terms

    main

    OUDS Web is released under the MIT license. It includes additions to native Bootstrap (which is also MIT licensed).

    Usage Requirements

    • Attribution: You must keep the license and copyright notice included in the OUDS Web and Bootstrap CSS and JavaScript files when using them in your works.

    Permissions

    • Commercial & Private Use: You can freely download and use OUDS Web or Bootstrap (in whole or in part) for personal, private, company internal, or commercial purposes.
    • Distribution: You can use them in packages or distributions you create.
    • Modification: You are permitted to modify the source code.
    • Sublicensing: You can grant a sublicense to third parties to modify and distribute the software.

    Restrictions

    • Liability: You cannot hold the authors, license owners, or creators liable for damages; the software is provided without warranty.
    • Attribution: You cannot redistribute any piece of the software without proper attribution.
    • Brand Usage: You cannot use any marks owned by Orange SA in a way that implies Orange SA endorses your distribution or that you created the Orange SA software.

    What is NOT required

    • Source Disclosure: You are not required to include the source code of OUDS Web, Bootstrap, or your modifications in your redistribution.
    • Contribution: You are not required to submit your changes back to the project (though it is encouraged).

  4. Browse OUDS components by category

    main

    OUDS components are organized into several functional categories to help you find the right UI element for your needs. The available categories include:

    • Actions: Components that trigger specific user actions.
    • Assistant (AI): Components designed for AI-driven interactions.
    • Content display: Components used to present information to the user.
    • Control: Components that allow users to manipulate settings or state.
    • Dialog: Components for modal interactions and overlays.
    • Indicator: Components that provide status or progress feedback.
    • Layout: Structural components for organizing the UI.
    • Navigation: Components for moving between different views or sections.
    • Visual assets: Components related to imagery and graphical elements.

  6. Download compiled assets or source files

    main

    OUDS Web provides several download options depending on your needs:

    • Compiled CSS and JS: Ready-to-use, minified bundles for CSS and JavaScript plugins. This does not include documentation, source files, or optional dependencies like Popper.
    • Source files: Full Sass, JavaScript, and documentation files. This requires a [Sass compiler] and [Autoprefixer] in your build pipeline.
    • Examples: Pre-built examples that you can download to examine and use as templates.

  7. Understand the OUDS Web Reference Documentation structure

    main

    The OUDS Web library is organized into several key documentation areas to help you build interfaces:

    • Getting Started: Installation (npm/yarn/Bun, NuGet, CDN), JavaScript API, Sass customization, Accessibility, and Migration guides.
    • Foundation: Design principles, Typography, Colors, Color modes, Token architecture, and CSS variables.
    • Layout: Responsive breakpoints, Containers, 12-column Grid, Columns, Gutters, and Z-index layers.
    • Components: A wide range of UI elements including Alerts, Buttons, Chips, Header, Icons, Inputs (Text, Select, Password, etc.), and more.
    • Utilities: Helper classes for Aspect ratio, Background, Border, Color, Display, Flex, Spacing, Stack, Text, and Visibility.

    Note on undocumented components: Several components (e.g., accordion, modal, dropdown, pagination, toast) are currently marked as "Coming soon". Do not attempt to use Bootstrap classes as fallbacks for these, as OUDS Web's structure and tokens diverge from Bootstrap.

  8. Understand the structure of Compiled OUDS Web

    main

    The compiled version of OUDS Web is designed for quick drop-in usage in web projects. It provides pre-compiled CSS and JavaScript files.

    Key features include:

    • Minified files: Use .min.css or .min.js for production.
    • Source maps: .map files are included to assist with browser developer tools.
    • RTL support: Files with .rtl. in the name are provided for Right-to-Left language support.
    • Bundled JS: Files named ouds-web.bundle.js or ouds-web.bundle.min.js include Popper automatically.
    • Bootstrap Compatibility: Files prefixed with ouds-web-bootstrap.* enforce Bootstrap specificities.

  9. Supported browsers and devices for OUDS Web

    main

    OUDS Web supports the latest stable releases of major browsers and platforms, primarily targeting baseline 2023.

    Mobile Support

    • Android: Chrome and Firefox are supported. Android Browser & WebView is supported from v23.0+.
    • iOS: Chrome, Firefox, and Safari are supported.
    • Note: Proxy browsers (e.g., Opera Mini, UC Browser Mini, Amazon Silk) are not supported.

    Desktop Support

    • Mac: Chrome, Firefox, Microsoft Edge, Opera, and Safari are supported.
    • Windows: Chrome, Firefox, Microsoft Edge, and Opera are supported (Safari is not supported on Windows).
    • Firefox: Supports both the latest stable release and the latest Extended Support Release (ESR).

    Unsupported

    • Internet Explorer: Not supported.
    • Linux: Chromium/Chrome and Firefox for Linux are unofficially supported but not officially guaranteed.

  10. Accessibility standards and defaults in OUDS Web

    main

    OUDS Web is built to fulfill WCAG 2.2 (A/AA/AAA) and Section 508 standards. The following behaviors are applied by default:

    • Reduced Motion: The library respects the prefers-reduced-motion media query. CSS transitions are disabled and animations are slowed for users with this setting enabled.
    • Line Length: A maximum line length of 80 characters is applied to all elements by default to improve readability (WCAG C20 technique).
    • Color Contrast: Developers must ensure text meets a minimum 4.5:1 contrast ratio and non-text elements meet a 3:1 ratio.

  11. Overview of Items components

    main

    Items in OUDS Web are flexible components used to display units of information, equivalent to the design List item. They are categorized into two main groups:

    1. Card items: Single items used as standalone components or within a card layout.
    2. List items: Designed to be used within a list to display multiple items together.

    Within these categories, items are further divided into:

    • Static items: Non-interactive elements used for displaying information.
    • Navigation items: Interactive elements that allow users to navigate to a destination.

    Core HTML Structure

    All item types share a common base structure using these classes:

    • .item: The external container for additional styles or behavior.
    • .item-container: The container placed before any dividers.
    • .item-content: The main container for the primary content.
    • .item-text-container: The container specifically for text content.
    • .item-interactive: A mandatory class for links or buttons within navigation items.
    | Categories | Card | List |
| --- | --- | --- |
| *Static* | Static card item | Static list item |
| *Navigation* | Navigation card item | Navigation list item |

  12. Overview of Badge component types

    main

    OUDS Web provides three types of badges to highlight system notifications, statuses, or information categorization:

    1. Badge: A colored shape that conveys information through color alone (no text, icon, or number).
    2. Badge - Count: Uses color and a numerical value to highlight information.
    3. Badge - Icon: Uses color and iconography to convey meaning.

    All badge types share a common base .badge class for default styling.

    <!-- Basic Badge -->
<p class="badge"><span class="visually-hidden">Beware</span></p>

<!-- Badge - Count -->
<p class="badge badge-count">1<span class="visually-hidden">error</span></p>

<!-- Badge - Icon -->
<p class="badge">
    <span class="badge-status-icon"></span>
    <span class="visually-hidden">Beware</span>
</p>