Semantic UI — почти альтернатива Bootstrap

    image
    Наткнулся сегодня на одну интересную штуку.
    Semantic UI — это фреймворк для создания переносимых интерфейсов, который поможет повторно использовать элементы UI в своих проектах. Такая себе альтернатива Bootstrap.
    Небольшой пример — если вы хотите добавить в свой проект что-то похожее на кнопку

    просто воспользуйтесь следующими элементами:
    semantic add button
    semantic add icon
    

    после чего добавьте в html:
    <div class="red ui icon buttons">
      <div class="ui button">
        <i class="grid layout icon"></i>
      </div>
      <div class="ui button">
        <i class="block layout icon"></i>
      </div>
      <div class="ui button">
        <i class="list layout icon"></i>
      </div>
    </div>
    


    Получается довольно симпатично. На официальном сайте все организовано хорошо, есть краткие гайды. Одна проблема — это пре-релиз. Поэтому с оффсайта нельзя ничего скачать. Для этого идем на ГитХаб. Уже можно.
    Зато прямо на сайте собрана коллекция основных элементов интерфейса — от кнопок до простых форм регистрации.
    Semantic UI только начинает развиваться, автор на гитхабе даже предлагает всем желающим принять участие в работе над Semantic. Обращаться на e-mail jack@semantic-ui.com

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 40

      +4
      Выглядит весьма неплохо. Хочется увидеть кастомный select. А лучше — метабокс с возможностями ivaynberg.github.io/select2/.
        –1
        Так dropdown же…
        +6
        «Semantic UI» и для изображения кнопки в примере мешанина <div class="ui button"><i class="grid layout icon"></i></div>.
          0
            0
            Подозреваю, что div только для примера, потому что с помощью классов в кнопку можно превратить всё что угодно.Например, ссылку в кнопку:
            <a class="button">Дальше </a>
            
              +1
              Оно понятно, что можно, но зачем?
              Пусть ссылки будут ссылками, а кнопки — кнопками.
                0
                Ну тогда для кнопок есть специальные теги
                <button>
                и
                <input type="button/submit">

                Но конечно input стоит применять для форм.

                В остальных случаях. особенно если происходит переход на другую страницу, эта кнопка должна быть обязательно ссылкой.
              0
              Авторы многих LESS-фреймворков в популистских целях в документации используют стандартные классы, тем самым создавая у новичков мнение, что ничего не придётся дописывать самому. На практике даже для простейшей странички бутстрапа нужно прописывать свой стиль (как минимум body padding-top), а в реальных проектах — так вообще все классы переделывать. К счастью, блоги не спят и кучу раз уже написали про mixin-ы и псевдо-mixin-ы. В двух словах: нужно создавать стили под разметку, а не подстраивать разметку под существующие стили. Возможный код на LESS:
              .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>
              
              0
              А в чем мешанина? Сейчас эту же найти на сайте с планшета не могу, но есть похожая
              • UFO just landed and posted this here
                  +9
                  Если честно, мне не нравится идея писать селекторы, которые зависят от родителя. Почему не стоит делать так:
                  .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, но тогда невозможно будет сделать обвёртку вокруг списка, или другой разработчик, реализовав её, будет искать что сломал).

                  И другое…
                    +4
                    Полностью согласен с вами, ни о каких «переносимых» интерфейсах тут речи быть не может.
                    +1
                    Внешний вид шикарен, после уже приевшегося Bootstrap, даже несмотря на приевшийся flat стиль. Но авторы сильно прокосячили прямо на главной странице, сравнивая свою «семантическую» сетку, с «несемантической» сеткой нового TB.

                    У нового TB сетка — mobile first, отсюда и различного рода col-lg-4, так как у колонки может быть одновременно несколько разных классов, от разных сеток, для разных размеров страницы. И при таком раскладе, красивые лаконичные классы Semantic UI абсолютно бесполезны, и при попытке работать в таком ключе будет больше путаницы.
                      +9
                      Больше Bootstrap`ов! Хороших и разных! Еще Foundation есть.
                        0
                        Не впечатлил… Какой-то он никакой… Semantic понравился больше.
                          +2
                          Он позиционируется не для админок, а для разработки.
                        +3
                        Всё-таки без неймспейсов я бы не стал использовать.
                        Лучшее, что я видел на сегодняшний день — это UIkit. На вид очень похож на Twitter Bootstrap 3.0, но лучше во всех нюансах.
                        К стати, в дистрибутиве UIkit не очень хорошо работает tooltip, я писал разработчикам, в течении пары дней и баги поправили, добавили поддержку плавного появления и задержек, поэтому кому это важно — собирайте дистрибутив сами с исходников c GitHub пока не выпустят новую версию.
                          0
                          Кстати UIkit разрабатывают чуваки из Yootheme и он по-сути тоже выжимка из их многолетнего опыта создания и унификации тем. Однако не сказал бы что там все гладко и semantic как мне кажется может стать круче.
                          +3
                          жизнь станет радикально прекраснее когде все браузеры станут поддерживать стилизацию элементов форм и скролбаров
                          0
                          Думаю, надо добавить в статью поддержку браузерами.
                            +2
                            Получается довольно симпатично.

                            Симпатично, но не семантично.

                            Семантика нулевая, хотя и называется Semantic
                            Не работает с отключенными скриптами (шрифты не проходят например) — про мобильные браузеры и о Graceful Degradation можно забыть.
                            Не работает с отключенными стилями.

                            Данный фреймворк подойдет разве только для себя и/или для своей админки. Ну и для приложений.
                            На веб сайтах его использовать всё же не стоит.

                            Одна проблема — это пре-релиз. Поэтому с оффсайта нельзя ничего скачать

                            А у меня есть кнопочка. Я особенный :-P
                              0
                              Она и была, только ничего не делала :-) Уже все работает
                                +1
                                Даже пара ссылок:
                                +1
                                Цвета и стили прикольные, а вот «семантика» жуткая :-)
                                  0
                                  Похоже, что создатели поклонники породы Вельш-корги пемброк )
                                    0
                                    Пост автора на Reddit:
                                    Пока всё это к прайм-тайму не готово.

                                    На Hasker News написали про Semantic UI неожиданно для меня, и я прилагаю все усилия, чтобы ответить на вопросы. Но я не планировал продвигать Semantic UI в ближайшие месяцы.
                                      0
                                      В закладки
                                        +1
                                        Почему-то я не вижу autocomplete… Я слепой?
                                          –2
                                          А кто разработчик проекта? с бутстрапом все понятно, а вот тут интересно будет ли проект «фиксится» и «девелопится»,
                                          а то возьмеш за основу интерфейс, а он через 6 мес. умирает, что-то похожее было с MochaUI на мутулз.
                                            0
                                            Смотрите на гитхабе. Разработчик даже предлагает сотрудничество.
                                              0
                                              Ну очевидно же что разработчики сервиса Quirky, отличная вещь кстати. Вообще создается впечатление, что semantic — это эссенция из фронтенд наработок их сайта, т.е. практическое применение можно посмотреть здесь: www.quirky.com
                                              –2
                                              овер 9000 подключаемых файлов, я правильно понял?
                                                0
                                                Тормозит
                                                  0
                                                  <div class="ui large red labeled icon button">
                                                  

                                                  LOL
                                                    –1
                                                    флэт дизайн такой флэт
                                                      0
                                                      Флэт юмор такой флэт
                                                        –6
                                                        kletka.net/uploads/posts/2012-02/1329262760_nahuy-eto-tuda.jpg
                                                          0
                                                          Прости, чувак, пришлось. До встречи
                                                      0
                                                      Открываю Semantic UI и Chrome начинает жрать 100% процессора. Только у меня?

                                                      Only users with full accounts can post comments. Log in, please.