CNP - Component & Pattern Workspace

A comprehensive, production-ready development workspace for building websites and web applications quickly.

🚀 Quick Start

Create a New Project

# Using the setup script
./create-project.sh

# Or manually
cd dev-workspace
cp starters/html-template.html ../my-project/index.html
cp -r design-system ../my-project/

Development Options

Option 1: VS Code Live Server (Recommended for beginners)

1. Open dev-workspace.code-workspace in VS Code
2. Install recommended extensions
3. Right-click HTML file → "Open with Live Server"

Option 2: Docker (Production-like environment)

docker-compose up -d
# Visit: http://localhost:8080

📁 Project Structure

CNP/
├── dev-workspace/          # Main workspace
│   ├── components/         # Reusable HTML components
│   ├── design-system/      # CSS framework
│   ├── utilities/          # JavaScript helpers
│   └── starters/           # Project templates
├── create-project.sh       # Quick setup script
├── QUICKSTART.md          # Component reference
├── SETUP_GUIDE.md         # Full setup guide
└── WORKSPACE_OVERVIEW.md  # Feature overview

📚 Documentation

• QUICKSTART.md - Component cheat sheet and common patterns
• SETUP_GUIDE.md - VS Code + Docker setup instructions
• WORKSPACE_OVERVIEW.md - Features and capabilities
• dev-workspace/README.md - Workspace details

🎨 What's Included

Design System

• CSS variables for colors, typography, spacing
• Dark mode support
• Responsive utilities
• Animation helpers

Components

• Navigation bars
• Hero sections
• Cards and grids
• Forms (contact, login, multi-step)

JavaScript Utilities

• DOM manipulation
• API helpers
• Form validation
• Local storage
• Date/time formatting

Starter Templates

• Complete HTML template
• React component library

🔧 Requirements

• Visual Studio Code (recommended)
• Docker (optional, for production-like environment)
• Modern browser (Chrome, Firefox, Safari, Edge)

💡 Usage Examples

Create a Landing Page

./create-project.sh
# Follow prompts
cd my-project
code .

Use a Component

<!-- Copy from dev-workspace/components/ -->
<link rel="stylesheet" href="design-system/core.css">
<link rel="stylesheet" href="design-system/components.css">

<div class="card">
  <h3 class="card-title">My Card</h3>
  <p>Content here</p>
</div>

🎯 Best Practices

1. Always start from a template
2. Use CSS variables for theming
3. Keep components modular
4. Reference QUICKSTART.md for syntax
5. Use Git for version control

📝 License

MIT License - Feel free to use for personal or commercial projects

🆘 Support

• Check documentation files for guides
• Review component examples in dev-workspace/components/
• Use the setup script for automated project creation

Built for rapid web development 🚀