Quick Start

Installation

<link rel="stylesheet" type="text/css" href="https://cdn.cesbo.com/main.css" />

Base HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="https://cdn.cesbo.com/main.css" />
</head>

<body>
	<header>
		<nav>
			<a href="#">Home</a>
			<a href="#">About</a>
			<a href="#">Contact</a>
		</nav>
	</header>

	<main>
		<h1>Hello World</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</main>

	<footer>
		<p>© 2024 Your Company</p>
	</footer>
</body>
</html>

Theme

Color palette

Primary
Border
Secondary
Danger
Success

CSS Variables

The theme is defined by the following CSS variables:

--font-family: "Helvetica Neue", sans-serif;
--font-monospace: "Courier New", monospace;
--font-size: 16px;

--screen-width: 85rem;

--color-text: 0 0% 90%;
--color-background: 220 15% 15%;
--color-border: 220 10% 50%;

--color-secondary: 220 10% 25%;
--color-primary: 213 62% 56%;
--color-danger: 350 62% 56%;
--color-success: 160 62% 56%;

Color variables should be in HSL format.

Typography

Text elements

Headings

Provided only 3 levels of headers. Other levels are hidden

h1. Heading 1

h2. Heading 2

h3. Heading 3

Link

Text elements

  • Normal
  • Strikethrough
  • Underline
  • Code
  • Bold
  • Italic

Code

Monotype blocks for code, logs, etc.

Blockquote

Quoted text is a part from some text

Author

Elements

HR

Table

Col 1 Col 2 Col 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

Modal

Modal Header
Modal Content
Modal Footer
Modal Form

Note

General block

Any additional information

Success block

Success note

Danger block

Caution information

Toast

Info Text

Success Text

Error Text

Global toasts should be placed in the .toast-stack element:

Spinner

Animated spinner to indicates loading process. Available variables:

Controls

Basic control elements

Button

Outline buttons

Button with icon

Fieldset

Fieldset is a group of related elements.

Input

Select, Checkbox

Checkbox

Group

Hidden Elements