Публикуем дизайн-библиотеки компонентов vkui в figma

Содержание

Vertical alignment

To align objects vertically, you need to create a parent container to which the object itself will be aligned.


Class Description
Add this class to the parent container. This container needs a specific height.
Add this class to the child element to center your content.
Add this class to the child element to align your content to the bottom.
This helper class applies a height of 100%.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

NOTE The object you align needs to have a width or max-width that is smaller than its parent container.

Center the entire page

The class comes in handy, if you want to extend the and elements to the full height of the page. This can be very useful when creating error pages.

Markup

To center your content horizontally as well, add the class to the parent and the class to the child element. This is necessary because of the responsive behavior.

Создать тему UIkit

Когда вы настроите файл для добавления своего собственного кода Less, вы можете приступить к созданию темы UIkit так, как вам нужно. Если вы никогда не использовали Less раньше, ознакомьтесь с языковыми функциями. При работе с источниками UIkit Less у нас есть несколько рекомендаций.

Используйте переменные

Большая настройка возможна путем простой перезаписи значений уже объявленных переменных. Вы можете найти все переменные для каждого компонента внутри их файлов Less структуры и переопределить их в своей теме.

Сначала найдите переменную Less, которую вы хотите изменить, в исходном коде UIkit. Например, цвет глобальной ссылки определяется в :

Затем замените значение по умолчанию, установив пользовательское значение в своем собственном файле, т.е. в :

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

Используйте hook-и

To prevent overhead selectors, we use Mixins from Less, which hook into predefined selectors from the UIkit source and apply additional properties. Selectors don’t have to be repeated throughout all documents and global changes can be made much more easily.

Сначала найдите правило, которое вы хотите дополнить, просмотрев файл Less компонента, например для компонента Card:

Затем добавьте дополнительный CSS, используя хук внутри вашего собственного файла Less, т.е. в :

Miscellaneous hooks

Если нет ни переменной, ни хука, вы также можете создать свой собственный селектор. Для этого используйте хук .hook-card-misc и напишите свой селектор внутри. Это отсортирует ваш новый селектор в нужном месте скомпилированного файла CSS. Просто добавьте следующие строки в свой собственный файл Less, то есть в :

Отключить «inverse component»

Компонент Инверсия включает дополнительные стили для реализации «гибкого» инверсного поведения. Если ваш проект не использует эти стили, вы можете не использовать их при компиляции Less. Это позволяет уменьшить размеры файлов скомпилированного CSS. Для этого найдите переменные Less, содержащие (например, ), и установите для них значение .

Чтобы полностью отключить инверсные стили, установите:

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

Usage

The Panel component consists of the panel itself, the panel title and a panel badge. To prevent redundant white space, top and bottom margins are removed from the panel’s content.

Class Description
Add this class to a element to define the Panel component.
Add this class to a heading to create the panel title.
Add this class to a element to create a panel badge. The easiest way to style your badge, is by adding the modifier classes from the Badge component.

Example

Hot

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

NOTE By default, a panel is blank and has no styling. That is why it is important to add a modifier class, which gives the panel some styling. In our examples we used the class.

This is a short example of how to use panels with the Grid component. Both panels are using the class.

Example

Match column heights

The Grid component uses Flexbox, so the height of grid columns is matched automatically. To achieve the same effect in older browsers that don’t support Flexbox, just add the attribute to your grid. If your grid wraps into multiple rows, only grid columns within the same row are matched. To match grid columns accross all rows just use .

Example

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

NOTE If grid columns extend to a width of 100%, their heights will no longer be matched. This makes sense, for example, if they stack vertically in narrower viewports.

Match height of panels

If you want to match the heights of panels in a grid, just add the class. When using the data attribute, you need to add the selector.

Example

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Responsive width

UIkit provides a number of very useful responsive widths classes. Basically they work just like the usual width classes, except they are prefixed, so that they only come to effect at certain breakpoints. These classes can be combined with the visibility classes from the Utility component. This is great to adjust your layout and content for different device sizes.

