Тема на Semantic UI



Сегодня новый раздел магазина «Готовые сайты, темы» пополнился новой базовой темой на Semantic UI

Безусловно, это самый мощный CSS/JS-фреймворк из всех существующих (более 3 тысяч переменных для темизации, более 50 компонентов интерфейса), но, к сожалению, и самый сложный для изучения.

Поэтому, если вы не готовы углубленно изучить Semantic UI, даже не пытайтесь ставить это расширение.

Внутри чанки, пара шаблонов (главная и внутренняя страницы).

Как использовать
всё можно найти на сайте фрейморка Semantic UI, есть примеры разметки, использования js. Мы интегрировали один из шаблонов и собрали внутреннюю страницу из готовых примеров, тем самым постарались облегчить жизнь тем, кто знакомится с этом фреймворком.

Загрузить тему themeSemanticUI можно в магазине MODSTORE.
Stan Ezersky
Stan Ezersky
12 ноября 2015, 18:33
modx.pro
7 879
+8

Комментарии: 17

Николай Загумённов
Николай Загумённов
13 ноября 2015, 03:12
0
Спасибо)
Поэтому, если вы не готовы углубленно изучить Semantic UI, даже не пытайтесь ставить это расширение.
Аж, захотел поставить и глянуть)
    anatol
    anatol
    13 ноября 2015, 06:55
    0
    Глянул по диагонали. Прокаченный бутстрап. Сетка интереснее и синтаксис проще. Больше анимации. Больше плюшек (в том числе практически ненужных). Не понял в чем сложность освоения. Кэп, объясни! :)
      Алексей Федоров
      Алексей Федоров
      13 ноября 2015, 07:55
      +4
      Одно время работал со скриптом, который использовал Semantic Ui в качестве основы и сетку Bootstrap. Все красиво, все круто, действительно многие вещи настраиваются, но их банально слишком много. К примеру, разноцветность кнопочек по своему прикольная фича, но кому нужны *дцать цветов для кнопок? Мне в самых запущенных случаях требовалось 5 разных кнопок. И это касается практически всего. Та же анимация очень разная, но по факту не всегда ее столько нужно. Достаточно пары разновидностей, это если вообще нужна =)

      И потом когда вот так набираешь функционал, в итоге получается огромный файл, который нужно резать вручную, ибо кастомизатора нет. Вот тут и получается сложность — трата лишнего времени на оптимизацию файлов. Если есть опыт такой работы- — хорошо, нет — придется сидеть и разбираться, что? зачем? для чего? Не у всех есть базовые даже базовые знания CSS, а когда дело касается скриптов все становится еще веселее. А ведь грузить n *.js файлов, в каждом из которых прописаны «плюшки» для не используемых элементов — не самая разумная вещь с точки зрения производительности. Можно, конечно, отдавать пользователю при загрузке страницы пак скриптов и стилей в 1,5-2 мб, но это как-то не айс. Минимизация там не сильно поможет.

      (Врио КЭПа — Алексей)
        Владимир Шевченко
        Владимир Шевченко
        20 ноября 2015, 16:07
        0
        И потом когда вот так набираешь функционал, в итоге получается огромный файл, который нужно резать вручную, ибо кастомизатора нет. Вот тут и получается сложность — трата лишнего времени на оптимизацию файлов.
        Согласен с этим, что да приходиться так делать порой. Но с другой стороны, никто не мешает использовать less, если есть поддержка.)
        Stan Ezersky
        Stan Ezersky
        13 ноября 2015, 08:36
        +3
        Не понял в чем сложность освоения. Кэп, объясни! :)
        Это потому, что
        Глянул по диагонали
        :)

        Ну а теперь про нюансы:
        • правильное подключение нужных стилей и скриптов (в тему подключен 1 файл стилей и 1 файл скриптов от Семантика), а можно убрать лишнее и подключить только нужное;
        • многие застревают на построении сетки, как бы банально это ни было;
        • сложности с js, инициализацией скриптов;
        • сложности с кастомизацией и дальнейшей компиляцией файлов «под себя» (лишнее — вырезать, нужное врезать);
        • ступор с использованием элементов, например, кастомизированных селектов.
        Можно долго перечислять, в чём могут возникнуть сложности.
          anatol
          anatol
          13 ноября 2015, 10:37
          0
          Ну, сетка интересная, очень. Попробую из принципа на следующем проекте.
        Павел Сидоров
        Павел Сидоров
        13 ноября 2015, 07:37
        +1
        Он мне показался сильно громоздким. Половина не нужного многим будет, не нашел банального top-bar, который на мобильных устройствах отображался бы как у foundation zurb или у bootstrap, альтернатива мобильному меню там sidebar вроде только. На любителя короче =) Мне лично по душе больше foundation zurb.
          Stan Ezersky
          Stan Ezersky
          13 ноября 2015, 08:47
          +1
          Навбар для девайсов > 723px многим уже не нравится, приелся, наверное. А меню, выезжающее сбоку, конечно не новое, но всё-таки поинтереснее. Тем более, что строгой стандартизации по навигации для мобильных, планшетных девайсов нет.

          Он мне показался сильно громоздким.
          Позвольте спросим, чем именно?

          Что касается тяжёлых файлов стилей и скриптов, а так же

          Половина не нужного многим будет
          вместо

          <link rel="stylesheet" type="text/css" href="/assets/components/themesemanticui/semantic.css">
          можно сделать так

          <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/site.css">

  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
  ...................
          То есть подключить только необходимое. Со скриптами ситуации такая же.

          Огромный плюс Semantic UI — разделение на типы девайсов. А вот если использовать MobileDetect, можно очень продуктивно отдавать нужный контент
            Павел Сидоров
            Павел Сидоров
            13 ноября 2015, 09:27
            0
            Фреймвок хорош — бесспорно. Но он мне кажется монстром по-сравнению с другими. Не нравится топ бар многим, мб, но что такому монстру с огромнейшим количеством компонентов мешало его оставить. Вручную компоненты подключать в css,js можно конечно, но не хватает ему сборщика какого то.

            Наверняка многим он подойдет, это как зачем мне photoshop, если использую функционал Paint.net =)
              Stan Ezersky
              Stan Ezersky
              13 ноября 2015, 10:42
              0
              Не нравится топ бар многим, мб, но что такому монстру с огромнейшим количеством компонентов мешало его оставить.
              Его не было изначально, так что оставлять нечего. У каждого фреймворка свои компоненты, есть похожие, есть общие. В этом их прелесть — они разные.

              но не хватает ему сборщика какого то
              Моё мнение, что сборщик, в первую очередь — человек, веб-технолог или верстальщик. Его задача через препроцессоры CSS скомпилировать тему (LESS, SASS, Stylus и т.п.). То есть вёрстка делается под сайт, под конкретный дизайн и не имеет ничего лишнего, разве что ядро. Не нужен компонент — не включаем. Всё просто.
                Павел Сидоров
                Павел Сидоров
                13 ноября 2015, 12:02
                0
                Лично для меня проще взять что то более простое (не слишком простое как Skeleton) и понятное без финтифлюшек и добавить то чего нет. Чем обрезать какого нить монстра. Вот не лежит у меня душа к Semantic-ui и все тут.
                Мне не нравятся имена стилей там даже, да что там говорить, там практически к каждому объекту нужно прописывать стили =) Но на вкус и цвет короче… ;)

                <div class="feature alternate ui stripe vertical segment">
  <div class="ui three column center aligned divided relaxed stackable grid container">
                  Stan Ezersky
                  Stan Ezersky
                  13 ноября 2015, 13:26
                  0
                  Есть ещё Pure CSS, тоже как голый скелет вполне.

                  Тоже будет!
                    Stan Ezersky
                    Stan Ezersky
                    14 ноября 2015, 14:10
                    0
                    Будет и Skeleton, но в понедельник уже наверное.
              Владимир Шевченко
              Владимир Шевченко
              20 ноября 2015, 16:10
              0
              Опять же зависит от проекта и его нужд.)) С другой стороны практика показала, что многое из того попросту не используешь с чем согласен.
              Василий Столейков
              Василий Столейков
              13 ноября 2015, 11:50
              +2
              Долго думал выбирать ли Semantic UI как основной фреймворк для разработки после бутстрапа, но отказался от него по той же монструозной причине.
              В итоге перешел полностью на легковесный, но не менее крутой UiKit + выдернул нужный мне из Semantic UI шрифт для иконочных флагов стран.
              Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
              17