Start

Components

Cards
Paragraphs
Avatars
Badges
Buttons
Checkbox
Code
Collapse
Fieldsets
Inputs
Note
Select
More
Table
Toggle
Tag
Switcher
Footnote
Rate
Popover
Radio
Progress

Zeit Style

Zeit style is a modern css library, originating from Zeit Design. Your can fork it on GITHUB.
There's only styles here. If you're looking for a front-end library, please reference zeit-ui/vue.

About

The design of the Zeit is concise and aesthetic feeling, this is an important reason for popular of Zeit. Now you can use them through the Zeit Style.
Try to install:

npm i @zeit-ui/style

Usage

Start

You need import style in your project:

import '@zeit-ui/style'

In a simpler way, you can also use link of css: jsdelivr cdn.
Add class name to body element will start the using:

<body class="zi-main zi-layout"></body>

* Dark theme (optional)

* The dark theme need add class name zi-dark-theme to html tag:

<html class="zi-dark-theme">
...
</html>

Headings

H1 - H4 Headings, when we implement fonts and styles, we also optimize it in some detail.

The Evil Rabbit Jumped over the Fence

html code:

<h1>The Evil Rabbit Jumped over the Fence</h1>
<h2>The Evil Rabbit Jumped over the Fence</h2>
<h3>The Evil Rabbit Jumped over the Fence</h3>
<h4>The Evil Rabbit Jumped over the Fence</h4>

subheading

THE EVIL RABBIT JUMPED OVER THE FENCE

html code:

<span class="zi-subheading">THE EVIL RABBIT JUMPED OVER THE FENCE</span>

Lists

Unordered List and ordered List

Item
Item
Item

Item
Item
Item

html code:

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Cards

A basic display block

a light card

a dark card

a pin card

html code:

<div class="zi-card">
  <h4>a light card</h4>
</div>
<div class="zi-card zi-dark">
  <h4>a dark card</h4>
</div>
<div class="zi-card pin">
      <h4>a dark card</h4>
    </div>

Paragraphs

Default

Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bold

Dark Background

span html code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="zi-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

<div class="zi-card zi-dark">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

Helpful

title

subtitle

comment text

central caption

html code:

<p class="zi-caption">central caption</p>
<p class="zi-comment">comment text</p>
<p class="zi-subtitle">subtitle</p>
<p class="zi-title">title</p>

Avatars

Default avatars

Square avatars

Stacked Avatars

Text Avatars

USERL

html code:

<img class="zi-avatar small" src="...">
<img class="zi-avatar" src="...">
<img class="zi-avatar big" src="...">
<img class="zi-avatar huge" src="...">

<img class="zi-avatar square" src="...">

<img class="zi-avatar stacked" src="...">
<img class="zi-avatar stacked" src="...">

<!--include img element-->
<span class="zi-avatar"><img src="..."></span>

<!--include text-->
<span class="zi-avatar">
  <span class="zi-avatar-string">USER</span>
</span>
<span class="zi-avatar single">
  <span class="zi-avatar-string">L</span>
</span>

Badges

Basic badges

Default badges

550100

Red badges

550100

html code:

<span class="zi-badge">5</span>
<span class="zi-badge red">5</span>

Status

5505050

html code:

<span class="zi-badge">5</span>
<span class="zi-badge success">50</span>
<span class="zi-badge warning">50</span>
<span class="zi-badge error">50</span>

Combination

¹⁰⁺

this is a link.

html code:

<span class="zi-badge-group">
  <img class="zi-avatar square" src="...">
  <sup class="zi-badge">10+</sup>
</span>

<p>
  this is a
  <span class="zi-badge-group">
    <a href="...">link</a>
    <sup class="zi-badge dot"></sup>
  </span>
</p>

Buttons

Basic button

Default

Primary

html code:

<button class="zi-btn">Default</button>
<button class="zi-btn primary">Primary</button>

Button Type

Default button

ACTION

SUCCESS

WARNING

DANGER

Big button

ACTION

Small button

ACTION

Mini button

ACTION

html code:

<button class="zi-btn">ACTION</button>
<button class="zi-btn success">ACTION</button>
<button class="zi-btn warning">ACTION</button>
<button class="zi-btn danger">ACTION</button>

<button class="zi-btn big">ACTION</button>
<button class="zi-btn small">ACTION</button>
<button class="zi-btn mini">ACTION</button>

Status

Disabled button

Abort button

Shadown button

Loading button

html code:

<button class="zi-btn disabled">Disabled</button>
<button class="zi-btn abort">Abort</button>
<button class="zi-btn shadow">Shadow</button>
<button class="zi-btn success shadow">Shadow</button>
<button class="zi-btn success shadow small">Shadow</button>

<button class="zi-btn loading">
  <span class="zi-loading-shim">
    <i></i><i></i><i></i>
  </span>
