WindowMaker.css Reference

A CSS library for the NeXTSTEP & Window Maker look and feel.

Window

Active Window

This is the content area.

<div class="window active">
  <div class="title-bar">
    <div class="title-bar-controls">
      <button aria-label="Close"></button>
    </div>
    <div class="title-bar-text">Active Window</div>
    <div class="title-bar-controls">
      <button aria-label="Maximize"></button>
      <button aria-label="Minimize"></button>
    </div>
  </div>
  <div class="window-body">
    <p>This is the content area.</p>
  </div>
</div>

Buttons

<button>
  Standard Button
</button>

Form Elements








<input type="text" value="Text input">

<textarea rows="3">Textarea</textarea>

<select>
  <option>Select Menu</option>
</select>

<label> Checkbox
  <input type="checkbox" checked>
</label>

<label> Radio
  <input type="radio" name="ref-radio" checked>
</label>

Tabs

Content for Tab 1.

<div class="ns-tabs">
  <div class="ns-tab-headers">
    <button class="ns-tab-button ns-tab-active" data-tab="t1">Tab 1</button>
    <button class="ns-tab-button" data-tab="t2">Tab 2</button>
  </div>
  <div class="ns-tab-content">
    <div id="t1" class="ns-tab-pane ns-tab-active">
      <p>Content for Tab 1.</p>
    </div>
    <div id="t2" class="ns-tab-pane">
      <p>Content for Tab 2.</p>
    </div>
  </div>
</div>

Progress Bar

<div class="ns-progress-bar">
  <div class="ns-progress-fill" style="width: 60%;"></div>
</div>