Class Description
Affects all device widths, grid columns stay side by side.
Affects device widths of 480px and higher. Grid columns will stack on smaller sizes.
Affects device widths of 768px and higher. Grid columns will stack on smaller sizes.
Affects device widths of 960px and higher. Grid columns will stack on smaller sizes.

IMPORTANT To create a margin between stacking grid columns, just add the attribute.

Режимы

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

Значение Описание
Переключение будет срабатывать при наведении курсора мыши.
Переключение будет срабатывать при нажатии. Это значение по умолчанию.
Переключение будет срабатывать при нажатии и наведении курсора.
Поведение переключателя зависит от ширины области просмотра. .
  • hover

    Ч-что?

Media

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

  • «Primary» на больших экранах


Примечание Начальное состояние переключения зависит от опции . Это либо первый данный класс в списке, разделенном пробелами, либо, если задано значение , атрибут . Если задано более одного класса, другие классы просто переключаются при изменении состояния.

Опции компонента

При использовании компонента Toggle к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой .

Опция Значение По умолчанию Описание
String CSS селектор элемента (ов) для переключения.
String Разделенный запятыми список режимов поведения триггера. (, , )
String Класс, который переключается. По умолчанию атрибут .
Integer, String В режиме точка останова, которая вызывает переключение — ширина в виде целого числа (например, 640) или точка останова (например, @s, @m, @l, @xl) или любой допустимый запрос мультимедиа (например, (min-width: 900px) ).
String Разделенные пробелами имена используемых анимаций, разделенные запятой для анимации.
Number Продолжительность анимации в миллисекундах.
Boolean Переключение целей последовательно.

является Primary опцией. Если это единственный параметр в значении атрибута, то её ключ можно не использовать.

События

Следующие события будут инициированы для элементов компонента «Toggle»:

Название Описание
Срабатывает до отображения элемента. Может предотвратить отображение, вернув .
Срабатывает после отображения элемента.
Запускается после завершения анимации показанного элемента.
Срабатывает до того, как элемент скрыт. Может предотвратить скрытие, вернув .
Срабатывает после запуска анимации скрытия элемента.
Срабатывает после того, как элемент скрыт.

Для компонента «Toggle» доступны следующие методы:

Модификатор «Стиль»

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

Класс Описание
Добавляет цвет фона по умолчанию.
Добавляет приглушенный цвет фона.
Добавляет основной цвет фона.
Добавляет вспомогательный цвет фона.
Примеры
  • Раздел : Section Default

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

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

    И если мой брат не похож на вас, то по крайней мере он знает, что любим. Твоему совершенно не хотелось.

    Раздел : Section Muted

    Точно так же можно сказать, что каждое действие выполняет какое-нибудь намерение.

    Это не значит, что свободное действие есть действие прихотливое и неразумное.

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

  • Раздел : Section Primary

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

    Понятно поэтому, что после проведенная цель очень близка. Но капризы богачей необъяснимы.

    Концентрируясь таким образом на повторяющемся, занимаясь только соединением следствий.

    Раздел : Section Secondary

    Изучение фактов показывает с таким же успехом как раз обратное.

    Эти положения, в сущности, разрушают прежнюю концепцию конечных целей.

    Все его элементы, говорят нам, участвуют в достижении наибольшего блага целого.

  • Раздел с фоновым изображением

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

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

    Мы сказали, что механические объяснения пригодны для систем, которые целого.

Preserve color

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

  • Такое целое должно быть, по нашему мнению, нераздельно.

Как структурировать свою тему

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

Примечание В примере предполагается, что вы создаете тему в каталоге `/custom` полного проекта UIkit. Вы можете адаптировать эти пути, если вы настроили свой собственный процесс сборки.

Точка входа для компилятора Less, :

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

Usage

