Currently v1.0
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.
The easist way to get started is to download heki.css.
heki.css is available via npm
Add the stylesheet link tag in the head.
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
.
h1
3.9remh2
2.8remh3
1.9remh4
1.4remh5
1remh6
0.7rem
We support the unordered and ordered lists
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
Element | Example |
---|---|
<strong> |
This is strong text |
<em> |
This is emphasized text |
<u> |
This is underlined text |
<s> |
|
<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> |
|
<ins> |
This is inserted text |
<mark> |
This is marked text |
Buttons come in two basic styles, an filled button and an outline only button.
Use thead
and tbody
for proper formatting.
Firstname | Lastname | Money |
---|---|---|
Donald | Duck | $5 |
Dagobert | Duck | a lot |
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.