BODUI - Modern UI Component Library

BODUI is a lightweight, modern UI component library that provides a comprehensive set of components and utilities for building beautiful web applications. It's designed to be easy to use, highly customizable, and follows modern web development best practices.

Features

• 🎨 Modern and clean design
• 📱 Fully responsive components
• 🎯 Utility-first approach
• 🌙 Dark mode support
• 🎭 Highly customizable
• 🚀 Lightweight and fast
• 🛠️ Easy to use and integrate

Installation

CDN

Add the following to your HTML file:

<!-- Development version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tayabraza/bodui/bodui.css">
<script src="https://cdn.jsdelivr.net/gh/tayabraza/bodui/bodui.js"></script>

<!-- Production version (minified) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tayabraza/bodui/bodui.min.css">
<script src="https://cdn.jsdelivr.net/gh/tayabraza/bodui/bodui.min.js"></script>

NPM

npm install bodui

Quick Start

<!-- Basic button example -->
<button class="pc-btn pc-btn-primary">Primary Button</button>
<button class="pc-btn pc-btn-secondary">Secondary Button</button>

<!-- Card example -->
<div class="pc-card">
    <div class="pc-card-header">
        <h3>Card Title</h3>
    </div>
    <div class="pc-card-body">
        <p>Card content goes here.</p>
    </div>
</div>

Components

Elements

• Buttons
• Inputs
• Forms
• Tables
• Progress
• Toast
• Banners
• Breadcrumbs
• Toggle Switch
• Toggle Buttons
• Chips
• Pagination

Components

• Cards
• Modals
• Dropdowns
• Tabs
• Accordions
• Carousels
• Tooltips
• File Upload
• Top Navigation
• Bottom Navigation

Customization

BODUI can be customized using CSS variables. Override these variables in your CSS:

:root {
    /* Colors */
    --color-primary-600: #2563eb;
    --color-neutral-600: #4b5563;
    
    /* Spacing */
    --space-sm: 1rem;
    --space-md: 1.25rem;
    --space-lg: 1.5rem;
    
    /* Typography */
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
}

Development

Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)

Setup

1. Clone the repository:

git clone https://github.com/tayabraza/bodui.git
cd bodui

2. Install dependencies:

npm install

3. Build the project:

npm run build

This will create minified versions of the CSS and JavaScript files:

• bodui.min.css
• bodui.min.js

Project Structure

bodui/
├── components/          # Component styles
│   ├── basic/          # Basic elements
│   ├── composite/      # Composite components
│   ├── complex/        # Complex components
│   ├── layouts/        # Layout utilities
│   ├── utilities/      # Utility classes
│   ├── animations/     # Animation styles
│   └── effects/        # Visual effects
├── bodui.css           # Main CSS file
├── bodui.js            # Main JavaScript file
├── bodui.min.css       # Minified CSS (generated)
├── bodui.min.js        # Minified JS (generated)
├── build.js            # Build script
└── package.json        # Project configuration

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

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

Author

Tayab Raza

• GitHub: @tayabraza