← Разработка

Фреймворк UIkit - легкий, модульный и быстрый

50 секунд
Фреймворк UIkit - легкий, модульный и быстрый

UIkit — легкий и модульный фреймворк для разработки быстрых и мощных веб-интерфейсов.

С момента появления UIkit в 2013 году, он стал одной из наиболее часто используемых интерфейсных сред для работы в современном Интернете. Выпуск UIkit 3, новейшее поколение фреймворка, где многое было полностью переосмыслено и перестроено.

На данный момент, актуальная версия UIkit 3 — v3.3.1.

В ZIP-файле вы найдете все CSS, JavaScript и файлы шрифтов, готовые для использования в вашем проекте.

Познакомьтесь с базовой настройкой и структурой UIkit

Прежде всего вам необходимо скачать UIkit. 

Вы можете найти весь проект и все исходные файлы на GitHub:

Что вы думаете по поводу этого фреймворка?

Мне лично, UIkit приглянулся.

+4
01:43
258
08:14 (ред)
+3

Приятный фреймворк, надо посмотреть, что нового в 3. Надо почитать, спасибо. В прошлый раз, как мы на него смотрели, дизайнер все тыкал пальцем на иконки, уж больно ему они понравились. В Font Awesome подобный стиль есть, но в платной версии. И что можно полностью убить jquery, чуток необычно было. Я сам насколько помню, стиль подключения понятный очень в шаблонах был. Смотрю.  

12:27
+3

Симпатичная вещь. Но изменения будут очень велики. 

13:10
+3

Да, я посмотрел, там логика другая чуток. Все, что связанно с css ерунда, иконки там разные симпатичные, js полностью переписывать. И видимо нам дефолтные не устроят все равно, базовые цвета. Я предлагаю попробовать сделать пока шапку и глянуть. Там есть все и окна всплывающие, выпадающие меню и др. Мы по объему выиграем, только если все переведем на это. Убив всю Quory.

17:21
+2

У них сетка интересно сделана. 

20:57
+1

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

Andrey
00:43
+2

UIkit 3 значительно отличается от UIkit 2. Если вы не знакомы с тройкой, то обязательно посмотрите. Собетую!  

17:03
+1

Спасибо. Смотрю, интересные реализации есть.

16:08
+2

Переделал в шаблонах под UIkit тематические разделы. Надо посмотреть. 

17:28 (ред)
+2

Да, так лучше и проще. 

Вот сейчас со статьей выявлено на примере H* мы не должны описывать рядовые случаи для margin, проще ввести small-top, где описать отступ вверху и разместить тег во всех шаблонах.

01:34
+3

Заменил js-model — это оказалось проще, чем я думал. Очень много кода в минус. Посмотрите.

07:55
+3

Посмотрел. Необходимо лишь добавить в шаблоны кнопку закрытия. Слил с сайтом. Теперь тут окна от UIkit, минус jquery-modal, но у нас сообщения *_messages и др. опять описаны отдельно. Сегодня надо переписать и это. Забираю.  А вообще занятно выходит. Первое, мы избавляемся от всех хвостов jquery, самое интересное будет, когда придется грохнуть и jquery. Это важно.  Нам надо иметь представление о том, как делать чистый шаблон на UIkit, без переопределение css и навешивание помощи сторонними js скриптами. 

08:50
+1

Шаблоны надо править много. Легче css переопределить. )

09:47
+3

