Nexcss-framework NPM

NexCSS Framework 🎨

📦 Installation & Setup

1. Create a New Project

mkdir my-project
cd my-project
npm init -y

2. Install NexCSS

npm install nexcss-framework

3. Initialize Configuration

npx nexcss init

This will create a nexcss.config.js file in your project root.

4. Create Your CSS File

/* styles/main.css */
@import 'nexcss-framework/dist/base.css';

/* Your custom styles here */

5. Add Scripts to package.json

{
  "scripts": {
    "build": "nexcss build",
    "dev": "nexcss build --watch"
  }
}

🚀 Usage

Basic HTML Setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My NexCSS Project</title>
    <link href="dist/styles.css" rel="stylesheet">
</head>
<body>
    <!-- Your content here -->
</body>
</html>

Using Utility Classes

<!-- Basic Example -->
<div class="flex items-center justify-between p-4 bg-primary text-white">
    <h1 class="text-2xl font-bold">Hello NexCSS</h1>
    <button class="px-4 py-2 bg-secondary hover:bg-opacity-90">
        Click Me
    </button>
</div>

Configuration (nexcss.config.js)

module.exports = {
  theme: {
    colors: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
    spacing: {
      1: '0.25rem',
      2: '0.5rem',
      3: '0.75rem',
      4: '1rem',
    },
    breakpoints: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
  },
  plugins: [],
  variants: ['responsive', 'hover', 'focus'],
};

Development Workflow

Start development server:

npm run dev

Build for production:

npm run build

Common Patterns

Responsive Design

<div class="w-full md:w-1/2 lg:w-1/3">
    Responsive width
</div>

Hover States

<button class="bg-primary hover:bg-secondary transition-colors">
    Hover me
</button>

Dark Mode

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
    Dark mode support
</div>

🎯 Features

Core Features

🎨 Utility-First Approach
📱 Responsive Design System
🌙 Dark Mode Support
🔌 Plugin System
🎭 Custom Variants
📦 Zero Runtime
🛠️ PostCSS Integration

Advanced Features

Plugin System

// Example plugin usage
module.exports = {
  plugins: [
    require('@nexcss/typography'),
    require('@nexcss/forms'),
  ]
}

Custom Utilities

/* Define custom utilities */
@layer utilities {
  .custom-class {
    @apply bg-primary text-white p-4;
  }
}

🛠️ Development

# Install dependencies
npm install

# Run tests
npm test

# Build the framework
npm run build

# Watch for changes
npm run dev

📚 Documentation

For detailed documentation and examples, visit our documentation site (coming soon).

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

css framework utility tailwind postcss responsive dark-mode react vue svelte

1.2.0

5 months ago

1.1.0

5 months ago

1.0.0

5 months ago