1 (2015-09-29 17:16:40 отредактировано pavlexx)

Тема: UiKit framework. Что за зверь, и как подружить с GetSimple!?

UIKit легкий и модульный front-end фреймворк для разработки быстрых и мощных веб-интерфейсов.
Именно так позиционируют разработчики свое детище!
UIKit родился в недрах компании Yootheme и вышел в свет после долгого тестирования и обкатки в проектах и шаблонах компании в июле 2013 года.

Изначально фреймворк задумывался (да таким и получился) как современный, быстрый и модульный, что с одной стороны накладывает некоторые ограничения на использование поддержка ie9+, но позволяет отбросить большой пласт «хаков и хуков», который приходится поддерживать в проектах «конкурентов».

Фрейморк сделан с использованием LESS. В случае UIKit ядро полностью отделено от стилей «шаблона». Удобные
переменные позволят быстро сориентироваться и подогнать внешний вид под себя. Кто плохо ориентируется в LESS или не ориентируется вообще — есть удобный Customizer. Так же в комплекте идут две темы оформления Almost-Flat и Gradient.

UIKit предлагает более 30 модульных и расширяемых компонентов, которые могут быть объединены друг с другом.
Компоненты разделены на разделы в соответствии с их назначением и функциональностью. Так же имеются дополнительные компоненты которые используют не только CSS, но и JavaScript.

Размер основного CSS в сжатом виде составляет всего 92,7 КБ, а размер файла js - 48,1 КБ.
А дополнительные компоненты можно подключать по мере необходимости:

/ CSS
    / компоненты
       
        autocomplete.min.css
        ...

/ JS
    / компоненты
        
        autocomplete.min.js
        ...

Стартовая HTML разметка с подключенным UiKit будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
    </head>
    <body>
    </body>
</html>

Заявлена поддержка IE9+, Safari 7.1+ и всех остальных современных браузеров.
Для тех, кто использует LESS или SASS (SCSS) - можно скачать пакет с Github.

Ссылки:
Главная страница UiKit.
Ресурс на GitHub.
Customizer.
Изменения в версиях.

На этом краткая справка по фреймворку закончена, и я предлагаю в этой теме делиться своими наработками, мнением, возможностями... UiKit.

В общем обсуждать "дружбу" UiKit и GetSimple!


P.S. Спешу сообщить, что вышла бета версия CMS от Yootheme и называется сие чудо Pagekit!

Вот как презентуют свою CMS разработчики:

Pagekit - это модульная и легкая CMS, построенная на современных технологиях. Она дает вам инструменты для создания прекрасных веб-сайтов. Все это завернуто в чистый и интуитивно понятный интерфейс пользователя.

Если разработчики не забросят свое детище - то с выходом релиза, я думаю переключусь на Pagekit! Уж очень она интересной получается и удобной, даже на стадии беты! Из "коробки" можно без проблем создавать сайты-визитки с блогом/новостями. И построена эта CMS как раз с использованием UIKit. wink

Поблагодарить за помощь можно через Яндекс!

Поделиться

2 (2015-09-13 14:38:58 отредактировано 0zz)

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Сделан красиво, добротно.. Отличный подбор javascript эффектов. GS универсален, прикрутить этот фреймворк к шаблону не должно быть трудным, думаю. Несколько напрягает постоянное использование "uk-", не нравится такая сильная "прививка" ))

Попробую его на следующем проекте, вместо бутстрапа, прям сейчас и начну ))

Интересно, что Бутстрап полностью уходит от less к sass.. Впрочем, это не принципиально.

Поделиться

3

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Я все свои проекты верстаю только на UiKit и SASS. Очень быстро получается и удобно, особенно с библиотекой mixins.
Собственно свое знакомство с фреймворками начал именно с UiKit, потом рассматривал другие и в конечном счете вернулся на UiKit и пока уходить с него не собираюсь! wink
Есть уже много наработок по связке UiKit и GetSimple (адаптивность, рендеринг меню, SpecialPage...).
Постепенно буду размещать здесь готовый код для использования с пояснениями и конечно для обсуждения, с целью улучшения кода и оптимизации.

