Lism CSS

English | 日本語

What is Lism CSS?

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.

Features

• 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-block → lism-trait → lism-primitive → lism-custom → lism-utility) for clear specificity management. lism-block is the layer for shared base components (b--) whose base styles are managed in CSS — placed low in the order so explicitly added classes (is-- / has-- / l--, etc.) take precedence. lism-trait is the layer for is-- / has-- trait classes. lism-primitive contains layout / atomic sub-layers. lism-custom is the layer for user-defined classes and overrides. 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 of class="l--stack -g:20".

Packages

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
lism-cli	CLI for scaffolding projects, adding UI components, and installing AI skills
create-lism	Wrapper for pnpm create lism / npm create lism (bundles lism-cli)
@lism-css/mockup	CLI for creating, validating, and previewing Lism CSS mockups
@lism-css/plugin	Build / Vite / Astro / purge plugins for Lism CSS

Quick Start

CDN (no build required)

<link href="https://cdn.jsdelivr.net/npm/lism-css@0.30.0/dist/css/main.css" rel="stylesheet" />

npm

npm i lism-css

import 'lism-css/main.css';

React

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>

Astro

---
import { Box, Flex, Stack, Grid, 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>

HTML (CSS-only)

<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>

CSS Class Examples

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
Block Class	b--btn, b--badge
Custom Class	c--siteHeader, c--pricing
Property Class	-p:20, -bgc:base-2, -fz:l, -ta:center
Breakpoint	-p_sm, -g_md, -fz_lg
Utility	u--cbox

Responsive Example

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>

AI Tool Integration

Claude Code Skill

npx lism-cli skill add

This installs the bundled skills (lism-css-guide, lism-css-refactor and lism-mockup-guide) into your AI tool's skill directory (e.g. .claude/skills/ for Claude Code). Pass a skill name like npx lism-cli skill add lism-css-guide to install a single skill. Run without tool flags for an interactive prompt, or pass --claude, --cursor, etc. to target specific tools.

You can also install the same three skills via skills.sh, picking the ones you need:

npx skills add lism-css/core

See the Skills documentation for details.

MCP Server

claude mcp add lism-css -- npx -y @lism-css/mcp

See the lism-css package README for Cursor and VS Code setup.

llms.txt

https://lism-css.com/llms.txt

Documentation

For full documentation, visit lism-css.com/en.

Playgrounds

Try Lism CSS in a sandbox environment: lism-css/lism-playgrounds

Community

For feedback or questions, join the Lism CSS Discord server.

Credits

• Phosphor Icons — MIT License (source)

License

MIT