v2.1.1

Release Date: 2026-03-07T07:11:24Z
Status: Stable
Type: Minor Update

Changelog

Full details can be found here.

Installation

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zyroxcssv2@v2.1.1/dist/css/zyroxcss.min.css" integrity="sha512-b0039426ee40d3e00ba87521de33a8b5892be540be5a7a68858c89a7211d05482e9bd7a54f0b94a9a1a5b2ed2d4c4afdfa5b1f50955d80bf0406d34df88aa6fe" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/zyroxcssv2@v2.1.1/dist/css/zyroxcss.min.css" integrity="sha512-b0039426ee40d3e00ba87521de33a8b5892be540be5a7a68858c89a7211d05482e9bd7a54f0b94a9a1a5b2ed2d4c4afdfa5b1f50955d80bf0406d34df88aa6fe" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zyroxcssv2/v2.1.1/zyroxcss.min.css" integrity="sha512-b0039426ee40d3e00ba87521de33a8b5892be540be5a7a68858c89a7211d05482e9bd7a54f0b94a9a1a5b2ed2d4c4afdfa5b1f50955d80bf0406d34df88aa6fe" crossorigin="anonymous" referrerpolicy="no-referrer" />

npm

npm install zyroxcssv2

import 'zyroxcssv2/dist/css/zyroxcss.min.css';

ZyroxCSS v2.1.0

Release Date: 2026-03-07T05:43:42+07:00
Status: Stable
Type: Minor Update

Changelog

Full details can be found here.

Installation

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zyroxcssv2@v2.1.0/dist/css/zyroxcss.min.css" integrity="sha512-bbdc559be56841871c3be2c2123e66782ca33308cf9611f58d5a267b25ca1af2ec5a482b86d5c3507c84cbd73fd8ac11611ff3fa0db39bcbddcfeb414bbd38a5" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/zyroxcssv2@v2.1.0/dist/css/zyroxcss.min.css" integrity="sha512-bbdc559be56841871c3be2c2123e66782ca33308cf9611f58d5a267b25ca1af2ec5a482b86d5c3507c84cbd73fd8ac11611ff3fa0db39bcbddcfeb414bbd38a5" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zyroxcssv2/v2.1.0/zyroxcss.min.css" integrity="sha512-bbdc559be56841871c3be2c2123e66782ca33308cf9611f58d5a267b25ca1af2ec5a482b86d5c3507c84cbd73fd8ac11611ff3fa0db39bcbddcfeb414bbd38a5" crossorigin="anonymous" referrerpolicy="no-referrer" />

npm

npm install zyroxcssv2

import 'zyroxcssv2/dist/css/zyroxcss.min.css';

🎉 ZyroxCSS v2.0.0 - Complete Modernization

Release Date: January 16, 2026
Status: Stable & Production Ready
Type: Major Release with Breaking Changes

---

🎉 Overview

v2.0.0 represents a complete modernization of ZyroxCSS with contemporary design patterns, full responsiveness, and accessibility standards. All components have been redesigned with modern aesthetics and touch-friendly interfaces.

This is a major version with significant breaking changes. Migration from v1.x is required.

---

⚠️ Breaking Changes

Color System (CRITICAL)

/* v1.x */
--primary-color: #4A90E2      /* Light Blue */
--secondary-color: #50E3C2    /* Mint Green */

/* v2.0 */
--primary-color: #6366F1      /* Indigo */
--primary-dark: #4F46E5
--primary-light: #818CF8
--secondary-color: #06B6D4    /* Cyan */
--secondary-dark: #0891B2
--secondary-light: #22D3EE

Spacing System (CRITICAL)

/* v1.x - ad-hoc values */
--spacing: 16px

/* v2.0 - 8-level consistent scale */
--spacing-xs: 0.25rem    /* 4px */
--spacing-sm: 0.5rem     /* 8px */
--spacing-md: 1rem       /* 16px */
--spacing-lg: 1.5rem     /* 24px */
--spacing-xl: 2rem       /* 32px */
--spacing-2xl: 3rem      /* 48px */

Border Radius (CRITICAL)

/* v1.x - single value */
--border-radius: 6px

/* v2.0 - 5-level scale */
--border-radius: 0.5rem        /* base */
--border-radius-sm: 0.25rem
--border-radius-md: 0.5rem
--border-radius-lg: 0.75rem
--border-radius-xl: 1rem
--border-radius-full: 9999px

Component Structure Changes

• Buttons: All classes restructured (.btn--primary now uses new colors)
• Forms: Complete rewrite with new class structure
• Navigation: Major structural changes for mobile support
• Modals: New animation system and class names
• Cards: New shadow system and color variants
• Tabs: Multiple new style variants added

