@deepakdumka/quantumcss

v0.1.1

Published

a year ago

A lightweight, modern CSS framework for building responsive websites

Downloads

0High
0Medium
0Low

deepakdumka

css framework responsive frontend lightweight modern

QuantumCSS

A lightweight, modern CSS framework for building beautiful, responsive websites with minimal effort.

What is QuantumCSS?

QuantumCSS is a fresh approach to CSS frameworks that focuses on simplicity, performance, and developer experience. I built it to solve common UI challenges without the bloat of larger frameworks.

Features

🎨 Clean design system with consistent spacing and typography
📱 Responsive 12-column grid that works beautifully on all devices
🧩 Modular architecture - use only what you need
🔍 Tiny footprint (~15KB gzipped for the full framework)
🌙 Dark mode support built right in
🧰 Utility classes for rapid development
♿ Accessibility-focused with proper contrast and semantic markup
🚀 Simple, intuitive API that's easy to learn

Installation

Getting started with QuantumCSS is super easy:

Option 1: Direct Download

Download the latest release and include it in your project:

<!-- CSS -->
<link rel="stylesheet" href="path/to/quantum.css">

<!-- Optional JavaScript -->
<script src="path/to/quantum.js"></script>

Option 2: NPM

npm install @deepakdumka/quantumcss --save

Then import in your project:

// Import all styles
import '@deepakdumka/quantumcss/css/quantum.css';

// Optional JavaScript
import '@deepakdumka/quantumcss/js/quantum.js';

// Or import individual modules
import '@deepakdumka/quantumcss/css/quantum-base.css';
import '@deepakdumka/quantumcss/css/quantum-grid.css';
// etc...

Option 3: CDN (Coming Soon)

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.example.com/quantumcss/0.1.0/quantum.min.css">

<!-- Optional JavaScript -->
<script src="https://cdn.example.com/quantumcss/0.1.0/quantum.min.js"></script>

Quick Start

Here's a simple example to get you going:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My QuantumCSS Project</title>
  <link rel="stylesheet" href="path/to/quantum.css">
</head>
<body>
  <div class="container">
    <div class="row mt-4">
      <div class="col-sm-12 col-md-6">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">Getting Started</h3>
            <p>This is a simple card built with QuantumCSS.</p>
            <button class="btn btn-primary">Learn More</button>
          </div>
        </div>
      </div>
      
      <div class="col-sm-12 col-md-6">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">Responsive Design</h3>
            <p>Cards stack on mobile and display side-by-side on larger screens.</p>
            <button class="btn btn-secondary">See Examples</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="path/to/quantum.js"></script>
</body>
</html>

Documentation

Check out our documentation for detailed guides and examples:

Components

QuantumCSS includes essential components to jumpstart your projects:

Buttons - Standard, outline, and various sizes
Cards - Flexible containers for content
Forms - Styled inputs, checkboxes, and validation
Navigation - Responsive navbar and tabs
Alerts - Contextual feedback messages
And more!

Customization

Make QuantumCSS your own by customizing the CSS variables:

:root {
  --q-primary: #3366ff;
  --q-secondary: #6c5ce7;
  --q-success: #00b894;
  --q-danger: #ff5252;
  --q-warning: #fdcb6e;
  --q-light: #f8f9fa;
  --q-dark: #212529;
}

Browser Support

QuantumCSS works in all modern browsers:

Chrome
Firefox
Safari
Edge
Opera

Contributing

I'd love your help making QuantumCSS better! Feel free to:

Fork the repository
Create your feature branch: git checkout -b feature/cool-new-feature
Commit your changes: git commit -m 'Add some cool feature'
Push to the branch: git push origin feature/cool-new-feature
Open a Pull Request

License

QuantumCSS is released under the MIT License.