Setup

Include the FMS Design System and Font Awesome style sheets to access design content.

Overview

To connect with the FMS Design System and get access to its content and components, you must reference one of the style sheets provided on this page. To do this, copy and paste a style sheet <link> into the <head> of your document.

To use the font icons mentioned in this documentation, add a separate <link> to the provided Font Awesome style sheet to your <head>.

Style sheets

The FMS Design System offers four (4) compiled style sheet options, depending on your need: non-minified, minified, scoped, and scoped minified.

CSS file options
fds.css
fds.min.css
fds.scoped.css
fds.scoped.min.css

Non-minified

<link rel="stylesheet" href="https://cdn.fmsystems.com/fds/1.4.0/css/fds.css" >

Minified

<link rel="stylesheet" href="https://cdn.fmsystems.com/fds/1.4.0/css/fds.min.css" >

Scoped

If you’re already using Bootstrap and don’t want to replace your existing styles, a scoped version of CSS is available. Classes in these style sheets are prefixed with “fds” so you can pick and choose which ones are right for you.

<link rel="stylesheet" href="https://cdn.fmsystems.com/fds/1.4.0/css/fds.scoped.css" >

Example of scoped classes

<button type="button" class="fds-btn fds-btn-primary">Button Title</button>

Scoped minified

<link rel="stylesheet" href="https://cdn.fmsystems.com/fds/1.4.0/css/fds.scoped.min.css" >

Font icons

The approved icon library for FMS Design System is Font Awesome 5. To access their font icons, you may add this <link> to your <head> after the FMS Design System CSS reference.

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
  integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
  crossorigin="anonymous"
/>

For information on referencing and using the Font Awesome toolkit, see official icon documentation.