Вот  и делаем. Первое — подключаем фреймворк, он большой. Далее пишем свои стили. У меня вопрос, кто-то считает, что в фреймворке что-то нет и надо дописывать? Мы подключили сотни кб. кода, а там чего-то нет? Есть! Но мы не знаем. Мы берем сетку. берем кнопки их цвет и используем только это. Даже если нам не нравятся ведущие цвета, мы можем переопределить их в своей сборке, но кто это делает? Вот почему мне не нравится, как используют фреймворки. Люди создают много лишнего кода, который кстати имеет последствия. Они берут css и описывают рядовой случай, практически не заботясь о том, а что будет если изменятся условия: фон, ширина окна и др. Зачем мы подключем то, что мы не знаем? Вот в чем вопрос. Я из-за корректности не тыкаю пальцем на разные созданные дизайны, где достаточно безграмотно и вольно происходит работа с css и js. По большому счету, не важно что кто-то делает. Что мы тут делаем? Это важней. У нас есть лишний код? Мы сами переопределяем тут css, занося много лишних цепочек? Да. Значит надо менять. Нет смысла критиковать других, когда у самого бардак. Давайте займемся и почистить все. Меньше кода, это очень хорошо! 

22:18
+1

Модельное окно при авторизации, изменил. Фотографию осталось найти. 

22:20 (ред)
+2

А по мне и так норм. Из меня дизайнер, еще тот. Кто дизайнер, может подскажет.

07:41
+4

В некоторых местах сайта остался старый css — pills-menu.

09:02
+4

Нашел и исправил. Спасибо за помощь. 

15:24
+2

Там не все на самом деле.  Отписал вам.

22:07
+5

Сделаем потихоньку. Я вот думаю, на счет еще одного, общего шаблона. Надо для instantcms сделать. Только вот, не знаю в каком виде. Ну имеется в виду, я не совсем представляю, как сделать шаблон «под все»… Думаю. 

22:12
+2

Может блоговый?

22:15 (ред)
+3

Сие неведомая вещь. Надо узнать.  

Создал тему в группе Sugata на Toxu… Чтобы видеть её, надо вступить в Sugata.

11:45
+2

Начал чуток менять дизайн, и смотрел запросы. У нас, чтобы получить аватар пространства N+1 и того + 20. Не много? Пока показывается аватар пользователя. И «играю» с дизайном комментариев на главной. Вообще дизайн делается для TOP, но временно решил добавить для комментов и посмотреть, что будет.

14:00
+2

N+1 меня самого настораживало. Но посмотрел на ихнем форуме, так все делают, что странно. 

14:05
+3

Не важно кто, что делает. Ладно. Мне просто интересно стало, мы сумеем создать шаблон, не переопределяя ядро, совсем? Я знаю, что мы переопределяли тут пару функций в ядре, мы сумеем вообще не трогать ядро в общем шаблоне? Это вопрос, по большому счету поддержки потом. Не сложно выпустить шаблон. Вот поддерживать его потом, основная головная боль. К минимуму её свести надо. Не трогать ядро! (желательно) 

14:20
+2

Потренироваться хочешь? ) Ветку  тогда необходимо сделать отдельную тут. 

14:23
+3

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

20:24 (ред)
+2

Я вот о чем подумал: nodebb.org

Может быть Пространства сделать такими? Flarum: https://discuss.flarum.org/tags

20:40 (ред)
+4

Cтарые знакомые.

Хорошее дело. Но для начала надо сделать вот что.

1. Мы имеем 3 кнопки в шапке, жмем, переходим и видим: пространства — 3 колонки, поток — 1 колонка, добавить пост — 2 колонки. Беспредел. ) Надо определиться, у нас сколько колонок то? ) При переходе с одного меню такой разброс.

2. Предлагаю сделать две. Без левого меню. А вот в левую, 2-3 где, и сделать там плитку. У нас же все есть. 

3. Сейчас разобрался с menu, прыгая между dev и этим сайтом. Мы можем сделать все еще проще. 

Так. В общем мне надо время, чтобы набросать макет.

Доп. Готово. Там остались детали, может быть сделать кликабельным целый блок, выравнивание иконки, сменить эффект при наведении и т.д., но в целом, вот. Жмем в шапке на группы. CSS временно добавил непосредственно в шаблон.

21:57
+3

Сразу другой вид!  

13:32
+1

Такое изменение будет в новом шаблоне?

16:16

Посмотрим. Дело в том, что «коробки» многим не нравятся.

Загрузка...