x-css

x-css is a minimalist, semantic CSS library designed specifically for LLM-friendly UI generation. It provides a set of basic, expressive styles that focus primarily on layouts and structure, with additional utility classes for common needs.

The library aims to be:

• Simple: Easy to understand and implement
• Semantic: Class names clearly indicate their purpose
• Expressive: Provides enough styling options without overwhelming complexity
• LLM-optimized: Designed to be easily understood by language models for automated UI generation

x-css serves as a foundation for AI-assisted UI development, allowing LLMs to efficiently generate structured, well-designed interfaces by referencing this documentation.

Installation

npm install @bod.ee/x-css
# or
yarn add @bod.ee/x-css
# or
bun add @bod.ee/x-css

Usage

Import the CSS file into your project:

/* In your main CSS/Less/Sass file */
@import '@bod.ee/x-css';

Or via a link tag in your HTML:

<link rel="stylesheet" href="path/to/node_modules/@bod.ee/x-css">

Or via CDN (unpkg):

<link rel="stylesheet" href="https://unpkg.com/@bod.ee/x-css@latest">

Available Classes

Examples