The switcher component consists of a number of toggles and their related content items. Add the attribute to the element which contains the toggles, targetting the same id as is used on the element containing the content items. Add the class to the same element. Typically the switcher is combined with other components, some of which will be shown here.

  • Hello!
  • Hello again!
  • Bazinga!

In some cases you want to switch to another content section from within the active content. This is possible using the attribute. To target the items, you need to set the data attribute to the number of the respective content item.

  • Item
  • Item
  • Item
  • Hello!
  • Hello again!
  • Bazinga!

Setting the attribute to and will switch to the adjacent items.

It is also possible to connect multiple content containers. Just extend the parameter with the ID of the additional container.

Основы. Разметка. Использование

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

Обратите внимание, что внутренние отступы вложенного контейнера в контейнер будут сброшены

По умолчанию раздел пуст

Вот почему важно добавить


Пример В примере использовался класс .

  • Раздел

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

    По дороге встретил текст рукопись. Она предупредила его: «В моей стране все переписывается по несколько раз.

    Единственное, что от меня осталось, это приставка «и». Возвращайся ты лучше в свою безопасную страну».

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

Text-level semantics

The following list gives you a short overview of the most commonly used text-level semantics and how to utilize them.

Element Description
Turn text into hypertext using the .
Emphasize text using the em element.
Imply any extra importance using the strong element.
Define inline code snippets using the .
Mark document changes as deleted text using the del element.
Mark document changes as inserted text using the .
Highlight text with no semantic meaning using the mark element.
Define inline quotations using q element inside a q element.
Define an abbreviation using the abbr element with a title.
Define a definition term using the dfn element with a title.
De-emphasize text for small print using the small element.

Visibility utilities

Class Description
Hides the element on any device.
Hides the element on touch devices.
Hides the element on non-touch devices.
Hides the element without removing it from the flow.
Displays hidden content on hover using . Add this class to the parent element.
Displays hidden content on hover using . Add this class to the parent element.

Markup

Responsive visibility

You can show or hide content on specific viewport widths. Breakpoints are set through variables and can easily be modified. Since the line between different device sizes keeps blurring, class names are kept general and do not refer to particular devices.

Class Small(Phones)up to 767 Medium(Tablets)768 to 959 Large(Desktops)960 and larger
Visible Hidden Hidden
Hidden Visible Hidden
Hidden Hidden Visible
Hidden Visible Visible
Visible Hidden Visible
Visible Visible Hidden

Source ordering

You can change the display order of the columns to keep a specific column order in the source code. Add one of the classes to move the column to the right and add one of the classes to move a column to the left. This allows you for example to flip the columns’ display order for wider viewports. The classes can also be used to offset columns, creating additional space between them.

Source ordering is useful for SEO and responsive design, because in narrow viewports the grid will be displayed according to the source order of the markup.

NOTE This feature only works in combination with one of the classes.

Usage

The Off-canvas component consists of an overlay and an off-canvas bar.

Class Description
Add this class to a element to create the bar container and an overlay, blanking out the page. An id also needs to be added, so the off-canvas sidebar can be toggled.
Add this class to a child element to create the off-canvas bar.

You can use any element to toggle an off-canvas sidebar. An element needs to be linked to the id of the off-canvas container. To enable the necessary JavaScript, just add the attribute. If you are using another element, like a button, just add the attribute to target the id of the off-canvas container.

Example

Open Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Modifiers

Modifier classes are necessary to add a specific style to panels. UIkit includes a number of panel modifiers and you also have the possibility to create your own.

Add the class to create a visually styled box. This is the default panel modifier.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

NOTE To create a hover effect on the panel, just add the class. This comes in handy when working with anchors.

Add the class to modify the box panel and emphasize it with a different color.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

NOTE To create a hover effect on the panel, just add the class. This comes in handy when working with anchors.

Add the class to modify the box panel and give it a light background.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

NOTE To create a hover effect on the panel, just add the class. This comes in handy when working with anchors.

