@ziyara/css

Modern CSS framework for ZiyaraGuide - HTML Living Standard 2026 compliant.

Features

✨ Modern CSS
- CSS Variables (Custom Properties)
- Container Queries
- View Transitions API
- Logical Properties
- Modern color spaces (oklch)

🎨 Design System
- Consistent spacing scale
- Modern color palette
- Typography system
- Component library

📱 Mobile-First
- Responsive design
- Touch-friendly (44px targets)
- Mobile optimizations
- Reduced motion support

🌙 Dark Mode
- Built-in dark mode support
- prefers-color-scheme media query
- Smooth transitions

Installation

$3

``html

`

$3

`bash
npm install @ziyara/css
`

Then import in your CSS:

`css
@import '@ziyara/css/modern-2026.css';
`

Usage

$3

`html











#### Cards
`html


#### Buttons
`html
Primary
`

#### Grid Layout
`html


#### Badges
`html
New
`

#### Alerts
`html


`css
:root {
/ Colors /
--color-primary: oklch(0.55 0.20 142);
--color-secondary: oklch(0.70 0.15 264);
--color-success: oklch(0.60 0.18 142);
--color-danger: oklch(0.55 0.22 29);

/ Spacing /
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;

/ Border Radius /
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
}
``

Browser Support

- Chrome/Edge 105+
- Firefox 110+
- Safari 16.4+

File Size

- Uncompressed: ~24KB
- Gzipped: ~6KB

License

MIT © ZiyaraGuide

Links

- Website
- GitHub
- Issues