Skip to content
UGA Online Design System

Installation and Setup

The design system is distributed as a single CSS file and a single JavaScript file, hosted on the UGA Online CDN. Add them to your HTML and you are ready to go — no build step required.

CSS — add to the <head>:

<link rel="stylesheet" href="https://design.online.uga.edu/css/base.css" />

JavaScript — add just before the closing </body> tag:

<script src="https://design.online.uga.edu/js/scripts.js"></script>

Versioned URLs

Section titled “Versioned URLs”

Pinning to a specific release avoids unexpected changes when the system is updated:

<link rel="stylesheet" href="https://design.online.uga.edu/v1.5.3/css/base.css" />
<script src="https://design.online.uga.edu/v1.5.3/js/scripts.js"></script>

Replace v1.5.3 with the desired version number.

Google Fonts

Section titled “Google Fonts”

The design system uses three Google Fonts families. Include them in your document so the correct typefaces load:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&family=Merriweather+Sans:ital,wght@0,400;0,700;1,400&family=Oswald:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

Minimal HTML Template

Section titled “Minimal HTML Template”

Here is a minimal HTML page that loads the design system via CDN:

<!doctype html>
<html lang="en" class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page Title</title>


    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&family=Merriweather+Sans:ital,wght@0,400;0,700;1,400&family=Oswald:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="https://design.online.uga.edu/css/base.css" />
  </head>
  <body>
    <a class="cmp-skip-to-content" href="#main-content">Skip to main content</a>
    <main id="main-content">
      <div class="obj-reading-width">
        <h1>Hello, Design System</h1>
        <p>Your content here.</p>
      </div>
    </main>


    <script src="https://design.online.uga.edu/js/scripts.js"></script>
  </body>
</html>

For a more complete walkthrough, see Building a Page.