Yii2-semantic-UI (замена Bootstrap)
Yii2-semantic-UI (замена Bootstrap)
https://github.com/zelenin/yii2-semantic-ui - GitHub расширения
http://yii2-semantic-ui.zelenin.pw - демо расширения
https://github.com/zelenin/yii2-semantic-ui-demo - GitHub демо расширения
http://semantic-ui.com - официальный сайт css-фреймворка
Обертка для одного из самых популярных css-фреймворков для тех, кто устал от практически остановившегося в развитии Бутстрапа.
Версии выпускаются чуть ли не через день. Ошибку, о которой я отписался на ГитХабе, починили на следующий день (я правда сам и написал решение). Пока писал обертку версия подросла с 1.4 до 1.8 с появлением новых фич прямо на глазах).
Визуально разнообразнее + есть несколько тем из коробки. Покрывает больше кейсов из коробки, чем бутстрап.
- небольшой скрин админки на семантике
На данный момент функционал семантика покрыт в расширении процентов на 60-70, но все основное (обертки над GridView и пр., строчные элементы, меню, крошки) уже реализовано - см. демку. Активно доделываю оставшееся.
Отвечу на все вопросы, приму любой фидбэк, кроме холиваров фреймворков, выслушаю пожелания и указания на ошибки.
Также интересно будет посмотреть на проект демо-сайта, из которого удалено все лишнее - остался самый базовый каркас, достаточный для поднятия сайта.
Также заметил непонятный баг на http://yii2-semantic-ui.zelenin.pw/yii2 ... -view.html - при выборе пункта в дропдауне страница бесконечно преезагружается (фф/хром). Причем на локалхосте такой проблемы не наблюдаю.
http://yii2-semantic-ui.zelenin.pw - демо расширения
https://github.com/zelenin/yii2-semantic-ui-demo - GitHub демо расширения
http://semantic-ui.com - официальный сайт css-фреймворка
Обертка для одного из самых популярных css-фреймворков для тех, кто устал от практически остановившегося в развитии Бутстрапа.
Версии выпускаются чуть ли не через день. Ошибку, о которой я отписался на ГитХабе, починили на следующий день (я правда сам и написал решение). Пока писал обертку версия подросла с 1.4 до 1.8 с появлением новых фич прямо на глазах).
Визуально разнообразнее + есть несколько тем из коробки. Покрывает больше кейсов из коробки, чем бутстрап.
- небольшой скрин админки на семантике
На данный момент функционал семантика покрыт в расширении процентов на 60-70, но все основное (обертки над GridView и пр., строчные элементы, меню, крошки) уже реализовано - см. демку. Активно доделываю оставшееся.
Отвечу на все вопросы, приму любой фидбэк, кроме холиваров фреймворков, выслушаю пожелания и указания на ошибки.
Также интересно будет посмотреть на проект демо-сайта, из которого удалено все лишнее - остался самый базовый каркас, достаточный для поднятия сайта.
Также заметил непонятный баг на http://yii2-semantic-ui.zelenin.pw/yii2 ... -view.html - при выборе пункта в дропдауне страница бесконечно преезагружается (фф/хром). Причем на локалхосте такой проблемы не наблюдаю.
Re: Yii2-semantic-UI (замена Bootstrap)
Как полностью удалить bootstrap и перейти на semantic-UI?
Re: Yii2-semantic-UI (замена Bootstrap)
ответ стандартный: чтобы не использовать бутстрап, нужно не использовать виджеты и расширения, которые используют бутстрап.
Для мягкой миграции есть два метода:
1. Для всех встрооенных виджетов с бутстрап-разметкой написаны семантик-аналоги. Можно заменить. Это предпочтительный метод.
2. Для сторонних расширений, где виджеты не заменить можно воспользоваться DI - прописать в bootstrap.php:
метод работает, но пока не очень хорошо протестирован. Думаю будут косяки при несовпадении сигнатур классов (навскидку Breadcrumb). Пишите, все оперативно поправлю.
Для мягкой миграции есть два метода:
1. Для всех встрооенных виджетов с бутстрап-разметкой написаны семантик-аналоги. Можно заменить. Это предпочтительный метод.
2. Для сторонних расширений, где виджеты не заменить можно воспользоваться DI - прописать в bootstrap.php:
Код: Выделить всё
Yii::$container->set('yii\grid\GridView', '\Zelenin\yii\SemanticUI\GridView');
Re: Yii2-semantic-UI (замена Bootstrap)
1. Где посмотреть список всех вещей, тянущих за собой бутстрап? Никаких Nav, GridView не использую, из ассетов упоминание бутстрапа удалил, но в загрузке файлов вижу все равно bootstrap.css, bootstrap.js.
2. Хотелось бы увидеть общее мнение о semantic-UI в yii2 контексте. Вашу его оценку как уже опробовавшего.
3. Из demo почерпнул <?php echo Element::button("ok"); ?> Верстка на пхп теперь происходит?
2. Хотелось бы увидеть общее мнение о semantic-UI в yii2 контексте. Вашу его оценку как уже опробовавшего.
3. Из demo почерпнул <?php echo Element::button("ok"); ?> Верстка на пхп теперь происходит?
Re: Yii2-semantic-UI (замена Bootstrap)
поиском по коду BootstrapAsset::register - как-то такandreyrud писал(а):1. Где посмотреть список всех вещей, тянущих за собой бутстрап? Никаких Nav, GridView не использую, из ассетов упоминание бутстрапа удалил, но в загрузке файлов вижу все равно bootstrap.css, bootstrap.js.
в контексте yii никакой разницы нет какой клиентский фреймворк будет использоваться. важны предоставляемые фичи. как человек, давно юзающий бутстрап и теперь перешедший на семантик, могу сказать что второй более фичастый и современный, а первый более олдскульный и ретроградный.andreyrud писал(а):2. Хотелось бы увидеть общее мнение о semantic-UI в yii2 контексте. Вашу его оценку как уже опробовавшего.
не понял вопроса.andreyrud писал(а):3. Из demo почерпнул <?php echo Element::button("ok"); ?> Верстка на пхп теперь происходит?
Re: Yii2-semantic-UI (замена Bootstrap)
А по размеру сам фреймворк как в сравнении с бутстрапом? модалки красивые... и вложенные вроде поддерживаются
Re: Yii2-semantic-UI (замена Bootstrap)
пожирнее. min-версии загзипованные (js+css) весят 130 против 55 кб. но имхо некритично. Но настоящая модульная структура - можно все по частям собрать.Lastik писал(а):А по размеру сам фреймворк как в сравнении с бутстрапом? модалки красивые... и вложенные вроде поддерживаются
Re: Yii2-semantic-UI (замена Bootstrap)
ну если он самодостаточен без jquery-ui то нормzelenin писал(а):пожирнее. min-версии загзипованные (js+css) весят 130 против 55 кб. но имхо некритично. Но настоящая модульная структура - можно все по частям собрать.Lastik писал(а):А по размеру сам фреймворк как в сравнении с бутстрапом? модалки красивые... и вложенные вроде поддерживаются
Re: Yii2-semantic-UI (замена Bootstrap)
ИМХО, в accordion параметр 'title' стоит переназвать в 'label', как во всех примерах в yii.
Re: Yii2-semantic-UI (замена Bootstrap)
это нативное название семантика. не вижу смысла отходить от родной терминологии, учитывая что при использовании виджета будут использоваться демо моего виджета и демо семантик.andreyrud писал(а):ИМХО, в accordion параметр 'title' стоит переназвать в 'label', как во всех примерах в yii.
Re: Yii2-semantic-UI (замена Bootstrap)
занятно... решила поковырять, но что-то до конца не могу въехать в разметку грида... хочу сделать лейаут на подобие adminlte - с сайдбаром включенным по умолчанию но с возможностью скрытия
но получается что при свернутом сайдбаре нормально http://joxi.ru/krD8bDnSZGe6rp а включенный не сжимает контент а уезжает его http://joxi.ru/DrlNGVJsZK7z2P
пока не понравилось то что иконки вроде как fontawesome но названия другие...
Код: Выделить всё
<?php
use yii\helpers\Html;
use Zelenin\yii\SemanticUI\collections\Menu;
use Zelenin\yii\SemanticUI\Elements;
use Zelenin\yii\SemanticUI\modules\Sidebar;
/**
* @var yii\web\View $this
* @var string $content
*/
?>
<?php $this->beginContent('@themes/semantic/layouts/_base.php'); ?>
<?= Menu::widget(
[
'topAttached' => true,
'fluid' => true,
'inverted' => true,
'items' => [
[
'label' => ' <i class="content icon"></i>
<span class="text">Menu</span>', 'encode' => false,
'url' => '#', 'options' => ['id' => 'sidebar-toggle']
],
[
'label' => 'Only label'
],
[
'label' => 'Message',
'items' => [
[
'label' => 'Menu',
'url' => ['/demo/collections/menu']
],
[
'label' => 'Message',
'url' => ['/demo/collections/message']
],
[
'label' => 'Only label'
],
[
'label' => 'Message',
'url' => ['/demo/collections/message']
],
]
],
],
'rightMenuItems' => [
[
'label' => Elements::icon('bell')
. Html::tag(
'div',
\common\models\SystemEvent::find()->today()->count()
, ['class' => 'ui teal label']
), 'encode' => false,
'items' => [
[
'label' => 'Only label'
],
[
'label' => 'Only label'
],
[
'label' => 'Only label'
]
]
],
[
'label' => 'Message',
'url' => ['/demo/collections/message']
]
]
]
);
?>
<div class="ui grid">
<div id="content" class="sixteen wide column">
<div class="four wide columns">
<?= Sidebar::widget(
[
'id' => 'admin-sidebar',
'visible' => true,
'width' => Sidebar::WIDTH_THIN,
'content' => $this->render('@themes/semantic/layouts/_menu')
]
); ?>
</div>
<div class="twelve wide columns">
<div class="ui vertical segment">
<div class="ui basic top blue segment">
<?php echo Elements::header(
\yii\helpers\ArrayHelper::getValue($this->params, 'title', Yii::$app->name), ['tag' => 'h1']
); ?>
</div>
<div class="ui attached segment">
<?= $content ?>
</div>
<div class="ui bottom attached secondary segment"></div>
</div>
</div>
</div>
<?php
$this->registerJs('jQuery("#sidebar-toggle").click(function() { jQuery("#admin-sidebar").sidebar("toggle"); });');
?>
<?php $this->endContent(); ?>
пока не понравилось то что иконки вроде как fontawesome но названия другие...
Re: Yii2-semantic-UI (замена Bootstrap)
ну да, так и в демо.Insolita писал(а): но получается что при свернутом сайдбаре нормально http://joxi.ru/krD8bDnSZGe6rp а включенный не сжимает контент а уезжает его http://joxi.ru/DrlNGVJsZK7z2P
может это поможет http://semantic-ui.com/modules/sidebar.html#direction
Re: Yii2-semantic-UI (замена Bootstrap)
Дык нативные вещи семантика как раз и нужно скрыть во врапере для yii2. Оставив нативные вещи и стиль самого yii2.zelenin писал(а):это нативное название семантика.andreyrud писал(а):ИМХО, в accordion параметр 'title' стоит переназвать в 'label', как во всех примерах в yii.
Неплохо бы нарисовать сайдбар полностью, как отдельный виджет. То есть аккордион + вертикальное меню + субменю + сворачивание. Я с этим тоже долго возился...
Вначале srmantic.css есть import чего-то с гугла. Вроде иконки все есть в самом семантике, но этот импорт жутко тормозит...
Re: Yii2-semantic-UI (замена Bootstrap)
ИМХО, в демо нужно добавить какие части семантика нужно пересобрать для задействования того или иного виджета/елемента.
Еще бы хотелось услышать про баги относительно бутстрапа и про вещи не реализованные и вызывающие трудности.
Еще бы хотелось услышать про баги относительно бутстрапа и про вещи не реализованные и вызывающие трудности.
Re: Yii2-semantic-UI (замена Bootstrap)
не-не-не. вы предлагаете одну абстракцию заменить другой, убрав интуитивностьandreyrud писал(а):Дык нативные вещи семантика как раз и нужно скрыть во врапере для yii2. Оставив нативные вещи и стиль самого yii2.
Пока я пилил это расширение, достаточно глубоко погрузился в родные виджеты и хелперы - могу сказать, что сделаны они в разных стилях разными людьми и совершенно не могут являться примером.
сайдбар не является аккордионом с меню. там может быть абсолютно любое содержание. В моей демке это показано.andreyrud писал(а): Неплохо бы нарисовать сайдбар полностью, как отдельный виджет. То есть аккордион + вертикальное меню + субменю + сворачивание. Я с этим тоже долго возился...
насколько помню, там просто шрифт грузится.andreyrud писал(а):Вначале srmantic.css есть import чего-то с гугла. Вроде иконки все есть в самом семантике, но этот импорт жутко тормозит...
Re: Yii2-semantic-UI (замена Bootstrap)
поддерживается только полный пакет, без частей.andreyrud писал(а):ИМХО, в демо нужно добавить какие части семантика нужно пересобрать для задействования того или иного виджета/елемента.
эта тема не посвящена бутстрапу. Но трудностей нет. Насчет нереализованности - семантик просто более разнообразный, это можно понять, поюзав его.andreyrud писал(а): Еще бы хотелось услышать про баги относительно бутстрапа и про вещи не реализованные и вызывающие трудности.
Re: Yii2-semantic-UI (замена Bootstrap)
в принципе помогло просто добавление в конец пустой колонки. я там опечаталась еще... не могу понять что в ClientOptions дописать чтоб попробовать сменить направление и вместо push вариант overlay.zelenin писал(а):ну да, так и в демо.Insolita писал(а): но получается что при свернутом сайдбаре нормально http://joxi.ru/krD8bDnSZGe6rp а включенный не сжимает контент а уезжает его http://joxi.ru/DrlNGVJsZK7z2P
может это поможет http://semantic-ui.com/modules/sidebar.html#direction
и как в именно ActiveForm полях добиться таких вот плюшек
Re: Yii2-semantic-UI (замена Bootstrap)
думаю надо 'options' => ['class' => 'overlay']Insolita писал(а): в принципе помогло просто добавление в конец пустой колонки. я там опечаталась еще... не могу понять что в ClientOptions дописать чтоб попробовать сменить направление и вместо push вариант overlay.
пока хз )Insolita писал(а): и как в именно ActiveForm полях добиться таких вот плюшек
Re: Yii2-semantic-UI (замена Bootstrap)
угу 'options' => ['class' => 'overlay right'] работает... но глючит переключалка глючит.. скрыть скрывает, а обратно не раскрывает, только затемнение идёт (если сразу не показывать, то тоже не включает, только dim срабатывает)zelenin писал(а):
думаю надо 'options' => ['class' => 'overlay']
Re: Yii2-semantic-UI (замена Bootstrap)
Таки вот как его готовить надо было
Код: Выделить всё
<?= Sidebar::widget(
[
'id' => 'admin-sidebar',
'visible' => true,
'content' => $this->render('@themes/semantic/layouts/_menu'),
'options'=>['class'=>'right vertical inverted labeled icon menu overlay '],
'clientOptions'=>['closable'=>false,'dimPage'=>false,'transition'=>'overlay']
]
); ?>