</button>

Icon

Prefix icon

Suffix icon

Circular

html code:

<button class="zi-btn">
  Prefix
  <i class="prefix zi-icon-github"></i>
</button>

<button class="zi-btn">
  Suffix
  <i class="suffix zi-icon-github"></i>
</button>

<button class="zi-btn small circular">
  show more
  <i class="suffix zi-icon-up"></i>
</button>

Ghost

PRIMARY

SUCCESS

WARNING

DANGER

html code:

<button class="zi-btn primary ghost">PRIMARY</button>
<button class="zi-btn success ghost">SUCCESS</button>
<button class="zi-btn warning ghost">WARNING</button>
<button class="zi-btn danger ghost">DANGER</button>

Auto width

html code:

<button class="zi-btn auto">auto width</button>

Checkbox

Checkbox component just add style, it's not Checkbox element.
you can append hidden input to mock checkbox element action.

Normal

Checked

Disabled

Checked disabled

html code:

<span class="zi-checkbox"></span>
<span class="zi-checkbox checked"></span>
<span class="zi-checkbox disabled"></span>
<span class="zi-checkbox checked disabled"></span>

Checkbox label

Label1

html code:

<span class="zi-checkbox-container">
  <span class="zi-checkbox"></span>
  <span class="zi-checkbox-label">Label1</span>
</span>

Code

Inline code

TypeScript

Block code

const isNaN = val => Number.isNaN(val)

Bash code

npm i @zeit-ui/style

Dark style

Output: 1, Status: ok

html code:

<code>TypeScript</code>
<pre>const isNaN = val => Number.isNaN(val)</pre>
<pre class="zi-bash">npm i @zeit-ui/style</pre>
<pre class="zi-dark">Output: 1, Status: ok</pre>

Collapse

Collapse is only a mock element, you need to implement action by JavaScript.

Question A

Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Question A

html code:

<div class="zi-collapse">
  <div class="zi-collapse-title">
    <h3>Question A</h3>
    <i class="zi-icon-minus"></i>
  </div>
  <p class="zi-collapse-content">Lorem ipsum dolor sit amet...</p>
</div>

Fieldsets

Normal

The Evil Rabbit Jumped over the Fence

Disabled

The Evil Rabbit Jumped over the Fence

html code:

<div class="zi-fieldset">
  <div class="zi-fieldset-content">
    <h1>The Evil Rabbit Jumped over the Fence</h1>
    <h2>The Evil Rabbit Jumped over the Fence</h2>
  </div>
  <div class="zi-fieldset-footer">
    <p>The Evil Rabbit Jumped over the Fence</p>
    <button clsss="zi-btn mini auto primary">Action</button>
  </div>
</div>

<div class="zi-fieldset disabled">
  <div class="zi-fieldset-content">
    <h1>The Evil Rabbit Jumped over the Fence</h1>
    <h2>The Evil Rabbit Jumped over the Fence</h2>
  </div>
  <div class="zi-fieldset-footer">
    <p>The Evil Rabbit Jumped over the Fence</p>
    <button class="zi-btn mini auto primary">Action</button>
  </div>
</div>

Inputs

Basic inputs

Normal

Disabled

Error

Success

html code:

<input class="zi-input" placeholder="The Evil Rabbit">
<input class="zi-input disabled" disabled placeholder="The Evil Rabbit">
<input class="zi-input error" value="The Evil Rabbit">
<input class="zi-input success" value="The Evil Rabbit">

Size

html code:

<input class="zi-input mini" value="The Evil Rabbit">
<input class="zi-input small" value="The Evil Rabbit">
<input class="zi-input" value="The Evil Rabbit">
<input class="zi-input big" value="The Evil Rabbit">

Input Group

include icon

include text

zeit.co/teams

html code:

<div class="zi-input-group prefix">
  <span class="zi-label prefix"><i class="zi-icon-mail"></i></span>
  <input class="zi-input" placeholder="The Evil Rabbit">
</div>

<div class="zi-input-group prefix">
  <span class="zi-label prefix">zeit.co/teams</span>
  <input class="zi-input" value="Zeit">
</div>

Note

Default note

NOTE: This is a note that details something important.
A link to helpful information.

Hint note

Hint: This is a hint for something that is possible.

Alert note

Alert: This is an alert for something to take action for.

Error note

Error: This is a error for something very important.

Hidden label

Just a quick note!

html code:

<p class="zi-note"> <span class="zi-note-type">NOTE:</span> This is a ...</p>
<p class="zi-note hint"> <span class="zi-note-type">HINT:</span> This is a ...</p>
<p class="zi-note alert"> <span class="zi-note-type">ALERT:</span> This is a ...</p>
<p class="zi-note error"> <span class="zi-note-type">ERROR:</span> This is a ...</p>

<p class="zi-note">Just a quick note!</p>

