Yii2-semantic-UI (замена Bootstrap)

Выкладываем свои наработки
zelenin
Сообщения: 10099
Зарегистрирован: 2013.04.20, 11:30

Yii2-semantic-UI (замена Bootstrap)

Сообщение zelenin » 2015.01.25, 05:29

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 - при выборе пункта в дропдауне страница бесконечно преезагружается (фф/хром). Причем на локалхосте такой проблемы не наблюдаю.

andreyrud
Сообщения: 265
Зарегистрирован: 2011.09.26, 14:59

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение andreyrud » 2015.02.08, 13:11

Как полностью удалить bootstrap и перейти на semantic-UI?

zelenin
Сообщения: 10099
Зарегистрирован: 2013.04.20, 11:30

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение zelenin » 2015.02.08, 13:21

ответ стандартный: чтобы не использовать бутстрап, нужно не использовать виджеты и расширения, которые используют бутстрап.
Для мягкой миграции есть два метода:
1. Для всех встрооенных виджетов с бутстрап-разметкой написаны семантик-аналоги. Можно заменить. Это предпочтительный метод.
2. Для сторонних расширений, где виджеты не заменить можно воспользоваться DI - прописать в bootstrap.php:

Код: Выделить всё

Yii::$container->set('yii\grid\GridView', '\Zelenin\yii\SemanticUI\GridView'); 
метод работает, но пока не очень хорошо протестирован. Думаю будут косяки при несовпадении сигнатур классов (навскидку Breadcrumb). Пишите, все оперативно поправлю.

andreyrud
Сообщения: 265
Зарегистрирован: 2011.09.26, 14:59

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение andreyrud » 2015.02.08, 18:10

1. Где посмотреть список всех вещей, тянущих за собой бутстрап? Никаких Nav, GridView не использую, из ассетов упоминание бутстрапа удалил, но в загрузке файлов вижу все равно bootstrap.css, bootstrap.js.
2. Хотелось бы увидеть общее мнение о semantic-UI в yii2 контексте. Вашу его оценку как уже опробовавшего.
3. Из demo почерпнул <?php echo Element::button("ok"); ?> Верстка на пхп теперь происходит?

zelenin
Сообщения: 10099
Зарегистрирован: 2013.04.20, 11:30

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение zelenin » 2015.02.08, 18:24

andreyrud писал(а):1. Где посмотреть список всех вещей, тянущих за собой бутстрап? Никаких Nav, GridView не использую, из ассетов упоминание бутстрапа удалил, но в загрузке файлов вижу все равно bootstrap.css, bootstrap.js.
поиском по коду BootstrapAsset::register - как-то так
andreyrud писал(а):2. Хотелось бы увидеть общее мнение о semantic-UI в yii2 контексте. Вашу его оценку как уже опробовавшего.
в контексте yii никакой разницы нет какой клиентский фреймворк будет использоваться. важны предоставляемые фичи. как человек, давно юзающий бутстрап и теперь перешедший на семантик, могу сказать что второй более фичастый и современный, а первый более олдскульный и ретроградный.
andreyrud писал(а):3. Из demo почерпнул <?php echo Element::button("ok"); ?> Верстка на пхп теперь происходит?
не понял вопроса.

Lastik
Сообщения: 16
Зарегистрирован: 2015.01.14, 17:20

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение Lastik » 2015.02.08, 19:55

А по размеру сам фреймворк как в сравнении с бутстрапом? модалки красивые... и вложенные вроде поддерживаются

zelenin
Сообщения: 10099
Зарегистрирован: 2013.04.20, 11:30

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение zelenin » 2015.02.08, 20:09

Lastik писал(а):А по размеру сам фреймворк как в сравнении с бутстрапом? модалки красивые... и вложенные вроде поддерживаются
пожирнее. min-версии загзипованные (js+css) весят 130 против 55 кб. но имхо некритично. Но настоящая модульная структура - можно все по частям собрать.

Lastik
Сообщения: 16
Зарегистрирован: 2015.01.14, 17:20

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение Lastik » 2015.02.09, 00:49

zelenin писал(а):
Lastik писал(а):А по размеру сам фреймворк как в сравнении с бутстрапом? модалки красивые... и вложенные вроде поддерживаются
пожирнее. min-версии загзипованные (js+css) весят 130 против 55 кб. но имхо некритично. Но настоящая модульная структура - можно все по частям собрать.
ну если он самодостаточен без jquery-ui то норм

andreyrud
Сообщения: 265
Зарегистрирован: 2011.09.26, 14:59

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение andreyrud » 2015.02.09, 12:24

ИМХО, в accordion параметр 'title' стоит переназвать в 'label', как во всех примерах в yii.

zelenin
Сообщения: 10099
Зарегистрирован: 2013.04.20, 11:30

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение zelenin » 2015.02.09, 12:33

andreyrud писал(а):ИМХО, в accordion параметр 'title' стоит переназвать в 'label', как во всех примерах в yii.
это нативное название семантика. не вижу смысла отходить от родной терминологии, учитывая что при использовании виджета будут использоваться демо моего виджета и демо семантик.

Аватара пользователя
Insolita
Сообщения: 788
Зарегистрирован: 2011.06.06, 01:39
Контактная информация:

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение Insolita » 2015.02.09, 13:05

занятно... решила поковырять, но что-то до конца не могу въехать в разметку грида... хочу сделать лейаут на подобие adminlte - с сайдбаром включенным по умолчанию но с возможностью скрытия

Код: Выделить всё

<?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(); ?>

но получается что при свернутом сайдбаре нормально http://joxi.ru/krD8bDnSZGe6rp а включенный не сжимает контент а уезжает его http://joxi.ru/DrlNGVJsZK7z2P

