heki.css

Simple responsive boilerplate to kickstart your project

Currently v1.0

Download Github

Motivation

heki.css provides a minimal set of styles for a clean start at only 2kb gzipped. It is intentionally not a UI framework and a great start if you feel that you don't need all the functionality provided by a larger framework.

Getting Started

Download

The easist way to get started is to download heki.css.

Download

Install with NPM

heki.css is available via npm

Usage

Add the stylesheet link tag in the head.

Typographie

CSS3 introduced the rem unit, which stands for "root em". The rem unit is relative to the font-size of the root element html. This means we can define a single font size on the root element and define all rem units as a percentage of that.

The typography basis is Helvetica served by Google fonts, set at 1em using a "perfect-fit" modular scale of 1.5.

Heading h1 3.9rem

Heading h2 2.8rem

Heading h3 1.9rem

Heading h4 1.4rem

Heading h5 1rem
Heading h6 0.7rem

Lists

We support the unordered and ordered lists

  • Unordered list item 1
  • Unordered list item 2
    • Unordered list item 2.1
    • Unordered list item 2.2
  1. Ordered list item 1
  2. Ordered list item 2
    1. Ordered list item 2.1
    2. Ordered list item 2.2
Definition List Item 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Definition List Item 2
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Blockquote

The blockquote represents a section quoted from another source.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Text Formats

Element Example
<strong> This is strong text
<em> This is emphasized text
<u> This is underlined text
<s> This is strikethrough text
<a> This is link text
<small> This is small text
<sup> This is superscript text
<sub> This is subscript text
<code> This is code text
<samp> This is sample text
<var> This is variable text
<kbd> This is keyboard text
<abbr> This is abbreviation text
<del> This is deleted text
<ins> This is inserted text
<mark> This is marked text

Buttons

Buttons come in two basic styles, an filled button and an outline only button.

Anchor button

Table

Use thead and tbody for proper formatting.

Firstname Lastname Money
Donald Duck $5
Dagobert Duck a lot

Forms

Styling forms can be a pain in the ass. All inputs are normalized to use a common cross-browser height so then can be easily stacked or placed alongside each other.