Building LMS Content

This guide covers using the design system inside UGA’s learning management system, Brightspace (branded as eLC at UGA), where content is embedded within the LMS’s own page shell. The setup is simpler than a public-facing page because the LMS provides its own navigation, page chrome, and width constraints.

If you are building in a content management system, see Building a Public Page instead.

Including the Design System

Each content page needs the design system stylesheet. Add it at the top of your content:

<link rel="stylesheet" href="https://design.online.uga.edu/css/base.css" />
<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"
/>

If your content uses interactive components (accordions, tabs, carousels), also include the JavaScript at the end of your content:

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

Minimal Boilerplate

Copy this into a Brightspace HTML page as a starting point, replacing the default Brightspace template:

<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <link rel="stylesheet" href="https://design.online.uga.edu/css/base.css" />
    <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"
    />
  </head>
  <body>
    <h1>Page Title</h1>
    <p>Your content here.</p>

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

This replaces the default Brightspace styles with the design system stylesheet and fonts. The <script> tag at the end initializes interactive components. If your page has no interactive components (accordions, tabs, carousels), you can omit the script tag.

Content Structure

Since the LMS constrains page width, you typically do not need the obj-reading-width or obj-content-width wrapper classes. Write your content directly and use design system element styles, components, and utilities.

<h1>Module 1: Introduction</h1>
<p>
  Welcome to the course. This module covers the foundational concepts
  you will need throughout the program.
</p>

<h2>Learning Objectives</h2>
<ul>
  <li>Understand the core principles of the discipline</li>
  <li>Identify key terms and definitions</li>
  <li>Apply concepts to real-world scenarios</li>
</ul>

The design system styles headings, paragraphs, lists, and links automatically — no classes are needed for basic typography.

Using Utility Classes

Utility classes work the same way inside the LMS as on public pages. Use them for spacing, alignment, display control, and color:

<div class="util-margin-bottom-xl">
  <h2>Key Concepts</h2>
  <p>
    This section introduces the fundamental ideas you will build on
    in later modules.
  </p>
</div>

See the Naming Conventions page for how class names are structured.

Adding Components

Components work inside the LMS as long as the correct markup and classes are used. The Module Roadmap is a common example.

Example: Module Roadmap

<div class="obj-grid">
  <div class="obj-grid__full">
    <h1 class="cmp-heading-1 util-margin-bottom-md">Module Introduction</h1>
    <p>
      Introductory paragraph describing the module's purpose and what
      students will learn.
    </p>
  </div>

  <div class="obj-grid__full obj-grid__half@md">
    <h2>Learning Outcomes</h2>
    <ul>
      <li>Outcome One</li>
      <li>Outcome Two</li>
      <li>Outcome Three</li>
    </ul>
  </div>

  <div class="obj-grid__full obj-grid__half@md">
    <h2>Steps to Completion</h2>
    <ol>
      <li>Step One</li>
      <li>Step Two</li>
      <li>Step Three</li>
    </ol>
  </div>

  <div class="obj-grid__full">
    <hr class="cmp-hr__red" />
  </div>
</div>

On small screens, all sections stack vertically. At the @md breakpoint (800 px), Learning Outcomes and Steps to Completion sit side by side in two equal columns.

For the full documentation, see the Module Roadmap component page.

If your content benefits from a footer, you can include the Footer component. See the Footer documentation for the full markup.

Width Considerations

The LMS renders content inside an iframe whose width depends on the browser viewport and the LMS sidebar state.

At viewport widths of 937 px and below, the LMS sidebar collapses and the content area is approximately the viewport width minus 30 px (e.g., a 500 px viewport yields a ~470 px content area).

At viewport widths above 937 px, the LMS sidebar is visible and takes up a significant portion of the viewport. The content area starts at around 574 px (at 938 px viewport), scales up, and caps at 865 px once the viewport reaches 1230 px. It will not grow wider regardless of how large the viewport gets.

Browser viewport	Content area width
500 px	~470 px
937 px	~907 px
938 px	~574 px (sidebar appears)
1230 px+	865 px (max)

Because the widest the content area ever gets is 907 px (just before the sidebar appears), the design system’s obj-reading-width (960 px max) and obj-content-width (1200 px max) will rarely take effect — the LMS container is already narrower than those caps. You can still use them without harm, but they are generally unnecessary in LMS content.