Xtyle CSS

Overview

Xtyle CSS is a utility-first CSS framework that provides a collection of atomic CSS classes for rapid UI development. With a focus on lightweight design and intuitive naming conventions, Xtyle CSS helps you build interfaces without writing custom CSS.

Features

- Lightweight: Only 28kb (5kb gzipped)
- Intuitive: Simple abbreviated class names
- No Dependencies: Pure CSS solution
- Responsive: Built-in responsive utilities
- Customizable: Easy to extend and adapt

Installation

$3

``html

`

$3

`bash
npm install xtyle-css
`

Usage

Xtyle CSS uses abbreviated class names for quick styling:

`html

Hello World

`

Core Modules

Xtyle CSS is organized into focused modules:

- Core: Display, positioning, and flex layouts (d-f, dp-r, dx-ce)
- Borders: Border styling and radius (bd-a, br-2)
- Spacing: Margin and padding utilities (m-2, p-3)
- Text: Typography utilities (ts-1, td-b, ta-c)
- Shadows: Shadow effects for depth
- Rows: Row-based layout utilities
- Hide: Visibility control (d-n, d-hide`)

License

BSD 3-Clause