Foundation classes
Возможности Foundation
Foundation фреймворк предоставляет богатый набор классов, прописав которые вы можете кардинально изменить поведение ваших блоков, и избежать дублирование стилей.
В данный перечень входят вспомогательные классы по работе с сеткой, колонками, выравниванием, кнопками, стики элементы, меню и прочие.
Т.к. мы используем SASS версию Foundation, мы также можем использовать дополнительные миксины для упрощения разработки и написания кода.
Сетка (XY-grid)
Контейнер:
.grid-container - ограничивает верстку по ширине макета
Сетка:
.grid-x - определяет flex-контейнер для будущих колонок
.grid-margin-x, .grid-padding-x - добавляет отступы между колонками. По необходимости можно использовать как паддинги так и маргины в качестве отступов. Рекомендуется использовать маргины.
.[bp]-[тип-отступов]-collapse - убрать отступы между колонкам на определенной ширине
Block grids
.[bp]-up-[size] - дает возможность создать сетку на количество колонок, не кратное 12 (1..8 колонок). При этом у колонок должен быть прописан только базовый класс .cell
Сетка (XY-grid)
Т.к. сетка построена на флексах, к ней можно применять дополнительные выравнивающие классы. Данные классы прописываются к любому flex-контейнеру (.grid-x, .menu и тд)
.align-right - выровнять по правому краю
.align-center - выровнять по центру
.align-justify - распределить пространство между элементами
.align-spaced - распределить пространство вокруг элементов
.align-top - прибить к верхнему краю
.align-middle - выровнять по вертикали
.align-bottom - прибить к нижнему краю
.align-stretch - растянуть по вертикале
Но не стоит злоупотреблять данными классами, иногда целесообразнее просто прописать свойство в стилях. Данные классы стоит применять, когда нужно выровнять множество схожих элементов, а не придать вид одному элементу. Например выровнять колонки, а не выровнять ссылку `Read more` по правому/нижнему краю в карточке поста.
Сетка (XY-grid)
Колонки:
.cell - базовый класс, определяющий поведение колонки
.small-[size], .medium-[size], .large-[size], .xlarge-[size] - задает ширину колонки на определенном брейкпоинте
.auto, .[bp]-auto - ширина колонки не привязано к определенному значению, а занимает свободное место
.[bp]-offset-[size] - определяет сдвиг колонки, чтобы образовалось пустой пространство
.[bp]-order-[order] - позволяет менять порядок колонок на разных размерах экрана
Классы отображения
Стили в foundation написаны следую методологии mobile-first.
По-этому имейте ввиду, что все классы используются именно с медиа запросами min-width.
.show-for-[bp] - отобразить элемент начиная с указанного брейкпоинта
.hide-for-[bp] - скрыть элемент начиная с указанного брейкпоинта
.show-for-[bp]-only, .hide-for-[bp]-only - отобразить/скрыть элемент только на указано брейкпоинте
Классы типографии
.text-left, .text-right, .text-center - выравнивание текст. Использование данных классов также стоит ограничить и применять только в тех местах, где данный элемент больше не будет повторяться.
.h1, .h2, .h3, .h4, .h5, .h6 - классы, которые позволяют придать вид и поведение заголовков обычному тексту
Кнопки
Кроме размеров кнопкам можно предопределить некоторые цвета:
_foundation-custom.scss
$foundation-palette: (
primary: $main_color,
secondary: $sub_color,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
white: #fff,
gray: #adb2b6
);
<button type="button" class="button secondary">Secondary</button>
<button type="button" class="button success">Success</button>
<button type="button" class="button white expanded">White expanded</button>
Как видно с примера выше, классы можно комбинировать как угодно. Тем самым сводя к минимум кастомные стили.
И последний, но не менее часто используемый класс:
.hollow - убирает фон кнопки и добавляет бордер
Как и было сказано выше, можно комбинировать с остальными классами, что дает возможность получить подобный результат:
Кнопки
В foundation есть класс .button , добавив который любая ссылка принимает вид кнопки. При разработке вам нужно один раз определить вид кнопок на сайте и где необходимо использовать этот класс, а не плодить одинаковые стили или создавать какие-то собственные классы.
Кроме обычного вида кнопки, вы также можете описать несколько их размеров:
.tiny, .small, .large
Продолжая тему размеров можно задать поведение кнопки таким образом, что на определенных брейкпоинтах (или на всех) кнопка будет растянута на всю ширину:
.expanded, .small-expanded, .medium-only-expanded, .large-down-expanded
Обертка для видео
Используя паддинг хак для достижения необходимых пропорций в foundation создан класс, который позволяет сделать видео и любой другой iframe адаптивным на разных размерах экрана.
Для этого необходимо iframe обернуть в див, в дать этому диву класс .responsive-embed. По-умолчанию в нем прописаны пропорции 4/3. Но это легко можно подогнать под более современный формат 16/9, добавив дополнительный класс .widescreen. В итоге верстка будет выглядеть так:
<div class="responsive-embed widescreen">
<iframe width="560" height="315" src="https://www.youtube.com/embed/WUgvvPRH7Oc"></iframe>
</div>
Sticky
В foundation вшит плагин, с помощью которого легко можно создать `sticky-header`.
Для этого необходимо обернуть хедер в контейнер и дописать хедеру и данному контейнеру некоторые атрибуты и классы:
<div data-sticky-container>
<header class="header sticky"
data-sticky
data-margin-top="0"
data-top-anchor="header-top:bottom">
<div class="grid-container menu-grid-container">
<div class="grid-x grid-margin-x">
<div class="cell">
<?php if ( has_nav_menu( 'header-menu' ) ) : ?>
<nav class="top-bar" id="main-menu">
<?php wp_nav_menu( ); ?>
</nav>
<?php endif; ?>
</div>
</div>
</div>
</header>
</div>
data-sticky-container - объявляет контейнер для стики элемента
.sticky - добавить класс к стики элементу
data-sticky - объявляет стики элемент
data-margin-top - на каком расстоянии от тригера элемент станет стики
data-top-anchor - какой элемент будет тригером для стики элемента
Foundation base
By alexeysv
Foundation base
- 292