Всем привет!
Продолжим разбирать разметку с использованием UiKit!
Чтобы правильно понимать концепцию UiKit - нужно уяснить главное, фреймворк разработан в соответствии с принципами подхода mobile-first, поэтому имейте это в виду при разработке своего сайта!
Внимательно посмотрите и запомните какие размеры устройств использует UiKit по умолчанию (хотя вы можете их заменить на свои значения).
UiKit использует сетку из 10 колонок. Размеры могут быть, например, от 1/10 до 9/10. Подробнее смотрите в мануале!
Принцип создания сетки UiKit: создается div с классом главного элемента .uk-grid, внутри этого div создаются дочерние элементы с классами .uk-width-* с указанием размерности, например .uk-width-1-2
Рассмотрим простой пример, когда имеется блок основного контента и сайдбар справа.
Если вы верстаете секциями, то создаем следующий блок:
<div class="uk-block">
.....
</div>
и в него помещаете контейнер, который будет располагаться по центру и подстраивать свою ширину в зависимости от ширины экрана:
<div class="uk-block">
<div class="uk-container uk-container-center">
.....
</div>
</div>
если вы не верстаете секциями - сразу размещаете контейнер:
<div class="uk-container uk-container-center">
.....
</div>
далее, размещаем в контейнере сетку:
<div class="uk-container uk-container-center">
<div class="uk-grid">
.....
</div>
</div>
для того, чтобы автоматически добавлялись отступы между блоками сетки - добавим data параметр:
<div class="uk-container uk-container-center">
<div class="uk-grid" data-uk-grid-margin>
.....
</div>
</div>
добавляем блок основного контента (пусть он занимает 3/4 всей ширины) и сайдбар (1/4 ширины):
<div class="uk-container uk-container-center">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-3-4">...</div> // контент
<div class="uk-width-1-4">...</div> // сайдбар
</div>
</div>
Собственно на этом простая разметка с использованием сетки UiKit закончена!
Если нужна адаптивная сетка, то вы должны использовать немного другие классы.
И вот тут я хочу еще раз обратить внимание на то, что UiKit ...... mobile-first!
Если мы хотим чтобы основной контент занимал 3/4 всей ширины, сайдбар 1/4 ширины только на устройствах с размером экрана больше чем 768px, а на меньших экранах блоки занимали всю ширину экрана (т.е. располагались столбиком, друг под другом) - то наша разметка примет следующий вид:
<div class="uk-container uk-container-center">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-3-4">...</div> // контент
<div class="uk-width-medium-1-4">...</div> // сайдбар
</div>
</div>
Нет необходимости прописывать классы для отображения на всех устройствах!
Главное понять, что указывая uk-width-medium-* - имеются ввиду устройства с экраном 768px и больше, т.е. 768px, 960px, 1200px ...!
Но если вы хотите, чтобы на больших экрана размеры блоков были другие, то нужно добавить еще один класс:
<div class="uk-container uk-container-center">
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-3-4 uk-width-large-4-6">...</div> // контент
<div class="uk-width-medium-1-4 uk-width-large-2-6">...</div> // сайдбар
</div>
</div>
Что мы получили: на устройствах с экраном до 768px блоки занимают всю ширину экрана (т.е. располагаются в один столбик), на устройствах с экраном 768px и больше - контент 3/4 всей ширины, сайдбар 1/4 ширины, а на устройствах с экраном 960px и больше - контент 4/6 всей ширины, сайдбар 2/6 ширины.
В мануале более подробно расписаны все возможности применения сетки UiKit, изучаем и пробуем!
На этом на сегодня все! Надеюсь, что все доходчиво пояснил!?
Поблагодарить за помощь можно через
Яндекс!
