nextab

v1.0.0

Published

a year ago

A modern, accessible CSS framework with dark mode and RTL support

0High
0Medium
0Low

nexvisora

css framework accessibility rtl sass dark-mode responsive tree-shaking typescript

NexTab Framework

A modern, accessible CSS framework with dark mode and RTL support.

Features

Modern Design System: Clean, consistent, and customizable
Dark Mode: Built-in dark mode with system preference detection
RTL Support: Full right-to-left language support
Accessibility: WCAG 2.1 compliant with ARIA support
Responsive: Mobile-first approach with customizable breakpoints
Tree-Shakable: Import only what you need
Customizable: Easy theming with CSS custom properties
Modular: Use components independently
Performance: Optimized for modern browsers

Installation

npm install nextab-framework

Or use a CDN:

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/nextab-framework/dist/css/framework.min.css">

<!-- JavaScript -->
<script src="https://unpkg.com/nextab-framework/dist/js/framework.min.js"></script>

Quick Start

Include the CSS and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NexTab Example</title>
    <link rel="stylesheet" href="path/to/framework.min.css">
</head>
<body>
    <!-- Your content here -->
    <script src="path/to/framework.min.js"></script>
</body>
</html>

Start using components:

<!-- Grid System -->
<div class="container">
    <div class="row">
        <div class="col-md-6">Column 1</div>
        <div class="col-md-6">Column 2</div>
    </div>
</div>

<!-- Buttons -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

<!-- Cards -->
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card content goes here.</p>
    </div>
</div>

Using with SCSS

// Import everything
@import "nextab/scss/framework";

// Or import specific components
@import "nextab/scss/components/buttons";
@import "nextab/scss/components/cards";

Dark Mode

Enable dark mode with a simple data attribute:

<html data-theme="dark">

Or use the theme toggle:

<button class="theme-toggle" data-theme-toggle>
    Toggle Theme
</button>

RTL Support

Add the dir attribute to enable RTL:

<html dir="rtl">

Browser Support

Chrome (last 2 versions)
Firefox (last 2 versions)
Safari (last 2 versions)
Edge (last 2 versions)
iOS (12+)
Android (5.0+)

Development

Clone the repository:

git clone https://github.com/yourusername/nextab.git
cd nextab

Install dependencies:

npm install

Start development server:

npm run dev

Build for production:

npm run build

Documentation

Visit our documentation site for detailed usage instructions and examples.

Contributing

Fork the repository
Create your feature branch: git checkout -b feature/my-feature
Commit your changes: git commit -m 'Add my feature'
Push to the branch: git push origin feature/my-feature
Submit a pull request

License

MIT [Your Name]