Add the class to add a hover effect to the panel. This comes in handy when using the panel as an anchor.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Add the class to separate the panel title and content with a horizontal line.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Add the class to increase the spacing around the panel content.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Add the class to separate vertically stacked panels with lines.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Animations

The Switcher component allows you to add different animations to items when toggling between them. All you need to do is add the parameter to the data-attribute and define the animation that you want to apply. Check the table below for an overview of the animations provided.

Class Description
The element fades in.
The items scale up.
The items slide in from the top.
The items slide in from the bottom.
The items slide in from the left.
The items slide in from the right.
The items slide horizontally, the direction depending on the adjacency of the item.
The items slide vertically, the direction depending on the adjacency of the item.
Slide vertical

You can also apply multiple animations by using the classes from the Animation component. That way you can even create your own custom class to apply a different transition to the switcher.

Margin

Add one of the following classes to add spacing to block elements.

Class Description
Adds the same top and bottom margins as a paragraph usually has.
Adds top margin.
Adds bottom margin.
Adds left margin.
Adds right margin.

Larger margin

Add one of the following classes to add larger spacing to block elements.

Class Description
Adds large top and bottom margin.
Adds large top margin.
Adds large bottom margin.
Adds large left margin.
Adds large right margin.

Smaller margin

Add one of the following classes to add smaller spacing to block elements.

Class Description
Adds small top and bottom margin.
Adds small top margin.
Adds small bottom margin.
Adds small left margin.
Adds small right margin.

Remove margin

Add one of the following classes to remove margin from block elements.

Class Description
Removes all margins.
Removes top margin.
Removes bottom margin.

Usage

To create the grid container, add the class to a parent element. Add one of the classes to child elements to determine, how the units shall be sized. The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions. This table gives you an overview of the classes that can be applied to units.

Class Description
Fills 100% of the available width.
Divides the grid into halves.
to Divides the grid into thirds.
to Divides the grid into fourths.
to Divides the grid into fifths.
to Divides the grid into sixths.
to Divides the grid into tenths.

We built an intentional redundancy into each set of unit classes, so that for instance the class will work just as well as .

Example


Take a closer look at the following grid example, which gives you a great overwiew of all basic classes.

NOTE The grid has no style related CSS. In our example we used panels from the Panel component.

Overflow container

To create a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself, just add the class to a element. This comes in useful when having to handle tables on a responsive website, which at some point would just get too big.

Example

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data

Заголовки

Используйте теги , … , , чтобы определить свои заголовки. Заголовки очень любят поисковики, они повышают ценность текста на веб-странице, который располагается внутри этих тегов.

Добавьте класс , , , , или , чтобы изменить размер ваших заголовков, например , заголовок может выглядеть как

Для дополнительных вариантов стиля, обратите внимание на компонент Заголовок.

Списки

Создайте неупорядоченный список (маркированный), используя блочный элемент и элемент для упорядоченных списков (нумерованный список). Для формирования элементов списка используется тег .

    • Маниловка
    • Заманиловка
      • Петрушка
      • Заманиловка
        • Маниловка
        • Душенька
    • Алкида
    • Фемистоклюс

Для дополнительных красивых стилей спискам, с маркерами и без, посмотрите на компонент с модификаторами Список.

Список описаний / определений

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

  • Списки описания
    Список описания определяет термины и их соответствующие описания.
    Это термин
    Это описание термина.
    Это ещё один какой-то термин.
    А это ещё какое-то определение термина.

Для получения дополнительных опций стиля, посмотрите на компонент Список описания.

Горизонтальная линия

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

  • Блин, каждое утро один и тот же замкнутый круг: чтобы сварить кофе — нужно проснуться, а чтобы проснуться — нужно выпить кофе.

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

Для дополнительных стилей разделителю, посмотрите на компонент Разделитель.

Цитаты

Чтобы процитировать в документе несколько строк содержимого из другого источника (использование длинных цитат внутри документа) используйте элемент . HTML-элемент указывает на то, что заключенный в нем текст является развернутой цитатой. URL адрес на источник цитаты можно указать в атрибуте .

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

