molique - Nowoczesny Framework CSS dla B2B

CSS, który myśli jak przeglądarka 2026 roku

Lekki framework B2B zbudowany na natywnym HTML5 i najnowszym CSS - Anchor Positioning, :has(), Popover API. Akordeony, taby, dropdowny i mega menu działają bez ani jednej linijki JavaScriptu.

Jest też na npm: npm install molique - instalacja krok po kroku.

<div class="tabs tabs-pill" style="--tab-count: 3;"> <input type="radio" name="t" id="t1" class="tab-input" checked> <input type="radio" name="t" id="t2" class="tab-input"> <input type="radio" name="t" id="t3" class="tab-input"> <div class="tabs-header"> <div class="tabs-pill-indicator"></div> <label for="t1" class="tab-label">SCSS</label> <label for="t2" class="tab-label">CSS</label> <label for="t3" class="tab-label">HTML</label> </div> <div class="tabs-content"> <div class="tab-pane"><code>.hover-spring { &:hover { --hover-scale: 1.05; } }</code></div> <div class="tab-pane"><code>.hover-spring:hover { --hover-scale: 1.05; }</code></div> <div class="tab-pane"><code>class="btn-primary hover-spring"</code></div> </div> </div>

Google Lighthouse · Desktop

100/100 nie na pokaz

Prawdziwy, zweryfikowany audyt tej samej strony, którą właśnie oglądasz - nie deklaracja marketingowa.

100

Performance

100

Accessibility

100

Best Practices

100

SEO

Zobacz pełny raport PageSpeed Insights

0 KB

JS w rdzeniu frameworka

100+

Gotowych komponentów

44px

Min. touch target (A11y)

100%

Wsparcie dla Dark Mode

Zbudowany pod gęste panele B2B

Nie kolejny framework pod landing page'e. molique projektowaliśmy z myślą o dashboardach, panelach admina i danych - dużo, gęsto i czytelnie.

Zero JS, gdzie się da

Akordeony, taby, dropdowny, mega menu i modale działają na czystym HTML5 i CSS - Radio Hack, <details> i Anchor Positioning zamiast skryptów.

Kompletny ekosystem

Formularze, tabele, wykresy, e-commerce i panel admina - jeden spójny system klas zamiast składania kilku bibliotek.

Dark Mode wbudowany

Jedna zmienna motywu na całą paletę kolorów. Zero migotania (FOUC) przy przełączaniu i przy pierwszym ładowaniu strony.

Dostępność od podstawy

Wymuszone 44px pola dotykowe na mobile, widoczny :focus-visible i natywna walidacja formularzy.

Wydajność GPU

Animacje wyłącznie na transform i opacity - zero kosztownego reflow, nawet w gęstych tabelach.

Modularny Sass

Importuj tylko to, czego potrzebujesz - od bazowego grida po moduł sklepu, bez zbędnego balastu w bundlu.

Segmented Control

To nie mockup. To jest live, prawdziwy komponent.

Suwający się wskaźnik przesuwa się do klikniętej zakładki dzięki CSS :has() - bez JavaScriptu i bez migania. Kliknij poniżej.

Zobacz dokumentację Tabs

Dzień Tydzień Miesiąc

Statystyki z ostatniego dnia

Statystyki z ostatniego tygodnia

Statystyki z ostatniego miesiąca

Dla deweloperów

Rzeczy, które zwykle trzeba sobie samemu poskładać - tutaj są gotowe.

Instrukcja dla modeli AI

Plik llms.txt ze słownikiem klas i zasadami molique. Wskaż go asystentowi, a wygeneruje markup zgodny z frameworkiem zamiast zmyślać klasy.

Otwórz llms.txt

Konfigurator paczki

Zaznacz tylko te moduły, których używasz - zależności dobiorą się same, rozmiar widzisz na żywo. Redukcja bez ryzyka, bo to Ty decydujesz, co wchodzi.

Złóż własną paczkę

PurgeCSS bez niespodzianek

Gotowa safelista klas, które JS dodaje dopiero w przeglądarce - bez niej purge psuje akordeony, toasty i lightbox. 277 KB → 68 KB z zachowaniem wszystkiego.

Instrukcja krok po kroku

Edytor motywu na żywo

Kolory, zaokrąglenia, odstępy i typografia - klikasz, widzisz efekt od razu, kopiujesz gotowy blok :root do swojego CSS.

Otwórz edytor

Na npm

molique JIT

CSS generowane dokładnie dla klas użytych w Twoim HTML - zero ręcznego doboru modułów, zero safelisty PurgeCSS. npm install --save-dev molique-jit.

Zobacz molique JIT

Na npm

CLI molique-jit

Wiersz poleceń do silnika JIT plus 8 generatorów gotowych komponentów (modale, tabele, formularze, nawigacja…) - jedna komenda zamiast kopiowania ze strony.

Zobacz CLI molique-jit

Gotowy zacząć budować?

Pełna dokumentacja, gotowe komponenty i kompletny spis klas - wszystko w jednym miejscu, bez rejestracji.

Przeglądaj dokumentację Spis klas (Cheat Sheet)