What is Lism CSS?

Lism CSS is a lightweight CSS design framework for building the structural skeleton of websites with smooth, beautiful rhythm.

Typography design that naturally brings a smooth rhythm to your entire site.
A layout-first primitive architecture that makes wireframing straightforward.
A flexible, responsive utility design powered by CSS variables.

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 brings these ideas together into an original CSS design of its own.

Why Lism CSS?

No need to design your own CSS architecture. — From base styling and @layer hierarchy to tokens and naming conventions, Lism takes full ownership of your site’s entire CSS design.
Works by simply importing the CSS. — No build step or configuration required. Just import a single lightweight stylesheet and you’re ready to go.
Even smoother with React & Astro. — With dedicated components, you can intuitively handle responsive layouts and build structures using props.

For more details on each feature, see the Features page.

Features of Lism CSS

An in-depth look at the design approach and key features of Lism CSS.

Zero build — works in any environment

First and foremost, Lism CSS is driven by CSS design principles, providing a CSS file built on those rules as its core feature.

Since it can be introduced simply by importing the CSS, it works even with plain HTML sites.

↓

One line of code — load directly from a CDN to get started.

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

In other words, no special build process is required to use Lism CSS.

In addition, using the dedicated components for React and Astro included in the lism-css npm package gives you an even smoother development experience.

You can also customize Lism more flexibly by overriding SCSS settings or introducing a lism.config.js file.

The Lism CSS ecosystem

Beyond the core CSS library, Lism CSS offers a suite of open-source packages to support your development.

Package	Description
`lism-css`	Core CSS + React / Astro layout components
`@lism-css/ui`	A collection of UI components including accordions, tabs, and button links
`lism-cli`	A CLI for scaffolding new projects and copying UI components into your project
`@lism-css/mcp`	An MCP server for AI coding tools

All packages are free and open source (MIT).

Example usage of JSX components

Dedicated components for both React and Astro are available as an npm package, making it simple to work with Lism CSS.

Lism CSS

The some description text is here…

Documents Github

Resize

<Center p="30" ar="3/2" bgc="base" g="10">
  <Heading level="1" fz={['3xl', '4xl']} ff="accent">
    Lism CSS
  </Heading>
  <Text c="text-2">The some description text is here...</Text>
  <Flex g="20" mbs="30">
    <Link href="###" d="inline-flex" bdrs="10" td="none" c="base" bgc="text" py="10" px="20">
      Documents
    </Link>
    <Link href="###" d="inline-flex" bdrs="10" td="none" c="text" bd py="10" px="20">
      Github
    </Link>
  </Flex>
</Center>

<div class="l--center -p:30 -ar:3/2 -bgc:base -g:10">
  <h1 class="-fz:3xl -fz_sm -ff:accent" style="--fz_sm:var(--fz--4xl)">Lism CSS</h1>
  <p class="-c:text-2">The some description text is here…</p>
  <div class="l--flex -g:20 -mbs:30">
      <a class="-d:inline-flex -bdrs:10 -td:none -c:base -bgc:text -py:10 -px:20" href="###">Documents</a>
      <a class="-d:inline-flex -bdrs:10 -td:none -c:text -bd -py:10 -px:20" href="###">Github</a>
  </div>
</div>

Inspirations

Lism CSS draws heavy inspiration from the following projects.

Every Layout — The concepts of layout primitives and harmonic modular scaling are adopted.
Tailwind CSS — Referenced for the design of providing classes for individual CSS properties.
Chakra UI, MUI — Inspired the component developer experience design.

IntroductionWhat is Lism CSS?