Поблагодарить за помощь можно через Яндекс!

Поделиться

4

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

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

Кстати, я тоже для себя держу такую "сборку" с готовым набором плагинов, настроенным gsconfig и папкой с темой, где лежат уже готовые стили, скрипты, иконки и template.php с прописанными кодами вставки всего, что используется обычно: меню, контента, коды смены языков, вставки компонентов, настройки поиска и т.п. - чтобы каждый раз не искать ))

Поделиться

5

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Посвящается всем тем кто до сих пор пишет стили на чистом CSS!

Думаю вы слышали что такое препроцессоры, но по какой-то причине так и не решились попробовать!?
Хочу привести простой пример, который продемонстрирует преимущество препроцессоров:
допустим нас не устраивает внешний вид компонента uk-navbar, мы бы хотели изменить его высоту, т. к. по умолчанию панель меню имеет высоту 40px. Можно пойти несколькими путями для решения этой задачи...
1. Воспользоваться Customizer, прописать там нужную высоту и скачать готовый CSS
2. Прописать нужные свойства в классе .uk-navbar, но при этом, скорее всего, придется добавить !important
3. Добавить свой класс, например height-navbar, прописать свои стили и опять таки.... !important
Все это хорошо и ничего сложного в этом нет, разве что это не рационально и нужно выполнить лишние действия!
И дело еще в том, что прописывая height в классе .uk-navbar мы некоим образом не повлияем на высоту компонентов содержащихся в navbar (navbar-brand, navbar-toggle...) т.к. высота этих элементов задается в своих классах.

Я же поступлю по другому:
Используя препроцессор SASS - мне достаточно в файле variables.scss изменить значение переменной $navbar-nav-height на нужное и все! И не нужно переписывать стили или добавлять свои!

И это только капля возможностей препроцессоров.
А как вам такая конструкция:

&:after {
    content: "";
    display: block;
    height: 0;
    position: absolute;

      @if $top {
        top: $top;
      }
      @else {
        top: 50%;
        margin-top: (-$width/2);
      }
      @if $left {
        left: $left;
      }
      @else {
        left: 50%;
        margin-left: (-$width/2);
      }
}

Или такой пример (код из библиотеки mixin):

// Буквица для абзаца
@mixin pa-f-cap {
  &:first-letter {
    @include pa-rem(margin-right, 0.75rem);
    float: left;
    font-size: 3em;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
  }
}

А потом используем нашу заготовку (mixin):

p {
  @include pa-f-cap;
}

Если вы еще не пробовали препроцессоры - самое время начать использовать в своих проектах LESS или SASS...! smile

P.S. Если интересна данная тема - в следующем посте напишу как на автомате компилировать файлы *.less или *.scss в готовый *.css

Поблагодарить за помощь можно через Яндекс!

Поделиться

6

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

у Мартина есть плагины для использования .less и .scss, мне пока, увы, не пригодились

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

7 (2015-09-14 20:12:22 отредактировано pavlexx)

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Плагины не нужны, я компиляцию выполняю на рабочем компе, а на хостинг заливаю уже готовый CSS.
Могу записать видео по настройке и компиляции, но куда залить не знаю, своего канала нет на youtube.

Поблагодарить за помощь можно через Яндекс!

Поделиться

8

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

у вас нет Google почты?

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

9

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Есть конечно! smile
Просто нет желания заливать одно видео на неоформленный канал.
Посмотрю, может залью и размещу здесь ссылку.

Поблагодарить за помощь можно через Яндекс!

Поделиться

10

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

а программы есть какие-нибудь для работы с SASS?
например для работы с CSS я использую TopStyle

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

