Elements

The Gloss elements are a well-documented set of HTML, CSS, and JavaScript assets.

Get started

The Gloss elements documentation contains examples, code snippets, and guidance on UX best-practices. There are several ways you can use Gloss in your project. The following instructions will help you get started.

Download

You can download a ZIP file that contains the compiled and minified CSS and JavaScript.

Download Gloss

Download contents

The Zip file contains the compiled CSS and JavaScript files, which is everything you need to get started.

css/
  |—— gloss.css
  |—— gloss.min.css
js/
  |—— gloss-icons.js
  |—— gloss-icons.min.js
  |—— gloss.js
  |—— gloss.min.js

Hosted CSS and JavaScript

The quickest way to get started with Gloss is using the centrally-hosted CSS and JavaScript files. Copy and paste this <link> element to <head> of your document. Make sure it is placed before any other stylesheets.

<link rel="stylesheet" href="https://healthcare.utah.edu/css/gloss/2.0.0/gloss.min.css">

JavaScript is required for some elements. Copy and paste the following links and add to the <head> of your document, just before the closing </head> tag.

<script src="https://healthcare.utah.edu/javascript/gloss/2.0.0/gloss.min.js"></script>
<script src="https://healthcare.utah.edu/javascript/gloss/2.0.0/gloss-icons.min.js"></script>

HTML markup

Add the compiled and minified CSS and JavaScript to the <head> element of your HTML5 document. Also include the Gloss icon library. For your basic setup, that’s it.

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/gloss.min.css" />
        <script src="js/gloss.min.js"></script>
        <script src="js/gloss-icons.min.js"></script>
    </head>
    <body>
    </body>
</html>

Browser support

The following table lists the versions that Gloss is tested on. “Latest” means that it works just fine on all recent versions of that browser. With many browser moving towards a rolling release strategy, pinning down browser support to a specific version has become a little tricky in recent years. Long story short: Gloss will work on pretty much any modern browser.

Latest

9.1+

Latest