Fluent Web Framework

Introduction

Border

Button

Checkbox

Code

Code Template

Content dialog

Context menu

Expander

Flyout

Hyperlink

Label

Menu item

Page switcher

Slider

Table

Textbox

Web container

Initialization

Mica

Theme

Config

Routing

Icons

About

Welcome to the Fluent Web Framework documentation!

Here you'll learn how to use this framework.

Still a work in progress

Fluent Web Framework is still in development, but stable enough to be used.

Border

Custom element "Border" with content.

Usage

<fluent-border>
    <h3>Buton</h3>
    <button>Fluent button</button>
</fluent-border>

Button

Redesignedbuttonandinput type="submit".

Usage

Styles

Buttons can be used in 3 variants.

Variant Preview Usage Description

Variant	Usage	Description
standard	`<button>Standard button</button> <!-- Can be used as <input type="submit"> --> <input type="submit" value="Standard button">`	Secondary actions or actions that are not important.
accent	`<button accent>Accent button</button>`	Primary actions that are important to the user.
hyperlink	`<button hyperlink>Hyperlink button</button>`	Primary actions that are important to the user.

standard

<button>Standard button</button>
<!-- Can be used as <input type="submit"> -->
<input type="submit" value="Standard button">

Secondary actions or actions that are not important.

accent

<button accent>Accent button</button>

Primary actions that are important to the user.

hyperlink

<button hyperlink>Hyperlink button</button>

Primary actions that are important to the user.

Attributes

Name	Preview	Usage	Description
url		`<button url="https://bexcool.eu/">BeXCool</button>`	Open URL link.
urlnew		`<button urlnew="https://bexcool.eu/">BeXCool</button>`	Open URL link in a new tab.

Checkbox

Redesigned input checkbox.

Usage

<input type="checkbox" id="mycheck"><label for="mycheck">Am I a checkbox?</label>

Am I a checkbox?

Code

Remade code element.

Syntax highlighting

Fluent usesPrismas its syntax highlighting engine.

Needs to be enabled first, seeconfig.

Example usage

Available languages:

CSS

Javascript

New! Code Template

Extension of thecodeelement.

Automatically creates a <code> element and a working example of what's in the template.

Basic usage

With the default settings, all code gets inserted directly after the <template> element

<template fluent-code="html">
  <p>Hello, world!</p>
  <fluent-label>This is a label</fluent-label>
</template>

Output

Advanced usage

Outlets

Code templates allow declaring the template somewhere and outputting the code and example somewhere else.

Simply specifiy aoutlet-idattribute with the id of the element where Fluent should place the code and the example.

outlet-idalso supports separating the example and code, by passing two ids:outlet-id="<CODE_ID>//<EXAMPLE_ID>"
You can also pass$disableinstead of an id to disable the respective output:outlet-id="$disable//<EXAMPLE_ID>"

Note that this replaces the specified element. For example, if you want to apply custom styling, you need to place it outside of the outlet.

<template fluent-code="html" outlet-id="outlet-code//outlet-example">
  <h4>Hello, world!</h4>
  <p>This is a This is a template</p>
</template>

<div id="outlet-code"></div>
<span style="color: pink">
  <div id="outlet-example"></div>
</span>

Output

Content dialog

Element for displaying content in a dialog window.

Content dialog

Context menu

Custom element with items.

Hover it to show menu.

<!-- Attribute "url" works like "href". -->
<fluent-contextmenu header="Navigation">
    <fluent-menu-item url="#button">Button</fluent-menu-item>
    <fluent-menu-item url="#textbox">Textbox</fluent-menu-item>
    <fluent-menu-item url="#contextmenu">Context Menu</fluent-menu-item>
    <fluent-menu-item url="#expander">Expander</fluent-menu-item>
    <fluent-menu-item url="#code">Code Menu</fluent-menu-item>
</fluent-contextmenu>

Button

Textbox

Context Menu

Expander

Code

Hover it to show menu.

<!-- Attribute "url" works like "href". -->
<fluent-contextmenu header="Navigation">
	<fluent-menu-item url="#button">Button</fluent-menu-item>
    <fluent-menu-item url="#textbox">Textbox</fluent-menu-item>
    <fluent-menu-item url="#contextmenu">Context Menu</fluent-menu-item>
    <fluent-menu-item url="#expander">Expander</fluent-menu-item>
    <fluent-menu-item url="#code">Code Menu</fluent-menu-item>
    <fluent-menu-item url="#contextmenu">Context Menu</fluent-menu-item>
    <fluent-menu-item url="#expander">Expander</fluent-menu-item>
    <fluent-menu-item url="#code">Code Menu</fluent-menu-item>
    <hr>
    <fluent-menu-item url="#contextmenu" selectable selected>1st option</fluent-menu-item>
    <fluent-menu-item url="#expander" selectable>2nd option</fluent-menu-item>
    <fluent-menu-item url="#code" selectable>3rd option</fluent-menu-item>
