Quick Start

main.css is an almost class-less css framework

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
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% 99%;
--color-background: 220 16% 16%;

--color-primary: 213 62% 56%;
--color-secondary: 220 16% 32%;
--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
  • Success
  • Danger
  • Dimmed

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

Deatils

Read more...

Details creates a disclosure element in which information is visible only when the widget is open

Spoiler

Click to show

Element like Details but with additional box

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