BadGUI

BadGUI is a Python framework that generates Vue.js/Quasar projects using syntax similar to NiceGUI. Instead of running a live server, BadGUI creates a complete, editable Vue.js project that you can further customize and deploy.

Features

• 🚀 Instant Development: bg.dev() creates temp build, installs deps, and starts server automatically
• NiceGUI-like syntax: Write familiar Python code to define your UI
• Vue.js/Quasar output: Generates modern, responsive web applications
• Dual workflow: Instant dev mode OR static project generation for deployment
• Rich Component Set: Cards, tabs, headers, footers, images, icons, and more
• Layout system: Built-in row/column layouts with context managers and responsive flex utilities
• Multi-page routing: Create multiple pages with Vue Router integration
• Styling methods: NiceGUI-style .classes(), .props(), and .style() methods
• Material Design: Full Material Design icon support with Quasar integration
• Responsive Design: Built-in responsive breakpoints and flex utilities
• Context Managers: Proper container management for complex layouts

Quick Start

Installation

pip install badgui

Basic Usage

Create a Python file with your UI definition:

# main.py
import badgui as bg

# Create a page using context manager
with bg.page("/", "HomePage", "Welcome"):
    # Header with navigation
    with bg.header() as nav_header:
        nav_header.classes("bg-primary text-white q-pa-md")
        with bg.row() as nav_row:
            nav_row.classes("items-center justify-between")
            bg.label("My App").classes("text-h4")
            
            with bg.row() as nav_links:
                nav_links.classes("q-gutter-md")
                bg.link("Home", "/").classes("text-white")
                bg.link("About", "/about").classes("text-white")
    
    # Main content with responsive cards
    with bg.column() as main_content:
        main_content.classes("q-pa-lg")
        
        # Hero section
        with bg.card() as hero:
            hero.classes("bg-blue-1 q-pa-xl q-mb-lg")
            with bg.card_section():
                bg.label("Welcome to BadGUI!").classes("text-h3 text-primary q-mb-md")
                bg.label("Build modern web apps with Python syntax")
        
        # Feature cards with responsive layout
        with bg.row() as features:
            features.classes("q-gutter-md wrap")
            
            with bg.card() as card1:
                card1.classes("col-12 col-md-4")
                with bg.card_section():
                    bg.icon("speed", size="3rem", color="primary").classes("q-mb-md")
                    bg.label("Fast Development").classes("text-h5 q-mb-md")
                    bg.label("Rapid prototyping with Python")
            
            with bg.card() as card2:
                card2.classes("col-12 col-md-4")
                with bg.card_section():
                    bg.icon("build", size="3rem", color="secondary").classes("q-mb-md")
                    bg.label("Modern Stack").classes("text-h5 q-mb-md")
                    bg.label("Vue.js 3 + Quasar Framework")
        
        # Image gallery
        with bg.card() as gallery:
            gallery.classes("q-mt-lg")
            with bg.card_section():
                bg.label("Gallery").classes("text-h5 q-mb-md")
                with bg.row() as gallery_row:
                    gallery_row.classes("q-gutter-md wrap")
                    for i in range(1, 4):
                        with bg.column() as img_col:
                            img_col.classes("col-12 col-sm-6 col-md-4")
                            bg.image(f"https://picsum.photos/300/200?random={i}").classes("rounded-lg full-width")
        
        # Tabs example
        with bg.tabs() as main_tabs:
            main_tabs.classes("text-primary q-mt-lg")
            with bg.tab("features", "Features"):
                pass
            with bg.tab("about", "About"):
                pass
        
        with bg.tab_panels() as panels:
            panels.classes("q-pa-md")
            with bg.tab_panel("features"):
                bg.label("Feature content goes here")
            with bg.tab_panel("about"):
                bg.label("About content goes here")
    
    # Footer
    with bg.footer() as page_footer:
        page_footer.classes("bg-dark text-white q-pa-md text-center")
        bg.label("© 2024 My App. Built with BadGUI.")

# 🚀 INSTANT DEVELOPMENT MODE - One command does it all!
bg.dev(port=3000)  # Creates temp build, installs deps, starts server!

# OR build a static project for deployment
# bg.build(output_dir="./my-vue-app")

Multi-Page Application

import badgui as bg

# Home page
with bg.page("/", "HomePage", "Home"):
    bg.label("Welcome to Home").classes("text-h2")
    bg.link("Go to About", "/about").classes("q-btn q-btn-primary")

# About page  
with bg.page("/about", "AboutPage", "About Us"):
    bg.label("About Us").classes("text-h2")
    bg.label("This is the about page content")
    bg.link("Back to Home", "/").classes("q-btn q-btn-secondary")

bg.build("multi-page-app")

Development Workflow

🚀 Instant Development (Recommended)

# One command - builds, installs, and runs automatically!
python main.py
# Server starts at http://localhost:3000

📦 Production Build

