canvasly-ui

v2.0.0

Published

4 months ago

A calm, minimalist design system with timeless aesthetics

0High
0Medium
0Low

syedzaman

design-system ui components minimalist css

Canvasly UI

✨ Philosophy

Canvasly UI embraces four core principles that guide every design decision:

🕊️ Calm & Polite → Soft borders, neutral colors, no flashy animations
⏳ Timeless Minimalism → Whitespace, elegant typography, breathable spacing
🎯 Micro-interactions → Subtle press-down effects, smooth transitions, tactile feedback
📏 Consistency → Predictable spacing, typography, and colors across all components

🚀 Quick Start

CDN Installation (Recommended)

<!-- Include Canvasly UI -->
<link rel="stylesheet" href="https://unpkg.com/canvasly-ui/dist/canvasly.css">
<script src="https://unpkg.com/canvasly-ui/dist/canvasly.js"></script>

<!-- Include Lucide Icons -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>

NPM Installation

npm install canvasly-ui

import 'canvasly-ui/dist/canvasly.css'
import 'canvasly-ui/dist/canvasly.js'

Basic Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Canvasly App</title>
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    
    <!-- Canvasly UI -->
    <link rel="stylesheet" href="https://unpkg.com/canvasly-ui/dist/canvasly.css">
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
</head>
<body>
    <div class="canvas-container">
        <div class="canvas-card">
            <div class="canvas-card__header">
                <h2 class="canvas-card__title">Welcome to Canvasly UI</h2>
                <p class="canvas-card__subtitle">A calm, minimalist design system</p>
            </div>
            <div class="canvas-card__body">
                <p>Start building beautiful interfaces with our components.</p>
                <button class="canvas-btn canvas-btn--primary">
                    <i data-lucide="rocket"></i>
                    Get Started
                </button>
            </div>
        </div>
    </div>
    
    <script src="https://unpkg.com/canvasly-ui/dist/canvasly.js"></script>
    <script>lucide.createIcons();</script>
</body>
</html>

🧩 Components Overview

Canvasly UI includes 25+ carefully crafted components organized into logical categories:

🔘 Form Controls

Buttons - Primary, secondary, ghost variants with micro-interactions
Input Fields - Text, email, password, textarea with focus states
Dropdowns - Clean selects with smooth animations
Checkboxes & Radio - Custom styled with smooth transitions
Switches - iOS-style toggles with motion blur effects
Sliders - Range inputs with custom styling

🧭 Navigation

Classic Tabs - Traditional tabs with sliding indicator
Pill Tabs - Modern pill-style navigation
Breadcrumbs - Clean navigation trails
Pagination - Complete pagination with ellipsis

📊 Data Display

Badges - Labels and status indicators
Progress Bars - Linear progress with animations
Spinners - Loading indicators (circular and dots)
Tooltips - Contextual information overlays
Avatars - User profile images with status indicators
Rating - Star and dot-based rating systems

💬 Feedback & Alerts

Toast Notifications - Non-intrusive messaging
Alert Messages - Contextual alerts with icons
Accordion - Collapsible content sections
Modals - Dialog boxes with smooth animations

📐 Layout & Structure

Grid System - 12-column responsive grid
Cards - Content containers with variants
Dividers - Visual separators and spacers

🚀 Advanced Components

Chips - Removable tags and filters
Carousel - Image/content sliders with touch support

🎨 Design Tokens

All design decisions are centralized in CSS custom properties for easy customization:

:root {
  /* Colors */
  --canvas-bg: #f9f9f9;
  --canvas-surface: #ffffff;
  --canvas-border: #e5e5e5;
  --canvas-text: #333333;
  --canvas-muted: #666666;
  --canvas-primary: #2563eb;
  
  /* Typography */
  --canvas-font-family: 'Inter', system-ui, sans-serif;
  --canvas-font-size-sm: 14px;
  --canvas-font-size-base: 16px;
  --canvas-font-size-lg: 20px;
  
  /* Spacing */
  --canvas-space-2: 8px;
  --canvas-space-4: 16px;
  --canvas-space-6: 24px;
  
  /* Border Radius */
  --canvas-radius-sm: 4px;
  --canvas-radius-md: 12px;
  
  /* Transitions */
  --canvas-transition: all 0.15s ease;
}

📱 Mobile First & Responsive

Every component is built with mobile-first responsive design:

Touch-friendly interactions and sizing
Flexible grid system that adapts to any screen
Consistent spacing across all breakpoints
Optimized performance for mobile devices

🛠️ Development

Local Development

# Clone the repository
git clone https://github.com/canvasly/canvasly-ui.git
cd canvasly-ui

# Install dependencies
npm install

# Build distribution files
npm run build

# Start development server
npm run dev

Project Structure

canvasly-ui/
├── src/
│   ├── tokens.css          # Design tokens
│   ├── reset.css           # CSS reset
│   └── components/         # Individual components
├── dist/                   # Built files
├── demo-final.html         # Complete demo
├── docs.html              # Documentation
└── tutorial.html          # Getting started tutorial

Build Commands

npm run build       # Build CSS and JS bundles
npm run build:css   # Build CSS only
npm run build:js    # Build JS only
npm run dev         # Start development server

🌐 Browser Support

Canvasly UI supports all modern browsers:

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

📖 Documentation

Live Demo - Interactive showcase of all components
Documentation - Complete API reference and guides
Tutorial - Step-by-step getting started guide
Introduction - Design philosophy and principles

🤝 Contributing

We welcome contributions! Please read our Code of Conduct first.

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

📄 License

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

🙏 Acknowledgments

Inter Font - Beautiful typography
Lucide Icons - Clean, consistent icons
Contributor Covenant - Code of conduct

📞 Support

Documentation: docs.html
Issues: GitHub Issues
Email: [email protected]
Community: Discord