Butterfly - Современная тема админки для Cotonti CMF

Легкая, простая и адаптивная тема админки на базе Pico CSS

Tags: Admin Theme

Edward	#1 2026-03-21 20:06
Members Thanked: 31 tijden	Сделал макисмально простую админку, т.к. текущие не устраивали по разным причинам. 🎨 Легковесный CSS фреймворк Pico CSS + SVG Tabler Icons 📱 Адаптивная верстка (Mobile-first) 🌓 Cветлая/темная темы 🎯 Flexbox/CSS Grid макеты ♿ WCAG 2.1 Level AA accessibility 🚀 Оптимизированная производительность 💅 Семантичный HTML5 Точно работает в Cotonti >= 0.9.23. В более старых версиях может быть проблема (в 19 точно не работает), т.к. менялись функции отрисовки форм. В планах поменять отображение форм, т.к. текущими пользоваться сложновато, никаким UX не пахнет даже близко 😀 Есть желающие, а главное умеющие в UX/UI буду рад помощи. Тема на Github: https://github.com/Edd-G/cotonti-butterfly-admin-theme Email: ed.gabishev@gmail.com Telegram: https://t.me/Ed_Gaba Thanked: Kabak (2026-03-21) Totaal: 1

Edward

#1 2026-03-21 20:06

Members

Thanked:
31 tijden

Сделал макисмально простую админку, т.к. текущие не устраивали по разным причинам.

🎨 Легковесный CSS фреймворк Pico CSS + SVG Tabler Icons
📱 Адаптивная верстка (Mobile-first)
🌓 Cветлая/темная темы
🎯 Flexbox/CSS Grid макеты
♿ WCAG 2.1 Level AA accessibility
🚀 Оптимизированная производительность
💅 Семантичный HTML5

Точно работает в Cotonti >= 0.9.23.

В более старых версиях может быть проблема (в 19 точно не работает), т.к. менялись функции отрисовки форм.

В планах поменять отображение форм, т.к. текущими пользоваться сложновато, никаким UX не пахнет даже близко 😀

Есть желающие, а главное умеющие в UX/UI буду рад помощи.

Тема на Github:

https://github.com/Edd-G/cotonti-butterfly-admin-theme

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba

Thanked: Kabak (2026-03-21)

Totaal: 1

Kabak	#2 2026-03-21 20:14
Members Thanked: 48 tijden	Что добавили по сравнению со стандартной админкой ?

Edward	#3 2026-03-22 13:39
Members Thanked: 31 tijden	адаптив, в т.ч. таблицы темная тема новый стиль уведомлений (toast) В теме только стандартные плагины, идущие в коробке. Email: ed.gabishev@gmail.com Telegram: https://t.me/Ed_Gaba Thanked: vpktz (2026-05-05) Totaal: 1

Kort	#4 2026-03-23 09:21
Administrators Thanked: 227 tijden	#48628 Edward: В планах поменять отображение форм, т.к. текущими пользоваться сложновато, никаким UX не пахнет даже близко 😀 Привет, а что не так с формами? Почему Pico CSS? Надо бы и на сайт выложить в "Файлы". Стукни в личку если надо помочь с переводом) SED.by - создание сайтов, разработка плагинов и тем для Котонти

Kort

#4 2026-03-23 09:21

Administrators

Thanked:
227 tijden

#48628 Edward:
В планах поменять отображение форм, т.к. текущими пользоваться сложновато, никаким UX не пахнет даже близко 😀

Привет, а что не так с формами? Почему Pico CSS? Надо бы и на сайт выложить в "Файлы". Стукни в личку если надо помочь с переводом)

SED.by - создание сайтов, разработка плагинов и тем для Котонти