</fluent-contextmenu>

Button

Textbox

Context Menu

Expander

Code

1st option

2nd option

3rd option

Expander

Custom element which can be opened or closed.

Usage

Attributes

Name Preview Usage Description

Name	Preview	Usage	Description
header		`<fluent-expander header="Expander"> <div class="fluent-content"> <button>Button</button> </div> </fluent-expander>`	Recommended to use everytime.
expanded		`<fluent-expander header="Expander" expanded> <div class="fluent-content"> <button>Button</button> </div> </fluent-expander>`	Use only when user has to access this expander (e.g. Link that redirects to this expander).

header

<fluent-expander header="Expander">
	<div class="fluent-content">
		<button>Button</button>
	</div>
</fluent-expander>

Recommended to use everytime.

expanded

<fluent-expander header="Expander" expanded>
	<div class="fluent-content">
		<button>Button</button>
	</div>
</fluent-expander>

Use only when user has to access this expander (e.g. Link that redirects to this expander).

Flyout

Element with text that shows on the top of the parent element.

Usage

Functions

Fluent_showFlyout(this, 'This is flyout', 2000);

Name	Type	Description
element	Element	Show flyout above this element.
string	string	Text to show in flyout.
delay	number	How long the flyout will be visible (in milliseconds).

<button onclick="Fluent_showFlyout(this, 'This is flyout', 2000);">Show flyout!</button>

Hyperlink

Element which can be put in text to redirect user to other page. Works the same likealink.

Usage

Label

Text in automatically adjusted background color and border.

Usage

Styling

Multiple styling attributes can be used on one label.

Attribute	Preview	Usage	Description
none	Label	`<fluent-label>Label</fluent-label>`	Standard label without styling attributes.
color	Label	`<fluent-label color="red">Label</fluent-label> <fluent-label color="#FF0000">Label</fluent-label>`	Use any string color or a 6 digit long hex.
consolas	Label	`<fluent-label consolas>Label</fluent-label>`	Label with Consolas font. Use consolas for code attributes or for tags.

<fluent-menu style="width: 25%;">
	<fluent-menu-item icon="cursor_hover_20_regular" selectable selected>Button</fluent-menu-item>
	<fluent-menu-item selectable>Accessories</fluent-menu-item>
	<fluent-menu-item-expander header="More">
		<fluent-menu-item selectable>Info</fluent-menu-item>
		<fluent-menu-item selectable>Donate</fluent-menu-item>
		<fluent-menu-item selectable>About</fluent-menu-item>
	</fluent-menu-item-expander>
</fluent-menu>

Button

Accessories

Info

Donate

About

Page switcher

Custom element for switching between pages. Makes your webpage pages a lot easier.

Usage

Functions

Set active page index.

Fluent_setActivePageIndex('showcase-page-switcher', 0, true, "example/route-1");

Parameter	Type	Description
page_switcher_id	string	ID of the page switcher.
index	number	Page's index.
routing?	boolean	Use routing? Seerouter docs
route?	string	Name of the route If unspecified, Fluent tries to choose a name for the route.

 <button onclick="Fluent_setActivePageIndex('showcase-page-switcher', 0)">Open Page 1</button>
<button onclick="Fluent_setActivePageIndex('showcase-page-switcher', 1)">Open Page 2</button>
<fluent-page-switcher id="showcase-page-switcher">
	<fluent-page>
		<h2>Page 1</h2>
	</fluent-page>
	<fluent-page>
		<h2>Page 2</h2>
	</fluent-page>
</fluent-page-switcher>

Page 1

Page 2

Slider

Redesigned input range.

Hover it to show menu.

<input type="range">

Table

Redesignedtableelement.

Usage

Tables are often used for showing some data.
Remember to usetheadandtbodyelements.

<table>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Value</td>
			<td>Value</td>
			<td>Value</td>
			<td>Value</td>
		</tr>
		<tr>
			<td>Value</td>
			<td>Value</td>
			<td>Value</td>
			<td>Value</td>
		</tr>
	</tbody>
</table>

Header 1	Header 2	Header 3	Header 4
Value	Value	Value	Value
Value	Value	Value	Value

Textbox

Redesignedinput type="text"andinput type="password"elements with more functionalities.

Usage

Redesignedinput type="text"with more attributes.

Attributes

Name	Preview	Usage	Description
none		`<input type="text">`	Standard textbox.
clear_btn		`<input type="text" value="BeXCool" clear_btn>`	Textbox with button for clearing text.

Redesignedinput type="password"with more attributes.

Attributes

Name	Usage	Description
none	`<input type="password">`	Standard passwordbox.
showpass_btn	`<input type="password" value="1234" showpass_btn>`	Passwordbox with button for showing password.
showpass	`<input type="password" value="1234" showpass_btn showpass>`	Passwordbox with button for showing password with showed password on default.

Web container

Container for webpage content.
Web container splits webpage into 2 columns.

Usage

