Overview

“Lism CSS” is a lightweight CSS design framework for rapidly building the structural skeleton of websites. No build step or configuration required — it works simply by importing the CSS.

Token design that naturally brings a comfortable rhythm to your designs.
A layout-first module architecture.
A flexible and responsive utility design powered by CSS variables.

Lism CSS supports building the overall layout of a site, but fine-grained styling and decoration are intended to be written freely with native CSS.

It is not a framework where you only need to add classes to your HTML.

The design is a blend of Every Layout, Bootstrap, and Tailwind CSS.

Key Features of Lism CSS

A zero-build framework that works in any environment

The core is the design theory of HTML and CSS itself — no special build process is required.

It can be introduced simply by importing the CSS, making it usable even with plain HTML sites.

(That said, using the dedicated components for React and Astro described below will improve the development experience.)

Dedicated components for Lism CSS

Dedicated components that make working with Lism CSS simple are distributed as npm packages in both React and Astro formats.

You can work with Lism CSS-compliant components as easily as you would with Chakra UI or MUI.

↓

Here’s how the dedicated components are used

Lism CSS

The some description text is here…

Documents Github

リサイズ可能

<Center p='30' ar='3/2' bgc='base' g='10'>
  <HTML.h lv='1' fz={['3xl', '4xl']} ff='accent'>
    Lism CSS
  </HTML.h>
  <HTML.p c='text-2'>
    The some description text is here...
  </HTML.p>
  <Flex g='20' my-s='30'>
    <HTML.a href='###' d='in-flex' bdrs='10' td='none' c='base' bgc='text' py='10' px='20'>
      Documents
    </HTML.a>
    <HTML.a href='###' d='in-flex' bdrs='10' td='none' c='text' bd py='10' px='20'>
      Github
    </HTML.a>
  </Flex>
</Center>

Responsible for the entire site’s CSS architecture

Lism CSS is not a utility class package.

Design token definitions
Naming conventions for class names and variable names
A layer (@layer) hierarchy built from the reset.css level up

These are all defined, and the CSS is designed with the expectation that you will build your entire site on a Lism foundation.

As a result, coexistence with other frameworks is not supported.

Layout-first

Lism CSS breaks down the layout elements commonly used in websites into reusable, generalized building blocks.

This is inspired by the concept of layout primitives from Every Layout.

Layout module classes such as:

l--flex
l--center
l--columns

are defined for this purpose.

Utility design combining CSS variables

Lism makes extensive use of utility classes that leverage CSS variables.

This characteristic is most apparent in responsive utility classes.

↓

Real-world usage example

BOX

リサイズ可能

<div class="-p:15 -p_sm -p_md -bd" style="--p_sm:var(--s30);--p_md:var(--s40);">
  BOX
</div>

This makes it easy to switch values at breakpoints for all major CSS properties.

Layout design independent of media queries

Lism CSS adopts container queries by default rather than media queries.

Additionally, Lism CSS includes several layout modules that are independent of both media queries and container queries.

Note that within a container element, the behavior of position: fixed and some size-related behaviors may change.

Inspirations

Every Layout : The concept of layout primitives is adopted as a foundation in Lism.
ITCSS : The concept of layering is referenced.
daisyUI : A great reference for color token design and the richness of components.
SmartHR Design System : A great reference for design token architecture.
Chakra UI, MUI : A great reference for the developer experience of components.
Tailwind CSS : A great reference for the idea of creating fine-grained classes from CSS property-value pairs.