11 (2015-09-15 00:07:16 отредактировано pavlexx)

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Я использую Brackets для кодинга и Prepros для компиляции SASS налету.
В Brackets установлены следующие расширения:
Brackets Icons
Brackets Tools
Documents Toolbar
Emmet
Fonts
Monokai Dark Soda
Indent Guides

Чтобы увидеть результат в браузере я вообще не перегружаю страницу - все на автомате!
В Prepros есть превью и синхронизация с браузером.
Все что нужно сделать - это перенести папку с темой в окно Prepros и указать Live Preview Custom Server (путь к сайту на локальном сервере).
После этого Prepros будет отслеживать все изменения, производимые в файлах темы, и компилировать SASS файлы, обновлять окно в браузере...
И это только часть возможностей!

P.S. Официальная документация по SASS
Еще один сайт с документацией

Поблагодарить за помощь можно через Яндекс!

Поделиться

12 (2015-09-15 16:50:40 отредактировано pavlexx)

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Всем привет!

Записал небольшое видео, как обещал. wink
Прошу не пинать и помидорами не закидывать - опыта в скринкастинге нет, можно сказать, что это первое видео. smile
Да и записал на скорую руку, пока окно в работе появилось.
Еще раз прошу извинить, если что не так!
Настройка Prepros

P.S. если устроит видео - запишу по Brackets (редактор кода)

Поблагодарить за помощь можно через Яндекс!
+ 0zz

Поделиться

13

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Все отлично! Хотелось бы чуть больше наработок и помощи именно по UiKit - начал работать с ним и все время путаюсь: много условностей и все эти uk-nav, uk-navbar, uk-container-что-нибудь - их слишком много, и не нашел подробного описания. Уже каша в голове от кучи из которой состоит каждая колонка типа

<div class="uk-grid uk-grid-large-1-3 uk-grid-width-medium-1-2 uk-grid-width-small-1-1">..

На офиц сайте, тоже неудобно изучать, нет возможности сразу копировать куски кода, как в бутстрапе..

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

Поделиться

14 (2015-09-15 18:15:44 отредактировано pavlexx)

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Все понял!
С разметки и начну тогда: грид, меню....
А то не знал с чего начать, что в первую очередь интересует.

Вопрос: оформлять постами с примерами кода или лучше видео записать!?

Поблагодарить за помощь можно через Яндекс!

Поделиться

15

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Ой спасибочки! )) Лично мне гораздо удобнее читать - легче находить то, что нужно, скользя по тексту и легче понимаю.. Имхо, видео-туториалы нужны в тех случаях, когда нужно реально показать что и куда тыкать мышью (настройка винды для блондинок, работа с CMS для пользователей и др.), а для кодеров - видео это тупик развития.. ))

Но оставляю на ваше усмотрение!

Поделиться

16

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Не вопрос!
Подготовлю текстовку и размещу в ближайшее время! wink

Поблагодарить за помощь можно через Яндекс!

Поделиться

17

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

ох, боюсь, много вам писать придется smile может быть лучше начать сразу отдельный сайт?

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

18

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Мне кажется если задать направление - каждый сам дальше сможет разобраться!? wink
Я хочу показать самые основы, то что сам уже сто раз перепробовал и наработал.
А там посмотрим как пойдет!
Сайт с русским мануалом - тоже не малые труды! wink

Поблагодарить за помощь можно через Яндекс!

Поделиться

19

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

pavlexx пишет:

Сайт с русским мануалом - тоже не малые труды! wink

это да, по бутсрапу есть несколько поползновений, но не законченные какие-то

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

20 (2015-09-17 10:23:17 отредактировано pavlexx)

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Всем привет!

Начнем разбирать HTML разметку с использованием UiKit!
Двигаться будем с верху -> вниз и сегодня покажу как создать главное меню:
Первое, что мы делаем, создаем блок nav

<nav class="uk-navbar">
.....
</nav>

т.к. меню располагается по центру - внутрь блока nav вставляем:

