Modern CSS framework for ZiyaraGuide - HTML Living Standard 2026 compliant with CSS Variables, Container Queries, and View Transitions
npm install @ziyara/cssModern CSS framework for ZiyaraGuide - HTML Living Standard 2026 compliant.
✨ 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
``html`
`bash`
npm install @ziyara/css
Then import in your CSS:
`css`
@import '@ziyara/css/modern-2026.css';
` Modern CSS frameworkhtml`
Hello World
#### Cards Card content
`html`
Card Title
#### Buttons
`html`
#### Grid Layout
`html`
Item 1
Item 2
Item 3
#### Badges
`html`
New
#### Alerts
`html`Success messageError message
`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;
}
- Chrome/Edge 105+
- Firefox 110+
- Safari 16.4+
- Uncompressed: ~24KB
- Gzipped: ~6KB
MIT © ZiyaraGuide