Overview

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

Typography design that naturally brings a comfortable 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 is built as an original CSS design.

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 more comfortable 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.

Zero-build, works in any environment.

Lism CSS is fundamentally driven by CSS design theory, and a single CSS file is its core.

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

↓

You can get started in just one line of code, loaded directly from a CDN.

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

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

That said, using the dedicated components for React and Astro included in the lism-css npm package will give you an even more comfortable development experience.

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

The Lism CSS Ecosystem

Lism CSS provides not only the core CSS library, but also a suite of packages to support your development, all as open source.

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 tool to copy UI component source code into your project for customization
`@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 that make working with Lism CSS simple are distributed in both React and Astro formats.

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" my-s="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 -my-s: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 incorporated.
Tailwind CSS — Referenced for the design of providing classes for individual CSS properties.
Chakra UI, MUI — Referenced for the component developer experience.