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.
css/ |—— gloss.css |—— gloss.min.css js/ |—— gloss-icons.js |—— gloss-icons.min.js |—— gloss.js |—— gloss.min.js
<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">
<head> of your document, just before the closing
<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>
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.