Отзывчивый UIkit

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

В этой статье я хочу рассказать о фреймворках в общем и фреймворке 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-разработчика

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

Некоторые сложности адаптивной верстки

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

Несколько кэшей у одного ресурса

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

Написать комментарий