У сетки up12 и микро-классов можно использовать префиксы, для того, чтоб элементы получали разные свойства на разных размерах кэарнов.
По умолчанию, при верстке, мы верстаем для трех разрешений экранов:
Префиксы делятся на 2 вида:
То есть, все, что с префиксом s-, применится к смартфонам, планшетам и десктопам. Все, что с префиксом m-, применится к планшетам и десктопам. only-s- — применится только к смартфонам.
Например, если нам нужно, чтоб на мобильных экранах и планшетах размер шрифта был 18px, а на больших экранах 24px, то используем следующую конструкцию:
Если нужно скрыть элемент на планшетах, а во всех остальных случаях - он должен отображаться, то используется такая конструкция:
В случае с сеткой часто нужно делать так, чтоб колонки меняли свои размеры на разном разрешении экранов:
Часто приходится менять местами колонки. Например, бывает такое, что меню на больших экранах стоит справа. При уменьшении размера экрана оно упадет вниз, но нам нужно, чтоб оно осталось сверху:
В случае если логика слишком сложна для микро-классов. Используем функции scss.
Подключить набор этих функций можно добавить строкой:
Данный импорт подключит файл /eva2/f/up12/respond.scss.
Файл содержит две функции. Использовать их можно так: