samsunginternet / oneui-web Goto Github PK

View Code? Open in Web Editor NEW

177.0 12.0 26.0 11.05 MB

✨ One UI Web is the Samsung One UI implementation in CSS ✨

Home Page: https://oneuiweb.dev

License: MIT License

CSS 13.30% JavaScript 6.50% HTML 80.20%

oneui-web's Introduction

One UI Web

One UI Web is a framework inspired by the Samsung One UI Interface.

The goal is simplify the creation of mobile web apps with the One UI’s user experience, as well as to optimise your web apps for Samsung mobile.

One UI aims to ensure a consistent user experience within a single device and also a unified user experience among different mobile devices. Even if the user’s new device runs on a different platform, they can be provided with the user experience optimised for the device.

One UI is built to to help you focus on what really matters, with hardware and software working in harmony to bring you what you need right when you need it.

Installation / Usage

Using the CDN

Here is a premade template that you can use to quickstart a project with One UI Web

<!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>

learn more about setting up One UI Web with a CDN

Using the source

Get One UI Web
- git clone https://github.com/SamsungInternet/OneUI-Web.git
- Download the latest release
Add the one-ui folder to your project files
Include the CSS in your project

Please also check the Getting started part in the documentation: https://oneuiweb.dev/#/getting-started/quickstart

Documentation

We've built a beautiful documentation just for you: https://oneuiweb.dev

This documentation is using DocsifyJS. You can also run it locally by following the steps bellow.

Install docsify npm i docsify-cli -g
Run the local server with docsify serve in the gh-page branch
Finnaly can preview the documentation in your browser on http://localhost:3000

Bugs and feature request

Found a Bug ? Have a feature request ? You can open a new issue and we will try our best to fix it.

Don't forget that you can also contribute <3

Contributing

Pull requests are welcome :) For major changes, please open an issue first to discuss what you would like to change.

MIT License

A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

See the LICENSE file to learn more.

oneui-web's People

Contributors

Stargazers

Watchers

oneui-web's Issues

<select> element would be nice

Or what ever the functionally equivalent OneUI version of a drop down list is.

Set up automated a11y testing on the documentation and samples.

I suggest running axe-core through headless chrome or firefox as a post build step.

https://github.com/dequelabs/axe-core

Add OneUI-Web to npm

npm is often used for non-javascript dependencies too.

I suggest adding it to npm to allow it to be quickly imported into existing projects.

main.css references incorrect CSS file.

Hello.
main.css attempts to load _light-theme.css:

@import 'components/_light-theme.css';

But, that file does not exist. Instead, it should reference _oneui-light-theme.css:

@import 'components/_oneui-light-theme.css';

Or, even better, rename _oneui-light-theme.css to _light-theme.css (since there is a _dark-theme.css).

Disabled Styles for Input Elements

If the input is disabled it would be nice if it was greyed out.

Is there a roadmap for One UI?

new components
guidelines

oneuiweb.dev doesn't exists anymore

Is there a new URL to look docs or something?

Unify position-fixed behaviour

A bunch of elements have position:fixed and width:100% because they are position:fixed, width:100% isn't the parents width it's the page width.

There needs to be consistent width logic for the container which also gets applied to all position:fixed elements e.g.

Toast
Dialog
Tabs

Semantic elements in getting started

In https://oneuiweb.dev/#/getting-started/quickstart
the markup is:

    <main class="container">
      <div class="viewing">
          <!-- Viewing area -->
      </div>
      <div class="content">
          <!-- Interaction area -->
      </div>
    </main>

I think probably think <div class="viewing"> should maybe be a <section> or a <header> and <div class="content"> should be a <section> or an <article>

The website cannot be reached

OneUIWeb.dev does not work anymore. In my browser, it says that the page can't be reached. May you please fix this?

Include the plus button

Useful for building lists of 'addable' items.