Отзывчивый 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 загрузка страниц сайта, вывод информации с учетом геолокации посетителя и прочее. Не отказываться же в таких случаях от кэширования?

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

    Категории
    События студии все
    Поздравляем, 2021 наступил! Сколько на него надежд во всем мире...
    01 Января 2021
    Поздравляем, 2021 наступил! Сколько на него надежд во всем мире...
    Наступил Новый 2021 год! Очень надеемся на то, что он будет лучше прошлого, отступит коронавирус, восстановится экономика, справится малый и средний бизнес, а государство поможет ему в этом реальной помощью!
    333 просмотра
    подробнее
    Популярное
    Последнее