Як використовувати Astral.CSS для ваших веб-проектів

Astral.CSS — це потужний і простий у використанні CSS-фреймворк, розроблений для спрощення веб-розробки. Завдяки своїм адаптивним дизайнам, налаштовуваним компонентам і вбудованим функціям, таким як темна тема, Astral.CSS дає можливість розробникам створювати стильні, сучасні вебсайти з мінімальними зусиллями. У цьому посібнику ми покроково покажемо, як використовувати Astral.CSS.

1. Початок роботи з Astral.CSS

Крок 1: Завантажте фреймворк

Щоб почати використовувати Astral.CSS, спершу потрібно його завантажити:

1. Відвідайте репозиторій Astral.CSS на GitHub.
2. Завантажте останню версію фреймворку у вигляді файлу .zip або клонуйте репозиторій:

git clone https://github.com/thaboyaluya/astral.css-V3.0.git

1. Розпакуйте файли та додайте CSS у вашу проектну папку.

Крок 2: Підключіть Astral.CSS до вашого проекту

Щоб підключити Astral.CSS до вашого HTML файлу, додайте наступний тег у секцію вашого документа:

2. Огляд компонентів Astral.CSS

Astral.CSS містить широкий набір готових компонентів, які можна налаштувати під ваші потреби. Ось кілька популярних компонентів, щоб почати:

Navbar

Створіть адаптивну панель навігації з легкістю:

Простий заголовок           
Домашня сторінка
Особливості
Ціни
Поширені запитання
Про нас
 ```  **Кнопки**  Astral.CSS включає кнопки в різних стилях:  ``` Основна   Вторинна   Успіх   Помилка   Попередження   Інформація   Темна   Світла ```  **Поля вводу**  Легко стилізуйте поля форми:  ``` 
 ```  **Карти**  Презентуйте контент у структурованому вигляді, використовуючи карти:  ``` 
Microsoft
Надаємо можливість кожній людині та кожній організації досягати більше.
Кнопка    Посилання    
 ```  ## 3. Налаштування Astral.CSS  Однією з найкращих функцій Astral.CSS є його налаштовуваність. Налаштуйте компоненти відповідно до вашого бренду або вимог проекту.  ### Зміна кольорів теми  Ви можете оновити змінні кольорів за замовчуванням у CSS файлі:  ``` :root {   --primary-color: #00304a;   --secondary-color: #eae2b7;   --warning-color: #fcbf49;   --error-color: #d62828;   --success-color: #48c774;   --info-color: #209cee;   } ```  ### Темна тема  Astral.CSS підтримує темну тему з коробки.
Використовуйте клас theme-dark або встановіть атрибут data-theme в значення dark, щоб активувати темну тему:

Це в режимі світла, якщо користувач не встановив перевагу або якщо їх перевага встановлена на світлий режим.   
Це в темному режимі   
Це також в темному режимі   

``` ## 4. Розширені можливості ### Повідомлення Toastify Astral.CSS включає вбудований модуль Toastify для відображення сповіщень у вигляді тостів, який потребує JavaScript для роботи. ## 5. Документація та ресурси Astral.CSS надає детальну документацію, яка допоможе вам максимально ефективно використовувати фреймворк. Не забудьте переглянути наступні ресурси: - Бібліотека компонентів - Посібник з типографіки - Документація Toastify - Документація OTP - Посібник по системі сітки ## Заключні думки Astral.CSS — це потужний та універсальний фреймворк, який робить веб-розробку швидшою та приємнішою. Незалежно від того, чи ви створюєте особистий проект або масштабний додаток, його різноманітні компоненти, варіанти налаштування та вбудовані функції, такі як темна тема та сповіщення Toast, охоплюють всі ваші потреби. Готові почати? Завантажте Astral.CSS сьогодні і змініть спосіб створення вебсайтів!

Перекладено з: How to Use Astral.CSS for Your Web Projects