create-aziz-app 2.0.3 → 2.0.5

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": {