Qwantum SCSS Documentation

Version 1.0

Qwantum is a modern, lightweight CSS framework built with SCSS that provides a comprehensive set of components and utilities for building beautiful web interfaces. It focuses on clean design, performance, and developer experience.

Key Features

🎨 Modern Design: Contemporary aesthetics with smooth animations
📱 Mobile First: Responsive design built-in
⚡ Lightweight: Optimized CSS output
🛠️ Customizable: Easy SCSS customization
🧩 Modular: Component-based architecture

Installation

Get started with Qwantum in multiple ways:

Download

Download the compiled CSS file and include it in your project:

CDN (Coming Soon)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/qwantum@1.0.0/dist/qwantum.min.css">
                            

npm (Coming Soon)

npm install Qwantum

SCSS Source

For maximum customization, use the SCSS source files:

@import "path/to/qwantum/scss/qwantum";

Getting Started

Once you've included Qwantum in your project, you can start using the classes immediately:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Qwantum Site</title>
    <link rel="stylesheet" href="qwantum.css">
</head>
<body>
    <div class="qw-container">
        <h1 class="qw-text-center">Hello Qwantum!</h1>
        <div class="qw-card qw-card-center">
            <p>Your first Qwantum component</p>
            <button class="qw-btn qw-btn-primary">Get Started</button>
        </div>
    </div>
    <script src="qwantum.js"></script>
</body>
</html>
                            

Layout System

Container

The .qw-container class provides a responsive fixed-width container:

Container (max-width: 1200px)

Grid System

Qwantum uses CSS Grid for layouts. Available grid classes:

Class	Description
`.qw-grid-2`	2 column grid
`.qw-grid-3`	3 column grid
`.qw-grid-4`	4 column grid
`.qw-grid-auto`	Auto-fit columns (min 280px)
`.qw-grid-auto-sm`	Auto-fit columns (min 200px)

Grid Item 1

Grid Item 2

Grid Item 3

Flexbox Utilities

Class	Description
`.qw-flex`	Display flex
`.qw-flex-center`	Center items
`.qw-flex-between`	Space between
`.qw-flex-column`	Flex direction column
`.qw-flex-wrap`	Allow wrapping

Components

Buttons

Qwantum provides several button styles and sizes:

<button class="qw-btn qw-btn-primary">Primary</button>
<button class="qw-btn qw-btn-secondary">Secondary</button>
<button class="qw-btn qw-btn-primary qw-btn-sm">Small</button>
<button class="qw-btn qw-btn-primary qw-btn-lg">Large</button>
                            

Cards

Cards are versatile components for grouping content:

Standard Card

Regular card with hover effects and shadows.

Inset Card

Inset style card perfect for forms.

<div class="qw-card">
    <h4>Card Title</h4>
    <p>Card content goes here.</p>
</div>

<div class="qw-card qw-card-inset">
    <h4>Inset Card</h4>
    <p>Perfect for form containers.</p>
</div>
                            

Sections

Section components for page layout:

Class	Description
`.qw-section`	Standard section padding
`.qw-section-sm`	Small padding
`.qw-section-lg`	Large padding
`.qw-section-white`	White background
`.qw-section-light`	Light gray background
`.qw-section-dark`	Dark background

Navigation

Navigation components with mobile support:

<nav class="qw-nav">
    <a href="#" class="qw-nav_link">Home</a>
    <a href="#" class="qw-nav_link">About</a>
    <a href="#" class="qw-nav_link">Services</a>
    <a href="#" class="qw-nav_link">Contact</a>
</nav>

<!-- Mobile Navigation -->
<div class="qw-burger">
    <div class="qw-burger_line"></div>
    <div class="qw-burger_line"></div>
    <div class="qw-burger_line"></div>
</div>

<nav class="qw-nav qw-nav-mobile">
    <!-- Mobile menu items -->
</nav>
                            

Modal Windows

Interactive modal windows with JavaScript support:

<!-- Modal Trigger -->
<button class="qw-btn qw-btn-primary" data-qw-modal="example-modal">Open Modal</button>

<!-- Modal Structure -->
<div class="qw-modal" id="example-modal">
    <div class="qw-modal_content">
        <div class="qw-modal_header">
            <h3 class="qw-modal_title">Modal Title</h3>
            <button class="qw-modal_close" type="button">×</button>
        </div>
        <div class="qw-modal_body">
            <p>Modal content goes here.</p>
        </div>
        <div class="qw-modal_footer">
            <button class="qw-btn qw-btn-secondary">Cancel</button>
            <button class="qw-btn qw-btn-primary">Confirm</button>
        </div>
    </div>
</div>
                            

Utility Classes

Typography

Class	Description	Example
`.qw-text-xs`	Extra small text	Small text
`.qw-text-lg`	Large text	Large text
`.qw-text-center`	Center aligned	Centered
`.qw-text-primary`	Primary color	Primary
`.qw-text-secondary`	Secondary color	Secondary

Spacing

Margin and padding utilities:

