https://github.com/teseor/teseor
CSS-first UI library with grid rhythm system. 47 framework-agnostic components built on design tokens and ITCSS architecture.
https://github.com/teseor/teseor
bem css design-system design-tokens itcss ui-components
Last synced: about 1 month ago
JSON representation
CSS-first UI library with grid rhythm system. 47 framework-agnostic components built on design tokens and ITCSS architecture.
- Host: GitHub
- URL: https://github.com/teseor/teseor
- Owner: teseor
- Created: 2025-12-06T10:17:01.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-02-17T21:26:27.000Z (about 1 month ago)
- Last Synced: 2026-02-17T21:52:24.896Z (about 1 month ago)
- Topics: bem, css, design-system, design-tokens, itcss, ui-components
- Language: SCSS
- Homepage: https://teseor.github.io/teseor/
- Size: 5.51 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 57
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Teseor
CSS-first UI library with grid rhythm system. Framework-agnostic components built on design tokens.
## Quick Start
```bash
pnpm install
pnpm dev
```
Open http://localhost:3000 for live docs.
## Packages
| Package | Description |
|---------|-------------|
| `@teseor/css` | CSS library with design tokens, components, and utilities |
## Usage
```html
Primary
Small Secondary
```
### CSS Custom Properties
Override at root level:
```css
:root {
--ui-color-primary: #0066cc;
--ui-button-height: 3rem;
}
```
Or per-component:
```html
Custom
```
## Development
```bash
pnpm dev # Start docs dev server
pnpm build # Build all packages
pnpm lint # Lint (Biome + Stylelint)
pnpm test # Run tests
```
### Adding Components
1. Create folder in `packages/css/src/04-components//`
2. Add `index.scss`, `.api.json`, `.docs.json`
3. Run `pnpm --filter docs build-docs`
## Architecture
```
packages/
css/ # Components organized by ITCSS layers
00-config/ # Layer definitions, design tokens
01-reset/ # CSS reset
02-base/ # Base element styles
03-layout/ # Layout primitives (stack, grid, center)
04-components/ # UI components (button, card, etc)
05-utilities/ # Helper classes
99-debug/ # Dev tools
apps/
docs/ # Living documentation site
```
## Naming
- CSS classes: `.ui-button`, `.ui-button--primary`, `.ui-button__icon`
- Tokens: `--ui-color-primary`, `--ui-space-2`, `--ui-button-height`
- Internal vars: `--_bg`, `--_height` (component scope only)
## License
MIT