fluent_design.js

A JavaScript library offering Custom Elements based on Microsoft's new Fluent Design system

Installation

<script type="module" src="path/to/fluent_design.js/src/design.js">

And that's it! You're ready to start using Fluent elements in your pages.

Usage

<fl-icon>

Using a Fluent Icon allows you to use any icon available in the UWP icon font only available on Windows 10. For a full list of icons see Microsoft's Fluent documentation.

Attributes

[icon]

Any of the IDs from the above docs such as Camera or Calendar

[char]

Any unicode code point to be set in the Segoe MDL2 Assets font

<fl-titlebar>

The Fluent TitleBar provides a way to have a Win10 looking top nav that includes a history back button as well as the minimize, maximize, and close <fl-icon>s

Attributes

[title]

Set the top title brand text with this attribute

[color]

Set the background color of the title bar here. Color correction for making the title text black or white is done automatically.

Default: #FFB900

[back]

Determines whether the history back button is shown

Default: true

[window]

Determines whether the minimize, maximize, and close fl-icon window controls are shown

Default: true

Acknowledgements

• Based on Fluent Design by Microsoft
• Thanks to browser devs for making Custom Elements and JS Modules

License

This project is licensed under the Apache 2 License - see the LICENSE file for details