@jaiswald159/shared-css-library

A universal CSS library that works with any Vue version (Vue 2, Vue 3 + ) and any JavaScript framework (React, Angular, Svelte, etc.). This is a pure CSS library with no JavaScript dependencies or framework-specific code.

✨ Features

• 🎨 Pure CSS - No JavaScript dependencies
• 🌍 Universal - Works with any framework or Vue version
• 📦 Modular - Import only what you need
• 🎯 Modern - CSS Variables, Flexbox, Grid
• 🎭 Theming - Easy to customize with CSS variables
• 🌙 Dark Mode - Built-in dark mode support
• 📱 Responsive - Mobile-first design
• ♿ Accessible - Focus states and semantic HTML
• 🎬 Animations - Ready-to-use animations
• 🔧 Utilities - Comprehensive utility classes

📦 Installation

npm install @jaiswald159/shared-css-library

🚀 Usage

Import All Styles (Recommended for getting started)

Vue 3 (main.js or main.ts):

import '@jaiswald159/shared-css-library/global.css'

Vue 2 (main.js):

import '@jaiswald159/shared-css-library/global.css'

Nuxt 3 (nuxt.config.ts):

export default defineNuxtConfig({
  css: ['@jaiswald159/shared-css-library/global.css']
})

Nuxt 2 (nuxt.config.js):

export default {
  css: ['@jaiswald159/shared-css-library/global.css']
}

React (App.js or index.js):

import '@jaiswald159/shared-css-library/global.css'

Angular (styles.css or angular.json):

@import '@jaiswald159/shared-css-library/global.css';

Plain HTML:

<link rel="stylesheet" href="node_modules/@jaiswald159/shared-css-library/global.css">

Import Modular Styles (For better tree-shaking)

// Import only what you need
import '@jaiswald159/shared-css-library/styles/variables.css'
import '@jaiswald159/shared-css-library/styles/utilities.css'
import '@jaiswald159/shared-css-library/styles/components.css'

Available Style Modules

| Module | Purpose | Import Path | | -------------------- | --------------------- | ------------------------- | | Variables | CSS custom properties | styles/variables.css | | Reset | CSS reset/normalize | styles/reset.css | | Utilities | Utility classes | styles/utilities.css | | Components | Component classes | styles/components.css | | Animations | Animation classes | styles/animations.css |

🎨 What's Included

1. CSS Variables (Design Tokens)

Over 100+ CSS variables for easy theming:

/* Colors */
--color-primary: #007bff;
--color-success: #28a745;
--color-danger: #dc3545;

/* Typography */
--font-size-base: 1rem;
--font-weight-bold: 700;
--line-height-base: 1.5;

/* Spacing */
--spacing-1: 0.25rem;
--spacing-4: 1rem;

/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-lg: 0 20px 25px rgba(0,0,0,0.1);

/* And many more! */

2. Utility Classes

Comprehensive utility classes for rapid development:

<!-- Display -->
<div class="d-flex justify-center align-center">

<!-- Spacing -->
<div class="m-4 p-3">

<!-- Text -->
<p class="text-center font-weight-bold text-primary">

<!-- Background -->
<div class="bg-primary text-white">

<!-- Borders & Shadows -->
<div class="border rounded shadow-lg">

3. Component Classes

Ready-to-use component styles:

Buttons

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

Cards

<div class="card">
  <div class="card-header">Card Title</div>
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Content goes here</p>
  </div>
  <div class="card-footer">Footer</div>
</div>

Forms

<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="form-control" placeholder="Enter email">
  <small class="form-text">We'll never share your email.</small>
</div>

Alerts

<div class="alert alert-success">Success message!</div>
<div class="alert alert-danger">Error message!</div>
<div class="alert alert-warning">Warning message!</div>

Badges

<span class="badge badge-primary">New</span>
<span class="badge badge-success">Active</span>
<span class="badge badge-danger">Sold Out</span>

4. Animations

Pre-built animation classes:

<!-- Fade animations -->
<div class="fade-in">Fades in</div>

<!-- Slide animations -->
<div class="slide-in-up">Slides up</div>
<div class="slide-in-left">Slides from left</div>

<!-- Scale animations -->
<div class="scale-in">Scales in</div>

<!-- Special effects -->
<div class="pulse">Pulsing element</div>
<div class="bounce">Bouncing element</div>
<div class="spin">Spinning element</div>

<!-- Hover effects -->
<div class="hover-lift">Lifts on hover</div>
<div class="hover-scale">Scales on hover</div>

🎯 Complete Examples