пока не понравилось то что иконки вроде как fontawesome но названия другие...

zelenin
Сообщения: 10099
Зарегистрирован: 2013.04.20, 11:30

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение zelenin » 2015.02.09, 13:19

Insolita писал(а): но получается что при свернутом сайдбаре нормально http://joxi.ru/krD8bDnSZGe6rp а включенный не сжимает контент а уезжает его http://joxi.ru/DrlNGVJsZK7z2P
ну да, так и в демо.
может это поможет http://semantic-ui.com/modules/sidebar.html#direction

andreyrud
Сообщения: 265
Зарегистрирован: 2011.09.26, 14:59

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение andreyrud » 2015.02.09, 13:36

zelenin писал(а):
andreyrud писал(а):ИМХО, в accordion параметр 'title' стоит переназвать в 'label', как во всех примерах в yii.
это нативное название семантика.
Дык нативные вещи семантика как раз и нужно скрыть во врапере для yii2. Оставив нативные вещи и стиль самого yii2.
Неплохо бы нарисовать сайдбар полностью, как отдельный виджет. То есть аккордион + вертикальное меню + субменю + сворачивание. Я с этим тоже долго возился...

Вначале srmantic.css есть import чего-то с гугла. Вроде иконки все есть в самом семантике, но этот импорт жутко тормозит...

andreyrud
Сообщения: 265
Зарегистрирован: 2011.09.26, 14:59

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение andreyrud » 2015.02.09, 13:50

ИМХО, в демо нужно добавить какие части семантика нужно пересобрать для задействования того или иного виджета/елемента.
Еще бы хотелось услышать про баги относительно бутстрапа и про вещи не реализованные и вызывающие трудности.

zelenin
Сообщения: 10099
Зарегистрирован: 2013.04.20, 11:30

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение zelenin » 2015.02.09, 13:59

andreyrud писал(а):Дык нативные вещи семантика как раз и нужно скрыть во врапере для yii2. Оставив нативные вещи и стиль самого yii2.
не-не-не. вы предлагаете одну абстракцию заменить другой, убрав интуитивность
Пока я пилил это расширение, достаточно глубоко погрузился в родные виджеты и хелперы - могу сказать, что сделаны они в разных стилях разными людьми и совершенно не могут являться примером.
andreyrud писал(а): Неплохо бы нарисовать сайдбар полностью, как отдельный виджет. То есть аккордион + вертикальное меню + субменю + сворачивание. Я с этим тоже долго возился...
сайдбар не является аккордионом с меню. там может быть абсолютно любое содержание. В моей демке это показано.
andreyrud писал(а):Вначале srmantic.css есть import чего-то с гугла. Вроде иконки все есть в самом семантике, но этот импорт жутко тормозит...
насколько помню, там просто шрифт грузится.

zelenin
Сообщения: 10099
Зарегистрирован: 2013.04.20, 11:30

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение zelenin » 2015.02.09, 14:02

andreyrud писал(а):ИМХО, в демо нужно добавить какие части семантика нужно пересобрать для задействования того или иного виджета/елемента.
поддерживается только полный пакет, без частей.
andreyrud писал(а): Еще бы хотелось услышать про баги относительно бутстрапа и про вещи не реализованные и вызывающие трудности.
эта тема не посвящена бутстрапу. Но трудностей нет. Насчет нереализованности - семантик просто более разнообразный, это можно понять, поюзав его.

Аватара пользователя
Insolita
Сообщения: 788
Зарегистрирован: 2011.06.06, 01:39
Контактная информация:

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение Insolita » 2015.02.09, 14:14

zelenin писал(а):
Insolita писал(а): но получается что при свернутом сайдбаре нормально http://joxi.ru/krD8bDnSZGe6rp а включенный не сжимает контент а уезжает его http://joxi.ru/DrlNGVJsZK7z2P
ну да, так и в демо.
может это поможет http://semantic-ui.com/modules/sidebar.html#direction
в принципе помогло просто добавление в конец пустой колонки. я там опечаталась еще... не могу понять что в ClientOptions дописать чтоб попробовать сменить направление и вместо push вариант overlay.

и как в именно ActiveForm полях добиться таких вот плюшек Изображение Изображение

zelenin
Сообщения: 10099
Зарегистрирован: 2013.04.20, 11:30

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение zelenin » 2015.02.09, 14:18

Insolita писал(а): в принципе помогло просто добавление в конец пустой колонки. я там опечаталась еще... не могу понять что в ClientOptions дописать чтоб попробовать сменить направление и вместо push вариант overlay.
думаю надо 'options' => ['class' => 'overlay']
Insolita писал(а): и как в именно ActiveForm полях добиться таких вот плюшек Изображение Изображение
пока хз )

Аватара пользователя
Insolita
Сообщения: 788
Зарегистрирован: 2011.06.06, 01:39
Контактная информация:

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение Insolita » 2015.02.09, 14:48

zelenin писал(а):
думаю надо 'options' => ['class' => 'overlay']
угу 'options' => ['class' => 'overlay right'] работает... но глючит переключалка глючит.. скрыть скрывает, а обратно не раскрывает, только затемнение идёт (если сразу не показывать, то тоже не включает, только dim срабатывает)

Аватара пользователя
Insolita
Сообщения: 788
Зарегистрирован: 2011.06.06, 01:39
Контактная информация:

Re: Yii2-semantic-UI (замена Bootstrap)

Сообщение Insolita » 2015.02.09, 14:52

Таки вот как его готовить надо было

Код: Выделить всё

<?= 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']
     ]
); ?>

Ответить