Představujeme vlastní Open-source projekt Winduum

Nevyhnutelně vyvstává otázka: Proč dělat další knihovnu komponent pro uživatelské rozhraní? Jednoduše proto, že Winduum se v několika oblastech liší od ostatních.

1. Zaměřuje se na webové standardy, přístupnost a minimum javascriptu
2. Je progresivní, používá moderní funkce a standardy
3. Je nezávislé na frameworku, takže jej lze použít v jakémkoli scénáři
4. Jeho zdrojový kód je čisté CSS a JS, takže jej lze použít i bez kroku kompilace

Tento projekt jsme vypustili do světa minulý týden a ihned se ozvali kladné ohlasy z celého světa v řádu tisíců vývojářů.

V Newlogic Digital bude tento framework hlavním pilířem našich projektů postavených na Newlogic UI. To přináší nejlepší možnosti pro rychlé weby postavené na PHP frameworku Nette a Newlogic CMS nebo na reaktivní aplikace. Tyto projekty pak budou moci využívat všech výhod tohoto frameworku, primárně zaměřeném na moderní standardy a přístupnost.

V dnešních CSS frameworcích je na výběr jen několik málo možností, pokud jde o knihovnu UI komponent pro TailwindCSS, která je nezávislá vůči frameworkům a zároveň využívá sémantické názvy tříd; například skvělé projekty jako daisyUI nebo RippleUI. Oba jsou však silně závislé na @apply, což není standardizované čisté CSS.

Proto je náš přístup trochu jiný. Winduum podporuje psaní komponent v čistém CSS nebo jiných (pre/post)-procesorech a používá utility třídy k vylepšení komponent.

Jako CSS framework se Winduum zaměřuje na skvěle nastylované přístupné komponenty napsané v čistém standardizovaném CSS; komponenty, které lze rozšířit o vlastní komponenty a používat je v jakémkoli frameworku, dokonce i jako webové komponenty.

TailwindCSS je sice volitelný, ale plně ho doporučujeme. Je to CSS utility framework který je používaný největšími společnostmi po celém světě. Winduum do něj poskytuje zásuvný modul s řadou nových užitečných utility tříd. Utilitní framework však není nutné používat vůbec nebo lze zvolit alternativu, například UnoCSS. Volba je na uživateli.

Motivy, color-mix a barevný gamut P3

Winduum využívá pokročilé techniky barev a nabízí inovativní funkci color-mix() a podporu barevného gamutu P3.

To zajišťuje živé a vizuálně poutavé uživatelské rozhraní na podporovaných zařízeních.

Barvy lze definovat v libovolném barevném prostoru - rgb, hsl, oklch, podle preference. Pomocí funkce color-mix lze také snadno měnit průhlednost.

Další informace najdete na webu winduum.dev/docs/themes

Barva akcentu

Myšlenka je taková, že by mělo být možné nastavit barvu akcentu pomocí CSS vlastnosti accent-color. Diskutuje se o tom, že by měl existovat přístup k hodnotě barvy této vlastnosti, např. prostřednictvím AccentColor nebo AccentColorText.

Většina komponent tuto myšlenku využívá prostřednictvím parametrů --color-accent a --color-accent-foreground jako alternativu pro jejich barvu akcentu.

Tímto způsobem například není nutné měnit vlastnost background-color pro každou barevnou variantu komponenty, ale stačí změnit barvu akcentu.

Moderní funkce CSS

Winduum je stále napřed a využívá moderní funkce CSS, které nám umožňují využít sílu nejnovějších specifikací a zlepšit celkové možnosti stylování. Všechny tyto funkce jsou podporovány v současných prohlížečích.

• CSS Properties
• CSS Logical Properties
• Vnořování CSS
• Moderní pseudoselektory, jako jsou :where, :is a :has
• Moderní resetování CSS
• Nízká specifičnost nebo vrstvy
• CSS color-mix

Moderní reset CSS

Winduum je vybaven moderním CSS resetem, který poskytuje čistý štít pro konzistentní stylování v různých prohlížečích a zajišťuje pevný základ pro přizpůsobení.

Hlavním rozdílem oproti jiným resetům je použití funkce all: unset, která resetuje většinu stylů. Výsledkem je čistý základ a volnost stylovat komponenty.

Více informací se dozvíte na stránce winduum.dev/docs/layout/reset

Přístupné komponenty založené na webových standardech

Většina současných knihoven zbytečně znovu "vynalézá kolo" a vytváří nové přístupné komponenty od základu. Zatímco v některých případech to může být dobré, v jiných to přináší spoustu režie, která není v jiných případech opravdu potřeba.

Potřebujete vytvořit jednoduchý produktový web? V těchto scénářích určitě není potřeba používat silně reaktivní framework, jako je React nebo Vue s Radix primitivy. A určitě souhlasíme že knihovny jako shadcn/ui jsou skvělé. Ale ty jsou často lepší volbou pro složitější projekty.

Lze zvolit něco lehčího, například Astro, a využít webové standardy jako input[type=checkbox], view-transitions, dialog, details, scroll-snap apod.

A najednou máte web, který projde všemi Core Web Vitals nutnými pro dobré SEO.

