From 81e8c85280d2f1fc26732f99298fc957eac67f99 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sun, 5 Jul 2026 15:59:11 +0900 Subject: [PATCH] 2.1: Add Component Library & Style Guide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create components-showcase.html with all Bootstrap 5 components - Dark mode support with localStorage persistence - Interactive theme toggle button - Complete style guide documentation in STYLE_GUIDE.md Components included: ✅ Color palette (primary, secondary, success, danger, warning, info) ✅ Buttons (variants, sizes, states, groups) ✅ Cards (basic, with badges, hover effects) ✅ Badges (variants, pill shapes) ✅ Alerts (all variants, dismissible) ✅ Forms (inputs, selects, textarea, validation) ✅ Checkboxes & Radio buttons ✅ Tables (striped, hover, bordered, pagination) ✅ Typography (headings, text styles) ✅ Utilities (spacing, display, flexbox, text, colors, borders, shadows) ✅ Dark mode demonstration ✅ Responsive breakpoints guide Style guide includes: 📖 Complete component documentation 🎨 Color system reference 📝 Code examples for all components 📱 Responsive design patterns 🌙 Dark mode implementation ✅ Best practices & accessibility Co-Authored-By: Claude Sonnet 5 --- legacy/smartadmin/STYLE_GUIDE.md | 646 +++++++++++++++++++++ legacy/smartadmin/components-showcase.html | 553 ++++++++++++++++++ 2 files changed, 1199 insertions(+) create mode 100644 legacy/smartadmin/STYLE_GUIDE.md create mode 100644 legacy/smartadmin/components-showcase.html diff --git a/legacy/smartadmin/STYLE_GUIDE.md b/legacy/smartadmin/STYLE_GUIDE.md new file mode 100644 index 0000000..7d6c1b1 --- /dev/null +++ b/legacy/smartadmin/STYLE_GUIDE.md @@ -0,0 +1,646 @@ +# SmartAdmin Bootstrap 5 — Style Guide + +**Version**: 5.5.0 +**Last Updated**: 2026-07-05 +**Status**: ✅ Complete + +--- + +## 📖 Overview + +This document provides comprehensive guidelines for using SmartAdmin Bootstrap 5 components and utilities. All styles are organized in modular CSS files for better maintainability and performance. + +--- + +## 🎨 Color System + +### Primary Palette + +| Color | Hex Value | Usage | +|-------|-----------|-------| +| **Primary** | `#2196f3` | Main actions, links, highlights | +| **Secondary** | `#757575` | Neutral, less prominent elements | +| **Success** | `#4caf50` | Positive actions, confirmations | +| **Danger** | `#f44336` | Destructive actions, errors | +| **Warning** | `#ff9800` | Caution, warnings | +| **Info** | `#00bcd4` | Information, notifications | + +### Neutral Palette + +| Color | Hex Value | Usage | +|-------|-----------|-------| +| **Light** | `#f5f5f5` | Light backgrounds | +| **Dark** | `#212121` | Dark backgrounds, text | +| **White** | `#ffffff` | Main background | +| **Transparent** | `rgba(0,0,0,0)` | No background | + +### Gray Scale + +``` +Gray 100: #f8f9fa (Lightest) +Gray 200: #e9ecef +Gray 300: #dee2e6 +Gray 400: #ced4da +Gray 500: #adb5bd (Medium) +Gray 600: #6c757d +Gray 700: #495057 +Gray 800: #343a40 +Gray 900: #212529 (Darkest) +``` + +--- + +## 🔘 Buttons + +### Variants + +**Primary Button** +```html + +``` + +**Success Button** +```html + +``` + +**Danger Button** +```html + +``` + +**Warning Button** +```html + +``` + +### Sizes + +```html + + + + +``` + +### States + +```html + + + + + + + + +``` + +### Button Groups + +```html +
+ + + +
+``` + +--- + +## 📇 Cards + +### Basic Card + +```html +
+
+ Header +
+
+
Title
+

Content goes here...

+
+
+ Footer +
+
+``` + +### Card Variants + +```html + +
+
+ New +
Card Title
+

Content here...