Edward	#5 2026-03-24 16:22
Members Thanked: 31 tijden	Привет! С формами все так, кроме того, что пользвоваться ими не удобно - нет семантки, группировки полей по смыслу. Т.е. формы в коте - это набор полей идущих в любом порядке. PicoCSS просто тест, решил проверить, как он. Простой, легкий, ничего лишнего. Можно даже class-less использовать, т.е. чистый семантичный html, что-то вроде `<body> <main> <h1>Hello, world!</h1> </main> </body>` Файлы - ок, выложу, спасибо за предложение) Email: ed.gabishev@gmail.com Telegram: https://t.me/Ed_Gaba

Edward

#5 2026-03-24 16:22

Members

Thanked:
31 tijden

Привет!

С формами все так, кроме того, что пользвоваться ими не удобно - нет семантки, группировки полей по смыслу. Т.е. формы в коте - это набор полей идущих в любом порядке.

PicoCSS просто тест, решил проверить, как он.

Простой, легкий, ничего лишнего. Можно даже class-less использовать, т.е. чистый семантичный html, что-то вроде

<body>
  <main>
    <h1>Hello, world!</h1>
  </main>
</body>

Файлы - ок, выложу, спасибо за предложение)

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba

Kort	#6 2026-03-25 07:10
Administrators Thanked: 227 tijden	Ну, ~~семантика~~ семантичность это вообще такая штука. Ее что нет, что есть -- никакой разницы. Можешь конкретно указать, где поля не группируются по смыслу? Понятно, что регулярные блоки с экстраполями не в счет. Там смысл не работает) Вообще, ничего (ну или практически ничего) не мешает кастомизировать практически любой раздел админки так, чтобы все было как хочется) SED.by - создание сайтов, разработка плагинов и тем для Котонти Dit bericht is bewerkt door Kort (2026-03-25 08:11, 1 maand ago)

Kort

#6 2026-03-25 07:10

Administrators

Thanked:
227 tijden

Ну, ~~семантика~~ семантичность это вообще такая штука. Ее что нет, что есть -- никакой разницы.

Можешь конкретно указать, где поля не группируются по смыслу? Понятно, что регулярные блоки с экстраполями не в счет. Там смысл не работает)

Вообще, ничего (ну или практически ничего) не мешает кастомизировать практически любой раздел админки так, чтобы все было как хочется)

SED.by - создание сайтов, разработка плагинов и тем для Котонти

Dit bericht is bewerkt door Kort (2026-03-25 08:11, 1 maand ago)

Edward	#7 2026-03-25 15:48
Members Thanked: 31 tijden	#48633 Kort: Вообще, ничего (ну или практически ничего) не мешает кастомизировать практически любой раздел админки так, чтобы все было как хочется) Так именно этим я занят. Выложил тему и выразил надежду на помощь в улучшении UX. Никаких споров о вкусах. Если вы не видите необходимости, значит вопрос не к вам. Email: ed.gabishev@gmail.com Telegram: https://t.me/Ed_Gaba

Edward

#7 2026-03-25 15:48

Members

Thanked:
31 tijden

#48633 Kort:
Вообще, ничего (ну или практически ничего) не мешает кастомизировать практически любой раздел админки так, чтобы все было как хочется)

Так именно этим я занят. Выложил тему и выразил надежду на помощь в улучшении UX.

Никаких споров о вкусах.

Если вы не видите необходимости, значит вопрос не к вам.

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba

Kort	#8 2026-03-25 18:56
Administrators Thanked: 227 tijden	Хмм. Так я вопроса что-то и не увидел. Как и ответов на свои. SED.by - создание сайтов, разработка плагинов и тем для Котонти

Edward	#9 2026-03-26 09:43
Members Thanked: 31 tijden	Привет! Я читал по диагонали) Вопрос - имею ввиду запрос на помощь в приведении в порядок форм. Что не так с формами на вскидку: отсутвуют required для обязательных , вместо этого такое требование отмечено рядом подписями нет более ясных подсказок - placeholder нет логической группировки fieldset, legend кое-где жестко зашиты размеры size, cols, rows Касательно UX/UI Например, форма добавления группы юзеров. Что есть сейчас: Что здесь не так: Что такое уровень? Что значит "Пропустить права для этой группы"? Что примерно ожидает домохозяйка, когда заходит поадминить: Также внутри генерации элементов форм местами зашито форматирование, теги типа br, заданы стили. Но это реашаемо костылями. Понятно, что тянется из прошлого века и выпиливается по мере возможностей. Вообщем это был запрос на помощь с приведением в порядок форм. Email: ed.gabishev@gmail.com Telegram: https://t.me/Ed_Gaba

