create-aziz-app 2.0.3 → 2.0.4

package/bin/create-aziz-app.js

@@ -62,10 +62,22 @@ async function main() {
     const includeApiExamples = await question('   Include example API routes? (Y/n): ');
     const includeDocs = await question('   Include documentation? (Y/n): ');
 
+    // Ask for CSS framework
+    console.log('\n🎨 CSS Framework:');
+    console.log('   1. None (custom CSS)');
+    console.log('   2. Bootstrap 5');
+    console.log('   3. Tailwind CSS');
+    const cssChoice = await question('   Choose (1/2/3): ');
+    
+    let cssFramework = 'none';
+    if (cssChoice === '2') cssFramework = 'bootstrap';
+    else if (cssChoice === '3') cssFramework = 'tailwind';
+
     const features = {
         examples: includeExamples.toLowerCase() !== 'n' && includeExamples.toLowerCase() !== 'no',
         apiExamples: includeApiExamples.toLowerCase() !== 'n' && includeApiExamples.toLowerCase() !== 'no',
-        docs: includeDocs.toLowerCase() !== 'n' && includeDocs.toLowerCase() !== 'no'
+        docs: includeDocs.toLowerCase() !== 'n' && includeDocs.toLowerCase() !== 'no',
+        cssFramework: cssFramework
     };
 
     console.log(`\n⚡ Creating "${projectName}"...\n`);
@@ -81,6 +93,9 @@ async function main() {
     // Update dev server port
     updateDevServerPort(targetDir, port);
 
+    // Setup CSS framework
+    setupCSSFramework(targetDir, features.cssFramework);
+
     console.log(`✅ Done! Your project is ready.\n`);
     console.log(`🎉 Welcome to Aziz App - A React-like Framework\n`);
     console.log(`📁 Created project: ${projectName}\n`);
@@ -104,8 +119,13 @@ async function main() {
     console.log(`   • File-based Routing  - pages/About.jsx → #/about`);
     console.log(`   • API Routes          - Next.js-like API system`);
     console.log(`   • Auto-Import         - No manual script tags!`);
-    console.log(`   • Live Reload         - Instant browser refresh\n`);
-    console.log(`💡 Quick tips:\n`);
+    console.log(`   • Live Reload         - Instant browser refresh`);
+    if (features.cssFramework === 'bootstrap') {
+        console.log(`   • Bootstrap 5         - Responsive CSS framework`);
+    } else if (features.cssFramework === 'tailwind') {
+        console.log(`   • Tailwind CSS        - Utility-first CSS framework`);
+    }
+    console.log(`\n💡 Quick tips:\n`);
     console.log(`   • Create pages/MyPage.jsx → Auto-imported!`);
     console.log(`   • Create api/todos.js → Auto-imported!`);
     console.log(`   • Just save and browser refreshes automatically`);
@@ -170,6 +190,192 @@ function updateDevServerPort(targetDir, port) {
     }
 }
 
+// Setup CSS framework
+function setupCSSFramework(targetDir, framework) {
+    const htmlPath = path.join(targetDir, 'app.html');
+    if (!fs.existsSync(htmlPath)) return;
+    
+    let html = fs.readFileSync(htmlPath, 'utf8');
+    
+    if (framework === 'bootstrap') {
+        // Replace globals.css with Bootstrap CDN
+        html = html.replace(
+            '<link rel="stylesheet" href="styles/globals.css">',
+            `<!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">`
+        );
+        
+        // Add Bootstrap JS before closing body tag
+        const bootstrapJS = `
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+`;
+        html = html.replace('</body>', bootstrapJS + '</body>');
+        
+        // Update components
+        updateComponentsForBootstrap(targetDir);
+        
+    } else if (framework === 'tailwind') {
+        // Replace globals.css with Tailwind CSS
+        html = html.replace(
+            '<link rel="stylesheet" href="styles/globals.css">',
+            `<!-- Tailwind CSS -->
+    <link rel="stylesheet" href="styles/tailwind.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#61dafb',
+                        dark: '#282c34'
+                    }
+                }
+            }
+        }
+    </script>`
+        );
+        
+        // Update components
+        updateComponentsForTailwind(targetDir);
+    }
+    // If 'none', keep globals.css as is
+    
+    fs.writeFileSync(htmlPath, html);
+}
+
+// Update components for Bootstrap
+function updateComponentsForBootstrap(targetDir) {
+    // Update Navbar
+    const navbarPath = path.join(targetDir, 'components', 'Navbar.jsx');
+    if (fs.existsSync(navbarPath)) {
+        const navbarContent = `/** @jsx h */
+
+function Navbar() {
+    const path = getCurrentPath();
+
+    return (
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+            <div class="container-fluid">
+                <span class="navbar-brand" onClick={() => navigate("home")} style={{ cursor: 'pointer' }}>
+                    ⚡ AzizApp
+                </span>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a href="#/home" class={\`nav-link \${path === "home" ? "active" : ""}\`}>Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#/about" class={\`nav-link \${path === "about" ? "active" : ""}\`}>About</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#/contact" class={\`nav-link \${path === "contact" ? "active" : ""}\`}>Contact</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#/test" class={\`nav-link \${path === "test" ? "active" : ""}\`}>Test</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#/api-demo" class={\`nav-link \${path === "api-demo" ? "active" : ""}\`}>API Demo</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    );
+}
+`;
+        fs.writeFileSync(navbarPath, navbarContent);
+    }
+    
+    // Update Footer
+    const footerPath = path.join(targetDir, 'components', 'Footer.jsx');
+    if (fs.existsSync(footerPath)) {
+        const footerContent = `/** @jsx h */
+
+function Footer() {
+    return (
+        <footer class="bg-dark text-light text-center py-3 mt-auto">
+            <div class="container">
+                <p class="mb-0">Made with ⚡ AzizApp</p>
+            </div>
+        </footer>
+    );
+}
+`;
+        fs.writeFileSync(footerPath, footerContent);
+    }
+}
+
+// Update components for Tailwind
+function updateComponentsForTailwind(targetDir) {
+    // Update Navbar
+    const navbarPath = path.join(targetDir, 'components', 'Navbar.jsx');
+    if (fs.existsSync(navbarPath)) {
+        const navbarContent = `/** @jsx h */
+
+function Navbar() {
+    const path = getCurrentPath();
+
+    return (
+        <nav class="bg-dark shadow-lg">
+            <div class="container mx-auto px-4">
+                <div class="flex items-center justify-between h-16">
+                    <span 
+                        class="text-primary text-xl font-bold cursor-pointer hover:text-blue-300 transition"
+                        onClick={() => navigate("home")}
+                    >
+                        ⚡ AzizApp
+                    </span>
+                    <div class="flex space-x-4">
+                        <a href="#/home" class={\`px-3 py-2 rounded-md text-sm font-medium transition \${path === "home" ? "bg-primary text-dark" : "text-gray-300 hover:bg-gray-700 hover:text-white"}\`}>
+                            Home
+                        </a>
+                        <a href="#/about" class={\`px-3 py-2 rounded-md text-sm font-medium transition \${path === "about" ? "bg-primary text-dark" : "text-gray-300 hover:bg-gray-700 hover:text-white"}\`}>
+                            About
+                        </a>
+                        <a href="#/contact" class={\`px-3 py-2 rounded-md text-sm font-medium transition \${path === "contact" ? "bg-primary text-dark" : "text-gray-300 hover:bg-gray-700 hover:text-white"}\`}>
+                            Contact
+                        </a>
+                        <a href="#/test" class={\`px-3 py-2 rounded-md text-sm font-medium transition \${path === "test" ? "bg-primary text-dark" : "text-gray-300 hover:bg-gray-700 hover:text-white"}\`}>
+                            Test
+                        </a>
+                        <a href="#/api-demo" class={\`px-3 py-2 rounded-md text-sm font-medium transition \${path === "api-demo" ? "bg-primary text-dark" : "text-gray-300 hover:bg-gray-700 hover:text-white"}\`}>
+                            API Demo
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    );
+}
+`;
+        fs.writeFileSync(navbarPath, navbarContent);
+    }
+    
+    // Update Footer
+    const footerPath = path.join(targetDir, 'components', 'Footer.jsx');
+    if (fs.existsSync(footerPath)) {
+        const footerContent = `/** @jsx h */
+
+function Footer() {
+    return (
+        <footer class="bg-dark text-gray-400 text-center py-4 mt-auto">
+            <div class="container mx-auto">
+                <p>Made with ⚡ AzizApp</p>
+            </div>
+        </footer>
+    );
+}
+`;
+        fs.writeFileSync(footerPath, footerContent);
+    }
+}
+
 // Run main function
 main().catch(err => {
     console.error('❌ Error:', err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A React-like framework with state management, routing, and API routes - Create apps with auto-import, live reload, and Next.js-like features",
   "keywords": [
     "react",

package/template/README.md

@@ -122,6 +122,14 @@ const response = await fetchApi('/api/todos');
 const data = await response.json();
 ```
 
+### CSS Frameworks
+Choose your preferred styling:
+- **Custom CSS** - Built-in responsive styles
+- **Bootstrap 5** - Popular component framework
+- **Tailwind CSS** - Utility-first framework
+
+The CLI will automatically set up your chosen framework!
+
 ### Auto-Import
 - Create files in `pages/`, `components/`, or `api/`
 - Dev server automatically detects them

package/template/app.html

@@ -5,116 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>My Aziz App</title>
 
+    <!-- Global Styles -->
+    <link rel="stylesheet" href="styles/globals.css">
+
     <!-- Babel compiles JSX in the browser -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-
-    <style>
-        /* ---- Reset ---- */
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f5f5f5;
-            color: #333;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-
-        /* ---- Navbar ---- */
-        nav {
-            background-color: #282c34;
-            padding: 16px 32px;
-            display: flex;
-            align-items: center;
-            gap: 24px;
-        }
-        nav .brand {
-            color: #61dafb;
-            font-size: 20px;
-            font-weight: bold;
-            cursor: pointer;
-        }
-        nav a {
-            color: #ffffffcc;
-            text-decoration: none;
-            font-size: 15px;
-            transition: color 0.2s;
-        }
-        nav a:hover, nav a.active { color: #61dafb; }
-
-        /* ---- Page wrapper ---- */
-        #root {
-            flex: 1;
-            padding: 40px 32px;
-            max-width: 900px;
-            width: 100%;
-            margin: 0 auto;
-        }
-
-        /* ---- Footer ---- */
-        footer {
-            background-color: #282c34;
-            color: #888;
-            text-align: center;
-            padding: 16px;
-            font-size: 13px;
-        }
-
-        /* ---- Utility styles ---- */
-        h1 { margin-bottom: 16px; color: #282c34; }
-        h2 { margin-bottom: 12px; }
-        p  { line-height: 1.6; margin-bottom: 12px; color: #555; }
-
-        .card {
-            background: white;
-            border-radius: 10px;
-            padding: 24px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-            margin-bottom: 20px;
-        }
-
-        .btn {
-            display: inline-block;
-            padding: 10px 22px;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 15px;
-            transition: opacity 0.2s;
-        }
-        .btn:hover { opacity: 0.85; }
-        .btn-primary { background-color: #61dafb; color: #282c34; font-weight: bold; }
-        .btn-danger  { background-color: #ff6b6b; color: white; }
-        .btn-grey    { background-color: #ccc; color: #333; }
-
-        /* ---- Counter (on home page) ---- */
-        .count-display {
-            font-size: 64px;
-            font-weight: bold;
-            color: #282c34;
-            margin: 16px 0;
-            text-align: center;
-        }
-        .counter-actions { display: flex; gap: 12px; justify-content: center; margin-top: 8px; }
-
-        /* ---- Form ---- */
-        form { display: flex; flex-direction: column; gap: 12px; }
-        input, textarea {
-            padding: 10px 14px;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            font-size: 15px;
-            outline: none;
-            transition: border-color 0.2s;
-        }
-        input:focus, textarea:focus { border-color: #61dafb; }
-        textarea { resize: vertical; min-height: 100px; }
-
-        /* ---- 404 ---- */
-        .not-found { text-align: center; padding: 60px 0; }
-        .not-found h1 { font-size: 80px; color: #61dafb; }
-    </style>
 </head>
 <body>
 

package/template/docs/CSS-FRAMEWORKS.md

@@ -0,0 +1,221 @@
+# CSS Frameworks Guide
+
+## Overview
+
+Aziz App supports three CSS options:
+1. **Custom CSS** - Built-in custom styles
+2. **Bootstrap 5** - Popular component framework
+3. **Tailwind CSS** - Utility-first framework
+
+## Bootstrap 5
+
+### What's Included
+
+When you choose Bootstrap, the CLI automatically adds:
+- Bootstrap 5.3.2 CSS (CDN)
+- Bootstrap Icons
+- Bootstrap 5 JS Bundle
+- Updated Navbar with Bootstrap classes
+- Updated Footer with Bootstrap classes
+
+### Using Bootstrap
+
+```javascript
+// Example: Bootstrap Button
+<button class="btn btn-primary">Click Me</button>
+
+// Example: Bootstrap Card
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title">Card Title</h5>
+        <p class="card-text">Some content</p>
+    </div>
+</div>
+
+// Example: Bootstrap Grid
+<div class="container">
+    <div class="row">
+        <div class="col-md-6">Column 1</div>
+        <div class="col-md-6">Column 2</div>
+    </div>
+</div>
+```
+
+### Bootstrap Components
+
+Available components:
+- Buttons, Cards, Modals
+- Forms, Inputs, Validation
+- Navbar, Dropdowns, Tabs
+- Alerts, Badges, Progress bars
+- Grid system, Flexbox utilities
+
+### Resources
+
+- [Bootstrap Docs](https://getbootstrap.com/docs/5.3/)
+- [Bootstrap Icons](https://icons.getbootstrap.com/)
+- [Bootstrap Examples](https://getbootstrap.com/docs/5.3/examples/)
+
+## Tailwind CSS
+
+### What's Included
+
+When you choose Tailwind, the CLI automatically adds:
+- Tailwind CSS CDN (Play CDN)
+- Custom color configuration
+- Updated Navbar with Tailwind classes
+- Updated Footer with Tailwind classes
+
+### Using Tailwind
+
+```javascript
+// Example: Tailwind Button
+<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+    Click Me
+</button>
+
+// Example: Tailwind Card
+<div class="bg-white shadow-lg rounded-lg p-6">
+    <h2 class="text-2xl font-bold mb-4">Card Title</h2>
+    <p class="text-gray-700">Some content</p>
+</div>
+
+// Example: Tailwind Grid
+<div class="container mx-auto">
+    <div class="grid grid-cols-2 gap-4">
+        <div>Column 1</div>
+        <div>Column 2</div>
+    </div>
+</div>
+```
+
+### Tailwind Utilities
+
+Common utilities:
+- Layout: `flex`, `grid`, `container`
+- Spacing: `p-4`, `m-2`, `space-x-4`
+- Colors: `bg-blue-500`, `text-red-600`
+- Typography: `text-xl`, `font-bold`
+- Effects: `shadow-lg`, `rounded-lg`
+
+### Custom Colors
+
+Pre-configured colors:
+- `primary` - #61dafb (Aziz blue)
+- `dark` - #282c34 (Dark background)
+
+```javascript
+<div class="bg-primary text-dark">Custom colors!</div>
+```
+
+### Resources
+
+- [Tailwind Docs](https://tailwindcss.com/docs)
+- [Tailwind Cheat Sheet](https://nerdcave.com/tailwind-cheat-sheet)
+- [Tailwind Components](https://tailwindui.com/components)
+
+## Custom CSS
+
+### What's Included
+
+The default custom CSS includes:
+- Reset styles
+- Navbar and Footer styles
+- Card, Button, Form styles
+- Utility classes
+- Responsive design
+
+### Using Custom CSS
+
+```javascript
+// Example: Custom Button
+<button class="btn btn-primary">Click Me</button>
+
+// Example: Custom Card
+<div class="card">
+    <h2>Card Title</h2>
+    <p>Some content</p>
+</div>
+
+// Example: Custom Form
+<form>
+    <input type="text" placeholder="Enter text" />
+    <button class="btn btn-primary">Submit</button>
+</form>
+```
+
+### Available Classes
+
+**Buttons:**
+- `.btn` - Base button
+- `.btn-primary` - Primary button (blue)
+- `.btn-danger` - Danger button (red)
+- `.btn-grey` - Grey button
+
+**Layout:**
+- `.card` - Card container
+- `.count-display` - Large number display
+- `.counter-actions` - Button group
+
+**Forms:**
+- `input`, `textarea` - Styled inputs
+- `form` - Styled form
+
+## Switching Frameworks
+
+### After Project Creation
+
+If you want to switch frameworks after creating your project:
+
+**To Bootstrap:**
+1. Add Bootstrap CDN to `app.html`:
+```html
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+2. Update your components with Bootstrap classes
+
+**To Tailwind:**
+1. Add Tailwind CDN to `app.html`:
+```html
+<script src="https://cdn.tailwindcss.com"></script>
+```
+
+2. Update your components with Tailwind classes
+
+**To Custom CSS:**
+1. Remove framework CDN links from `app.html`
+2. Update your components with custom classes
+
+## Best Practices
+
+### Bootstrap
+- Use semantic HTML with Bootstrap classes
+- Leverage Bootstrap's grid system
+- Use Bootstrap components for consistency
+- Customize with Bootstrap variables
+
+### Tailwind
+- Use utility classes directly in JSX
+- Combine utilities for complex designs
+- Use responsive prefixes (`md:`, `lg:`)
+- Extract common patterns into components
+
+### Custom CSS
+- Keep styles in `<style>` tag in `app.html`
+- Use BEM naming convention
+- Create reusable utility classes
+- Keep specificity low
+
+## Tips
+
+1. **Consistency** - Stick to one framework per project
+2. **Performance** - CDN links are cached by browsers
+3. **Customization** - All frameworks can be customized
+4. **Learning** - Start with one framework and master it
+5. **Components** - Build reusable components regardless of framework
+
+## Examples
+
+Check the example pages in your project to see the chosen framework in action!

package/template/docs/STYLING.md

@@ -0,0 +1,269 @@
+# Styling Guide
+
+## Overview
+
+Aziz App uses external CSS files instead of inline styles for better organization and maintainability.
+
+## File Structure
+
+```
+styles/
+├── globals.css      ← Default custom CSS
+└── tailwind.css     ← Tailwind CSS (when selected)
+```
+
+## globals.css
+
+The default stylesheet that includes:
+- CSS Reset
+- Base body styles
+- Navbar and Footer styles
+- Card, Button, Form components
+- Typography styles
+- Utility classes
+
+### Usage
+
+```html
+<!-- Already included in app.html -->
+<link rel="stylesheet" href="styles/globals.css">
+```
+
+### Available Classes
+
+**Layout:**
+- `.card` - White card with shadow
+- `#root` - Main content wrapper
+
+**Buttons:**
+- `.btn` - Base button style
+- `.btn-primary` - Primary button (blue)
+- `.btn-danger` - Danger button (red)
+- `.btn-grey` - Grey button
+
+**Counter:**
+- `.count-display` - Large number display
+- `.counter-actions` - Button group
+
+**Forms:**
+- `input`, `textarea` - Styled form inputs
+- `form` - Flex column layout
+
+**404:**
+- `.not-found` - Centered 404 page
+
+## tailwind.css
+
+When using Tailwind CSS, this file provides:
+- Tailwind directives (@tailwind base, components, utilities)
+- Custom component classes
+- Custom utility classes
+- Theme extensions
+
+### Custom Colors
+
+```css
+.text-primary { color: #61dafb; }
+.bg-primary { background-color: #61dafb; }
+.text-dark { color: #282c34; }
+.bg-dark { background-color: #282c34; }
+```
+
+### Custom Components
+
+All the same classes from globals.css are available as Tailwind components:
+- `.card`
+- `.btn`, `.btn-primary`, `.btn-danger`, `.btn-grey`
+- `.count-display`
+- `.counter-actions`
+
+## Customizing Styles
+
+### Modify globals.css
+
+Edit `styles/globals.css` to change:
+- Colors
+- Spacing
+- Typography
+- Component styles
+
+```css
+/* Example: Change primary color */
+nav .brand {
+    color: #your-color;
+}
+
+.btn-primary {
+    background-color: #your-color;
+}
+```
+
+### Modify tailwind.css
+
+Edit `styles/tailwind.css` to:
+- Add custom components
+- Add custom utilities
+- Modify theme
+
+```css
+@layer components {
+    .my-custom-card {
+        @apply bg-white p-6 rounded-lg shadow-xl;
+    }
+}
+```
+
+### Add New CSS Files
+
+1. Create a new CSS file in `styles/`
+2. Link it in `app.html`:
+
+```html
+<link rel="stylesheet" href="styles/my-custom.css">
+```
+
+## Best Practices
+
+### Organization
+- Keep global styles in `globals.css`
+- Create separate files for large features
+- Use meaningful class names
+
+### Performance
+- Minimize CSS file size
+- Avoid deep nesting
+- Use CSS variables for themes
+
+### Maintainability
+- Comment complex styles
+- Group related styles
+- Use consistent naming
+
+## Responsive Design
+
+### Custom CSS
+
+```css
+/* Mobile first approach */
+.card {
+    padding: 16px;
+}
+
+/* Tablet and up */
+@media (min-width: 768px) {
+    .card {
+        padding: 24px;
+    }
+}
+```
+
+### Tailwind CSS
+
+```javascript
+// Use responsive prefixes
+<div class="p-4 md:p-6 lg:p-8">
+    Responsive padding
+</div>
+```
+
+## Dark Mode
+
+### Custom CSS
+
+```css
+/* Add dark mode support */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1a1a1a;
+        color: #f5f5f5;
+    }
+    
+    .card {
+        background-color: #2a2a2a;
+    }
+}
+```
+
+### Tailwind CSS
+
+```javascript
+// Use dark: prefix
+<div class="bg-white dark:bg-gray-800">
+    Dark mode support
+</div>
+```
+
+## CSS Variables
+
+### Define Variables
+
+```css
+:root {
+    --primary-color: #61dafb;
+    --dark-color: #282c34;
+    --spacing: 16px;
+}
+```
+
+### Use Variables
+
+```css
+.btn-primary {
+    background-color: var(--primary-color);
+    padding: var(--spacing);
+}
+```
+
+## Tips
+
+1. **Start Simple** - Use the provided classes first
+2. **Be Consistent** - Stick to one naming convention
+3. **Mobile First** - Design for mobile, enhance for desktop
+4. **Test Browsers** - Check in different browsers
+5. **Optimize** - Remove unused styles
+
+## Examples
+
+### Custom Button
+
+```css
+/* In globals.css */
+.btn-success {
+    background-color: #28a745;
+    color: white;
+    padding: 10px 22px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+```
+
+```javascript
+// In your component
+<button class="btn-success">Success!</button>
+```
+
+### Custom Card
+
+```css
+/* In globals.css */
+.card-highlight {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 24px;
+    border-radius: 10px;
+}
+```
+
+```javascript
+// In your component
+<div class="card-highlight">
+    <h2>Highlighted Card</h2>
+</div>
+```
+
+## Resources
+
+- [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS)
+- [CSS Tricks](https://css-tricks.com/)
+- [Can I Use](https://caniuse.com/) - Browser compatibility

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aziz-app",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A simple, clean React-like framework with state management, routing, and API routes",
   "main": "app.html",
   "scripts": {

package/template/styles/globals.css

@@ -0,0 +1,190 @@
+/* ============================================================
+   GLOBAL STYLES
+   Base styles that work with all CSS frameworks
+   ============================================================ */
+
+/* Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Body */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: #f5f5f5;
+    color: #333;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Code */
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+/* ============================================================
+   CUSTOM CSS FRAMEWORK STYLES (when not using Bootstrap/Tailwind)
+   ============================================================ */
+
+/* Navbar */
+nav {
+    background-color: #282c34;
+    padding: 16px 32px;
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+nav .brand {
+    color: #61dafb;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+nav a {
+    color: #ffffffcc;
+    text-decoration: none;
+    font-size: 15px;
+    transition: color 0.2s;
+}
+
+nav a:hover,
+nav a.active {
+    color: #61dafb;
+}
+
+/* Page wrapper */
+#root {
+    flex: 1;
+    padding: 40px 32px;
+    max-width: 900px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+/* Footer */
+footer {
+    background-color: #282c34;
+    color: #888;
+    text-align: center;
+    padding: 16px;
+    font-size: 13px;
+}
+
+/* Typography */
+h1 {
+    margin-bottom: 16px;
+    color: #282c34;
+}
+
+h2 {
+    margin-bottom: 12px;
+}
+
+p {
+    line-height: 1.6;
+    margin-bottom: 12px;
+    color: #555;
+}
+
+/* Card */
+.card {
+    background: white;
+    border-radius: 10px;
+    padding: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    margin-bottom: 20px;
+}
+
+/* Buttons */
+.btn {
+    display: inline-block;
+    padding: 10px 22px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 15px;
+    transition: opacity 0.2s;
+}
+
+.btn:hover {
+    opacity: 0.85;
+}
+
+.btn-primary {
+    background-color: #61dafb;
+    color: #282c34;
+    font-weight: bold;
+}
+
+.btn-danger {
+    background-color: #ff6b6b;
+    color: white;
+}
+
+.btn-grey {
+    background-color: #ccc;
+    color: #333;
+}
+
+/* Counter */
+.count-display {
+    font-size: 64px;
+    font-weight: bold;
+    color: #282c34;
+    margin: 16px 0;
+    text-align: center;
+}
+
+.counter-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    margin-top: 8px;
+}
+
+/* Forms */
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+input,
+textarea {
+    padding: 10px 14px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    font-size: 15px;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+input:focus,
+textarea:focus {
+    border-color: #61dafb;
+}
+
+textarea {
+    resize: vertical;
+    min-height: 100px;
+}
+
+/* 404 */
+.not-found {
+    text-align: center;
+    padding: 60px 0;
+}
+
+.not-found h1 {
+    font-size: 80px;
+    color: #61dafb;
+}

package/template/styles/tailwind.css

@@ -0,0 +1,122 @@
+/* ============================================================
+   TAILWIND CSS STYLES
+   Custom styles when using Tailwind CSS
+   ============================================================ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Reset */
+@layer base {
+    * {
+        @apply m-0 p-0 box-border;
+    }
+
+    body {
+        @apply min-h-screen flex flex-col bg-gray-50 text-gray-900;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+            'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+            sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    code {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+    }
+}
+
+/* Custom Components */
+@layer components {
+    /* Page wrapper */
+    #root {
+        @apply flex-1 py-10 px-8 max-w-4xl w-full mx-auto;
+    }
+
+    /* Card */
+    .card {
+        @apply bg-white rounded-lg p-6 shadow-md mb-5;
+    }
+
+    /* Buttons */
+    .btn {
+        @apply inline-block py-2.5 px-6 border-0 rounded-lg cursor-pointer text-base transition-opacity;
+    }
+
+    .btn:hover {
+        @apply opacity-85;
+    }
+
+    .btn-primary {
+        @apply bg-primary text-dark font-bold;
+    }
+
+    .btn-danger {
+        @apply bg-red-500 text-white;
+    }
+
+    .btn-grey {
+        @apply bg-gray-300 text-gray-800;
+    }
+
+    /* Counter */
+    .count-display {
+        @apply text-6xl font-bold text-gray-800 my-4 text-center;
+    }
+
+    .counter-actions {
+        @apply flex gap-3 justify-center mt-2;
+    }
+
+    /* Forms */
+    form {
+        @apply flex flex-col gap-3;
+    }
+
+    input,
+    textarea {
+        @apply py-2.5 px-3.5 border border-gray-300 rounded-lg text-base outline-none transition-colors;
+    }
+
+    input:focus,
+    textarea:focus {
+        @apply border-primary ring-2 ring-primary ring-opacity-50;
+    }
+
+    textarea {
+        @apply resize-y min-h-[100px];
+    }
+
+    /* 404 */
+    .not-found {
+        @apply text-center py-16;
+    }
+
+    .not-found h1 {
+        @apply text-8xl text-primary;
+    }
+}
+
+/* Custom Utilities */
+@layer utilities {
+    .text-primary {
+        color: #61dafb;
+    }
+
+    .bg-primary {
+        background-color: #61dafb;
+    }
+
+    .text-dark {
+        color: #282c34;
+    }
+
+    .bg-dark {
+        background-color: #282c34;
+    }
+
+    .border-primary {
+        border-color: #61dafb;
+    }
+}