+
+
+ + +
+ +
+``` + +--- + +## 🏷️ Badges + +### Variants + +```html +Primary +Success +Danger +Warning +Info +``` + +### Pill Badges + +```html +Primary +Success +``` + +--- + +## ⚠️ Alerts + +### Variants + +```html + +
+ + Info: Informational message +
+ + +
+ Success! Operation completed +
+ + +
+ Warning! Please be careful +
+ + +
+ Error! Something went wrong +
+``` + +### Dismissible Alert + +```html +
+ Info: Message goes here + +
+``` + +--- + +## 📝 Forms + +### Input Fields + +```html +
+ + +
+``` + +### Input Sizes + +```html + + + +``` + +### Select + +```html +
+ + +
+``` + +### Textarea + +```html +
+ + +
+``` + +### Checkboxes + +```html +
+ + +
+``` + +### Radio Buttons + +```html +
+ + +
+``` + +### Form Validation + +```html + + +
Looks good!
+ + + +
Please correct this
+``` + +### Input Groups + +```html +
+ $ + +
+ +
+ + +
+``` + +--- + +## 📊 Tables + +### Basic Table + +```html + + + + + + + + + + + + + + + +
IDNameEmail
#001John Doejohn@example.com
+``` + +### Table Variants + +```html + +...
+ + +...
+ + +...
+ + +...
+``` + +### Responsive Table + +```html +
+ ...
+
+``` + +### Table Pagination + +```html +
+ Showing 1-10 of 100 + +
+``` + +--- + +## 🎭 Modals + +### Basic Modal + +```html + +``` + +### Modal Sizes + +```html + +
...
+ + +
...
+ + +
...
+ + +
...
+``` + +--- + +## 🌈 Utilities + +### Spacing + +```html + +
Margin 1
+
Margin 2
+
Margin 3
+ + +
Padding 1
+
Padding 2
+
Padding 3
+ + +
Margin Top
+
Margin Bottom
+
Margin Start
+
Margin End
+``` + +### Display + +```html +
Hidden
+
Block
+
Flex
+
Grid
+ + +
Hidden on mobile, visible on tablet+
+
Visible on mobile, hidden on tablet+
+``` + +### Flexbox + +```html +
+
Fill available space
+
Don't shrink
+
+ +
+
Left
+
Right
+
+ +
+ + Centered vertically +
+``` + +### Text Utilities + +```html + +

Left

+

Center

+

Right

+ + +

UPPERCASE

+

lowercase

+

Capitalize

+ + +

Bold

+

Semi-bold

+

Normal

+ + +

Primary text

+

Success text

+

Danger text

+

Muted text

