Get started

Two link tags, then plain HTML with ag- classes. That is the whole system.

1. Add the stylesheets

The core first, then one country pack. The pack must come after the core.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/afrigov@0.15.1/dist/core.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/afrigov@0.15.1/dist/ng.min.css">

<!-- Optional: menus, video and error-summary focus. Under 2 KB compressed. -->
<script>
  document.documentElement.classList.add("ag-js");
  addEventListener("load", function () {
    if (!window.AfriGov) document.documentElement.classList.remove("ag-js");
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/afrigov@0.15.1/dist/afrigov.iife.js" defer></script>

The three lines before the script go in the head. They collapse the menu on phones from the first paint, so the page does not jump when the script arrives on a slow connection, and they put the full menu back if the script never arrives. Without them everything still works; the menu collapses a moment later.

Use the exact version

The links name an exact version, afrigov@0.15.1. The CDN tells browsers to keep that file for good, which is safe because a published version never changes. When a new version comes out, the address changes, so every visitor gets it on their next visit.

A shorter address such as afrigov@0.13 follows the newest 0.13 release, but browsers keep it for up to seven days. A fix can take a week to reach someone who visited before it. Use the exact version, and to update, change the number in the links after reading the changelog.

Or from npm:

npm install afrigov

import "afrigov/core.css";
import "afrigov/ng.css";
import { init } from "afrigov"; // optional
init();

2. Start from the page skeleton

Every page has the same shape: skip link, official banner, header, main content, footer. Copy this and replace the middle.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Renew a passport – Ministry of Interior</title>
  <meta name="description" content="Renew an adult passport online. It takes about 10 minutes.">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/afrigov@0.15.1/dist/core.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/afrigov@0.15.1/dist/ng.min.css">
</head>
<body>
  <a class="ag-skip-link" href="#main">Skip to main content</a>

  <section class="ag-banner" aria-label="Official website notice">
    <div class="ag-container ag-banner__inner">
      <span class="ag-flag" aria-hidden="true"><span></span><span></span><span></span></span>
      <p class="ag-banner__text">An official website of the Government</p>
    </div>
  </section>

  <header class="ag-header">
    <div class="ag-container ag-header__inner">
      <a class="ag-header__brand" href="/">
        <span>
          <span class="ag-header__org">Ministry of Interior</span>
          <span class="ag-header__sub">The Government</span>
        </span>
      </a>
    </div>
  </header>

  <main class="ag-main ag-container" id="main" tabindex="-1">
    <div class="ag-prose">
      <h1>Renew a passport</h1>
      <p class="ag-lead">Takes about 10 minutes. You will need your national ID and a payment card or mobile money.</p>
      <a class="ag-button ag-button--start" href="/apply">Start now</a>
    </div>
  </main>

  <footer class="ag-footer">
    <div class="ag-container ag-footer__bar">
      <p>© Ministry of Interior</p>
    </div>
  </footer>
</body>
</html>

3. Pick components

Each component page has the HTML to copy and the rules for using it. Start with buttons, text inputs and the error summary, which cover most of a government form.

4. Override tokens if you must

Every value is a CSS custom property prefixed --ag-. Set it after the pack and nothing else changes.

:root {
  --ag-size-container: 60rem;
  --ag-font-family-sans: "Public Sans", system-ui, sans-serif;
}

See Tokens for the full list.

Browser support

Everything from 2019 onwards: Chrome 88, Edge 88, Firefox 78, Safari 14, Samsung Internet 15 and later. Older proxy browsers such as Opera Mini in extreme mode receive readable, unstyled semantic HTML, which is why every component keeps its meaning without CSS.

Before you launch

Give every page its own title and description, and add the structured data that says who you are. See Search and answer engines.