Welcome to Fluent FTW (For The Web)

An open source project to bring Microsoft's Fluent Design System to the web

Get Started View the sourcecode on GitHub

Start using Fluent FTW now

Fluent FTW currently consists of a CSS stylesheet and some snippets of vanilla JavaScript that can be added to any website. Over time the plan is to bring a more comprehensive selection of integrations such as building on top of Bootstrap and creating a WordPress Theme.

Current features:

  • Acrylic
  • Buttons (including Reveal)
  • Parallax
  • Drop Shadow

Download Fluent FTW

Want to contribute?

The sourcecode for Fluent FTW is on GitHub and is actively taking PR to fix bugs or add more elements of Microsoft's Fluent Design System to the project.

Check it out on GitHub

Fluent FTW Demos

Examples of each component of Fluent FTW

From Acrylic to Dropshadows, from buttons to Parallax you can see how to implement them all and customise them. There's even information about whether you need the Fluent FTW CSS or JS to get them working

Get Started

The first thing you need to do is download the latest version of the CSS and JS from GitHub.

Download CSS Download JS

There will be CDN links soon for both the CSS and JS

Buttons

There are a number of CSS button types available within Fluent FTW:

There is also a JavaScript Reveal effect that can be applied to the Default and Square type buttons

Default Button

The default button of Fluent FTW. It has rounded corners and when hovered over the color changes and there is a dropshadow

<a class="button" href="/">Default button</a>

Default button

Secondary Button

The secondary button of Fluent FTW. It is just text and when hovered over there is an underline

<a class="button secondary" href="/">Secondary button</a>

Secondary button

Square Button

The square button of Fluent FTW is like the default button but has square corners

<a class="button square" href="/">Square button</a>

Square button

Default Button with Reveal effect

The reveal effect can be added to a default or square button. When the cursor is near the button the edges will highlight in relation to the cursor. When hovered over all the edges are highlighted with an emphasis around where the cursor is

<a class="button reveal" href="/">Default button with Reveal</a>

Default button with Reveal

Acrylic

Acrylic can be applied to any element with just a CSS class. There are three "thicknesses" to Acrylic

Default Acrylic

The default Acrylic effect of Fluent FTW

<div class="acrylic">
<h4>Natural on each device</h4>
<p>Fluent experiences listen and adapt.</p>
</div>
<div class="acrylic light">
<h4>Natural on each device</h4>
<p>Fluent experiences listen and adapt.</p>
</div>

Natural on each device

Fluent experiences listen and adapt.

Natural on each device

Fluent experiences listen and adapt.

Medium Acrylic

A thicker version of Acrylic

<div class="acrylic medium">
<p>They feel natural on the devices people use, from tablets to laptops, from PCs to televisions.</p>
</div>
<div class="acrylic light medium">
<p>They feel natural on the devices people use, from tablets to laptops, from PCs to televisions.</p>
</div>

They feel natural on the devices people use, from tablets to laptops, from PCs to televisions.

They feel natural on the devices people use, from tablets to laptops, from PCs to televisions.

Thick Acrylic

A thickest version of Acrylic

<div class="acrylic thick">
<p>They travel from the office to the living room to virtual worlds.</p>
</div>
<div class="acrylic light thick">
<p>They travel from the office to the living room to virtual worlds.</p>
</div>

They travel from the office to the living room to virtual worlds.

They travel from the office to the living room to virtual worlds.

Comparison

A side by side comparison of the various thicknesses of Acrylic

Natural on each device

Fluent experiences listen and adapt.

They feel natural on the devices people use, from tablets to laptops, from PCs to televisions.

They travel from the office to the living room to virtual worlds.


Natural on each device

Fluent experiences listen and adapt.

They feel natural on the devices people use, from tablets to laptops, from PCs to televisions.

They travel from the office to the living room to virtual worlds.

Parallax

To enable the Parallax affect the fluent.js script needs to be added to the page, a class needs to be applied to an element and the element needs a background image

Default Parallax

The default parallax behaviour of Fluent FTW.

<div class="parallax" style="background-image: url(image.jpg);">
...
</div>

Natural on each device

Fluent experiences listen and adapt.

Natural on each device

Fluent experiences listen and adapt.

Change the speed of Parallax

The parallax behaviour of Fluent FTW can be set to have a different speed by setting an attribute on the element. The default speed is 2, setting it to 1 will increase the speed and setting it to anything greater than 2 will slow it down

<div class="parallax" style="background-image: url(image.jpg);" data-parallax-speed="4">
...
</div>

Natural on each device

Fluent experiences listen and adapt.

Natural on each device

Fluent experiences listen and adapt.

Drop Shadow

The Drop Shadow effect can be added to any element with a CSS class.

Default Drop Shadow

The default depth of the dropshadow effect

<div class="dropshadow">
<h4>Natural on each device</h4>
<p>Fluent experiences listen and adapt.</p>
</div>

Natural on each device

Fluent experiences listen and adapt.

Natural on each device

Fluent experiences listen and adapt.

Change the depth of the Drop Shadow

The dropshadow effect of Fluent FTW can be set to have a different depth by adding addition CSS classes to the element. There are 5 depths beyond the default one:

  • depth-1
  • depth-2
  • depth-3
  • depth-4
  • depth-5

<div class="dropshadow depth-1">
...
</div>

Default Dropshadow

<div class="dropshadow"></div>

Depth 1 Dropshadow

<div class="dropshadow depth-1"></div>

Depth 2 Dropshadow

<div class="dropshadow depth-2"></div>

Depth 3 Dropshadow

<div class="dropshadow depth-3"></div>

Depth 4 Dropshadow

<div class="dropshadow depth-4"></div>

Depth 5 Dropshadow

<div class="dropshadow depth-5"></div>


Default Dropshadow

<div class="dropshadow"></div>

Depth 1 Dropshadow

<div class="dropshadow depth-1"></div>

Depth 2 Dropshadow

<div class="dropshadow depth-2"></div>

Depth 3 Dropshadow

<div class="dropshadow depth-3"></div>

Depth 4 Dropshadow

<div class="dropshadow depth-4"></div>

Depth 5 Dropshadow

<div class="dropshadow depth-5"></div>