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.
hack.css - the CSS framework for hackers
As what you can see, this website is proudly using hack.css.
About
As 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
hack.css is inspired by markdown.css and zeit.co
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 css file.
The last step is to add .hack class to your body element.
<head>
<link href="/path/to/hack.css" ref="stylesheet" />
</head>
<body class="hack">
...
</body>
User guide
Basic
Use .container to centerlize the main content.
Use flexbox to make layouts, hack.css uses grd.css to provide a flexbox based grid system.
.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
- -fill: Set item width to left width of parent
- -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
Form
<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="password">PASSWORD:</label>
<input id="password" type="password" 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>
<div class="form-actions">
<button type="button" class="btn">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" data-filled="Loading 40%">
<div class="progress-bar-filled" style="width: 40%"></div>
</div>
Buttons
<button class="btn">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-dark">Dark</button>
Card
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.
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 wanna 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 brought you a default loading element, but you can find more at CSS-only loaders.
<div class="loading"></div>