<div class="uk-container uk-container-center">
  ......
</div>

для отображения названия сайта можно воспользоваться классом uk-navbar-brand:

<a class="uk-navbar-brand" href="<?php get_site_url(); ?>"><?php get_site_name(); ?></a>

вставляем пункты меню:

<ul class="uk-navbar-nav">
  <?php get_i18n_navigation(return_page_slug(),0,99,I18N_SHOW_NORMAL); ?>
</ul>

если мы хотим, чтобы пункты меню были с правой стороны - оборачиваем ul блоком uk-navbar-flip:

<div class="uk-navbar-flip">
  <ul class="uk-navbar-nav">
    <?php get_i18n_navigation(return_page_slug(),0,99,I18N_SHOW_NORMAL); ?>
  </ul>
</div>

окончательный вид меню получается следующим:

<nav class="uk-navbar">
    <div class="uk-container uk-container-center">
      <a class="uk-navbar-brand" href="<?php get_site_url(); ?>"><?php get_site_name(); ?></a>
      <div class="uk-navbar-flip">
        <ul class="uk-navbar-nav">
          <?php get_i18n_navigation(return_page_slug(),0,99,I18N_SHOW_NORMAL); ?>
        </ul>
      </div>
    </div>
</nav>

идем дальше, скроем основное меню на мобильных устройствах (телефонах), добавим иконку мобильного меню и разместим название сайта по центру:

<nav class="uk-navbar">
  <div class="uk-container uk-container-center uk-hidden-small">
    <a class="uk-navbar-brand" href="<?php get_site_url(); ?>"><?php get_site_name(); ?></a>
    <div class="uk-navbar-flip">
      <ul class="uk-navbar-nav">
        <?php get_i18n_navigation(return_page_slug(),0,99,I18N_SHOW_NORMAL); ?>
      </ul>
    </div>
  </div>
  <a href="#offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
  <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><?php get_site_name(); ?></div>
</nav>

uk-visible-small - отображает блок только на устройствах с размером экрана до 767рх
uk-hidden-small - скрывает блок на устройствах с размером экрана до 767рх и отображает на устройствах с размером экрана 768рх и больше.
Само мобильно меню можно расположить перед </body> и оформить следующим образом:

<div id="offcanvas" class="uk-offcanvas">
  <div class="uk-offcanvas-bar">
    <ul class="uk-nav uk-nav-offcanvas">
      <?php get_i18n_navigation(return_page_slug(),0,99,I18N_SHOW_NORMAL); ?>
    </ul>
    <div class="uk-panel">
      <?php get_component('sidebar'); ?>
    </div>
  </div>
</div>

как вы могли заметить, в мобильное меню я перенес и сайдбар(<div class="uk-panel">), т.к. меню в UiKit оформлено в виде панели и выдвигается слева/справа сайта. Свободное место можно как раз использовать для дополнительной информации, например для сайдбара.

Вот и все! Панель меню есть, слева на панели расположено название (логотип) сайта, справа пункты меню. Мобильное меню также сверстали.

Небольшое дополнение, если вы хотите чтобы меню появлялось при скролинге страницы и фиксировалось сверху - проделайте следующие действия:
1. подключите js-компонент sticky

<script src="<?php get_theme_url(); ?>/assets/js/components/sticky.min.js"></script>

2. в строке <nav class="uk-navbar"> добавьте data-параметры, например:

<nav class="uk-navbar" data-uk-sticky="{top:-200, animation: 'uk-animation-slide-top'}">

На сегодня все, ждите новых постов! wink

P.S. просьба отписаться... все ли понятно и устраивает или нет такой формат подачи!?

Поблагодарить за помощь можно через Яндекс!

Поделиться

21

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

да, пока все понятно, но не очевидно..

Почему центрирующий контейнер внутри блока nav, а не наоборот?

