hack.css - dead simple css framework

As you can see, this website is proudly built using hack.css.

New! dark, dark-grey, solarized-dark and standard modes are now available!

About

Many hackers enjoy the readability of markdown code, some stylings in hack.css are exactly the way markdown is.

conquer the world
rule the web
copy the code

kinda cool, huh?

hack.css is inspired by markdown.css and zeit.co

Use cases

hack.css is perfect for the homepage of your open-source projects! happy <coding> !

How to use?

Install via npm by running npm install -S hack and load it with your preferred pre-processor.

You can also simply hot-link the url of the css file.

The last step is to add the .hack class to your body element.

<!-- required in all modes -->
<link rel="stylesheet" href="/path/to/hack.css">

<!-- markdown mode -->
<body class="hack"></body>

<!-- standard mode -->
<link rel="stylesheet" href="/path/to/standard.css">
<body class="standard"></body>

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

User guide

Basic

Use .container to centralize the main content.

Use flexbox to make layouts.

`.grid` modifiers

To align items with align-items
- -top: To top
- -middle: To middle
- -bottom: To bottom
- -stretch: Stretch items
- -baseline: To baseline
To layout contents with justify-content
- -left: To left
- -center: To center
- -right: To right
- -between: Add spaces between items
- -around: Add spaces around items

`.cell` modifiers

-1of12: Set item width to 8.3% of parent
-2of12: Set item width to 16.7% of parent
-3of12: Set item width to 25% of parent
-4of12: Set item width to 33% of parent
-5of12: Set item width to 41.7% of parent
-6of12: Set item width to 50% of parent
-7of12: Set item width to 58.3% of parent
-8of12: Set item width to 66.7% of parent
-9of12: Set item width to 75% of parent
-10of12: Set item width to 83.3% of parent
-11of12: Set item width to 91.7% of parent
-12of12: Set item width to 100% of parent

Components

<hr>

List

foo
- sub foo
- sub bar
- sub baz
bar
baz

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

<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>

Media

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

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.