🎨 HTML Element Styling Demo

A professional-grade React 18 + Vite + TypeScript application designed to demonstrate and experiment with dynamic CSS styling across a comprehensive suite of semantic HTML elements.

---

🇺🇸 English Documentation

🚀 Overview

This project provides a real-time, side-by-side preview environment for HTML elements. Use the high-precision controls on the right to inject styles directly into the elements on the left.

🛠 Tech Stack

• Framework: React 18 (Functional Components, Hooks)
• Build Tool: Vite (Ultra-fast HMR)
• Language: TypeScript (Strict Mode)
• Styling: Tailwind CSS v4 (Dashboard UI) + Dynamic Inline CSS (Demo Elements)
• Linting: ESLint 9 (Flat Config) + Prettier
• CI/CD: GitHub Actions (Automated Build & Deploy to GH Pages)

💎 Key Features

• Live Preview: Instant visual feedback as you adjust sliders and color pickers.
• Comprehensive Elements: Includes Typography, Forms, Tables, Interactive elements (details/summary), and Technical elements (code/kbd).
• Pro Tools:
  • Copy CSS: Instantly export your configuration to a clean CSS rule block.
  • Reset: Restore default browser styling with one click.
  • Mobile Responsive: Adaptive layout that switches to a top-sticky control bar on smaller screens.

💻 Local Development

1. Clone & Install:

   npm install

2. Start Dev Server:

   npm run dev

3. Run Quality Checks:

   npm run lint   # Check for code errors
   npm run format # Fix styling/formatting

---

🇫🇮 Suomenkielinen Dokumentaatio

🚀 Yleiskatsaus

Ammattitason React 18 + Vite + TypeScript -sovellus, jolla voit testata dynaamista CSS-muotoilua kattavalla valikoimalla semanttisia HTML-elementtejä.

🛠 Teknologiapino

• Kehystys: React 18 (Funktionaaliset komponentit, Hookit)
• Rakennustyökalu: Vite (Erittäin nopea HMR)
• Kieli: TypeScript (Strict Mode)
• Tyylit: Tailwind CSS v4 (Käyttöliittymä) + Dynaaminen CSS (Demo-elementit)
• Laadunvarmistus: ESLint 9 (Flat Config) + Prettier
• Automaatio: GitHub Actions (Automaattinen Build & Julkaisu GitHub Pagesiin)

💎 Tärkeimmät Ominaisuudet

• Reaaliaikainen Esikatselu: Välitön visuaalinen palaute säätäessäsi värejä ja kokoja.
• Kattavat Elementit: Sisältää typografian, lomakkeet, taulukot, interaktiiviset elementit ja tekniset koodielementit.
• Ammattilaistyökalut:
  • Kopioi CSS: Vie asetuksesi välittömästi puhtaana CSS-koodina.
  • Nollaa: Palauta selaimen oletustyylit yhdellä klikkauksella.
  • Responsiivinen: Mukautuva asettelu, joka toimii saumattomasti myös mobiililaitteilla.

💻 Paikallinen Kehitys

1. Kloonaa ja Asenna:

   npm install

2. Käynnistä Palvelin:

   npm run dev

3. Laaduntarkistukset:

   npm run lint   # Tarkista koodivirheet
   npm run format # Korjaa muotoilu