<h1>My Webpage</h1>
<fluent-web-container>
	<fluent-menu style="width: 15em;">
		<fluent-menu-item selectable selected onclick="Fluent_setActivePageIndex('showcase-page-switcher-web-container', 0)">Page 1</fluent-menu-item>
		<fluent-menu-item-expander header="More pages">
			<fluent-menu-item selectable onclick="Fluent_setActivePageIndex('showcase-page-switcher-web-container', 1)">Page 2</fluent-menu-item>
			<fluent-menu-item selectable onclick="Fluent_setActivePageIndex('showcase-page-switcher-web-container', 2)">Page 3</fluent-menu-item>
		</fluent-menu-item-expander>
	</fluent-menu>
	<fluent-main-content>
		<fluent-page-switcher id="showcase-page-switcher-web-container">
			<fluent-page>
				<h2>Page 1</h2>
			</fluent-page>
			<fluent-page>
				<h2>Page 2</h2>
			</fluent-page>
			<fluent-page>
				<h2>Page 3</h2>
			</fluent-page>
		</fluent-page-switcher>
	</fluent-main-content>
</fluent-web-container>

My Webpage

Page 1

Page 2

Page 3

Page 1

Page 2

Page 3

Initialization

Unlike in the original framework, you don't need to call any init functions.

You can use one of these functions to listen for Fluent being fully initialized

Fluent_onInitialized(() => {});

Fluent_onReady(() => {});

Mica

Enabled by default

Usage

Get Mica effect status

Fluent_isMicaActive();

Disable Mica effect

Fluent_disableMica();

Enable Mica effect

Fluent_enableMica();

Theme

Fluent has a light and a dark theme.

Usage

Fluent_themes

Get current theme:

Fluent_getActiveTheme();

Set a theme:

Fluent_setTheme(/*theme from Fluent_themes*/);

Switch the theme:

Fluent_switchTheme();

Listen for theme changes:

Fluent_onThemeChanged((newTheme) => { }, /*fire*/true);

Iffireis true, fires immediately with the current theme.

Config

<script>
// Fluent Web Framework options
// Put this script before importing fluent.min.js
var FLUENT = {
    noPrefix: false,
    enableRouter: false,
    enableCode: false,
    enableIcons: false,
};
</script>

Option	Description	Type	Default
noPrefix	Compatibility with the original project Make functions and variables available without the `Fluent_` prefix and capitalizes the first letter. E.g. Fluent_showSplashScreen() becomes available as ShowSplashScreen().	boolean	false
enableCode	Enable code highlighting Loads the code highlight module.	boolean	false
enableRouter	Basic routing using hash location (#/) Seerouter docs Loads the router module.	boolean	false
enableIcons	Enable icons Gets a list of ALL (at least 2) Fluent icons. (doesn't load the individual icons) Seeicons docs	boolean	false

New! Routing

Fluent implements a basic hash location router, which can be enabled by settingenableRoutertotrue.

Basic usage

Using Fluent pages: (page switcher)

Fluent_setActivePageIndex('page-switcher-id', 0, /*routing*/true, "example/route-1");

<fluent-page-switcher id="page-switcher" use-routing>
	<fluent-page routing="optional-route-name">
		...
	</fluent-page>
</fluent-page-switcher>

Ifrouteisn't specified, Fluent chooses a route based on the id + index.
Route handlers created by Fluent don't have params (yet).

Even newer!

Use<fluent-menu>withexperimental-use-routingand Fluent will try to match the selected item with the active route.

Manually navigate:

Fluent_routerNavigate("route");

Define a route:

Fluent_routerAddHandler("route", () => { 
/* handler function */ 
});

Define multiple routes:

Fluent_routerAddHandlers({ 
"route1": () => { }, 
"route2": () => { },
});

Advanced usage

Define a route with parameters:

Fluent_routerAddHandler("play/:id", (params) => { 
/* params.id */
});

Fluent_routerAddHandler("play/?:id", (params) => { 
/* params.id might be undefined */
});

Define a wildcard route:

Fluent_routerAddHandler("list/*", () => {

});

Fluent_routerAddHandler("*", () => { 
/* custom handler function for all routes */ 
});

Credits

Fluent Router is based on Routie by jgallen23

Routie GitHub

New! Icons

Most elements that have aniconattribute will automatically load the icon (if the name is valid).

Usage

Using HTML:

<fluent-icon>icon_name</fluent-icon>

beach_48_regular

Get an icon as svg: (string)

await Fluent_getIcon("iconName"); // "<svg..."|null

Test if a string is a known icon:

Fluent_iconExists("iconName"); // true|false

List of all icons

Fluent_icons

List of icons

There's currently 0 icons

Might take a long time

About

Originally created by Peter from BeXCool.

Ported to Typescript & Sass by spejik from BeXCool.

GitHub Web

Note that this page uses Microsoft Clarity (with cookies set to disabled) to help us catch any issues with components. See Microsoft Docs for more info.