halivert.css

• Modular.
• Easy to use.
• Customizable.
• Around 7KB.

Usage

<link rel="stylesheet" href="https://unpkg.com/halivert.css" />

And you're ready to go.
Optionally, add the suggested fonts:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
	href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Raleway:wght@400;700&family=Ubuntu+Mono:wght@400;700&display=swap"
	rel="stylesheet"
/>

Modules

If you want to use only some of the functionalities, I have divided the stylesheet in modules:

• base: Foundations of the stylesheet, remove margins and add minor tweaks.
• code: Code, pre and kbd.
• form: All form styles.
• layout: Sets the grid of the body, and layout colors.
• links: Anchor tag.
• lists: Only lists.
• media: Figures.
• tables: Stripped rows.
• text: Selection, mark and details.
• titles: Only titles.

Example

If you only want to use forms.

<link rel="stylesheet" href="https://unpkg.com/halivert.css/css/base.min.css" />
<link rel="stylesheet" href="https://unpkg.com/halivert.css/css/form.min.css" />

Components

Tables

You need to add a wrapper to table to prevent overflow

No.	Title	Writer(s)	Length
1.	"Machu Picchu"	Julian Casablancas Nick Valensi	3:32
2.	"Under Cover of Darkness"	J. Casablancas Albert Hammond, Jr. Fabrizio Moretti N. Valensi	3:57
3.	"Two Kinds of Happiness"	J. Casablancas	3:44
4.	"You're So Right"	J. Casablancas Nikolai Fraiture	2:34
5.	"Taken for a Fool"	J. Casablancas F. Moretti N. Valensi	3:25
6.	"Games"	J. Casablancas A. Hammond, Jr. N. Valensi	3:52
7.	"Call Me Back"	J. Casablancas N. Valensi	3:03
8.	"Gratisfaction"	J. Casablancas F. Moretti N. Valensi	2:59
9.	"Metabolism"	J. Casablancas F. Moretti N. Valensi	3:05
10.	"Life Is Simple in the Moonlight"	J. Casablancas	4:15
Total length:			34:27

Lists

• Computer
• Flowers
• Food
  • Pizza
  • Sushi
  • Cake
  • Ice cream flavors
    • Vanilla
    • Chocolate
    • Strawberry

Forms

Contact us

Name

Email

Message

Send

Code

const tree = {
	content: 1,
	left: null,
	right: null,
}

Ctrl + C, Ctrl + V

Other elements