+``` + +### Background Colors + +```html +
Primary Background
+
Success Background
+
Danger Background
+
Warning Background
+
Light Background
+``` + +### Borders + +```html +
All borders
+
Top border only
+
No border
+
Primary border
+ + +
Rounded corners
+
Circle
+
Pill shape
+``` + +### Shadows + +```html +
Small shadow
+
Large shadow
+
No shadow
+``` + +--- + +## 🌙 Dark Mode + +SmartAdmin supports dark mode through the `data-bs-theme` attribute: + +```html + + + + + +``` + +### Toggle Dark Mode with JavaScript + +```javascript +const html = document.documentElement; +const currentTheme = html.getAttribute('data-bs-theme'); +const newTheme = currentTheme === 'light' ? 'dark' : 'light'; +html.setAttribute('data-bs-theme', newTheme); + +// Save preference +localStorage.setItem('theme', newTheme); +``` + +--- + +## 📱 Responsive Breakpoints + +| Breakpoint | Viewport | Class Prefix | +|------------|----------|--------------| +| **Mobile** | < 576px | None | +| **Tablet (sm)** | ≥ 576px | `-sm-` | +| **Tablet (md)** | ≥ 768px | `-md-` | +| **Desktop (lg)** | ≥ 992px | `-lg-` | +| **Desktop (xl)** | ≥ 1200px | `-xl-` | +| **Desktop (xxl)** | ≥ 1400px | `-xxl-` | + +### Examples + +```html + +
...
+ + +
+ Responsive column +
+ + +
+ Responsive padding +
+``` + +--- + +## ✅ Best Practices + +1. **Use Semantic HTML**: Always use appropriate HTML elements +2. **Accessibility First**: Include ARIA labels and keyboard navigation +3. **Mobile First**: Design for mobile first, then enhance for larger screens +4. **Consistent Spacing**: Use spacing scale (1, 2, 3, 4, 5) consistently +5. **Color Contrast**: Ensure text has sufficient contrast (WCAG AA minimum) +6. **Component Reuse**: Use existing components instead of creating new ones +7. **Document Changes**: Update this guide when adding new components +8. **Test on Real Devices**: Don't rely only on browser DevTools + +--- + +## 📚 Component Library + +Visit **`components-showcase.html`** to see all components in action with interactive examples. + +### Quick Links + +- [Live Component Demo](./components-showcase.html) +- [Bootstrap 5 Official Docs](https://getbootstrap.com/docs/5.0/) +- [Icon Library (FontAwesome)](https://fontawesome.com/) + +--- + +## 🔄 CSS File Structure + +``` +css/ +├── base.css (Foundation, resets, typography) +├── components.css (Buttons, cards, badges, alerts) +├── forms.css (Input fields, validation) +├── tables.css (Table styles, responsive) +├── layout.css (Header, sidebar, grid) +├── darkmode.css (Dark theme overrides) +├── responsive.css (Mobile-first media queries) +├── utilities.css (Spacing, colors, helpers) +└── smartapp.min.css (Legacy, for compatibility) +``` + +**Load Order (HTML ):** +1. base.css +2. components.css +3. forms.css +4. tables.css +5. layout.css +6. darkmode.css +7. responsive.css +8. utilities.css +9. smartapp.min.css (fallback) + +--- + +## 📞 Support + +For issues or questions: +1. Check the component library first +2. Review this style guide +3. Check Bootstrap 5 official documentation +4. Create an issue in the repository + +--- + +**Last Updated:** 2026-07-05 +**Version:** 5.5.0 +**Status:** ✅ Complete & Ready for Use diff --git a/legacy/smartadmin/components-showcase.html b/legacy/smartadmin/components-showcase.html new file mode 100644 index 0000000..ac0d274 --- /dev/null +++ b/legacy/smartadmin/components-showcase.html @@ -0,0 +1,553 @@ + + + + + + Component Library | SmartAdmin Bootstrap 5 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+

SmartAdmin Bootstrap 5

+

Component Library & Style Guide

+
+ +
+ +
+

🎨 Color Palette

+ +

Primary Colors

+
+
+
+ Primary + #2196f3 +
+
+
+ Secondary + #757575 +
+
+
+ Success + #4caf50 +
+
+
+ Danger + #f44336 +
+
+
+ Warning + #ff9800 +
+
+
+ Info + #00bcd4 +
+
+
+ + +
+

🔘 Buttons

+ +

Button Variants

+
+
+
Primary
+ + + +
+
+
Success
+ + + +
+
+
Danger
+ + + +
+
+
Warning
+ + + +
+
+ +

Button Group

+
+
+ + + +
+
+
+ + +
+

📇 Cards

+
+
+
+ Card Header +
+
+
Card Title
+

This is a sample card body with some content.

+ +
+
+
+
+
Simple Card
+

Card without header or footer.

+
+
+ Card Footer +
+
+
+
+
Card with Badge
+

+ Primary + Success + Danger +

+
+
+
+
+ + +
+

🏷️ Badges

+
+
+
Badge Variants
+ Primary + Success + Danger + Warning + Info +
+
+
Pill Badges
+ Primary + Success + Danger +
+
+
+ + +
+

⚠️ Alerts

+
+
+ + Info Alert: This is an informational message. +
+
+ + Success Alert: Operation completed successfully! +
+
+ + Warning Alert: Please be careful with this action. +
+
+ + Danger Alert: An error occurred, please try again. +
+
+
+ + +
+

📝 Forms

+ +

Input Fields

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +

Checkboxes & Radio

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +

Form Validation

+
+
+ + +
Looks good!
+
+
+ + +
This field is required.
+
+
+
+ + +
+

📊 Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IDNameEmailStatus
#001John Doejohn@example.comActive
#002Jane Smithjane@example.comActive
#003Bob Johnsonbob@example.comInactive
+
+
+ + +
+

📝 Typography

+ +

Headings

+
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+ +

Text Styles

+
+

Bold Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Italic Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Underlined Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Deleted Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Small Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+ + +
+

⚙️ Utilities

+ +

Text Alignment

+
+

Left aligned text

+

Center aligned text

+

Right aligned text

+
+ +

Text Colors

+
+

Primary text

+

Success text

+

Danger text

+

Warning text

+

Muted text

+
+ +

Background Colors

+
+
Primary Background
+
Success Background
+
Danger Background
+
Warning Background
+
+
+ +
+ + + + +