css-classes-from-html

🌐 Виберіть мову/Choose language/Wählen Sprache:

🇺🇦 Українська | 🇬🇧 English | 🇩🇪 Deutsch

📊 Статистика Marketplace :

📹 Відео інструкція

🎬 Дивитися повну інструкцію на YouTube

💖 Підтримати автора

Якщо це розширення допомогло вам у роботі, підтримайте автора кавою! ☕

📌 Опис

Автоматична генерація CSS класів з HTML файлів з інтеграцією Figma. Розроблено завдяки знанням отриманим на курсах GoIT з використанням штучного інтелекту.

✨ Можливості

• 🚀 Три режими генерації: Мінімальний, Максимальний, Production
• 🎨 Інтеграція з Figma: Імпорт стилів безпосередньо з дизайнів
• 📱 Адаптивні стилі: Автоматична генерація media queries
• 🔧 Оптимізація: Мініфікація та оптимізація для production
• 💾 Збереження налаштувань: Автоматичне збереження конфігурації

📦 Встановлення

Спосіб 1: З VS Code Marketplace

code --install-extension vutov-mykola.css-classes-from-html

Спосіб 2: З VSIX файлу

1. Завантажте .vsix файл з Releases
2. У VS Code: Ctrl+Shift+P → Extensions: Install from VSIX...

Спосіб 3: З вихідного коду

git clone https://github.com/VuToV-Mykola/css-classes-from-html.git
cd css-classes-from-html
npm install

🚀 Використання

1. Відкрийте HTML файл у VS Code
2. Натисніть Ctrl+Shift+P (Windows/Linux) або Cmd+Shift+P (Mac)
3. Виберіть CSS Classes: Show Main Menu
4. Оберіть режим генерації:
   • Мінімальний: Базові CSS класи
   • Максимальний: Повна інтеграція з Figma
   • Production: Оптимізований код

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

Figma інтеграція

1. Отримайте Figma Personal Access Token
2. Вставте посилання на Figma файл
3. Виберіть Canvas та Layers для імпорту

Опції генерації

• includeReset: Включити reset стилі
• includeComments: Додати коментарі
• optimizeCSS: Оптимізувати CSS
• generateResponsive: Генерувати адаптивні стилі

⌨️ Гарячі клавіші

Команда	Windows/Linux	Mac
Показати меню	Ctrl+Shift+C	Cmd+Shift+C
Швидка генерація	Ctrl+Alt+C	Cmd+Alt+C

🛠️ Розробка

# Клонування репозиторію
git clone https://github.com/VuToV-Mykola/css-classes-from-html.git

# Встановлення залежностей
npm install

# Запуск тестів
npm test

# Створення VSIX пакету
vsce package

📝 Ліцензія

MIT License - дивіться файл LICENSE

👨‍💻 Автор

VuToV-Mykola

• GitHub: @VuToV-Mykola
• Email: vutov.mykola@gmail.com

🙏 Подяки

• GoIT - за знання та навчання
• Anthropic Claude AI - за допомогу в розробці
• VS Code Team - за чудовий редактор

🐛 Повідомлення про помилки

Знайшли помилку? Створіть issue

🤝 Внесок у проєкт

Внески вітаються! Будь ласка, прочитайте CONTRIBUTING.md

---

Розроблено з ❤️ в Україні 🇺🇦