# For deployment, use bg.build() instead of bg.dev()
bg.build(output_dir="./my-vue-app")

# Then manually build and deploy
cd my-vue-app
npm install
npm run build

Components

BadGUI supports these components with full styling capabilities:

• label(text) - Text labels and headings
• button(text) - Interactive buttons
• input(placeholder="") - Text input fields
• link(text, to) - Router navigation links
• row() - Horizontal layout container (context manager)
• column() - Vertical layout container (context manager)

Styling Methods

BadGUI implements NiceGUI-style styling methods:

.classes() - CSS Classes

# Add classes
label.classes("text-bold text-blue-600 bg-blue-100")

# Method chaining
label.classes("text-center").classes("p-4").classes("rounded")

# Add, remove, replace classes
label.classes(add="border", remove="bg-blue-100", replace="new-class-set")

.props() - Component Properties

# String format
button.props("outline rounded color=primary")

# With quoted values
input_field.props('filled dense label="Enter your name"')

# Keyword arguments
button.props(disabled=True, color="secondary")

.style() - Inline CSS

# CSS string
label.style("color: red; font-size: 18px; padding: 10px")

# Keyword arguments (camelCase converted to kebab-case)
label.style(backgroundColor="lightblue", fontSize="16px")

Pages and Routing

Create multi-page applications with Vue Router:

# Page context manager
with bg.page(path="/contact", name="ContactPage", title="Contact Us"):
    bg.label("Contact Form").classes("text-h3")
    # Page content here...

# Navigation links
bg.link("Contact", "/contact")  # Creates <router-link>

Project Structure

When you run bg.build(), BadGUI generates a complete Vue.js/Quasar project:

my-vue-app/
├── src/
│   ├── pages/
│   │   ├── HomePage.vue      # Generated page components
│   │   ├── AboutPage.vue
│   │   └── ErrorNotFound.vue
│   ├── layouts/
│   │   └── MainLayout.vue    # App layout
│   ├── router/
│   │   ├── index.js          # Router configuration
│   │   └── routes.js         # Route definitions
│   ├── components/           # Reusable components
│   ├── App.vue              # Root component
│   └── main.js              # Application entry
├── package.json             # Dependencies
├── quasar.config.js         # Quasar configuration
└── index.html              # HTML template

Development Status

BadGUI current version includes:

✅ Core Features

• Component system (label, button, input, link)
• Layout containers (row, column) with context managers
• Vue.js/Quasar project generation
• 🚀 INSTANT DEVELOPMENT MODE: bg.dev() - one command does it all!

✅ UI Components

• Cards: bg.card(), bg.card_section(), bg.card_actions() with NiceGUI-style API
• Tabs: bg.tabs(), bg.tab(), bg.tab_panels(), bg.tab_panel() with content management
• Layout: bg.header(), bg.footer() with context manager support
• Media: bg.image(), bg.icon() with Material Design icons
• Navigation: bg.link() with Vue Router integration

✅ Styling System

• .classes() method for CSS classes with Quasar/Material Design support
• .props() method for component properties
• .style() method for inline CSS
• Method chaining support
• Responsive flex utilities (wrap, col-12 col-md-4, etc.)

✅ Multi-Page Routing

• Page creation with context managers
• Vue Router integration
• Navigation links
• Dynamic route generation

✅ Developer Experience

• bg.dev(): Instant temp build + auto-install + dev server
• bg.build(): Static project generation for deployment
• Context manager patterns for proper component nesting
• Comprehensive examples and documentation
• Responsive design patterns and overflow prevention

✅ Material Design Integration

• Full Material Design icon library support
• Quasar component mapping for consistent UI
• Responsive breakpoints and flex utilities
• Modern CSS classes and styling patterns

🚧 Planned Features

• File watching and auto-rebuild (for bg.dev())
• More UI components (dialogs, tables, forms, menus)
• Event handling and interactivity
• Data binding capabilities
• Advanced theming system
• Component slots and composition

Examples

The repository includes comprehensive examples:

🎯 Component Examples:

• simple_card_test.py - Basic card components
• simple_image_icon_test.py - Image and icon usage
• tabs_examples.py - Tab navigation and content
• simple_header_footer_test.py - Layout components

🏗️ Layout Examples:

• flex_layout_test.py - Responsive flex layouts and overflow prevention
• enhanced_navigation_example.py - Complete website with navigation, galleries, and team sections
• context_manager_guide.py - Comprehensive guide for proper context manager usage

📖 Usage Guides:

• Context manager patterns for container components
• Responsive design with Quasar flex utilities
• Material Design icon integration
• Multi-page routing and navigation

All examples demonstrate:

• Proper context manager usage (with bg.component() as name:)
• Responsive design patterns
• Material Design integration
• NiceGUI-compatible API patterns

Documentation

Full documentation is available at: BadGUI Documentation

Contributing

BadGUI is open source and contributions are welcome! Please feel free to submit issues and pull requests.

License

MIT License