Edward

#9 2026-03-26 09:43

Members

Thanked:
31 tijden

Привет!

Я читал по диагонали)

Вопрос - имею ввиду запрос на помощь в приведении в порядок форм.

Что не так с формами на вскидку:

отсутвуют required для обязательных , вместо этого такое требование отмечено рядом подписями
нет более ясных подсказок - placeholder
нет логической группировки fieldset, legend
кое-где жестко зашиты размеры size, cols, rows

Касательно UX/UI

Например, форма добавления группы юзеров.

Что есть сейчас:

Что здесь не так:

Что такое уровень?
Что значит "Пропустить права для этой группы"?

Что примерно ожидает домохозяйка, когда заходит поадминить:

Также внутри генерации элементов форм местами зашито форматирование, теги типа br, заданы стили.

Но это реашаемо костылями. Понятно, что тянется из прошлого века и выпиливается по мере возможностей.

Вообщем это был запрос на помощь с приведением в порядок форм.

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba

Kort	#10 2026-03-26 11:54
Administrators Thanked: 227 tijden	Ок, все, что дальше, читаем слева направо и сверху вниз) Так а помогать-то тебе зачем? Ну вот ты сделал отличную админку (с какого хрена на Pico CSS, правда, не знаю, но это так, риторический вопрос). Запилил там все по-джедайски. Я только не совсем понял про 'required' и про костыли. Валидатор в админке "серверный" для всех форм, так что пустое имя и так не прокатит, и пояснений что это обязательное поле вполне достаточно. Зачем там еще JS-проверки? Если я правильно понял. Если костыли это ресурсные строки и функции типа `cor_rc_modify()`, то это не костыли, а функционал, который позволяет тебе кастомизировать разметку и использовать классы для своего CSS-фреймворка. В дефолтных, видимо, можно найти "некрасивую" разметку и стайлзы, но это либо просто не мешает отлаживать какой-то функционал или просто не мешает. Я многие дефолтные ресурсы переопределяю и не чувствую себя униженным) То, что находится в папке `system/admin/tpl`, это заготовка, которая должна одинаково подходить для: Разработчика движка (минимум всего + кроссбраузерно) Разработчика админки для сайта (п. 1 + максимально универсально) Я бы ее еще почистил, но пока не совсем решил как сделать ее по-настоящему удобной и рабочей по этим двум пунктам. Не надо считать, что `system/admin/tpl` это, @#$%ь, готовое решение, особенно для домохозяек. Как, собственно, и сам движок. Ты скачал конструктор, выбрал на свой вкус админку и сделал сайт под свои требования. Зашло? Со временем наработал свои плагины, собрал свою админку, поделился с другими и пошел дальше по схеме. Меньше всего там нужна ~~гейско-радужная хрень со свистоперделками~~ перенасыщенная стилями и функционалом конечная реализация чьего-то понимания того, как оно всем надо. Не забывай, что в админку периодически вносятся изменения, и мне, например, не очень хочется сперва расшифровывать что-то, а потом думать, как это перенести в свою реализацию. Тебе, думаю, тоже. На всякий случай, всем миль пардон)) P.S. Не забудь про выкладку. SED.by - создание сайтов, разработка плагинов и тем для Котонти

Kort

#10 2026-03-26 11:54

Administrators

Thanked:
227 tijden

Ок, все, что дальше, читаем слева направо и сверху вниз)

