Lism CSS is a lightweight CSS design framework for quickly and beautifully building website layouts.
Inspired by Every Layout's layout primitives and harmonic modular scaling, and by Tailwind CSS's utility-first approach of single-property classes, Lism CSS is built as an original CSS design.
No build step or configuration is required. Simply load the CSS file via CDN or import it from npm to get started. It also provides React and Astro components whose props are converted into CSS classes and custom properties, enabling component-based development without runtime style generation.
- Lightweight — The entire CSS bundle is approximately 30 KB (~8 KB gzipped).
- Zero-Build Framework — Works with plain HTML via CDN or npm. No build tool or configuration needed.
- Layout-First Primitives — Pre-built layout patterns:
l--flex,l--stack,l--grid,l--columns,l--center,l--withSide, etc. - CSS Layer Structure —
@layer(lism-base → lism-trait → lism-primitive → lism-component → lism-custom → lism-utility) for clear specificity management.lism-traitis the layer foris--/has--trait classes.lism-primitivecontainslayout/atomicsub-layers.lism-componentis the layer for BEM-structuredc--components.lism-customis the layer for user-defined classes with custom prefixes. Minimizes specificity conflicts. - Design Tokens — Colors, spacing, font sizes, shadows as CSS custom properties.
- Flexible Property Classes —
-{prop}:{value}syntax (e.g.,-p:20,-bgc:base-2,-fz:l). - Responsive System — Breakpoint classes and CSS variables (e.g.,
-p_sm,-p_md) use container queries by default for parent-based responsive design. Switchable to media queries. - React & Astro Components — Write
<Stack g="20">instead ofclass="l--stack -g:20".
| Package | Description |
|---|---|
| lism-css | Core CSS framework + React / Astro layout components |
| @lism-css/ui | Interactive UI components (Accordion, Modal, Tabs, etc.) |
| @lism-css/mcp | MCP server for AI coding tools |
<link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />npm i lism-cssimport 'lism-css/main.css';import { Box, Flex, Stack, Grid, Text, Heading } from 'lism-css/react';
<Stack g="20">
<Heading tag="h2" fz="xl">Welcome</Heading>
<Flex g="20" ai="center">
<Box p="20" bgc="base-2" bdrs="20">
<Text fz="l">Card A</Text>
</Box>
<Box p="20" bgc="base-2" bdrs="20">
<Text fz="l">Card B</Text>
</Box>
</Flex>
</Stack>---
import { Box, Flex, Stack, Text, Heading } from 'lism-css/astro';
---
<Stack g="20">
<Heading tag="h2" fz="xl">Welcome</Heading>
<Flex g="20" ai="center">
<Box p="20" bgc="base-2" bdrs="20">
<Text fz="l">Card A</Text>
</Box>
<Box p="20" bgc="base-2" bdrs="20">
<Text fz="l">Card B</Text>
</Box>
</Flex>
</Stack><div class="l--stack -g:20">
<h2 class="-fz:xl">Welcome</h2>
<div class="l--flex -g:20 -ai:center">
<div class="-p:20 -bgc:base-2 -bdrs:20">
<p class="-fz:l">Card A</p>
</div>
<div class="-p:20 -bgc:base-2 -bdrs:20">
<p class="-fz:l">Card B</p>
</div>
</div>
</div>| Type | Examples |
|---|---|
| Layout Primitive | l--flex, l--grid, l--stack, l--center, l--columns, l--withSide |
| Trait Class | is--wrapper, is--container, is--layer, has--transition, has--gutter |
| Property Class | -p:20, -bgc:base-2, -fz:l, -ta:center |
| Breakpoint | -p_sm, -g_md, -fz_lg |
| Utility | u--cbox |
HTML:
<div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:var(--s40)">
<p>Padding changes at sm (480px) and md (800px) breakpoints</p>
</div>JSX:
<Lism p={['20', '30', '40']}>
<p>Padding changes at sm (480px) and md (800px) breakpoints</p>
</Lism>npx skills add lism-css/lism-cssSee the Skills documentation for details.
claude mcp add lism-css -- npx -y @lism-css/mcpSee the lism-css package README for Cursor and VS Code setup.
https://lism-css.com/llms.txt
For full documentation, visit lism-css.com/en.
Try Lism CSS in a sandbox environment: lism-css/lism-playgrounds
For feedback or questions, join the Lism CSS Discord server.
- Phosphor Icons — MIT License (source)
MIT