Lism CSS is a lightweight and modern CSS framework. Based on a unique CSS Methodologies, it combines layout modules, utility classes, and design tokens to provide flexible and consistent styling.

For full documentation, visit lism-css.com.

• Lightweight & Simple: Starts from ~30KB, no build process required. Available via CDN or npm.
• Clear Layered Structure: Using @layer⁠ for maintainability.
• Layout-First Approach: Build efficiently with layout modules and utility classes.
• Design Tokens: Centrally manage colors, spacing, typography, etc. with CSS variables.
• Flexible Utility Classes: -{prop}:{value}⁠ syntax.
• Unique Responsive System: Combine CSS variables, classes, and container queries for parent-based responsiveness.
• Supports React/Astro: Dedicated components boost development efficiency.

CDN:

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

npm:

npm i lism-css

import "lism-css/main.css";
import { Box, Stack, Flex, Grid,... } from "lism-css/react";

• Layout State: is--container, l--flow, is--layer, etc.
• Layout Module: ⁠l--flex⁠, ⁠l--grid⁠, ⁠l--center⁠, ⁠l--columns⁠, ⁠l--withSide⁠, etc.
• Prop Class: ⁠-p:20⁠, ⁠-bgc:base-2⁠, ⁠-fz:l⁠, etc.
• Decoration Utility: ⁠u-cbox⁠, etc.

HTML:

<div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:var(--s50)">
  <p>Example</p>
</div>

JSX:

<Lism p={[20, 40, 50]}>
  <p>Example</p>
</Lism>

https://github.com/lism-css/lism-playgrounds

For feedback or questions, Join the Lism CSS Discord Server