Nectar.css

A classless CSS framework for semantic HTML.
CSS-фреймворк без класів для семантичного HTML.

---

English

Features

• No classes required — semantic HTML only
• Automatic dark mode (system preference)
• Responsive by default
• Lightweight (~8 KB minified)
• Customizable via CSS variables
• Supports modern browsers

Quick start

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My page</title>
  <link rel="stylesheet" href="nectar.css">
</head>
<body>
  <h1>Hello world</h1>
  <p>Semantic HTML without classes.</p>
</body>
</html>

Customization

Override CSS variables:

:root {
  --bg: #ffffff;
  --text: #000000;
  --link: #0060a0;
  --button-bg: #f88850;
  --max-width: 1024px;
}

Dark mode

Dark mode follows system settings automatically.
Manual toggle:

document.documentElement.classList.toggle('dark-theme');

Українська

Особливості

• Без класів — лише семантичний HTML
• Автоматична темна тема
• Адаптивний дизайн за замовчуванням
• Легкий (~8 KB у мініфікованому вигляді)
• Налаштування через CSS-змінні
• Підтримка сучасних браузерів

Швидкий старт

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя сторінка</title>
  <link rel="stylesheet" href="nectar.css">
</head>
<body>
  <h1>Привіт, світ</h1>
  <p>Семантичний HTML без класів.</p>
</body>
</html>

Налаштування

Перевизначення CSS-змінних:

:root {
  --bg: #ffffff;
  --text: #000000;
  --link: #0060a0;
  --button-bg: #f88850;
  --max-width: 1024px;
}

Темна тема

Темна тема вмикається автоматично.
Ручне перемикання:

document.documentElement.classList.toggle('dark-theme');

Accessibility

• Visible keyboard focus with :focus-visible for links, buttons and form controls.
• Reduced motion support via @media (prefers-reduced-motion: reduce).

Доступність

• Видимий фокус клавіатури через :focus-visible для посилань, кнопок та полів форми.
• Підтримка зменшення руху через @media (prefers-reduced-motion: reduce).

---

Project review / Аналіз проєкту

See actionable improvement ideas in PROJECT_IMPROVEMENTS.md. Дивіться практичні варіанти покращення у PROJECT_IMPROVEMENTS.md.

---

License

Public domain.
See the LICENSE file for details.

---

Created by Shkrabaliuk.