 kjh2064
|
81e8c85280
|
2.1: Add Component Library & Style Guide
- 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 <noreply@anthropic.com>
|
2026-07-05 15:59:11 +09:00 |
|
|
kjh2064
|
0d81ace5da
|
1.1: CSS Modulization - Create 8 modular CSS files
- base.css: Foundation styles, typography, resets
- components.css: Buttons, cards, badges, alerts, modals
- forms.css: Input fields, validation, checkboxes, radio
- tables.css: Table styles, responsive, pagination
- layout.css: Header, sidebar, navigation, grid
- darkmode.css: Dark theme variables and overrides
- responsive.css: Mobile-first, breakpoints, grid columns
- utilities.css: Spacing, colors, text, helpers
All files support Bootstrap 5 + SmartAdmin theme
- Total CSS: ~1800 lines (organized, maintainable)
- Supports dark mode via data-bs-theme="dark"
- Mobile-first responsive design
- Preserved smartapp.min.css for legacy compatibility
Load order:
1. base → components → forms → tables → layout
2. darkmode → responsive → utilities
3. smartapp.min.css (fallback)
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
2026-07-05 15:53:56 +09:00 |
|