Select

Normal

Small

Mini

Arrow icon

Arrow icon small

Arrow icon mini

html code:

<select class="zi-select">
  <option>First option</option>
  <option>Second option</option>
</select>

<select class="zi-select small">
  <option>First option</option>
  <option>Second option</option>
</select>

<select class="zi-select mini">
  <option>First option</option>
  <option>Second option</option>
</select>

<div class="zi-select-container">
  <select class="zi-select">
    <option>First option</option>
    <option>Second option</option>
  </select>
  <i class="arrow zi-icon-up"></i>
</div>

<div class="zi-select-container small">
  <select class="zi-select">
    <option>First option</option>
    <option>Second option</option>
  </select>
  <i class="arrow zi-icon-up"></i>
</div>

html code:

<div class="zi-more">
  <button class="zi-btn circular small auto">
    Show More
    <i class="suffix zi-icon-up"></i>
  </button>
</div>

<div class="zi-more">
  <button class="zi-btn circular small auto">
    Show More
    <i class="suffix zi-icon-down"></i>
  </button>
</div>

Table

	NAME	USERNAME
	Evil Rabbit	evilrabbit
	Evil Rabbit	evilrabbit

html code:

<table class="zi-table">
  <thead>
    <tr>
      <th></th>
      <th>NAME</th>
      <th>USERNAME</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img class="zi-avatar" src="..."></td>
      <td>Evil Rabbit</td>
      <td>evilrabbit</td>
    </tr>
    <tr>
      <td><img class="zi-avatar" src="..."></td>
      <td>Evil Rabbit</td>
      <td>evilrabbit</td>
    </tr>
  </tbody>
</table>

Toggle

Normal

Checked

Disabled

Checked disabled

html code:

<div class="zi-toggle"></div>
<div class="zi-toggle checked"></div>
<div class="zi-toggle disabled"></div>
<div class="zi-toggle checked disabled"></div>

Tag

Basic

Status: Unstable

html code:

<div class="zi-tag">Status: Unstable</div>
<span class="zi-tag">Status: Unstable</span>

Status

Status: Success

Status: Warning

Status: Danger

html code:

<span class="zi-tag success">Status: Success</span>
<span class="zi-tag warning">Status: Warning</span>
<span class="zi-tag danger">Status: Danger</span>

Switcher

Gitlab Github

html code:

<div class="zi-switcher">
  <a>Gitlab</a>
  <a class="active">Github</a>
</div>

Footnote

Specification of interface

html code:

<p>Specification of
  <a class="zi-footnote" href="...">interface <i class="zi-icon-footnote"></i></a>
</p>

Rate

Empty

Active

html code:

<div class="zi-rate">
  <i class="zi-rate-star zi-icon-star-off"></i>
  <i class="zi-rate-star zi-icon-star-off"></i>
  <i class="zi-rate-star zi-icon-star-off"></i>
  <i class="zi-rate-star zi-icon-star-off"></i>
  <i class="zi-rate-star zi-icon-star-off"></i>
</div>

<div class="zi-rate">
  <i class="zi-rate-star zi-icon-star active"></i>
  <i class="zi-rate-star zi-icon-star active"></i>
  <i class="zi-rate-star zi-icon-star active"></i>
  <i class="zi-rate-star zi-icon-star active"></i>
  <i class="zi-rate-star zi-icon-star active"></i>
</div>

default popover

html code:

<div class="zi-popover">
  <span class="zi-popover-host">
    <button class="zi-btn small">popover</button>
  </span>
  <div class="zi-popover-dropdown center">
    <div class="zi-popover-item nohover">
      <span class="title">Team List</span>
    </div>
    <div class="zi-popover-item line nohover"></div>
    <div class="zi-popover-item">Team A</div>
    <div class="zi-popover-item">Team B</div>
  </div>
</div>

Radio

Normal

Checked

Disabled

Checked disabled

html code:

<span class="zi-radio"></span>
<span class="zi-radio checked"></span>
<span class="zi-radio disabled"></span>
<span class="zi-radio checked disabled"></span>

Radio label

Label1

html code:

<span class="zi-radio-container">
  <span class="zi-radio"></span>
  <input class="zi-radio-original" type="radio">
  <span class="zi-radio-label">Label1</span>
</span>

Progress

Empty

active

html code:

<div class="zi-progress-bar">
  <div class="zi-progress">
    <div class="zi-progress__inner"></div>
  </div>
  <span class="zi-progress__text">0</span>
</div>

<div class="zi-progress-bar">
  <div class="zi-progress">
    <div class="zi-progress__inner" style="width: 50%"></div>
  </div>
  <span class="zi-progress__text">50</span>
</div>

Zeit Style

About

Usage

Start

* Dark theme (optional)

Headings

The Evil Rabbit Jumped over the Fence