Stylexui README

This is the README for the extension "stylexui".

A lightweight and modern CSS framework crafted to streamline your development process. Designed with efficiency and customizability in mind, StyleXui empowers developers to create beautiful, responsive, and accessible user interfaces effortlessly.

Overview of StyleXui

Stylexui can also be called Style You.

A lightweight and modern CSS framework crafted to streamline your development process.

Whether you're a seasoned developer or just starting out, StyleXui equips you with a set of pre-designed components and utilities to enhance your workflow.

Created by Richard Gigi, co-founder of Xnyder, StyleXui was born out of a need to tackle common design inefficiencies in modern web development.

Dive in and discover how StyleXui can help bring your projects to life!

This extension was created by Austine Ebogu as an intellisense to seamlessly stylexui development.

Features

✔ 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.

image of embedded class.

Requirements

Installation methods

Via CDN The easiest way to include StyleXui in your project is by using the CDN link. Simply add the following tag to your HTML file:

<link rel="stylesheet" href="https://cdn.stylexui.com/@v1.0.0-stable/css/xui.css" />

Optional JavaScript (for interactive components)

<script src="https://cdn.stylexui.com/@v1.0.0-stable/js/xui.js" defer></script>

This method is ideal for: ● Rapid prototyping ● Simple HTML projects ● Minimizing local file dependencies

NPM/Yarn installation For developers working with frameworks like React, Vue, or Angular, installing StyleXui via NPM or Yarn provides better version control and flexibility.

a. Install via NPM

npm install @richaadgigi/stylexui

b. Install via Yarn

yarn add @richaadgigi/stylexui

After installation, import StyleXui into your project:

import '@richaadgigi/stylexui/css/xui.min.css'

import { apply } from '@richaadgigi/stylexui'

apply()

This approach is suitable for: ● Component-based frameworks ● Scalable projects with build tools ● Managing dependencies effectively

Manual download (ZIP files) For offline use or when package managers are not an option, you can download the framework manually. a. Download the latest version from the official git. b. Extract the files and link the CSS in your HTML file:

<link rel="stylesheet" href="path/to/xui.css" />

Optional JavaScript (for interactive components)

<script src="path/to/xui.js" defer></script>

Manual installation works best for: ● Static HTML/CSS projects ● Legacy systems without modern tooling ● Custom hosting needs

HTML Boilerplate with the Framework

Basic Setup

Copy and paste the following HTML template to get started:

<!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..

Release Notes

0.0.1

Initial release of Stylexui Extension...

License

License Information

XUI is an open-source front-end framework designed to provide lightweight and customizable UI components. It is distributed under the MIT License, ensuring flexibility for both personal and commercial use.

License Type: MIT License

XUI v1.1.0 is licensed under the MIT License (Massachusetts Institute of Technology License).

Key Terms of the MIT License ● Permitted Uses ○ Personal, commercial, and enterprise applications ○ Modification, distribution, and sublicensing ○ Integration into open-source and proprietary projects ● Restrictions ○ No warranty or liability for any damages ○ Cannot hold the original authors liable for any issues ○ Must retain copyright notices in any distribution

Third-Party Dependencies XUI utilizes normalize.css v3.0.1, a CSS reset stylesheet that ensures consistent styling across different browsers. Normalize.css is also licensed under the MIT License and can be freely used in any project. Compliance and Usage

By using XUI, you agree to the terms set by the MIT License. Users are encouraged to contribute to the project while respecting the license terms. For full licensing details, refer to the MIT License documentation.

For more information

Don't forget to star the repository and follow the organization.

Enjoy!