PHPackages lombokcss/lombokcss - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. lombokcss/lombokcss ActiveLibrary[Framework](/categories/framework) lombokcss/lombokcss =================== Token-first component CSS framework. One markup, five design styles, dark mode + RTL. ~9.7KB gzipped. 01HTMLCI passing Since Jul 29Pushed 2w agoCompare [ Source](https://github.com/codinglombok/LombokCSS)[ Packagist](https://packagist.org/packages/lombokcss/lombokcss)[ RSS](/packages/lombokcss-lombokcss/feed)WikiDiscussions main Synced 2w ago READMEChangelog (3)DependenciesVersions (1)Used By (0) LombokCSS ========= [](#lombokcss) > **Switch the look, not the HTML.**A modern, **token-first** component CSS framework. Drop a class, get a working component — like Bootstrap. Re-theme everything by changing **one attribute** — like a design system. Ships at **~9.7 KB gzipped** (full build, minified). ``` Component-based (Bootstrap) + Token-driven theming (design systems) + Tiny (Pico/UnoCSS) ``` --- ### Git Hub [](#git-hub) [![CI](https://github.com/codinglombok/lombokcss/actions/workflows/ci.yml/badge.svg)](https://github.com/codinglombok/lombokcss/actions/workflows/ci.yml)[![Deploy docs](https://github.com/codinglombok/lombokcss/actions/workflows/pages.yml/badge.svg)](https://github.com/codinglombok/lombokcss/actions/workflows/pages.yml)[![license](https://camo.githubusercontent.com/4a3a34a94d9d730bb00a203a307a2abd9c631e1c4b01da465f0a82607338cb67/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6c6f6d626f6b6373732e737667)](LICENSE) ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ [](#) ### NPM [](#npm) [![npm version](https://camo.githubusercontent.com/cd47c164de037cd8faefed6c33dc6d9a92a6bbdcddffbe3a49a7da583b97afea/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6c6f6d626f6b6373732e737667)](https://www.npmjs.com/package/lombokcss)[![npm downloads](https://camo.githubusercontent.com/cebae388c1f555b5ed9bf20e1521d3b4ee3ee95a9cf94db7bf6cf67a2c3628ea/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f6c6f6d626f6b6373732e737667)](https://www.npmjs.com/package/lombokcss)[![jsDelivr hits](https://camo.githubusercontent.com/16cbec72de800c4c08505bc824ad629c20c45803086abaf8c30d42fe76a82f88/68747470733a2f2f696d672e736869656c64732e696f2f6a7364656c6976722f6e706d2f686d2f6c6f6d626f6b6373732e737667)](https://www.jsdelivr.com/package/npm/lombokcss)[![gzip size](https://camo.githubusercontent.com/81d3fd8ab75c202d003ef7e8479b1b21eeb158c9fe41e5230122c3540d313222/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f677a69702d392e372532304b422d737563636573732e737667)](#) --- ### Sourceforge.net [](#sourceforgenet) [![Download LombokCSS](https://camo.githubusercontent.com/efcf70acc9b360a1dfbb0a1e22bf7928f651e0a239bc50b7c410f89be3659de9/68747470733a2f2f612e6673646e2e636f6d2f636f6e2f6170702f73662d646f776e6c6f61642d627574746f6e)](https://sourceforge.net/projects/lombokcss/files/latest/download)[![Download LombokCSS](https://camo.githubusercontent.com/639bf7fa9a6e1e8fcfdd7ed0fd418a73ac98d19d4b427183d1c115188327f02c/68747470733a2f2f696d672e736869656c64732e696f2f736f75726365666f7267652f646d2f6c6f6d626f6b6373732e737667)](https://sourceforge.net/projects/lombokcss/files/latest/download)[![Download LombokCSS](https://camo.githubusercontent.com/98ee38f4bb798ff488198fa10fa89715272ca562200a8d9c65a79e2604924e86/68747470733a2f2f696d672e736869656c64732e696f2f736f75726365666f7267652f64772f6c6f6d626f6b6373732e737667)](https://sourceforge.net/projects/lombokcss/files/latest/download)[![Download LombokCSS](https://camo.githubusercontent.com/6c43eacb14a95c91d22b4a473719181d518838c1baf639f55a78e2d6400f96e3/68747470733a2f2f696d672e736869656c64732e696f2f736f75726365666f7267652f64642f6c6f6d626f6b6373732e737667)](https://sourceforge.net/projects/lombokcss/files/latest/download)[![Download LombokCSS](https://camo.githubusercontent.com/90fc72e20feec228f78a815f578bb38b1d3967d247ce916589ac5ad978bd8a72/68747470733a2f2f696d672e736869656c64732e696f2f736f75726365666f7267652f64742f6c6f6d626f6b6373732e737667)](https://sourceforge.net/projects/lombokcss/files/latest/download) --- [![LombokCSS Preview](docs/assets/social-preview-hd.webp)](https://codinglombok.github.io/LombokCSS/)[![LombokCSS Preview](docs/assets/preview.png)](https://codinglombok.github.io/LombokCSS/) --- Documentation ------------- [](#documentation) **Overview****Getting Started**[![Overview](docs/assets/index-resonant-stark-quarter.webp)](https://codinglombok.github.io/LombokCSS/index.html)[![Getting Started](docs/assets/getting-started-modern-corporate-flat-quarter.webp)](https://codinglombok.github.io/LombokCSS/getting-started.html)**Migration from Bootstrap****Theming & Styles**[![Migration from Bootstrap](docs/assets/migration-resonant-stark-quarter.webp)](https://codinglombok.github.io/LombokCSS/migration.html)[![Theming & Styles](docs/assets/theming-modern-corporate-flat-quarter.webp)](https://codinglombok.github.io/LombokCSS/theming.html)**Components****Forms**[![Components](docs/assets/components-neo-brutalism-quarter.webp)](https://codinglombok.github.io/LombokCSS/components.html)[![Forms](docs/assets/forms-glassmorphism-quarter.webp)](https://codinglombok.github.io/LombokCSS/forms.html)**Utilities****Accessibility**[![Utilities](docs/assets/utilities-semantic-minimalist-quarter.webp)](https://codinglombok.github.io/LombokCSS/utilities.html)[![Accessibility](docs/assets/accessibility-semantic-minimalist-quarter.webp)](https://codinglombok.github.io/LombokCSS/accessibility.html)--- Why it's different ------------------ [](#why-its-different) Most frameworks bake their look into each component, so changing the visual style means overriding hundreds of rules. LombokCSS inverts that: - **Components read only semantic tokens** (`--lc-surface`, `--lc-text`, `--lc-radius`, `--lc-shadow`, `--lc-accent`, …). - **A "design style" is just a different set of token values.** Switching it never touches component CSS or your HTML. ``` ``` Dark mode (`data-theme`) and RTL (`dir`) are **independent** axes that compose with any style. --- Install ------- [](#install) **CDN (jsDelivr)** — fastest start: ``` ``` **npm:** ``` npm install lombokcss # or: yarn add lombokcss / pnpm add lombokcss ``` ``` import "lombokcss/dist/lombok.min.css"; import "lombokcss/dist/lombok.js"; // optional, only for interactive components ``` Pin a version for production (jsDelivr): ``` ``` **Download:** grab `dist/lombok.min.css` (+ optional `dist/lombok.js`) and link them directly. The JS is **optional**. Accordions, modals and `` work natively without it; the script only adds dropdown/tab/toast/table-sort/navbar-toggle behavior. --- **Other registries.** Also distributed via Composer (`composer require codinglombok/lombokcss`), RubyGems (`gem "lombokcss"` → `Lombokcss.assets_path` for Sprockets), and Bower (legacy: `bower install lombokcss`, prefer npm). Works with any bundler (Vite/Webpack/Parcel) and framework (Vue/React/Svelte) — just import the CSS. See the **Getting started** docs for per-tool snippets. Documentation site ------------------ [](#documentation-site) A full multi-page docs site lives in `docs/` (Overview, Getting started, Theming & styles, Components, Utilities). Open `docs/index.html` in a browser. The style / dark / RTL switchers at the top apply live and **follow you across pages** via the URL query string. A single-file interactive playground is at `examples/demo.html`. Architecture ------------ [](#architecture) ``` src/ variables.css → token architecture (the contract every component depends on) core.css → reset/reboot + base element styles (= classless mode) themes.css → token value sets per design preset (data-style) components.css → all components (read tokens only, RTL-safe, glass-aware) utilities.css → atomic utilities + responsive prefixes dist/ lombok.css → bundled, unminified (readable) lombok.min.css → bundled + minified (ship this) lombok.js → optional interactive behaviors ``` ### Token layers [](#token-layers) 1. **Primitives & scale** — spacing, font sizes, raw palette. 2. **Semantic tokens** — `--lc-surface`, `--lc-text`, `--lc-border`, `--lc-accent`, `--lc-radius`, `--lc-shadow`, `--lc-blur`, status colors. **Components only ever reference these.** 3. **Style presets** (`[data-style="…"]`) re-map the semantic tokens. 4. **Dark overlay** (`[data-theme="dark"]` / `prefers-color-scheme`) re-maps color tokens; composes with presets via `[data-style][data-theme]` pairs. Glassmorphism support is built into the contract: every surface component applies `backdrop-filter: var(--lc-blur)`. `--lc-blur` is `none` everywhere except the glass preset, so the property is inert until a glass theme turns it on — no per-component glass code. --- The five design styles ---------------------- [](#the-five-design-styles) `data-style`Character`modern-corporate-flat`Clean, flat, neutral + one brand color, medium radius, soft shadows (default)`resonant-stark`Linear-style dark: high contrast, subtle borders, tight type, violet accent`neo-brutalism`Thick black borders, hard offset shadows, bold blocks, zero radius`semantic-minimalist`Minimal, neutral, generous spacing, serif display, readability-first`glassmorphism`Frosted glass over a gradient; translucent surfaces, glowing borders (with opaque fallback)--- Theming guide ------------- [](#theming-guide) Everything is a CSS variable. Override on `:root` (or a scope) to customize: ``` :root { --lc-accent: #e11d48; /* brand color */ --lc-accent-hover: #be123c; --lc-radius: 4px; /* tighter corners */ --lc-font-sans: "Inter", system-ui, sans-serif; --lc-space-4: 1.1rem; /* rescale spacing */ } ``` **Dark mode** — three ways, they all work together: ``` ``` **RTL** — set the document direction; all components use logical properties: ``` ``` **Make your own style** — add a token block, no component edits: ``` [data-style="sunset"] { --lc-bg: #1a0f0f; --lc-surface: #2a1818; --lc-text: #ffe; --lc-accent: #ff7849; --lc-radius: 14px; --lc-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } ``` --- Component usage --------------- [](#component-usage) ``` Primary Big outline LR Title Body copy. Footer Email We never share it. Enter a valid email. Notify me Saved All good. new One Two … … Q A Menu ▾ Item Action Open Title ✕ Body OK Notify Name MRR Nadia 49 … … Menu Menu ✕ … Info ▾ Title Rich content. Workspace Dashboard Projects 09:00 Event Detail. ``` Other components included: `navbar` (+ mobile toggle), `breadcrumb`, `pagination`, `avatar`/`avatar-group`, `progress`, `spinner`, `skeleton`, `stat`, `list-group`, `steps`, CSS-only tooltip (`data-tip="…"`), `kbd`, `code`/`pre`. ### Utilities [](#utilities) Layout (`flex`, `grid`, `items-*`, `justify-*`, `gap-*`, `grid-cols-1..12`), spacing (`p-*`, `m-*`, logical), sizing (`w-full`, `max-w-*`, `min-h-screen`), type (`text-sm..3xl`, `font-*`, `text-start/center/end`), color (`bg-surface`, `text-muted`, `border`), radius/shadow, position/z-index, plus responsive prefixes `sm: md: lg: xl:` (e.g. `md:grid-cols-3`). ### Classless mode [](#classless-mode) Plain semantic HTML is styled with zero classes — headings, paragraphs, links, lists, `blockquote`, `table`, form inputs, `code`/`pre`/`kbd`. Good for prose and quick prototypes. --- Build process ------------- [](#build-process) The dist files are produced with **Lightning CSS**: ``` # bundle the modules in order cat src/variables.css src/core.css src/themes.css \ src/components.css src/utilities.css > dist/lombok.css # minify (autoprefix + dead-code removal) npx lightningcss --minify --bundle dist/lombok.css -o dist/lombok.min.css ``` PostCSS equivalent: `postcss-import` + `autoprefixer` + `cssnano`. ### Shrinking further [](#shrinking-further) - **Split core vs full:** ship `variables + core + themes + components` and add `utilities.css` only if you use utility classes. - **Purge unused utilities** with your bundler's CSS purge step keyed on your templates. - Drop presets you don't use from `themes.css`. --- Browser support & accessibility ----------------------------------- [](#browser-support--accessibility) Modern CSS used with graceful fallbacks: `:has()`, `:user-invalid`, `accent-color`, `backdrop-filter` (opaque fallback via `@supports`), logical properties, native ``/``. Components ship with visible `:focus-visible` rings, ARIA hooks, and respect `prefers-reduced-motion`. Testing ------- [](#testing) Visual-regression tests (Playwright) screenshot the buttons block across all five styles plus dark/RTL, and the form validation state, comparing against committed baselines in `tests/**-snapshots/`. ``` npm run test:visual # compare against baselines npm run test:visual:update # refresh baselines after an intentional change ``` Baselines are browser-specific. CI runs in a pinned Playwright container (`mcr.microsoft.com/playwright:v1.56.0-noble`) so pixels match. When you change visuals on purpose, refresh baselines **inside that image** so they match CI: ``` docker run --rm -v "$PWD":/work -w /work mcr.microsoft.com/playwright:v1.56.0-noble \ bash -c "npm ci && npm run build && npm run build:docs && npm run test:visual:update" ``` A failing run uploads a `playwright-report` artifact with side-by-side diffs. Publishing (maintainers) ------------------------ [](#publishing-maintainers) > Full step-by-step setup (repo creation, branch protection, secrets, Pages, release-please flow, npm/CDN, troubleshooting) is in **[GITHUB\_SETUP.md](GITHUB_SETUP.md)**. The package ships only `dist/`, `src/`, `README.md` and `LICENSE` (see the `files` field). `prepublishOnly` rebuilds the bundle and enforces the size budget, so a broken or oversized build can never be published. **Automated (recommended).** Two GitHub Actions workflows are included: - `.github/workflows/ci.yml` — on every push/PR: `npm ci`, `npm run build`, size-budget check, and a guard that fails if committed `dist/` is stale. - `.github/workflows/publish.yml` — on a published GitHub Release: builds and runs `npm publish --provenance --access public`. Add an `NPM_TOKEN` repo secret (an npm automation token); provenance uses the workflow's OIDC token. Release flow: ``` npm version patch # or minor / major — bumps package.json + git tag git push --follow-tags # then create a GitHub Release for that tag -> publish workflow runs ``` **Manual:** ``` npm run build npm publish --access public ``` **CDN is automatic.** Once on npm, jsDelivr and unpkg serve it with no extra step: `https://cdn.jsdelivr.net/npm/lombokcss@/dist/lombok.min.css`. The `jsdelivr` / `unpkg` fields point both CDNs at the minified CSS by default. **Docs hosting (GitHub Pages).** `.github/workflows/pages.yml` rebuilds the docs and deploys `docs/` to Pages on every push to `main`. Enable it once in repo **Settings → Pages → Source: GitHub Actions**. Site goes live at `https://codinglombok.github.io/lombokcss/`. Need help? See **[SUPPORT.md](SUPPORT.md)**. License ------- [](#license) MIT. ### Health Score 21 — LowBetter than 17% of packages Maintenance63 Regular maintenance activity Popularity2 Limited adoption so far Community9 Small or concentrated contributor base Maturity11 Early-stage or recently created project Bus Factor1 Top contributor holds 89.9% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/3b60d7e5147329f36f70355352e25d3780e372f29be4a540785f005ee99ee900?d=identicon)[codinglombok](/maintainers/codinglombok) --- Top Contributors [![codinglombok](https://avatars.githubusercontent.com/u/293781745?v=4)](https://github.com/codinglombok "codinglombok (107 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (10 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (2 commits)") --- Tags componentscsscss-frameworkdark-modedesign-tokenshtmlpicortltailwindcsstokenuiunocss ### Embed Badge ![Health badge](/badges/lombokcss-lombokcss/health.svg) ``` [![Health](https://phpackages.com/badges/lombokcss-lombokcss/health.svg)](https://phpackages.com/packages/lombokcss-lombokcss) ``` ### Alternatives [nineinchnick/edatatables Grid widget for the Yii Framework, wrapper for the DataTables jQuery plugin 173.2k](/packages/nineinchnick-edatatables)[link-cloud/fast-hyperf LinkCloud Fast Hyperf 241.2k1](/packages/link-cloud-fast-hyperf)[andregasparin/leafletadianti Plugins for Adianti Framework 143.2k](/packages/andregasparin-leafletadianti) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)