@ziyara/css
v1.0.0
Published
Modern CSS framework for ZiyaraGuide - HTML Living Standard 2026 compliant with CSS Variables, Container Queries, and View Transitions
Downloads
96
Maintainers
ziyaranetReadme
@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-schememedia query- Smooth transitions
Installation
Via CDN (jsDelivr)
<link href="https://cdn.jsdelivr.net/npm/@ziyara/[email protected]/modern-2026.css" rel="stylesheet">Via npm
npm install @ziyara/cssThen import in your CSS:
@import '@ziyara/css/modern-2026.css';Usage
Basic Setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/@ziyara/[email protected]/modern-2026.css" rel="stylesheet">
<title>My App</title>
</head>
<body>
<div class="container">
<div class="card">
<h1>Hello World</h1>
<p>Modern CSS framework</p>
<button class="btn btn-primary">Get Started</button>
</div>
</div>
</body>
</html>Components
Cards
<div class="card">
<h2>Card Title</h2>
<p>Card content</p>
</div>Buttons
<button class="btn btn-primary">Primary</button>Grid Layout
<div class="grid grid-3">
<div class="card">Item 1</div>
<div class="card">Item 2</div>
<div class="card">Item 3</div>
</div>Badges
<span class="badge">New</span>Alerts
<div class="alert alert-success">Success message</div>
<div class="alert alert-danger">Error message</div>CSS Variables
: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