Typography

• Font stack changed to modern system fonts
• All headings now use fluid sizing with clamp()
• New responsive typography utilities

---

✨ Major Additions

1. Enhanced Design System

• Modern Color Palette: Indigo & Cyan with professional neutrals
• 5-Level Shadow System: From shadow-sm to shadow-xl
• 8-Level Spacing Scale: Consistent spacing throughout
• 5-Level Border Radius: Unified corner styling
• Dark Mode Support: Automatic prefers-color-scheme: dark
• Gradient Support: Modern gradients throughout components

2. Comprehensive Responsive Architecture

• 5 Breakpoints: Mobile-first with sm, md, lg, xl breakpoints
• 12-Column Grid System: With auto-fit and responsive utilities
• Touch-Friendly Design: 44px minimum tap targets
• Responsive Typography: Fluid font sizing with clamp()
• Responsive Utilities: sm:, md:, lg:, xl: prefixes for all classes
• Mobile-Optimized Components: All components adapt to mobile

3. Component Enhancements

Buttons (New)

• 6 Color Variants: primary, secondary, success, danger, warning, ghost, outline
• 4 Sizes: sm, md (default), lg, xl
• Button Groups: Horizontal and stacked layouts
• Modern Effects: Smooth hover lift, focus rings, disabled states

Forms (Complete Redesign)

• Modern Inputs: Better padding, focus states, feedback
• Floating Labels: form-floating for modern label behavior
• Validation States: success and error with visual feedback
• Switch Toggles: Smooth animated toggle switches
• File Upload: Drag-and-drop ready styling
• Form Grid: Responsive multi-column forms
• Icon Support: Prepended/appended icons

Navigation (Modernized)

• Gradient Background: Modern linear gradient
• Mobile Menu: Full-screen responsive hamburger menu
• Submenus: Nested navigation support
• Hover Effects: Smooth transitions and animations
• Sticky Support: Optional sticky navbar

Modals (Enhanced)

• Multiple Sizes: sm, md, lg, xl, fullscreen
• Smooth Animations: Spring-like entrance effects
• Responsive Behavior: Full-screen on mobile
• Centered Content: Better vertical centering
• Close Actions: Accessible close buttons

Cards (Redesigned)

• Variants: Elevated, flat, colored (success/danger/warning/info)
• Image Support: card-image with proper styling
• Responsive Grid: card-container with auto-fit columns
• Shadow Hierarchy: Uses new 5-level shadow system

Alerts (Redesigned)

• Filled & Outlined: Two presentation styles
• Status Colors: success, danger, warning, info
• Icon Support: Semantic icon placeholders
• Dismissible: Optional close button with animation
• Responsive: Flex layout adapts to mobile

Badges (Enhanced)

• Multiple Sizes: sm, md, lg
• Outline Variant: Outlined badge styles
• Dot Indicators: .badge--dot for status indicators
• All Status Colors: Supports all theme colors

Tabs (Redesigned)

• Multiple Styles: default, pills, vertical, boxed
• Smooth Transitions: Animated tab switching
• Mobile Scroll: Horizontal scroll with indicator
• Icon Support: Can include icons in tab headers

Progress (Complete Redesign)

• Animated Bars: Optional shimmer and stripe animations
• Circular Progress: Circular progress indicators
• Multiple Sizes: sm, md, lg
• Status Colors: All theme colors supported
• Stacked Bars: Multiple progress bars together
• Labels: Built-in label support

Tooltips (Enhanced)

• 4 Positions: top, bottom, left, right
• Multiple Sizes: sm, md, lg
• Smooth Animation: Reveal with proper arrow indicator
• Dark Variant: Alternative dark styling

Dropdowns (Enhanced)

• Mobile Optimized: Full-screen on mobile devices
• Nested Support: Submenu support
• Multiple Sizes: sm, md, lg
• Dividers: Visual separators between groups
• Headers: Section headers in dropdowns

4. Utility Class Expansion

Flex Utilities

• Direction: flex-row, flex-col, flex-wrap, flex-nowrap
• Alignment: items-center, items-start, items-end, etc.
• Justification: flex-between, flex-space-around, flex-space-evenly
• Gap: gap-1 through gap-8
• Responsive: Breakpoint prefixes (sm:, md:, lg:, xl:)

Spacing Utilities (New)

• Margin: m-*, mx-*, my-*, mt-*, mb-*, ml-*, mr-*
• Padding: p-*, px-*, py-*, pt-*, pb-*, pl-*, pr-*
• Values: 0 to 8 (representing 0 to 2rem)
• Responsive: All breakpoint variants

Typography Utilities

