Lism CSS
A layout-first CSS framework for websites.
Code with ease. Bring harmony and rhythm to your design.
Lightweight
Start from just 30kb~, with responsive design.
No Build Required
No config, No build. Just load the CSS to start using.
Modern CSS
@layer, Container Query, Grid, CSS Variables
Free
Lism CSS is available for free.
Unique CSS Architecture
Designed from reset.css Level
Lism CSS builds a comprehensive CSS design theory from reset.css to utility classes for your entire site.
Design Tokens
Pre-defined design tokens as CSS variables ensure consistency across your entire site.
Layout First
Common layout elements for websites are broken down into fine-grained, foundational modules.
Modern Design
Actively leverages modern CSS features like @layer, Container Queries, and more.
Responsive Ready
A unique approach to responsive design that combines utility classes with CSS variables.
Works with Any Site
Lism is a design theory. No config or build step needed — it works with plain HTML coding.
Components for Astro/React
We provide free components for React and Astro to make working with Lism CSS easy.
<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>