Отзывчивый UIkit

+4

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

В этой статье я хочу рассказать о фреймворках в общем и фреймворке Uikit в частности.
Информация рассчитана на начинающих верстальщиков, поэтому тема будет освещена на вводном уровне.


Так что же такой фреймворк и зачем он нужен?


Фреймворк - это набор готовых стандартных компонентов страницы, с возможностью их настройки под конкретные задачи


 

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

Фреймворк по сути состоит из набора заранее стандартно стилизованных и настроенных компонентов. Разрабатываются они с помощью препроцессоров CSS и скриптов JS, поэтому собственный фреймворк при желании и умении сделать может каждый.

Существует довольно много различных платформ:

  • Bootstrap,
  • Skeleton,
  • Foundation и т.д.

Фреймворк Uikit показался мне довольно интересным и при этом незаслуженно малоизвестным, поэтому про него я и расскажу.

1. Uikit -

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

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

Сами названия подобраны удачно, поэтому проблем с тем, чтобы запомнить массу компонентов не возникнет.


2. Удобство создания и адаптации сетки, действующей по принципу Mobile First -

самая лучшая часть Uikit .

Довольно легко настраиваются изменения таблицы сетки от телефонов до десктопов.

Представлено это компонентом Grid, который основан на технологии Flexbox.

Работает это так:

1. Мы задаем от одной до шести колонок в строке и указываем их ширину в доле от общего размера блока. Например, чтобы поместить три ячейки в строке, мы указываем каждой размер как 1/3.
2. При уменьшении разрешения, мы можем указать на каком размере наши ячейки изменять свою ширину, и указать, например, что на планшетных размерах ячейки будут размером как 1-1 (то есть располагаться по одной в колонку). Делается это буквально в одну строку в объявлении классов блока.


Несмотря на то, что максимальное количество ячеек в ряд – 6, этого на практике вполне хватает, кроме самых специфичных случаев


 

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

3. Компонент Flex для создания различных вариантов сеток

Так как компонент Grid создан на базе технологии flexbox, то он отлично взаимодействует с компонентом Flex. В соответствии с возможностями flexbox всего лишь парой написанных классов можно выравнивать ячейки по вертикали и горизонтали.

Благодаря отзывчивости Uikit можно на разных разрешениях менять свойства flex.

Например, на мобильной версии сайта менять порядок ячеек сетки или направление выравнивания.


4. Коллекция компонентов Uikit

В ней есть:

  • хлебные крошки,
  • прилипающие меню,
  • модальные окна,
  • выпадающие списки,
  • пагинации,
  • таблицы,
  • наборы разных анимаций,
  • иконок и многое другое.

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

5. Uikit бесплатен

Разработан на препроцессорах LESS и SASS и имеет открытый и хорошо структурированный код, поэтому при желании разработчик может модернизировать любую часть его под себя.

У него довольно активное сообщество, где можно задавать вопросы и высказывать пожелания.

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

Никогда не стоит ограничивать себя как профессионала стандартными паттернами текущего фреймворка.

 

Пусть он будет вашим инструментом, а не вы его :)

 

Понравилась статья? Поделись с друзьями:
Читайте также
Графический редактор Avocode для frontend-разработчика
Графический редактор Avocode для frontend-разработчика
Настало время поговорить о графических редакторах применительно к фронтенду.
Некоторые сложности адаптивной верстки
Некоторые сложности адаптивной верстки
У опытного верстальщика верстка адаптивного макета вряд ли вызовет затруднения, но новички часто сталкиваются с неочевидными проблемами.
Несколько кэшей у одного ресурса
Несколько кэшей у одного ресурса
Иногда может понадобиться при определенных условиях сохранять и выводить разный кэш ресурса. Например ajax загрузка страниц сайта, вывод информации с учетом геолокации посетителя и прочее. Не отказываться же в таких случаях от кэширования?

Комментарии ()

  1. Елена 18 мая 2021, 08:54 # 0
    Отличный фреймворк, есть всё что нужно, давно использую.
    Документацию можно найти здесь asuikit.com/v3
    Категории
    События студии все
    Популярное
    Последнее