и еще слегка напрягает такой набор, как "uk-offcanvas", "uk-offcanvas-bar", "uk-nav-offcanvas" - как все это можно запомнить и где логика? ((

Все получается, все работает, но обилие условий и условностей напрягает..

Формат подачи нравится, единственное попросил бы в дальнейших постах описывать также и дополнительные опции настроек сетки, элементов.. Не все, но хотя бы самые важные на ваш взгляд!

Спасибо!

Поделиться

22 (2015-09-16 19:56:31 отредактировано pavlexx)

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

0zz пишет:

Почему центрирующий контейнер внутри блока nav, а не наоборот?

Да пожалуйста, можете и наоборот сделать!
В предложенной мной верстке меню занимает всю ширину браузера, если поменять положение блоков - вы ограничите ширину блока nav шириной сайта.
Проще говоря, в моем варианте строка меню - это отдельная секция, шириной в окно браузера, в которой по центру располагаются пункты меню, название сайта и другие компоненты!
Я вообще последнее время верстаю секциями, а внутри секции использую

<div class="uk-container uk-container-center">
........
</div>

это очень удобно, т.к. вы в любой момент сможете изменить, например, фон нужной секции!
Тем более, что с некоторой версии, в UiKit введен еще один удобный компонент uk-block !
Верстка секциями может выглядет следующим образом:

<div class="uk-block ваш-стиль">
  <div class="uk-container uk-container-center">
    ........
  </div>
</div>
0zz пишет:

и еще слегка напрягает такой набор, как "uk-offcanvas", "uk-offcanvas-bar", "uk-nav-offcanvas" - как все это можно запомнить и где логика? ((

это вопрос не ко мне, а к разработчикам! wink
А если серьезно, то подход UiKit предполагает использование уже готового css-кода, а вся верстка (ну почти вся) происходит в HTML-коде путем расстановки предопределенных классов.
По этой причине и введены разные классы которые применяются в том или ином случае.
Ну как-то так.

Сетку я пока особо и не трогал, да и все досконально описывать.... слишком много!
Я дам базу для последующего самостоятельного изучения нюансов.

Поблагодарить за помощь можно через Яндекс!

Поделиться

23

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

0zz пишет:

да, пока все понятно, но не очевидно..
и еще слегка напрягает такой набор

0zz, вы работали с каким-либо фреймворком? все они используют разные классы, поверьте использовать классы с готовыми свойствами значительно проще, чем писать для каждого из своих классов свои свойства.
если вы уже начали упрямится, то что с вами будет, когда вы дойдете до data-uk-grid="{gutter: 20}" и data-uk-slider="{center:true}" smile

Поддержать GetSimple CMS по-русски ЯДом

Сайт olsv64

Поделиться

24

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

0zz, я когда начинал разбираться с фреймворками - мне тоже казалось все сложно и запутано, почему сделано именно так и зачем столько классов...
Сначала даже хотел остановиться на Bootstrap из-за того что есть русская документация! smile
Но посидев несколько вечеров за компьютером и поразбиравшись - я понял, что UiKit намного приятней Bootstrap, гибче и лучше организован (ИМХО)! После этого плюнул на то что нет русской документации и стал изучать UiKit именно по официальному сайту т.к. нигде не найти мануалов по этому фреймворку в сети.
И чем больше изучаешь, пробуешь, экспериментируешь - тем все понятней становиться написание и использование кода.
Так что не переживайте, все поймете и разберетесь со временем! wink

Поблагодарить за помощь можно через Яндекс!

Поделиться

25

Re: UiKit framework. Что за зверь, и как подружить с GetSimple!?

Друзья, я не спорю и не критикую ни в коем разе )) скоре ворчу, что такая абра-кадабра с названиями классов и их порядком.. ))
для сравнения, тот же бутстрап выглядит логичнее в некоторых моментах:

<nav class="navbar navbar-default navbar-fixed-top">

но, наверное, вы правы. Нужно изучать и практиковать..

Поделиться