1. Color Palette

CSS custom properties defined on :root (and [data-gs-theme=dark] override).

/* In CSS */
color: var(--gs-primary);
background: var(--gs-danger-bg-subtle);
border-color: var(--gs-border-color);

2. Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Body paragraph - link example, bold, italic, inline code, highlighted.

Small text (.875em)   Extra-small (.text-xs)

<h1>Heading 1</h1>
<p>Body text with <a href="#">link</a>, <strong>bold</strong>, <code>code</code></p>
<span class="text-xs">Extra-small</span>

3. Buttons

<button class="button">Default</button>
<button class="button primary">Primary</button>
<button class="button danger">Danger</button>
<button class="button outline-primary">Outline Primary</button>
<button class="button outline-danger">Outline Danger</button>
<button class="button primary" disabled>Disabled</button>

<!-- .button class works on <a> too -->
<a class="button primary" href="#">Link Button</a>

4. Form Inputs

<input type="text" placeholder="Enter text…" />
<input type="password" placeholder="Password" />
<input type="number" value="42" />
<input type="file" />
<textarea rows="3"></textarea>
<input type="text" disabled value="Not editable" />
<select>
  <option>Option A</option>
</select>

5. Checkbox & Radio

<!-- .choiceItem wrapper for consistent layout -->
<div class="choiceItem">
  <input type="checkbox" id="chk1" checked />
  <label for="chk1">Label</label>
</div>
<div class="choiceItem">
  <input type="radio" name="group" id="r1" />
  <label for="r1">Label</label>
</div>

6. Fieldset

<fieldset>
  <legend>Section Title</legend>
  <div class="gs-form">
    <div class="gs-form-group">
      <label class="gs-form-group-label">Layer name</label>
      <input type="text" placeholder="my:layer" />
    </div>
    <div class="gs-form-group">
      <label class="gs-form-group-label">Workspace</label>
      <select><option>cite</option></select>
    </div>
    <div class="choiceItem">
      <input type="checkbox" id="fs-enabled" checked />
      <label for="fs-enabled">Enabled</label>
    </div>
    <div class="gs-form-group">
      <label class="gs-form-group-label">SRS</label>
      <div class="gs-input-group">
        <select style="width:auto;"><option>EPSG</option></select>
        <input type="text" placeholder="4326" />
        <button class="button">Find</button>
      </div>
    </div>
  </div>
</fieldset>

Even if gs-form are nested the alignment is persisted

<fieldset>
  <legend>Layer</legend>
  <div class="gs-form">
    <div class="gs-form-group">…</div>
    <div class="gs-form-group">…</div>
    <div class="gs-form">
      <div class="gs-form-group">…</div>
      <div class="gs-form-group">…</div>
    </div>
  </div>
</fieldset>

7. Form Layout (.gs-form / .gs-form-group)

<div class="gs-form">
  <div class="gs-form-group">
    <label class="gs-form-group-label">
      Title
      </label>
    <input type="text" placeholder="…" class="w-md" />
    <span class="gs-instruction">Tooltip hint.</span>
  </div>
  <div class="gs-form-group">
    <label class="gs-form-group-label">Abstract</label>
    <textarea rows="3"></textarea>
  </div>
  <div class="gs-form-group">
    <label class="gs-form-group-label" for="srs">SRS</label>
    <div class="gs-form-group-content">
      <input id="srs" type="text" placeholder="EPSG:4326" />
      <span class="gs-form-help">Coordinate reference system in EPSG or AUTO format.</span>
    </div>
  </div>
</div>

8. Input Group (.gs-input-group)

<div class="gs-input-group">
  <input type="text" placeholder="Search…" />
  <button class="button primary">Go</button>
</div>

<div class="gs-input-group">
  <select><option>EPSG</option></select>
  <input type="text" placeholder="4326" />
  <button class="button">Find</button>
</div>

9. Table

<table>
  <thead>
    <tr><th>Name</th><th>Type</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>roads</td><td>Vector</td>
      <td><a href="#" class="button"><i class="gs-icon gs-icon-pencil"></i> Edit</a></td>
    </tr>
    <tr>
      <td>dem</td><td>Raster</td>
      <td><a href="#" class="button"><i class="gs-icon gs-icon-pencil"></i> Edit</a></td>
    </tr>
  </tbody>
</table>
<!-- Odd rows get --gs-table-striped-bg automatically -->

10. Tabs (.tab-row / .tab-panel)

<div class="tab-row">
  <ul>
    <li class="selected"><a href="#">Data</a></li>
    <li><a href="#">Publishing</a></li>
  </ul>
</div>
<div class="tab-panel">
  …tab content…
</div>

11. Paginator

<div class="paginator">
  <a href="#" disabled="disabled">&laquo;</a>
  <a href="#" disabled="disabled">&lsaquo;</a>
  <em>1</em>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">&rsaquo;</a>
  <a href="#">&raquo;</a>
</div>

12. Feedback Panels

• Info - Layer saved successfully.
• Warning - SRS not recognized, defaulting to EPSG:4326.
• Error - Could not connect to the data store.

<ul class="feedbackPanel">
  <li class="feedbackPanelINFO">Info message</li>
  <li class="feedbackPanelWARNING">Warning message</li>
  <li class="feedbackPanelERROR">Error message</li>
</ul>

13. Spinner (.gs-spinner)

<div class="gs-spinner"></div>

14. Icons (.gs-icon)

All .gs-icon-* classes parsed live from geoserver.css. Use as <i class="gs-icon gs-icon-{name}"></i>.

<!-- Standalone icon -->
<i class="gs-icon gs-icon-accept"></i>

<!-- Icon inside a button -->
<button ><i class="gs-icon gs-icon-accept"></i> Accept</button>
<button class="primary"><i class="gs-icon gs-icon-add"></i> Add</button>
<button class="danger"><i class="gs-icon gs-icon-delete"></i> Delete</button>

14. Width & Height Utilities

Applied with !important; useful to constrain inputs, selects and table columns.

Input examples

<!-- Short numeric input -->
<input type="number" class="w-sm" value="8080" />

<!-- Constrained dropdown -->
<select class="w-md">…</select>

<!-- Long URL field -->
<input type="text" class="w-lg" />