• Font Weight: font-light to font-extrabold
• Letter Spacing: tracking-tight to tracking-widest
• Line Height: leading-tight to leading-loose
• Text Align: text-left, text-center, text-right
• Text Truncation: truncate, line-clamp-1/2/3

Responsive Utilities

• Display: hidden, block, flex, grid with breakpoint prefixes
• Grid Columns: 1-5 columns with responsive stacking
• Gaps: Gap utilities for all breakpoints
• Text Sizes: text-responsive-sm/lg with automatic scaling

5. Accessibility Improvements

• WCAG AA Compliance: Color contrast ratios meet standards
• Focus Indicators: Clear keyboard navigation
• Form Labels: Proper label-input associations
• Semantic HTML: Proper heading hierarchy
• Dark Mode: System preference support

---

📊 Statistics

Code Metrics

• SCSS Files: 35 modular files
• SCSS Lines: 4,208 lines of source code
• CSS Output: 5,345 compiled lines (~145KB)
• Component Classes: 250+
• Utility Classes: 200+

Browser Support

• Chrome/Edge: Latest 2 versions
• Firefox: Latest 2 versions
• Safari: Latest 2 versions
• Mobile: iOS Safari 12+, Chrome Android latest

---

🚀 Migration Guide

Step 1: Update CSS Import

<!-- v1.x -->
<link rel="stylesheet" href="path/to/zyroxcss.css">

<!-- v2.0 - Same, but with new styles -->
<link rel="stylesheet" href="path/to/zyroxcss.css">

Step 2: Update Color Variables

If using custom colors in CSS:

/* v1.x */
:root {
  --primary-color: #4A90E2;
}

/* v2.0 */
:root {
  --primary-color: #6366F1;
  --primary-dark: #4F46E5;
  --primary-light: #818CF8;
}

Step 3: Update Button Classes

<!-- v1.x -->
<button class="btn btn--primary">Click</button>

<!-- v2.0 - Styling updated, but class name same -->
<button class="btn btn--primary">Click</button>

Step 4: Update Forms

<!-- v1.x -->
<input class="form-control" type="text">

<!-- v2.0 -->
<div class="form-group">
  <label class="form-label">Label</label>
  <input class="form-control" type="text">
</div>

Step 5: Update Spacing

<!-- v1.x -->
<div class="mt-1">Content</div> <!-- 8px -->

<!-- v2.0 -->
<div class="mt-2">Content</div> <!-- Now using new scale: 0.5rem = 8px -->

---

🎨 Design Philosophy

Modern & Clean

• Contemporary color palette
• Generous whitespace
• Smooth transitions
• Subtle animations

Responsive First

• Mobile-first approach
• Fluid typography
• Touch-friendly sizes
• Adaptive layouts

Accessible

• WCAG AA compliant
• Clear focus states
• Semantic structure
• Dark mode support

Performance

• Optimized CSS
• CSS Variables for efficiency
• Hardware acceleration
• Minimal overhead

---

📚 Documentation

• README.md - Feature overview and quick start
• MODERNIZATION.md - Detailed improvements and features
• CHANGELOG.md - Full changelog with guidelines
• This file - Release notes and migration guide

---

🔄 What's Next

Planned for v2.1 (Minor)

• RTL (Right-to-Left) support
• Extended animation library
• Component JavaScript ...

ZyroxCSS v1.0.0

ZyroxCSS v1.0.0 - Initial Release 🎉

We are proud to introduce ZyroxCSS, a lightweight, modern, and flexible CSS framework designed to simplify web development. With a clean design and easy customization, ZyroxCSS helps you build beautiful, responsive websites effortlessly.

━━━━━━━━━━━━━━━━━━━━━━━

✨ Key Features

• Minimal & Fast – Lightweight and optimized for performance.
• Fully Responsive – Works seamlessly across all devices.
• Customizable – Built with CSS variables for easy theme adjustments.
• Pre-styled Components – Includes buttons, cards, forms, and more.
• Dark Mode Support – Built-in light/dark theme switching.

━━━━━━━━━━━━━━━━━━━━━━━

📦 Installation

Get started quickly by adding ZyroxCSS to your project:

🔹 CDN:
https://unpkg.com/zyroxcss@1.0.0-r1.12/dist/css/zyroxcss.css

🔹 NPM:
npm install zyroxcss

━━━━━━━━━━━━━━━━━━━━━━━

🔥 Changelog - v1.0.0

• Initial release with a lightweight and elegant design.
• Responsive grid system and utility classes.
• Essential UI components: buttons, alerts, forms, and more.

━━━━━━━━━━━━━━━━━━━━━━━

🚀 Get Started

Explore the full documentation and examples in the repository.

We appreciate your support and feedback! Let’s build something amazing with ZyroxCSS.