Winduum je celé o webových standardech, které lze použít v jakémkoli frameworku. A zde jsou některé komponenty jako příklad:

• Dialog - využívá dialog s minimem javascriptu
• Carousel - využívá scroll-snap s minimem javascriptu
• Details - využívá details s minimem javascriptu
• Drawer - využívá scroll-snap s minimem javascriptu
• Form - využívá checkValidity s minimálním javascriptem
• Compare - využívá input[type=range] s minimálním javascriptem

Javascriptové API primitivy jsou značně přizpůsobitelné a lze je použít v jakémkoli projektu.

Formulářové prvky na všechno

Komponenta Control podporuje doslova všechny možné typy inputů, dokonce i type=color! Díky podpoře :has lze použít jednu sematickou třídu ui-control pro každý typ inputu, textarea nebo select. Pokud potřebujete základní rozhraní pro výběr data, času nebo barvy, tak všechny tyto prvky jsou v moderních prohlížečích silně standardizovány. Winduum má formulářovou komponentu pro jakékoliv použití, které byste mohli potřebovat.

• Control - včetně variant floating label a ikon
• Range - pro přistupné posuvníky, včetně variant vertical a multi!
• Check - pro přístupná zaškrtávací políčka
• Switch - pro zapínání a vypínání jako zaškrtávací políčko
• Color -  v případě, že potřebujete vybrat barvu jako zaškrtávací políčko
• Rating - přístupná skupina zaškrtávacích políček pro účely hodnocení
• Button - bohaté tlačítko s několika variantami pro odesílání formulářů

Nové nástroje Tailwind CSS

Winduum obsahuje plugin pro TailwindCSS s několika novými užitečnými nástroji. Zde je několik příkladů:

• CSS properties - plugin rozšiřuje konfiguraci Tailwindu o CSS vlastnosti pro barvy, fontFamily, fontWeight, ease, zIndex, fontSize, spacing, borderRadius atd., takže CSS a TailwindCSS jsou lépe vzájemně propojené. Výchozí vlastnosti CSS lze nalézt v souboru cofing.css
• accentColor - přidává do třídy accent- nové --color-accent a --color-accent-foreground pro lepší podporu akcentů
• divideGap - jednodušší mezery pro utility třídu divide

Více informací o utilitách naleznete na winduum.dev

Nový progresivní přístup u kontejnerů

Winduum poskytuje novou třídu utility grid-cols-container, která využívá CSS grid a je inspirována Kevinem Powellem

Díky ní lze využít CSS grid pro lepší stylování kontejnerů s menším množstvím kódu.

Více informací najdete na adrese winduum.dev/docs/utilities/container

Rozšířené body pro responzivitu

Nejmenší breakpoint v TailwindCSS je sm na 640px, což nepokrývá mnoho mobilních zařízení. A největší je 2xl při 1536px, což naopak nepokrývá většinu velkých displejů. Winduum má vlastní měřítko sahající od 360px do 2528px, které pokrývá všechna možná rozlišení a všechna jsou definovaná v em.

• xs - 360px
• sm - 416px
• md - 768px
• lg - 960px
• xl - 1216px
• 2xl - 1312px
• 3xl - 1408px
• 4xl - 1600px
• xxl - 2016px
• 2xxl - 2528px

Modularita a přizpůsobitelnost

Kód lze vzít, zkopírovat a vložit do jakéhokoliv projektu nebo ho lze importovat z npm repozitáře a přizpůsobit ho pomocí CSS properties!

Vše je opravdu velmi modulární a přizpůsobitelné. Všechny komponenty jsou roztříděny do variant v jednotlivých souborech. Lze tak opravdu vybírat jen to, co je pro projekt potřeba.

CSS knihovna nezávislá na frameworku

Jak již bylo zmíněno, Winduum je z podstaty věci framework-agnostický, takže lze vytvořit vlastní komponenty pomocí preferovaného frameworku. Javascriptové primitivy lze také přizpůsobit v libovolném frameworku.

V případě zájmu mohou být pro populární frameworky vytvořeny jednoduché předpřipravené komponenty. V současné době jsou ve vývoji pouze winduum-vue a winduum-react a většina komponent má v dokumentaci příklady použití a instalace.

Různé příklady v mnoha frameworcích si lze prohlédnout také v sekci Vyzkoušet Winduum Online v dokumentaci.

Kompatibilita s dalšími UI knihovnami

Protože je Winduum napsán s ohledem na standardy, lze jej také snadno přizpůsobit stávajícím řešením, jako je shadcn/ui, nebo přidat složitější funkčnost pomocí primitiv Radix nebo Headless UI.

Používá podobný princip pojmenování proměnných jako shadcn/ui, aby bylo možné v případě potřeby do projektu snadno přidat složitější komponenty.

Ještě něco?

Je to všechno? Ani v nejmenším! Navštivte winduum.dev a prohlédněte si vše, co Winduum nabízí! Podívejte se na zdrojový kód na GitHubu a dejte nám hvězdičku, pokud se vám líbí. Projekt spouštíme také na ProductHunt!

Byla to dlouhá cesta dvouletého vývoje převážně ve volném čase jako malého skromného vedlejšího projektu.