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 - какой элемент будет тригером для стики элемента

Made with Slides.com