« Back to home

Dark mode

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vero maiores quam culpa sed, dolor delectus omnis ab repellat dolorum, atque obcaecati inventore ex ratione hic numquam quia, iste necessitatibus.

Usage

<link rel="stylesheet" href="/path/to/hack.css" />
<link rel="stylesheet" href="/path/to/dark.css" />
<body class="hack dark">
  ...
</body>

Components

<hr>

List

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa expedita.

Form

<form class="form">
  <fieldset class="form-group">
    <label for="username">USERNAME:</label>
    <input id="username" type="text" placeholder="type your name..." class="form-control">
  </fieldset>
  <fieldset class="form-group">
    <label for="email">EMAIL:</label>
    <input id="email" type="email" placeholder="" class="form-control">
  </fieldset>
  <fieldset class="form-group">
    <label for="country">COUNTRY:</label>
    <select id="country" class="form-control">
      <option>China</option>
      <option>U.S.</option>
      <option>U.K.</option>
      <option>Japan</option>
    </select>
  </fieldset>
  <fieldset class="form-group form-textarea">
    <label for="message">MESSAGE:</label>
    <textarea id="message" rows="5" class="form-control"></textarea>
  </fieldset>
  <div class="form-actions">
    <button type="button" class="btn btn-primary btn-block">Submit</button>
  </div>
</form>
Stateful Form
.form-group.form-success
.form-group.form-error
.form-group.form-warning
Help Block
In this format: +86 xxx xxx xxxxx
<fieldset class="form-group form-success">
  <label for="phone">Phone Number:</label>
  <input id="phone" type="text" placeholder="" class="form-control">
  <div class="help-block">In this format: +86 xxx xxx xxxxx</div>
</fieldset>

Table

editor speed extension interface
sublime 90 80 70
atom 60 85 80
vscode 80 65 60

Progress bar

<!-- with only an arrow -->
<div class="progress-bar">
  <div class="progress-bar-filled" style="width: 40%"></div>
</div>

<!-- with a percentage showing above the arrow -->
<div class="progress-bar progress-bar-show-percent">
  <div class="progress-bar-filled" style="width: 40%" data-filled="Loading 40%"></div>
</div>

Buttons

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>

<button class="btn btn-primary btn-ghost">Ghost Button</button>

<button class="btn btn-primary btn-block">Block Level Button</button>

Button group

<div class="btn-group">
  <button class="btn btn-success btn-ghost">Left</button>
  <button class="btn btn-success btn-ghost">Middle</button>
  <button class="btn btn-success btn-ghost">Right</button>
</div>

Card

title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
<div class="card">
  <header class="card-header">title</header>
  <div class="card-content">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.</div>
  </div>
</div>

Alerts

Success message
Info message
Warning message
Error message
<div class="alert alert-success">Success message</div>
<div class="alert alert-info">Info message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-error">Error message</div>

Menu

item #1
»
item #2
»
item #3
»
 <div class="menu">
   <a class="menu-item">
     item #1 <div class="pull-right">»</div>
   </a>
   <a class="menu-item active">
     item #2 <div class="pull-right">»</div>
   </a>
   <a class="menu-item">
     item #3 <div class="pull-right">»</div>
   </a>
 </div>

Media

This is useful if you intend to display a list of items, like the Twitter timeline.

e
EGOIST @egoist
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
EGOIST @egoist
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
e
<!-- left align -->
<div class="media">
  <div class="media-left">
    <div class="avatarholder">e</div>
  </div>
  <div class="media-body">
    <div class="media-heading">EGOIST @egoist</div>
    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
  </div>
</div>

<!-- right align -->
<div class="media">
  <div class="media-body">
    <div class="media-heading">EGOIST @egoist</div>
    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
  </div>
  <div class="media-right">
    <div class="avatarholder">e</div>
  </div>
</div>

Loading

hack.css gives you a default loading element, but you can find more at CSS-only loaders.

Loading in an alert box…
<div class="loading"></div>

<button class="btn btn-info btn-ghost">
  Loading&hellip;
  <span class="loading"></span>
</button>

<div class="alert alert-info">
  <span class="loading"></span>
  Loading in an alert box&hellip;
</div>