Программное использование

Programmatically, components may be initialized with the arguments format in JavaScript. The argument may be any , or . You’ll receive the initialized component as return value. (e.g. ) should omit the parameter.

Примечание The options names must be in their camel cased representation, e.g. becomes .

After initialisation you can get your component by calling the same initialisation function, omitting the options parameter.

Initializing your components programmatically gives you the possibility to invoke their functions directly.

Any component functions and variables prefixed with an underscore are considered as part of the internal API, which may change at any given time.

Each component triggers DOM events that you can react to. For example when an Modal is shown or a Scrollspy element becomes visible.

The component’s documentation page lists its events.

Sometimes, components like Grid or Tab are hidden in the markup. This may happen when used in combination with the Switcher, Modal or Dropdown. Once they become visible, they need to adjust or fix their height and other dimensions.

UIkit offers several ways of updating a component. Omitting the parameter will trigger an event.

If you need to make sure a component is properly destroyed, for example upon removal from the DOM, you can call its function.

Модификатор «Размер»

Вы можете добавить различные внутренние отступы к каждому созданному разделу или удалить их полностью.

Класс Описание
Добавьте этот класс, чтобы уменьшить до минимума внутренние отступы раздела.
Добавьте этот класс, чтобы уменьшить внутренние отступы раздела.
Добавьте этот класс, чтобы увеличить внутренние отступы раздела.
Добавьте этот класс, чтобы сильно увеличить внутренние отступы раздела.
Добавьте этот класс из компонента Padding, чтобы удалить внутренние отступы раздела.
  • Раздел : Section Large

    В свою очередь ты можешь предложить мне молодость, стройность и шелковистость твоего тела.

    Подсознательно ты чувствуешь, что секс между нами будет просто феерическим.

    Если ты этого не сделаешь, я запущу скандальную информацию в газеты и буду со стороны наблюдать.

Overlay transitions

Overlay panels and images can easily be animated. Just add one of the following classes to the overlay panel or element. Note, that this only works in combination with the or class.

Class Description
Add this class to the overlay panel to slide it in from the top.
Add this class to the overlay panel to slide it in from the bottom.
Add this class to the overlay panel to slide it in from the left.
Add this class to the overlay panel to slide it in from the right.
Add this class to the overlay panel or image to fade it in.
Add this class to the image to scale it up.
Add this class to the image to slightly rotate it to the right.
Add this class to the image to desaturate it and color it on hover.

NOTE If you’d like to animate the image, but want the overlay panel to be visible at all times, just add the class to the panel. That way it will be displayed despite the class.

Clearing and floating

Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.

Class Description
Float the element to the left.
Float the element to the right.
Add this class to a parent container to clear floats.

New block formatting context

Instead of using the class, you can create a new block formatting context to clear floats. Depending on your setup, you can evaluate which method is more suited.

Class Description
Sets overflow to hidden to create a new block formatting context.
Sets display to table-cell to create a new block formatting context.

Alignment of images and objects

Align images or other elements with spacing between the text and the element.

Class Description
Floats the element to the left and creates right and bottom margin.
Floats the element to the right and creates left and bottom margin.
Only affects device widths of 768px and higher.
Only affects device widths of 768px and higher.
Centers the element and creates bottom margin.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Even grid columns

To create a grid whose child elements’ widths are evenly split, you don’t have to apply the same class to each list item within the grid. Just add one of the classes to the grid itself.

Class Description
Divides the grid into halves.
Divides the grid into thirds.
Divides the grid into fourths.
Divides the grid into fifths.
Divides the grid into sixths.
Divides the grid into tenths.

Responsive width

UIkit also provides responsive grid width classes. You can apply these to maintain evenly sized grid columns, regardless of the device width.

Class Description
Affects all device widths.
Affects device widths of 480px and higher.
Affects device widths of 768px and higher.
Affects device widths of 960px and higher.
Affects device widths of 1220px and higher.

С этим читают