A lightweight and modern CSS framework designed to streamline your development process effortlessly.
StyleXui, also known as Style You, is a CSS framework built to enhance your workflow with pre-designed components and utility classes. Whether you're an experienced developer or just starting out, StyleXui helps you build stunning, responsive UIs with ease.
Created by Richard Gigi, co-founder of Xnyder, StyleXui was developed to tackle common design inefficiencies in modern web development.
Dive in and see how StyleXui can bring your projects to life! 🎨✨
✔ Fully Responsive – Built with a mobile-first approach, ensuring flawless adaptability across all screen sizes. Whether on a phone, tablet, or desktop, your design remains pixel-perfect and seamless.
✔ Pre-Built Components – Speed up development with a library of ready-to-use elements like buttons, modals, and navigation bars. No need to build from scratch—just plug, customize, and launch.
✔ Effortless Customization – A utility-first framework that lets you style elements with ease, keeping your code clean and efficient. Define your own colors, spacing, and units—your design, your way.
✔ Accessibility-First – Designed with inclusivity in mind, ensuring smooth navigation and interaction for all users, regardless of ability.
✔ Seamless Light & Dark Mode – Instantly switch between bright and dark themes for a comfortable viewing experience, day or night.
✔ Comprehensive Documentation – A well-structured, beginner-friendly guide to help you get started effortlessly and make the most out of StyleXui.
✔ JavaScript Enhancements – Optional JavaScript for interactive components with smooth animations and behaviors.
Add the following <link> tag to your HTML file:
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.stylexui.com/@v1.1.0/css/xui.css" />
<!-- Optional JavaScript (for interactive components) -->
<script src="https://cdn.stylexui.com/@v1.1.0/js/xui.js" defer></script>✅ Best for: Prototyping, static HTML projects, minimal dependencies.
Using NPM:
npm install @richaadgigi/stylexuiUsing Yarn:
yarn add @richaadgigi/stylexuiThen, import it in your project:
import '@richaadgigi/stylexui/css/xui.min.css';
import { apply } from '@richaadgigi/stylexui';
apply();✅ Best for: React, Vue, Angular, scalable projects, and version control.
- Download the latest version from the official website or the zip file.
- Extract the files and link the CSS in your HTML file:
<!-- CSS -->
<link rel="stylesheet" href="path/to/xui.css" />
<!-- Optional JavaScript (for interactive components) -->
<script src="path/to/xui.js" defer></script>✅ Best for: Legacy systems, static projects, or custom hosting.
Copy and paste the following template to start using StyleXui:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My StyleXui Project</title>
<link rel="stylesheet" href="path/to/xui.css">
</head>
<body>
<div class="xui-container">
<h1>Welcome to StyleXui</h1>
<p>Build modern, responsive, and accessible UIs with ease.</p>
<button class="xui-btn xui-btn-primary">Get Started</button>
</div>
<!-- Optional StyleXui JS (for interactive components) -->
<script src="path/to/xui.js"></script>
</body>
</html>Visit our documentation to learn more.
⚡️ Massive Package Size Reduction: The core font folder (approx. 8MB) has been removed from the distribution. StyleXui now defaults to system fonts, allowing developers to import and optimize custom fonts themselves, resulting in a significantly faster download and build process.
🖼️ Asset Cleanup: Included assets and images have been optimized, further reducing the package size.
📦 New Flexbox Utility Scale (xui-flex-*): Introduced a powerful, simplified scale for the CSS flex shorthand, replacing the need to use separate grow/shrink classes for common use cases.
📐 Comprehensive Flex Basis Utilities: Added individual utilities for the flex-basis property, giving users full control over the initial size of flex items.
📏 Modern Gap Utilities (Grid & Flex): Replaced the deprecated grid-gap with the unified gap property, which now works for both Flexbox and CSS Grid layouts.
🌎 Enhanced Container Logic: The core .xui-container class has been updated to include max-width at responsive breakpoints and is now centered, implementing the modern standard for fluid, readable content on all screen sizes.
✅ Fixed: Ripple effect animation now works as expected for better visual feedback.
🧼 Updated: Dashboard redesigned with a cleaner and neater UI for improved clarity and user experience.
🧩 New Utility: Introduced "xui-bdr-rad-none" to easily apply "border-radius: none".
📂 Dashboard Navigation: Now supports dropdowns for subpages, making multi-level navigation seamless.
🚀 Improved Styling Logic: Dynamic CSS now uses !important to ensure proper style overrides.
✅ Initial release of StyleXui! 🚀
✅ Includes core CSS utilities and components
✅ Optional JavaScript for interactive elements
✅ Comprehensive documentation
We welcome contributions! Feel free to submit issues or pull requests to help improve StyleXui.
StyleXui is open-source and distributed under the MIT License, ensuring flexibility for both personal and commercial use.
- ✅ Permitted Uses: Personal, commercial, and enterprise applications. Modification, distribution, and sublicensing allowed.
- ❌ Restrictions: No warranty or liability for damages. Must retain copyright notices.
StyleXui utilizes normalize.css v3.0.1 to ensure consistent styling across browsers. Normalize.css is also licensed under the MIT License.
For full licensing details, refer to the MIT License documentation.
📌 Official Website: StyleXui
📌 Support & Issues: GitHub Issues
✨ Enjoy building with StyleXui! 🎨🚀