Class	Property	Value
`.qw-m-0`	margin	0
`.qw-m-sm`	margin	20px
`.qw-m-md`	margin	30px
`.qw-p-0`	padding	0
`.qw-p-sm`	padding	20px
`.qw-p-md`	padding	30px

Shadows & Border Radius

Subtle Shadow

Elevated Shadow

Floating Shadow

Animations

Built-in animations for enhanced user experience:

Class	Description
`.qw-animate-fade-up`	Fade in from bottom with scroll trigger
`.qw-visible`	Makes animated elements visible

JavaScript Features

Qwantum includes a powerful JavaScript library for interactive components:

Modal Management

// Open a modal
qw.openModal('modal-id');

// Close a modal
qw.closeModal('modal-id');

// Create a modal programmatically
const modalId = qw.createModal({
    title: 'Dynamic Modal',
    content: '<p>This modal was created with JavaScript!</p>',
    size: 'lg'
});
                            

Notifications

// Show notifications
qw.showNotification({
    message: 'Success! Your changes have been saved.',
    type: 'success',
    duration: 3000
});

// Different notification types: 'info', 'success', 'warning', 'error'
qw.showNotification({
    message: 'Something went wrong!',
    type: 'error',
    closable: true
});
                            

Utility Functions

// Smooth scroll to element
Qwantum.utils.scrollTo('#target-section', 100);

// Debounce function
const debouncedFunction = Qwantum.utils.debounce(() => {
    console.log('Debounced!');
}, 300);

// Throttle function  
const throttledFunction = Qwantum.utils.throttle(() => {
    console.log('Throttled!');
}, 1000);
                            

Event Handling

// Listen for Qwantum events
document.addEventListener('qw:modal:open', (e) => {
    console.log('Modal opened:', e.detail.modalId);
});

document.addEventListener('qw:notification:show', (e) => {
    console.log('Notification shown:', e.detail.message);
});
                            

Customization

Qwantum is built with SCSS and is highly customizable. Override variables to match your brand:

Color Variables

// Override default colors
$primary-color: #333;
$secondary-color: #f5f5f5;
$accent-color: #667eea;
$text-color: #333;
$background-color: #f5f5f5;

// Import Qwantum
@import "qwantum";
                            

Typography Variables

// Font families
$font-primary: "Open Sans", sans-serif;
$font-brand: "Urbanist", sans-serif;

// Font sizes
$text-xs: 0.8rem;
$text-sm: 0.9rem;
$text-md: 1rem;
$text-lg: 1.2rem;
$text-xl: 1.4rem;
                            

Spacing Variables

// Spacing scale
$spacing-xs: 10px;
$spacing-sm: 20px;
$spacing-md: 30px;
$spacing-lg: 40px;
$spacing-xl: 60px;

// Container max-width
$container-width: 1200px;
                            

Component Variables

// Cards
$card-border-radius: 20px;
$card-padding: 40px;
$card-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

// Buttons
$btn-border-radius: 20px;
$btn-padding: 16px 32px;
$btn-font-size: 1.1rem;

// Sections
$section-padding: 100px 0;
                            

Examples

Hero Section

Welcome to Our Site

Create something amazing with Qwantum

<section class="qw-hero">
    <div class="qw-container">
        <h1 class="qw-hero_title qw-brand-font">Welcome to Our Site</h1>
        <p class="qw-hero_subtitle">Create something amazing with Qwantum</p>
        <div class="qw-hero_cta">
            <button class="qw-btn qw-btn-primary qw-btn-lg">Get Started</button>
        </div>
    </div>
</section>
                            

Feature Grid

⚡

Fast

Lightning fast performance

🎨

Beautiful

Modern design system

📱

Responsive

Works on all devices

<div class="qw-grid qw-grid-3">
    <div class="qw-card qw-card-center">
        <div class="qw-icon-box">⚡</div>
        <h4>Fast</h4>
        <p class="qw-text-secondary">Lightning fast performance</p>
    </div>
    <div class="qw-card qw-card-center">
        <div class="qw-icon-box">🎨</div>
        <h4>Beautiful</h4>
        <p class="qw-text-secondary">Modern design system</p>
    </div>
    <div class="qw-card qw-card-center">
        <div class="qw-icon-box">📱</div>
        <h4>Responsive</h4>
        <p class="qw-text-secondary">Works on all devices</p>
    </div>
</div>
                            

Contact Form

Contact Us

<div class="qw-card">
    <h3>Contact Us</h3>
    <form>
        <div class="form-group">
            <input type="text" placeholder="Your Name" class="form-input">
        </div>
        <div class="form-group">
            <input type="email" placeholder="Email" class="form-input">
        </div>
        <div class="form-group">
            <textarea placeholder="Message" class="form-input"></textarea>
        </div>
        <button type="submit" class="qw-btn qw-btn-primary qw-btn-full">Send</button>
    </form>
</div>
                            

Browser Support

Qwantum supports all modern browsers:

Chrome 60+
Firefox 60+
Safari 12+
Edge 79+

Note: CSS Grid and Flexbox features require modern browser support. For older browser support, consider using a CSS Grid polyfill.

Contributing

We welcome contributions to Qwantum! Here's how you can help:

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

Report Issues View Source