Butterfly - Modern Admin Theme for Cotonti CMF

Русская версия

A lightweight, simple and responsive admin theme built on Pico CSS.

Features

• 🎨 Lightweight Pico CSS framework
• 📱 Responsive layout (Mobile-first)
• 🌓 Light/dark themes
• 🎯 Flexbox/CSS Grid layouts
• ♿ WCAG 2.1 Level AA accessibility
• 🚀 Optimized performance
• 💅 Semantic HTML5

Changes Compared to the Default Cotonti Theme

Layout

• ❌ Removed: Float-based layout, fixed 1200px width
• ✅ Added: CSS Grid/Flexbox, responsive fluid layout (max-width: 1400px)

Components

• Navigation: CSS Grid with 6 columns (adaptive on mobile)
• Scrollable tables: automatic scrolling when content overflows the viewport
• Forms: Native Pico CSS elements + switches adapted for Cotonti
• Buttons: Updated styles with outline variants
• Alerts: Toast notifications for system messages and confirmations

Color Scheme

Light theme:

• Primary: #4f789f
• Secondary: #a4b6c8
• Background: #f6f6f6

Dark theme:

• Primary: #5a8bc4
• Background: #1a1f2e
• Card: #252b3b

Installation

1. Unpack and copy the butterfly folder to the admin themes directory

Example: /themes/admin/butterfly/

2. Activate the theme

Open /datas/config.php and change the line:

$cfg['admintheme'] = 'butterfly';

3. Clear the cache

Go to the admin panel: Admin → Other → Disk cache and clear the cache

Usage

Light/Dark Theme Switcher

On first launch, the theme is taken from the system settings.

Responsiveness

The theme adapts to all screen sizes:

• Mobile (< 768px): Single column, simplified navigation
• Tablets (768px - 992px): Two columns where appropriate
• Desktops (> 992px): Interface with sidebars

File Structure

butterfly/
├── icons/
│   └── sprite-icons.svg              # SVG icon sprite
├── inc/
│   ├── css/
│   │   ├── pico.min.css              # Pico CSS v2.1.1
│   │   ├── pico-custom.css           # Variable customization
│   │   ├── layout.css                # Layout (Grid/Flexbox)
│   │   └── components.css            # Components
│   └── js/
│       ├── theme-switcher.js         # Theme switcher
│       ├── toast-manager.js          # Animated toasts (alerts)
│       ├── tooltip.js                # Extended version replacing default Pico tooltips
│       └── scripts.js                # Other theme scripts
├── header.tpl                         # Header with navigation
├── footer.tpl                         # Footer
├── admin.tpl                          # Main container
├── warnings.tpl                       # Alerts
├── message.tpl                        # Message page
├── ...
├── admin.home.tpl                     # Home page
├── admin.config.tpl                   # Configuration
├── admin.extensions.tpl               # Extensions
├── modules/                           # Default module templates
└── plugins/                           # Default plugin templates

svg-to-sprite/                         # Icon sources (Tabler Icons) with sprite build system

Requirements

• Cotonti >= 0.9.23
• Modern browser (Chrome, Firefox, Safari, Edge)
• JavaScript enabled (for theme switcher, toast alerts, switches)

License

MIT License

Author

Edward Gabishev

---

Built on Pico CSS SVG icons by Tabler Icons