Комментарии 40
Выглядит весьма неплохо. Хочется увидеть кастомный select. А лучше — метабокс с возможностями ivaynberg.github.io/select2/.
«Semantic UI» и для изображения кнопки в примере мешанина
<div class="ui button"><i class="grid layout icon"></i></div>.
Подозреваю, что div только для примера, потому что с помощью классов в кнопку можно превратить всё что угодно.Например, ссылку в кнопку:
<a class="button">Дальше </a>
Авторы многих LESS-фреймворков в популистских целях в документации используют стандартные классы, тем самым создавая у новичков мнение, что ничего не придётся дописывать самому. На практике даже для простейшей странички бутстрапа нужно прописывать свой стиль (как минимум body padding-top), а в реальных проектах — так вообще все классы переделывать. К счастью, блоги не спят и кучу раз уже написали про mixin-ы и псевдо-mixin-ы. В двух словах: нужно создавать стили под разметку, а не подстраивать разметку под существующие стили. Возможный код на LESS:
И соответствующий код на HTML:
.toolbar {
.red; .ui; .icon; .buttons;
>div {
.ui; .button;
>i {
.layout; .icon;
}
}
}
И соответствующий код на HTML:
<div class="toolbar">
<div><i class="grid"></i></div>
<div><i class="block"></i></div>
<div><i class="list"></i></div>
</div>
А в чем мешанина? Сейчас эту же найти на сайте с планшета не могу, но есть похожая
НЛО прилетело и опубликовало эту надпись здесь
Если честно, мне не нравится идея писать селекторы, которые зависят от родителя. Почему не стоит делать так:
можно посмотреть в истории БЭМ.
Вкратце. На большом проекте условия css превращаются в длинные цепочки:
Возникают конфликты между одноимёнными стилями:
(да, я знаю что можно сделать так .day > .list, но тогда невозможно будет сделать обвёртку вокруг списка, или другой разработчик, реализовав её, будет искать что сломал).
И другое…
.layout.grid можно посмотреть в истории БЭМ.
Вкратце. На большом проекте условия css превращаются в длинные цепочки:
.day .list .item .title {}
Возникают конфликты между одноимёнными стилями:
.day .list .item .title {font-size:20px;}
.moments .list .item .title {font-size:22px;}
.title {font-size:32px;}
<div class="day"><div class="moments"><div class="moment">...</div></div></div>
(да, я знаю что можно сделать так .day > .list, но тогда невозможно будет сделать обвёртку вокруг списка, или другой разработчик, реализовав её, будет искать что сломал).
И другое…
Внешний вид шикарен, после уже приевшегося Bootstrap, даже несмотря на приевшийся flat стиль. Но авторы сильно прокосячили прямо на главной странице, сравнивая свою «семантическую» сетку, с «несемантической» сеткой нового TB.
У нового TB сетка — mobile first, отсюда и различного рода col-lg-4, так как у колонки может быть одновременно несколько разных классов, от разных сеток, для разных размеров страницы. И при таком раскладе, красивые лаконичные классы Semantic UI абсолютно бесполезны, и при попытке работать в таком ключе будет больше путаницы.
У нового TB сетка — mobile first, отсюда и различного рода col-lg-4, так как у колонки может быть одновременно несколько разных классов, от разных сеток, для разных размеров страницы. И при таком раскладе, красивые лаконичные классы Semantic UI абсолютно бесполезны, и при попытке работать в таком ключе будет больше путаницы.
Больше Bootstrap`ов! Хороших и разных! Еще Foundation есть.
Всё-таки без неймспейсов я бы не стал использовать.
Лучшее, что я видел на сегодняшний день — это UIkit. На вид очень похож на Twitter Bootstrap 3.0, но лучше во всех нюансах.
К стати, в дистрибутиве UIkit не очень хорошо работает tooltip, я писал разработчикам, в течении пары дней и баги поправили, добавили поддержку плавного появления и задержек, поэтому кому это важно — собирайте дистрибутив сами с исходников c GitHub пока не выпустят новую версию.
Лучшее, что я видел на сегодняшний день — это UIkit. На вид очень похож на Twitter Bootstrap 3.0, но лучше во всех нюансах.
К стати, в дистрибутиве UIkit не очень хорошо работает tooltip, я писал разработчикам, в течении пары дней и баги поправили, добавили поддержку плавного появления и задержек, поэтому кому это важно — собирайте дистрибутив сами с исходников c GitHub пока не выпустят новую версию.
жизнь станет радикально прекраснее когде все браузеры станут поддерживать стилизацию элементов форм и скролбаров
Думаю, надо добавить в статью поддержку браузерами.
Получается довольно симпатично.
Симпатично, но не семантично.
Семантика нулевая, хотя и называется Semantic
Не работает с отключенными скриптами (шрифты не проходят например) — про мобильные браузеры и о Graceful Degradation можно забыть.
Не работает с отключенными стилями.
Данный фреймворк подойдет разве только для себя и/или для своей админки. Ну и для приложений.
На веб сайтах его использовать всё же не стоит.
Одна проблема — это пре-релиз. Поэтому с оффсайта нельзя ничего скачать
А у меня есть кнопочка. Я особенный :-P
Цвета и стили прикольные, а вот «семантика» жуткая :-)
Похоже, что создатели поклонники породы Вельш-корги пемброк )
Пост автора на Reddit:
Пока всё это к прайм-тайму не готово.
На Hasker News написали про Semantic UI неожиданно для меня, и я прилагаю все усилия, чтобы ответить на вопросы. Но я не планировал продвигать Semantic UI в ближайшие месяцы.
В закладки
Почему-то я не вижу autocomplete… Я слепой?
А кто разработчик проекта? с бутстрапом все понятно, а вот тут интересно будет ли проект «фиксится» и «девелопится»,
а то возьмеш за основу интерфейс, а он через 6 мес. умирает, что-то похожее было с MochaUI на мутулз.
а то возьмеш за основу интерфейс, а он через 6 мес. умирает, что-то похожее было с MochaUI на мутулз.
Смотрите на гитхабе. Разработчик даже предлагает сотрудничество.
Ну очевидно же что разработчики сервиса Quirky, отличная вещь кстати. Вообще создается впечатление, что semantic — это эссенция из фронтенд наработок их сайта, т.е. практическое применение можно посмотреть здесь: www.quirky.com
овер 9000 подключаемых файлов, я правильно понял?
Тормозит
<div class="ui large red labeled icon button">
LOL
флэт дизайн такой флэт
Открываю Semantic UI и Chrome начинает жрать 100% процессора. Только у меня?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Semantic UI — почти альтернатива Bootstrap