Fluent UI for Bootstrap
Apply default variables to Bootstrap based on the guidelines from the Microsoft Fluent Web project.
The goal of this post is to apply default variables to Bootstrap based on the guidelines from the Microsoft Fluent Web project. I am not going to attempt to make Bootstrap look like a clone of the Fluent project. These changes are very lightweight, should allow you to adjust them easily, and not prevent you from upgrading to newer versions of Bootstrap.
Projects like WinStrap and Fluent Design from MDB have gone much deeper into making a Fluent clone, but projects like these tend to get left behind and stuck on a particular version of Bootstrap because of this. WinStrap is set to Bootstrap 3.3.7 with Windows 8 guidelines and MDB is using older Windows 10 based guidelines.
The rules for theming Bootstrap aren’t too difficult, you can read the documentation here. So let’s just get to it and adjust some variables.
Grey’s
Fluent UI has Neutral values that are similar to the grey scale that comes with Bootstrap, but Fluent has 24 shades where Bootstrap has 11. We’ll need to skip some of the values when we map them.
$white: #fff !default;
$gray-100: #f3f2f1 !default;
$gray-200: #e1dfdd !default;
$gray-300: #c8c6c4 !default;
$gray-400: #b3b0ad !default;
$gray-500: #979593 !default;
$gray-600: #797775 !default;
$gray-700: #484644 !default;
$gray-800: #323130 !default;
$gray-900: #252423 !default;
$black: #000 !default;Colors
Fluent UI has Shared colors that we can use to set the base colors for Bootstrap. Again, Fluent has more values so we need to pick and choose the closest matches.
$blue: #4f6bed !default;
$indigo: #5c2e91 !default;
$purple: #881798 !default;
$pink: #e3008c !default;
$red: #d13438 !default;
$orange: #ffaa44 !default;
$yellow: #fce100 !default;
$green: #498205 !default;
$teal: #00ad56 !default;
$cyan: #00b7c3 !default;Bootstrap also defines color values based on purpose that often borrow from the greys and colors listed above. Fluent UI has a separate set of colors for Messaging that looks like a good candidate for these.
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: #107c10 !default;
$info: #dff6dd !default;
$warning: #fff4ce !default;
$danger: #a80000 !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;Shadows
Shadows in Bootstrap can be mapped to the Elevation values in Fluent UI. But first we need to also enable them.
$enable-shadows: true !default;
$box-shadow-sm: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108) !default;
$box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108) !default;
$box-shadow-lg: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108) !default;Radius
Until recently Fluent controls from Microsoft have been squared off with no rounded corners. The newer controls include rounded corners but to a lesser degree than that of Bootstrap, so we need to adjust the default radius.
$border-radius: .15rem !default;
$border-radius-lg: .2rem !default;
$border-radius-sm: .1rem !default;Responsive Grid
Fluent UI’s Layout is a little different than the breakpoints used for a responsive layout in Bootstrap. So we need to adjust the grid and container values.
$grid-breakpoints: ( xs: 0, sm: 480px, md: 640px, lg: 1024px, xl: 1366px ) !default;
$container-max-widths: ( sm: 479px, md: 639px, lg: 1023px, xl: 1365px ) !default;Fonts
There are a couple of ways we can go with this one when it comes to Font Family. And I’m torn which is the right direction.
First, Bootstrap uses the fonts that are native to the underlying platform and foregoes trying to download custom web fonts. I like this approach and it matches with Microsoft’s guidance on trying to make Fluent feel native on each platform. You see this in their implementation of their own apps on Android and iOS.
Second, Microsoft makes an open web font based on it’s Segoe font family available for free on the web, you can download it here. We could force the site to look like Fluent on Windows for everyone using this font. Note, that this is not the older open source Selawik font. Follow the instructions in this article for adding custom font faces to your website and change the Bootstrap variable so Segoe UI is first:
$font-family-sans-serif: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;Then there is also the font weight and sizes in Bootstrap that we can match up to the Typography guidelines in Fluent UI. These can be set with either method you choose above.
$enable-responsive-font-sizes: true !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-weight-lighter: 400 !default;
$font-weight-light: 400 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 600 !default;
$font-weight-bolder: 700 !default;
$h1-font-size: $font-size-base * 2.625 !default;Icons
Icons are not really part of Bootstrap, although they are working on their own set. Fluent UI makes 3 different sets of icons available, you simply need to reference these and use them.
Another alternative if you want full color icons is available from Icons8. They have packages for Office, Windows 10, and even the newer Fluent icons we are seeing for Windows 10x.
What about Dark Mode?
This isn’t really a question of applying Fluent guidelines to Bootstrap, but having a dark mode available is very common in Windows and Office apps.
If you want to apply dark mode to your site, we can borrow a lot of the values from Darkly and apply them to the setting we already have. You’ll notice this takes more effort since Bootstrap is a light based UI by default.
$body-bg: $gray-900 !default;
$body-color: $white !default;
$table-accent-bg: $gray-800 !default;
$table-border-color: $gray-700 !default;
$input-border-color: $body-bg !default;
$input-group-addon-color: $gray-500 !default;
$input-group-addon-bg: $gray-700 !default;
$custom-file-color: $gray-500 !default;
$custom-file-border-color: $body-bg !default;
$dropdown-bg: $gray-900 !default;
$dropdown-border-color: $gray-700 !default;
$dropdown-divider-bg: $gray-700 !default;
$dropdown-link-color: $white !default;
$dropdown-link-hover-color: $white !default;
$dropdown-link-hover-bg: $primary !default;
$nav-link-padding-x: 2rem !default;
$nav-link-disabled-color: $gray-500 !default;
$nav-tabs-border-color: $gray-700 !default;
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
$nav-tabs-link-active-color: $white !default;
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
$navbar-padding-y: 1rem !default;
$navbar-dark-color: rgba($white,.6) !default;
$navbar-dark-hover-color: $white !default;
$navbar-light-color: rgba($gray-900, .7) !default;
$navbar-light-hover-color: $gray-900 !default;
$navbar-light-active-color: $gray-900 !default;
$navbar-light-toggler-border-color: rgba($gray-900, .1) !default;
$pagination-color: $white !default;
$pagination-bg: $primary !default;
$pagination-border-width: 0 !default;
$pagination-border-color: transparent !default;
$pagination-hover-color: $white !default;
$pagination-hover-bg: lighten($primary, 10%) !default;
$pagination-hover-border-color: transparent !default;
$pagination-active-bg: $pagination-hover-bg !default;
$pagination-active-border-color: transparent !default;
$pagination-disabled-color: $white !default;
$pagination-disabled-bg: darken($primary, 15%) !default;
$pagination-disabled-border-color: transparent !default;
$jumbotron-bg: $gray-800 !default;
$card-cap-bg: $gray-700 !default;
$card-bg: $gray-800 !default;
$popover-bg: $gray-800 !default;
$popover-header-bg: $gray-700 !default;
$toast-background-color: $gray-700 !default;
$toast-header-background-color: $gray-800 !default;
$modal-content-bg: $gray-800 !default;
$modal-content-border-color: $gray-700 !default;
$modal-header-border-color: $gray-700 !default;
$progress-bg: $gray-700 !default;
$list-group-bg: $gray-800 !default;
$list-group-border-color: $gray-700 !default;
$list-group-hover-bg: $gray-700 !default;
$breadcrumb-bg: $gray-700 !default;
$close-color: $white !default;
$close-text-shadow: none !default;
$pre-color: inherit !default;If you want to apply the theme dynamically, how you do it will depend on your programming language and toolkit. It is possible to detect the user’s underlying OS theme using media queries.
