One UI Web

One UI Web is designed based on the One UI Design Accessibility Principles to ensure an inclusive user experience. The library aims to meet the Web Content Accessibility Guidelines (WCAG).

When building with One UI Web, the components follow these core design pillars:

• Consideration: Empathetic and detailed design for all users.
• Comprehensive: Balanced and equal design for all users, ensuring users with disabilities do not experience difficulty or discrimination.
• Coherence: Consistent design experience across products and features.
• Co-creation: Designing through collaboration with professionals and communities involving users with disabilities.

One UI Web components are designed to meet WCAG Level AA compliance.

For context, WCAG defines three levels of compliance:

• Level A: Basic accessibility features. Without these, assistive technology may fail to read or operate the page.
• Level AA: The target level for One UI Web. It addresses common barriers for disabled users and provides ideal support.
• Level AAA: High-level support, typically reserved for specialized audiences.

Each component in One UI Web has been tested (e.g., using tools like achecker.ca) to ensure compliance across three main areas:

1. Content: Providing text alternatives for non-text content to ensure readability.
2. Navigation: Ensuring all functionality is available via keyboard and content is easily discoverable.
3. Compatibility: Maximizing compatibility with screen readers and future browsers.

To quickly start a project without managing local files, include the One UI CSS via the JSDelivr CDN. Use the following HTML structure to ensure the layout is correctly initialized with the container class and the required oui-viewing and oui-interaction areas.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/samsunginternet/OneUI-Web/oui-css/oui.css">
  </head>
  <body>
    <main class="container">
      <div class="oui-viewing">
          <!-- Viewing area -->
      </div>
      <div class="oui-interaction">
          <!-- Interaction area -->
      </div>
    </main>
  </body>
</html>

To quickly integrate One UI Web into your project without downloading files, include the CSS stylesheet via the JSDelivr CDN in your <head> section. Use the following HTML structure to set up the basic layout with a container and the required viewing/interaction areas.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/samsunginternet/OneUI-Web/oui-css/oui.css">
  </head>
  <body>
    <main class="container">
      <div class="oui-viewing">
          <!-- Viewing area -->
      </div >
      <div class="oui-interaction">
          <!-- Interaction area -->
      </div >
    </main>
  </body>
</html>

To begin using One UI Web in your project, follow the step-by-step instructions provided in the QuickStart guide. This guide covers the requirements and methods for including the framework in your web application.

See the [QuickStart Page](/getting-started/quickstart) for setup instructions.

Buttons are created by adding the oui-button class to an <input type="button"> element.

Default Button

Use only the oui-button class.

Active Button

To represent an active state, add the oui-button--active modifier class to the oui-button class.

<!-- Default button -->
<input type="button" value="button" class="oui-button">

<!-- Active button -->
<input type="button" value="Active button" class="oui-button oui-button--active">

The project documentation is built with DocsifyJS. To run a local instance of the documentation, follow these steps:

1. Install the Docsify CLI globally:

   npm i docsify-cli -g

2. Navigate to the `gh-page` branch and start the local server:
   ```bash
docsify serve

3. Access the documentation in your browser at http://localhost:3000.

Use the oui-toast class to create a toast notification that mimics the native Android Toast appearance. The component requires a specific HTML structure:

1. oui-toast: The main container for the toast.
2. oui-toast-text: A child element (typically a <span>) that holds the message text to be displayed.

<div class="oui-toast">
    <span class="oui-toast-text">Hello this is a toast</span>
</div>

To enable keyboard shortcuts (navigating and opening/closing the dialog) and focus effects (when tabbing through elements), you must include the following scripts. These only need to be included once per page.

Note: The focus-visible.js polyfill is required for proper focus styling.

<script src="https://cdn.jsdelivr.net/gh/SamsungInternet/OneUI-Web@master/oui-css/scripts/polyfill/focus-visible.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/SamsungInternet/OneUI-Web@master/oui-css/scripts/oui.js" defer></script>