Vue 3 Component

<template>
  <div class="container">
    <div class="card shadow-lg">
      <div class="card-header">
        <h2 class="card-title">User Profile</h2>
      </div>
      <div class="card-body">
        <form>
          <div class="form-group">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" v-model="name">
          </div>
          <div class="form-group">
            <label class="form-label">Email</label>
            <input type="email" class="form-control" v-model="email">
          </div>
          <div class="d-flex justify-between mt-4">
            <button class="btn btn-secondary" @click="cancel">Cancel</button>
            <button class="btn btn-primary" @click="save">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const name = ref('')
const email = ref('')

const save = () => {
  console.log('Saving...', { name: name.value, email: email.value })
}

const cancel = () => {
  name.value = ''
  email.value = ''
}
</script>

Vue 2 Component

<template>
  <div class="container">
    <div class="card">
      <div class="card-body">
        <h3 class="card-title text-primary">Dashboard</h3>
        <div class="d-flex flex-wrap">
          <div class="p-3 m-2 bg-success text-white rounded">
            <span class="badge badge-primary">New</span>
            Stats Card
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

React Component

import React, { useState } from 'react'
import '@jaiswald159/shared-css-library/global.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="container">
      <div className="card shadow-md">
        <div className="card-body text-center">
          <h1 className="card-title">Counter: {count}</h1>
          <div className="d-flex justify-center mt-4">
            <button 
              className="btn btn-danger mr-2" 
              onClick={() => setCount(count - 1)}
            >
              Decrement
            </button>
            <button 
              className="btn btn-primary" 
              onClick={() => setCount(count + 1)}
            >
              Increment
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

🎨 Customization

Override CSS Variables

You can easily customize the library by overriding CSS variables:

/* your-custom-styles.css */
:root {
  /* Change primary color */
  --color-primary: #ff6b6b;
  --color-primary-dark: #ee5a52;
  
  /* Change font family */
  --font-family-base: 'Inter', sans-serif;
  
  /* Change spacing scale */
  --spacing-4: 1.5rem;
  
  /* Change border radius */
  --radius-base: 8px;
}

Dark Mode

The library includes built-in dark mode support:

<!-- Add 'dark' class to enable dark mode -->
<body class="dark">
  <!-- Your app -->
</body>

Or use the system preference (automatic):

/* Dark mode is automatically applied based on user's system preference */
@media (prefers-color-scheme: dark) {
  /* Dark mode variables are automatically applied */
}

📱 Responsive Design

All utility classes include responsive variants:

<!-- Hide on small screens, show on medium+ -->
<div class="d-none d-md-block">
  Desktop content
</div>

<!-- Stack on mobile, horizontal on tablet+ -->
<div class="d-flex flex-column flex-md-row">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Breakpoints:

• xs: 0px+
• sm: 576px+
• md: 768px+
• lg: 992px+
• xl: 1200px+
• 2xl: 1400px+

🔧 Build Integration

Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

Vite

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // Vite handles CSS imports automatically
})

Rollup

// rollup.config.js
import postcss from 'rollup-plugin-postcss'

export default {
  plugins: [
    postcss({
      extensions: ['.css']
    })
  ]
}

📚 Documentation

• Variables: See styles/variables.css for all available CSS variables
• Utilities: See styles/utilities.css for all utility classes
• Components: See styles/components.css for component classes
• Animations: See styles/animations.css for animation classes

🤝 Compatibility

✅ Vue 2 - Works perfectly ✅ Vue 3 - Works perfectly ✅ Nuxt 2 - Works perfectly ✅ Nuxt 3 - Works perfectly ✅ React - Works perfectly ✅ Angular - Works perfectly ✅ Svelte - Works perfectly ✅ Vanilla JS - Works perfectly ✅ Any framework - Works perfectly

📝 License

MIT © Deepak Jaiswal

🚀 Quick Start Checklist

• [ ] Install: npm install @jaiswald159/shared-css-library
• [ ] Import in your main file: import '@jaiswald159/shared-css-library/global.css'
• [ ] Start using utility classes: <div class="d-flex justify-center">
• [ ] Use components: <button class="btn btn-primary">Click Me</button>
• [ ] Customize variables if needed
• [ ] Enjoy! 🎉

📖 More Resources

• Check USAGE_GUIDE.md for detailed usage examples
• Check CUSTOMIZATION.md for theming and customization
• Check COMPONENTS.md for all available components
• Check UTILITIES.md for all utility classes

Pure CSS. Universal. Simple. Powerful. 🎨