dYXMO / windows-ui-web

Build Windows Fluent UI apps or Web Apps using Html, CSS & JavaScript. Comes with Rich Native Like Components.

Build Windows Fluent UI apps using Html, CSS & JavaScript.

🚧 Work in progress.

Demo & Docs

https://windows-ui.github.io/

Getting Started

Start a new project with the boilerplate.

Imports

When you need to include project's compiled CSS or JS files, you can either use a local copies or use jsDelivr.

<!-- CSS minified -->
<link
  href="https://cdn.jsdelivr.net/npm/windows-ui-web@4.0.0/dist/config/app-config.css.css"
  rel="stylesheet"
  crossorigin="anonymous">
<link
  href="https://cdn.jsdelivr.net/npm/windows-ui-web@4.0.0/dist/windows-ui-web.min.css"
  rel="stylesheet"
  crossorigin="anonymous">
<link
  href="https://cdn.jsdelivr.net/npm/windows-ui-web@4.0.0/dist/icons/fonts/fonts.min.css"
  rel="stylesheet"
  crossorigin="anonymous">

<!-- JavaScript minified -->
<script
  src="https://cdn.jsdelivr.net/npm/windows-ui-web@4.0.0/dist/windows-ui-web.bundle.min.js"
  crossorigin="anonymous">
</script>

Configuration

app-config.css file contains the PrimaryColor, Fontfamily used by the app.
Make sure to add this file before windows-ui-web.min.css.

By default project uses app-config.css.

Customize by creating your own app-config.css file with any PrimaryColor/Fontfamily like this below:

:root {
  --PrimaryColor: #0078D7; /* Change of your choice */
  --PrimaryColorLight: #47aeff;  /* Lighter version of --PrimaryColor for DarkMode */
}
body {
  font-family: "Segoe UI";
}
::selection {
  color: #ffffff;
  background-color: var(--PrimaryColor);
}

Find this project useful? ❤️

Support it by joining stargazers for this repository. ⭐

Branches

windows-ui-web ‣ Current.
Windows10-framework Legacy.

License

Windows10-framework is licensed under MIT license. View license.
Copyright (c) 2020-21 Vivek Verma