Так а помогать-то тебе зачем? Ну вот ты сделал отличную админку (с какого хрена на Pico CSS, правда, не знаю, но это так, риторический вопрос). Запилил там все по-джедайски. Я только не совсем понял про 'required' и про костыли. Валидатор в админке "серверный" для всех форм, так что пустое имя и так не прокатит, и пояснений что это обязательное поле вполне достаточно. Зачем там еще JS-проверки? Если я правильно понял.

Если костыли это ресурсные строки и функции типа cor_rc_modify(), то это не костыли, а функционал, который позволяет тебе кастомизировать разметку и использовать классы для своего CSS-фреймворка. В дефолтных, видимо, можно найти "некрасивую" разметку и стайлзы, но это либо просто не мешает отлаживать какой-то функционал или просто не мешает. Я многие дефолтные ресурсы переопределяю и не чувствую себя униженным)

То, что находится в папке system/admin/tpl, это заготовка, которая должна одинаково подходить для:

Разработчика движка (минимум всего + кроссбраузерно)
Разработчика админки для сайта (п. 1 + максимально универсально)

Я бы ее еще почистил, но пока не совсем решил как сделать ее по-настоящему удобной и рабочей по этим двум пунктам.

Не надо считать, что system/admin/tpl это, @#$%ь, готовое решение, особенно для домохозяек. Как, собственно, и сам движок. Ты скачал конструктор, выбрал на свой вкус админку и сделал сайт под свои требования. Зашло? Со временем наработал свои плагины, собрал свою админку, поделился с другими и пошел дальше по схеме.

Меньше всего там нужна ~~гейско-радужная хрень со свистоперделками~~ перенасыщенная стилями и функционалом конечная реализация чьего-то понимания того, как оно всем надо. Не забывай, что в админку периодически вносятся изменения, и мне, например, не очень хочется сперва расшифровывать что-то, а потом думать, как это перенести в свою реализацию. Тебе, думаю, тоже.

На всякий случай, всем миль пардон))

P.S. Не забудь про выкладку.

SED.by - создание сайтов, разработка плагинов и тем для Котонти

Edward	#11 2026-03-26 21:02
Members Thanked: 31 tijden	Да, значит я верно прочитал, хоть и по диагонали. Запрос точно был не вам адресован) Атрибут required, как пример, элементарная семантика, встроенная в браузеры валидация. При чем здесь js. Это элементарно логично вставлять атрибут при генерации полей по умолчанию. Хотя бы для того, чтобы пустые формы на сервак не гонять. Движок как раз и генерит "мусор" из коробки: теги, размеры полей, намертво вкорячен bootstrap/jquery - это ли не свистоперделки? Честно говоря не понял, от чего так бомбит) Сворачиваюсь на этом с улучшениями. Email: ed.gabishev@gmail.com Telegram: https://t.me/Ed_Gaba

Edward

#11 2026-03-26 21:02

Members

Thanked:
31 tijden

Да, значит я верно прочитал, хоть и по диагонали. Запрос точно был не вам адресован)

Атрибут required, как пример, элементарная семантика, встроенная в браузеры валидация. При чем здесь js.

Это элементарно логично вставлять атрибут при генерации полей по умолчанию. Хотя бы для того, чтобы пустые формы на сервак не гонять.

Движок как раз и генерит "мусор" из коробки: теги, размеры полей, намертво вкорячен bootstrap/jquery - это ли не свистоперделки?

Честно говоря не понял, от чего так бомбит)

Сворачиваюсь на этом с улучшениями.

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba

Kort	#12 2026-03-26 21:23
Administrators Thanked: 227 tijden	Меня не бомбит совершенно. Но хозяин - барин. SED.by - создание сайтов, разработка плагинов и тем для Котонти

Sergeich	#13 2026-04-23 16:28
Editors Thanked: 17 tijden	Выглядит очень даже! Надо поползать внутри.

Kabak	#14 2026-05-04 18:40
Members Thanked: 48 tijden	Благодарю автора темы 👍️

vpktz	#15 2026-05-05 20:28
Members Thanked: 10 tijden	Вау, круто. Я бы хотел такую себе, эргономично, комфортно