npm package: @jaiswald159/shared-css-library
Description: A universal CSS library that works with any Vue version (Vue 2, Vue 3, Vue 4+) or any JavaScript framework
Author: Deepak Jaiswal
Latest version: 1.0.2

# @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

```bash
npm install @jaiswald159/shared-css-library
```

---

## 🚀 Usage

### Import All Styles (Recommended for getting started)

**Vue 3 (main.js or main.ts):**

```javascript
import '@jaiswald159/shared-css-library/global.css'
```

**Vue 2 (main.js):**

```javascript
import '@jaiswald159/shared-css-library/global.css'
```

**Nuxt 3 (nuxt.config.ts):**

```typescript
export default defineNuxtConfig({
  css: ['@jaiswald159/shared-css-library/global.css']
})
```

**Nuxt 2 (nuxt.config.js):**

```javascript
export default {
  css: ['@jaiswald159/shared-css-library/global.css']
}
```

**React (App.js or index.js):**

```javascript
import '@jaiswald159/shared-css-library/global.css'
```

**Angular (styles.css or angular.json):**

```css
@import '@jaiswald159/shared-css-library/global.css';
```

**Plain HTML:**

```html
<link rel="stylesheet" href="node_modules/@jaiswald159/shared-css-library/global.css">
```

### Import Modular Styles (For better tree-shaking)

```javascript
// 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:

```css
/* 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:

```html
<!-- 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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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:

```html
<!-- 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

```vue
<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

```vue
<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

```jsx
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:

```css
/* 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:

```html
<!-- Add 'dark' class to enable dark mode -->
<body class="dark">
  <!-- Your app -->
</body>
```

Or use the system preference (automatic):

```css
/* 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:

```html
<!-- 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

```javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}
```

### Vite

```javascript
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // Vite handles CSS imports automatically
})
```

### Rollup

```javascript
// 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.** 🎨