Фонд - Краткое руководство

Что такое фонд?

Foundation - одна из передовых интерфейсных структур для создания красивых адаптивных веб-сайтов. Он работает на всех типах устройств и предоставляет вам плагины HTML, CSS и JavaScript.

Foundation начиналась как руководство по внутреннему стилю, построенное ZURB в 2008 году. ZURB - это дизайнерская компания из Кэмпбелла, Калифорния. Он выпустил Foundation 2.0 с открытым исходным кодом в октябре 2011 года. Последняя версия Foundation - 6.1.1, выпущенная в декабре 2015 года.

Зачем использовать фундамент?

Он обеспечивает более быструю разработку за счет использования компилятора Sass, который работает намного быстрее, чем компилятор по умолчанию.
Он обогащает ваш сайт таблицами цен, переключателями, джойстиком, ползунками диапазона, лайтбоксом и многим другим.
Он поставляется с пакетом разработки, таким как Grunt и Libsass, для более быстрого кодирования и управления.
Foundation для сайтов предоставляет вам HTML, CSS и JS для быстрого создания веб-сайтов.
Платформа электронной почты предоставляет вам отзывчивые электронные письма в формате HTML, которые можно читать на любом устройстве.
Foundation for Apps позволяет создавать полностью адаптивные веб-приложения.

Особенности

Он имеет мощную сеточную систему, несколько полезных компонентов пользовательского интерфейса и классные плагины JavaScript.
Он обеспечивает адаптивный дизайн, который подходит для всех типов устройств.
Он оптимизирован для мобильных устройств и действительно поддерживает мобильный подход.
Он предоставляет шаблоны HTML, которые можно настраивать и расширять.

Преимущества

Его легко освоить, если у вас есть базовое понимание HTML и CSS.
Вы можете свободно использовать Foundation, так как это открытый исходный код.
Он предоставляет вам набор шаблонов, которые помогут вам сразу же начать разработку веб-сайта.
Foundation поддерживает такие препроцессоры, как SASS и Compass, что ускоряет разработку.

Недостатки

Из-за популярности Twitter Bootstrap поддержка Twitter Bootstrap сообществом лучше, чем Foundation.
Новичкам может потребоваться некоторое время, чтобы изучить и воспользоваться поддержкой препроцессора.
Отсутствие более широкой поддержки, такой как сайты QA и форумы для решения проблем.
В Foundation меньше тем по сравнению с другими.

В этой главе мы обсудим, как установить и использовать Foundation на веб-сайте.

Скачать фонд

Когда вы откроете ссылку foundation.zurb.com , вы увидите экран, как показано ниже -

Щелкните значок Download Foundation 6 кнопку, вы будете перенаправлены на другую страницу.

Здесь вы можете увидеть четыре кнопки -

Download Everything - Вы можете скачать эту версию Foundation, если хотите, чтобы все было во фреймворке, т.е. ванильный CSS и JS.
Download Essentials - Он загрузит простую версию, которая включает в себя сетку, кнопки, типографику и т. Д.
Custom Download - Это загрузит пользовательскую библиотеку для Foundation, она включает элементы и определяет размер столбцов, размер шрифта, цвет и т. Д.
Install via SCSS - Это перенаправит вас на страницу документации для установки Foundation для сайтов.

Вы можете нажать на Download Everythingкнопка, чтобы получить все в структуре, т.е. CSS и JS. Поскольку файлы состоят из всего, что связано с фреймворком, вам не нужно каждый раз включать отдельные файлы для отдельных функций. На момент написания этого руководства была загружена последняя версия (Foundation 6).

Файловая структура

После загрузки Foundation извлеките ZIP-файл, и вы увидите следующую структуру файлов / каталогов:

Как видите, есть скомпилированные CSS и JS (foundation. *), А также скомпилированные и минифицированные CSS и JS (foundation.min. *).

В этом руководстве мы используем версии библиотеки CDN.

HTML-шаблон

Базовый шаблон HTML с использованием Foundation показан ниже -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

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

Тип документа HTML5

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

<!DOCTYPE html>
<html>
   ....
</html>

Сначала мобильные

Это помогает быстро реагировать на мобильные устройства. Вам нужно включитьviewport meta tag к элементу <head>, чтобы обеспечить правильный рендеринг и масштабирование касанием на мобильных устройствах.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

Свойство width контролирует ширину устройства. Установка ширины устройства гарантирует, что он будет правильно отображаться на различных устройствах (мобильные телефоны, настольные компьютеры, планшеты ...).
initial-scale = 1.0 гарантирует, что при загрузке ваша веб-страница будет отображаться в масштабе 1: 1, а масштабирование не будет применяться сразу после установки.

Инициализация компонентов

Сценарий jQuery требуется в Foundation для таких компонентов, как модальные окна и раскрывающийся список.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Вывод

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -

Сохраните указанный выше html-код firstexample.html файл.
Откройте этот HTML-файл в браузере, результат будет показан, как показано ниже.

Вы можете начать разработку проекта с нескольких доступных шаблонов, которые можно установить через Yeti Launch илиFoundation CLI. Вы можете начать с нового проекта, используя эти шаблоны, используя систему сборки Gulp для обработки Sass, JavaScript, копирования файлов и т. Д.

Базовый шаблон

Базовый шаблон - это что-то вроде шаблона SASS, который включает плоскую структуру каталогов и компилирует только файлы SASS, и хорошо иметь этот простой шаблон при использовании только SASS. Вы можете использовать базовый шаблон, используя Yeti Launch или Foundation CLI, используя следующую команду -

$ foundation new --framework sites --template basic

Чтобы настроить это, сначала запустите npm install , bower install и используйте команду npm start для его запуска. Вы также можете скачать файлы шаблонов с Github .

ZURB шаблон

Это комбинация CSS / SCSS, JavaScript, шаблона Handlebars, структуры разметки, сжатия изображений и использования обработки SASS. Вы можете использовать шаблон ZURB с помощью Yeti Launch или с помощью Foundation CLI, используя следующую команду -

$ foundation new --framework sites --template zurb

Чтобы запустить этот шаблон, выполните те же действия, что и в базовом шаблоне. Вы также можете скачать файлы шаблонов с Github .

Копирование активов

Вы можете скопировать содержимое в папку src / assets с помощью Gulp, в которой активы будут папкой вашего проекта. Здесь важно отметить, что файлы SASS, файлы JavaScript и изображения не подпадают под этот процесс копирования ресурсов, так как у них будет свой собственный процесс копирования содержимого.

Компиляция страницы

Вы можете создавать HTML-страницы в трех папках, а именно в страницах , макетах и частичных файлах, которые находятся в каталоге src / . Вы можете использовать компилятор плоских файлов Panini, который создает макеты для страниц с использованием шаблонов, страниц, частей HTML. Этот процесс можно выполнить с помощью языка шаблонов Handlebars .

Компиляция SASS

Вы можете скомпилировать SASS в CSS с помощью Libsass, и основной файл SASS будет храниться в src / assets / scss / app.scss, а также вновь созданные части SASS будут храниться в самой этой папке. Вывод CSS будет похож на обычный CSS во вложенном стиле. Вы можете сжать CSS с помощью clean-css и удалить неиспользуемый CSS из таблицы стилей с помощью UnCSS .

Компиляция JavaScript

Файлы JavaScript будут храниться в папке src / assets / js вместе с Foundation, а все зависимости связаны вместе в файле app.js. Файлы будут связаны вместе, как указано в следующем порядке -

Зависимости от основания.
Файлы будут храниться в папке src / assets / js .
Файлы сгруппированы в один файл с именем app.js .

Сжатие изображения

По умолчанию все изображения будут храниться в папке assets / img в папке dist . Вы можете сжимать изображения во время сборки для производства с помощью gulp-imagemin, который поддерживает файлы JPEG, PNG, SVG и GIF.

BrowserSync

Вы можете создать сервер BrowserSync, который будет синхронизировать тестирование браузера, доступный по адресуhttp://localhost:8000и может видеть скомпилированные шаблоны, используя этот URL. Пока ваш сервер работает, страница обновляется автоматически, когда вы сохраняете файл, и вы можете видеть изменения, внесенные на страницу, в режиме реального времени во время работы.

Описание

Он включает в себя элементы Foundation для бесперебойной работы с веб-приложениями. В следующей таблице перечислены некоторые из компонентов Foundation -

Sr. No.	Компонент и описание
1	Аккордеон Аккордеоны содержат вертикальные вкладки, которые используются на веб-сайтах для разворачивания и сворачивания больших объемов данных.
2	Аккордеонное меню Он отображает складное меню с эффектами аккордеона.
3	Значок Значки похожи на ярлыки, которые используются для выделения такой информации, как важные заметки и сообщения.
4	Панировочные сухари Он определяет текущее местоположение сайта в навигационной иерархии.
5	Кнопки Foundation поддерживает стандартные кнопки с разными стилями.
6	Вызывать Выноска - это элемент, который можно использовать для размещения содержимого внутри.
7	Кнопка закрытия Он используется для закрытия окна предупреждения.
8	Детализированное меню Меню детализации заменяет вложенные списки на вертикальное раскрывающееся меню.
9	Выпадающее меню Выпадающее меню используется для отображения ссылок в виде списка.
10	Раскрывающаяся панель Раскрывающаяся панель отображает содержимое, когда вы нажимаете кнопку.
11	Гибкое видео Он используется для создания видеообъектов на веб-страницах.
12	Классы с плавающей запятой Он используется для добавления служебных классов к элементам HTML.
13	Формы Он используется для создания макета формы для сбора пользовательского ввода.
14	метка Ярлыки - это встроенные стили, которые определяют подпись для элемента ввода.
15	Медиа-объект Он используется для добавления медиа-объектов, таких как изображения, видео, комментарии в блогах и т. Д., Которые могут быть размещены слева или справа от блока содержимого.
16	Меню Он обеспечивает доступ к различным режимам на веб-сайте.
17	Пагинация Это тип навигации, которая делит контент на ряд связанных страниц.
18	Слайдер Он указывает диапазон значений путем перетаскивания маркера.
19	Переключатель Он используется для переключения между включенным и выключенным состоянием.
20	Стол Он представляет данные в формате строк и столбцов.
21 год	Вкладки Это вкладка, основанная на навигации, которая отображает содержимое на разных панелях, не покидая страницы.
22	Эскиз Он стилизует изображения в форме миниатюр.
23	Заголовка Он используется для отображения текущего экрана, используемого пользователем, с другими пунктами меню.
24	Подсказка Это небольшое всплывающее окно, которое описывает информацию, когда вы наводите курсор мыши на ссылку.
25	Верхняя панель Он используется для создания заголовка навигации на сайте.
26	Орбита Это простой и мощный слайдер, который перемещает элементы с помощью класса орбиты .

В этой главе мы изучим глобальные стили . Глобальный CSS-фреймворк Foundation включает полезные сбросы, которые обеспечивают согласованность стилей во всех браузерах.

Размер шрифта

Размер шрифта таблицы стилей браузера по умолчанию установлен на 100%. Размер шрифта по умолчанию составляет 16 пикселей. В зависимости от размера шрифта рассчитывается размер сетки. Чтобы иметь отдельный базовый размер шрифта и незатронутые точки останова сетки, установите для $ rem-base значение $ global-font-size , которое должно быть в пикселях.

Цвета

Интерактивные элементы, такие как ссылки и кнопки, используют оттенок синего по умолчанию, который определяется переменной SASS $ primary-color . Компоненты также могут иметь такие цвета, как: вторичный, предупреждение, успех и предупреждение . Для получения дополнительной информации проверьте здесь .

Ссылка на SASS

Переменные

В следующей таблице перечислены переменные SASS, которые используются для настройки стилей компонентов по умолчанию в вашем проекте _settings.scss .

Sr. No.	Имя и описание	Тип	Значение по умолчанию
1	$global-width Он представляет глобальную ширину сайта. Используется для определения ширины строки сетки.	номер	rem-calc (1200)
2	$global-font-size Он представляет размер шрифта, примененный к <html> и <body> . По умолчанию установлено 100%, и значение настроек браузера пользователя будет унаследовано.	номер	100%
3	$global-lineheight Он представляет все типы высоты строки по умолчанию. $ global-lineheight составляет 24 пикселя, а $ global-font-size - 16 пикселей.	номер	1.5
4	$primary-color Он придает цвет интерактивным компонентам, таким как ссылки и кнопки.	цвет	# 2199e8
5	$secondary-color Используется с компонентами, поддерживающими вторичный класс.	цвет	# 777
6	$success-color Он представляет положительный статус или действие при использовании с классом .success .	цвет	# 3adb76
7	$warning-color Он представляет собой состояние предупреждения или действие при использовании с классом .warning .	цвет	# ffae00
8	$alert-color Он представляет собой отрицательный статус или действие при использовании с классом .alert .	цвет	# ec5840
9	$light-gray Он используется для светло-серых элементов пользовательского интерфейса.	цвет	# e6e6e6
10	$medium-gray Он используется для элементов пользовательского интерфейса среднего серого цвета.	цвет	#cacaca
11	$dark-gray Он используется для темно-серых элементов пользовательского интерфейса.	цвет	# 8a8a8a
12	$black Он используется для черных элементов пользовательского интерфейса.	цвет	# 0a0a0a
13	$white Он используется для белых элементов пользовательского интерфейса.	цвет	#fefefe
14	$body-background Он представляет собой цвет фона тела.	цвет	$ белый
15	$body-font-color Он представляет цвет текста тела.	цвет	$ черный
16	$body-font-family Он представляет собой список шрифтов тела.	Список	Helvetica Neue, Helvetica, Roboto, Arial, без засечек
17	$body-antialiased Тип сглаживания включается путем установки для этого атрибута значения true с помощью свойств CSS -webkit-font-smoothing и -moz-osx-font-smoothing .	Булево	правда
18	$global-margin Он представляет собой значение глобальной маржи для компонентов.	номер	1рем
19	$global-padding Он представляет собой глобальное значение заполнения компонентов.	номер	1рем
20	$global-margin Он представляет собой значение глобальной маржи, используемой между компонентами.	номер	1рем
21 год	$global-weight-normal Он представляет собой общий вес шрифта для обычного шрифта.	Ключевое слово или номер	обычный
22	$global-weight-bold Он представляет собой общий вес шрифта для жирного шрифта.	Ключевое слово или номер	смелый
23	$global-radius Он представляет собой глобальное значение всех элементов, имеющих радиус границы.	номер	0
24	$global-text-direction Он устанавливает направление текста CSS на ltr или rtl.		ltr

SASS помогает сделать код в Foundation более гибким и настраиваемым.

Совместимость

Чтобы установить версию на основе SASS для Foundation, Ruby должен быть установлен в Windows. Foundation можно скомпилировать с помощью Ruby SASS и libsass. Мы рекомендуемnode-sass 3.4.2+ версия для компиляции SASS.

Требуется автопрефиксатор

Autoprefixer обрабатывает файлы SASS. gulp-autoprefixer используется для построения процесса. Следующая настройка автопрефикса используется для обеспечения надлежащей поддержки браузером.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

Загрузка фреймворка

Мы можем установить файлы фреймворка с помощью NPM. Используя интерфейс командной строки (CLI), мы можем скомпилировать файлы Sass. Ниже приводится команда для загрузки фреймворка -

npm install foundation-sites --save

После запуска приведенного выше кода командной строки вы получите следующие строки:

Компиляция вручную

Файлы Framework могут быть добавлены в качестве пути импорта в зависимости от процесса сборки, но путь будет таким же, как packages_folder / foundation-sites / scss . Оператор @import находится в верхней части файла foundation-sites.scss . Следующая строка в данном коде объясняется вAdjusting CSS Output раздел.

@import 'foundation';
@include foundation-everything;

Использование скомпилированного CSS

Вы можете включить предварительно скомпилированные файлы CSS. Есть два типа файлов CSS: минифицированные и не минифицированные. Уменьшенная версия используется для производства, а неминифицированная версия используется для непосредственного редактирования CSS фреймворка.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

Настройка вывода CSS

Для различных компонентов вывод Foundation состоит из множества классов. Он используется для управления выводом CSS фреймворка. Добавьте следующую строку кода, чтобы включить все компоненты сразу.

@include foundation-everything;

Ниже приведен список компонентов, импортированных при записи вышеуказанного кода в файл scss. Компоненты, в которых нет необходимости, можно комментировать. Вы можете просмотреть приведенные ниже строки кода в файле Your_folder_name / node_modules / foundation-sites / scss / foundation.scss .

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

Файл настроек

Файл настроек включен во весь проект фундамента, то есть _settings.scss . Если вы используете Yeti Launch или интерфейс командной строки для создания проекта Foundation for Sites, вы можете найти файл настроек в src / assets / scss /.

Мы установили Foundation с помощью npm, поэтому вы можете найти файл настроек в папке your_folder_name / node_modules / foundation-sites / scss / settings / _settings.scss . Вы можете переместить это в свои собственные файлы Sass для работы.

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

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0; $button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%); $button-color: #fff;
$button-color-alt: #000; $button-radius: $global-radius; $button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

В этой главе мы изучим JavaScript . Настроить JavaScript в Foundation легко; единственное, что вам нужно, это jQuery.

Установка JavaScript

Вы можете использовать загрузку ZIP, диспетчер пакетов или CDN, чтобы получить файл Foundation JavaScript. В своем коде вы можете предоставить ссылки на jQuery и Foundation в виде тегов <script>, помещенных перед закрывающим <body>, и проверить, загружается ли Foundation после jQuery. Для получения дополнительной информации нажмите здесь .

Файловая структура

Когда вы устанавливаете Foundation через командную строку, плагины Foundation загружаются в виде отдельных файлов, таких как foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js и так далее. Все эти файлы объединены в foundation.js , который предоставляет все плагины одновременно. Если вы хотите использовать какой-либо плагин, сначала необходимо загрузить foundation.core.js .

Например -

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

Для некоторых плагинов могут потребоваться определенные служебные библиотеки, которые поставляются с установкой Foundation. Вы можете подробно изучить требования к конкретным плагинам в следующей главе Утилиты JavaScript .

Загрузка отдельных файлов создает накладные расходы на сеть, особенно для мобильных пользователей. Для более быстрой загрузки страницы рекомендуется использовать grunt или gulp .

Инициализация

Функция foundation () используется для одновременной инициализации всех плагинов Foundation.

Например -

(document).foundation();

Использование плагинов

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

Настройка плагинов

Плагины можно настроить, используя его параметры конфигурации. Например, вы можете установить скорость скольжения аккордеона вверх и вниз. Настройки плагина можно изменить глобально с помощью плагинаDEFAULTSсвойство. Для получения дополнительной информации нажмите здесь .

Добавление плагинов после загрузки страницы

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

Например -

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

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

В JavaScript плагины могут быть созданы программно, и каждый плагин является классом глобального объекта Foundation с конструктором, который принимает два параметра, такие как элемент и объект.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

Большинство плагинов имеют общедоступный API, который позволяет управлять им через JavaScript. Вы можете просмотреть документацию плагина, чтобы изучить доступные функции и методы, которые можно легко вызвать.

Например -

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open'); // this will open a Reveal modal with id `reveal`. $('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.

Вам разрешено выбрать любой селектор jQuery, и если этот селектор содержит несколько плагинов, то все они будут иметь идентичный выбранный метод.
Аргументы можно передавать так же, как аргументы в JavaScript.
Методы с префиксом подчеркивания (_) считаются частью внутреннего API, что означает, что без предупреждения они могут сломаться, измениться или даже исчезнуть.

События

Когда конкретная функция завершается, DOM запускает событие. Например, всякий раз, когда вкладки меняются, его можно прослушать и создать ответный ответ. Каждый плагин может запускать список событий, который будет задокументирован в документации плагина. В Foundation 6 подключаемые модули обратного вызова удалены и должны использоваться в качестве прослушивателей событий.

Например -

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation включает в себя утилиты JavaScript, которые используются для добавления общих функций. Он очень полезен и прост в использовании. Эту библиотеку утилит JavaScript можно найти в папке Your_folder_name / node_modules / foundation-sites / js.

Коробка

Библиотека Foundation.Box состоит из пары методов.
В js/foundation.util.box.js это имя файла сценария, которое можно включить при написании кода.
Оба метода могут быть переданы как объекты jQuery, так и простые элементы JavaScript.

var dims = Foundation.Box.GetDimensions(element);

Возвращаемый объект определяет размер элемента как -

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}

Функция ImNotTouchingYou включена.
На основе переданного элемента возвращается логическое значение, которое либо конфликтует с краем окна, либо является необязательным или родительским элементом.
Две опции, указанные в строке, приведенной ниже, то есть leftAndRightOnly, topAndBottomOnly, используются для идентификации столкновения только на одной оси.

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

Клавиатура

В Foundation.Keyboard есть много методов , которые помогают упростить взаимодействие с клавиатурой.
В js/foundation.util.keyboard.js это имя файла сценария, которое можно включить при написании кода.
Объект Foundation.Keyboard.keys состоит из пар ключ / значение, ключи которых используются в структуре чаще.
При каждом нажатии клавиши вызывается Foundation.Keyboard.parseKey для получения строки. Это помогает управлять вводом с клавиатуры.

Следующий код используется для поиска всех фокусируемых элементов в данном $ element . Следовательно, нет необходимости писать какие-либо функции и селекторы самостоятельно.

var focusable = Foundation.Keyboard.findFocusable($('#content'));

Функция handleKey - основная функция этой библиотеки.
Этот метод используется для обработки события клавиатуры; он может быть вызван всякий раз, когда в утилите зарегистрирован какой-либо плагин.

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Foundation.Keyboard.register функция может быть вызвана , когда вы хотите использовать свои собственные привязки ключей.

MediaQuery

Библиотека MediaQuery - это основа всей техники адаптивного CSS.
В js/foundation.util.mediaQuery.js это имя файла сценария, которое можно включить при написании кода.
Foundation.MediaQuery.atLeast ( «большой») используется для проверки , если экран по крайней мере , так широко , как в контрольной точке.
Foundation.MediaQuery.get ( «средний») получает запрос в средствах массовой информации в контрольной точке.
В Foundation.MediaQuery.queries является массив запросов СМИ, Фонд использует для точек останова.
Foundation.MediaQuery.current является строкой текущего размера точки останова.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

Следующий код транслирует изменение медиа-запроса в окне.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

Движение и движение

JavaScript Foundation.Motion похож на библиотеку Motion UI, которая включена в Foundation 6. Он используется для создания пользовательских переходов и анимации CSS.
В js/foundation.util.motion.js это имя файла сценария, которое можно включить при написании кода.
Foundation.Move используется для создания простой и элегантной анимации на основе CSS3.
requestAnimationFrame();метод сообщает браузеру выполнить анимацию; он запрашивает, чтобы ваша функция анимации была вызвана до того, как браузер выполнит следующую перерисовку.

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

Когда анимация завершена, запускается finished.zf.animate .

Таймер и изображения загружены

Orbit использует как таймер функции, так и загруженное изображение. Вjs/foundation.util.timerAndImageLoader.js это имя файла сценария, которое можно включить при написании кода.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

Метод загрузки изображений запускает функцию обратного вызова в вашей коллекции jQuery, когда изображения полностью загружены.

Foundation.onImagesLoaded($images, callback);

Touch

Эти методы используются для добавления событий псевдоперетаскивания и свайпа к элементам.
В js/foundation.util.touch.js это имя файла сценария, которое можно включить при написании кода.
Метод addTouch используется для привязки элементов к событиям касания в плагине Slider для мобильных устройств.
Метод spotSwipe привязывает элементы к событиям смахивания в плагине Orbit для мобильных устройств.

$('selector').addTouch().on('mousemove', handleDrag); $('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

Триггеры

Он запускает указанное событие для выбранных элементов.
В js/foundation.util.triggers.js это имя файла сценария, которое можно включить при написании кода.
Триггеры используются во многих плагинах Foundation.

$('selector').on('open.zf.trigger', handleOpen); $('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

В этой библиотеке используются следующие два метода: изменение размера и прокрутка.

Метод resize () запускает событие изменения размера, когда происходит событие изменения размера.
Метод scroll () запускает событие прокрутки, когда происходит событие прокрутки.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

Разное

Foundation содержит несколько функций в основной библиотеке, которые используются во многих местах.
В js/foundation.core.js это имя файла сценария, которое можно включить при написании кода.
Foundation.GetYoDigits ([число, пространство имен]) возвращает случайный uid по основанию 36 с пространством имен. По умолчанию он возвращает строку длиной 6 символов.
Foundation.getFnName (fn) возвращает имя функции JavaScript.
Foundation.transitionend возникает после завершения перехода CSS.

Медиа-запросы - это модуль CSS3, который включает мультимедийные функции, такие как ширина, высота, цвет, и отображает контент в соответствии с указанным разрешением экрана.

Foundation использует следующие медиа-запросы для создания диапазонов разбивки:

Small - Используется для любого экрана.
Medium - Используется для экранов от 640 пикселей и шире.
Large - Используется для экранов от 1024 пикселей и шире.

Вы можете изменить размер экрана, используя классы точек останова . Например, вы можете использовать класс .small-6 для экранов небольшого размера и класс .medium-4 для экранов среднего размера, как показано в следующем фрагменте кода:

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Изменение точек останова

Вы можете изменить точки останова, если ваше приложение использует SASS-версию Foundation. Вы можете разместить имя точки останова под переменной $ breakpoints в файле настроек, как показано ниже -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

Вы можете изменить классы точек останова в файле настроек, изменив переменную $ breakpoint-classes . Если вы хотите использовать класс .large в CSS, добавьте его в конец списка, как показано ниже -

$breakpoints-classes: (small medium large);

Предположим, вы хотите использовать класс .xlarge в CSS, а затем добавить этот класс в конец списка, как показано ниже -

$breakpoints-classes: (small medium large xlarge);

SASS

Миксин точки останова

Вы можете написать медиа-запросы, используя миксин breakpoint () вместе с @include .
Используйте ключевые слова down или only вместе со значением точки останова, чтобы изменить поведение медиа-запроса, как показано в следующем формате кода:

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

Вы можете использовать три медиа-запроса: портрет , ландшафт и сетчатку для ориентации устройства или плотности пикселей, и они не являются медиа-запросами на основе ширины.

Функция точки останова

Функциональность миксина breakpoint () можно использовать с помощью внутренней функции.
Функциональность breakpoint () может использоваться напрямую для написания собственных медиа-запросов -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Работа с медиа-запросами

JavaScript Foundation предоставляет функцию MediaQuery.current для доступа к имени текущей точки останова в объекте Foundation.MediaQuery, как указано ниже:

Foundation.MediaQuery.current

Функция MediaQuery.current отображает маленькие , средние и большие имена текущих точек останова.
Вы можете получить медиа-запрос точки останова с помощью функции MediaQuery.get, как показано ниже -

Foundation.MediaQuery.get('small')

Справочник по Sass

Переменные

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

Sr. No.	Имя и описание	Тип	Значение по умолчанию
1	$breakpoints Это имя точки останова, которое можно использовать для записи медиа-запросов с помощью миксина breakpoint () .	карта	small: 0px средний: 640 пикселей большой: 1024 пикселей xlarge: 1200 пикселей xxlarge: 1440 пикселей
2	$breakpoint-classes Вы можете изменить вывод класса CSS, изменив переменную $ breakpoint-classes .	Список	маленький Средний Большой

Миксины

Mixins создает группу стилей для построения структуры классов CSS для компонентов Foundation.

BREAKPOINT

Он использует миксин breakpoint () для создания медиа-запросов и включает в себя следующие действия:

Если строка передана, то миксин ищет строку в карте $ breakpoints и создает медиа-запрос.
Если вы используете значение пикселя, преобразуйте его в значение em с помощью $ rem-base .
Если передается значение rem, то единицы измерения меняются на em.
Если вы используете значение em, его можно использовать как есть.

В следующей таблице указан параметр, используемый точкой останова -

Sr. No.	Имя и описание	Тип	Значение по умолчанию
1	$value Он обрабатывает значения, используя имя точки останова, значения px, rem или em.	ключевое слово или номер	Никто

Функции

BREAKPOINT

Он использует миксин breakpoint () для создания медиа-запросов с совпадающим входным значением.

В следующей таблице указано возможное входное значение, используемое точкой останова -

Sr. No.	Имя и описание	Тип	Значение по умолчанию
1	$val Он обрабатывает значения, используя имя точки останова, значения px, rem или em.	ключевое слово или номер	небольшой

Справочник по JavaScript

Функции

Есть два типа функций -

.atLeast- Проверяет экран. Он должен быть широким, по крайней мере, как точка останова.
.get - Используется для получения медиа-запроса точки останова.

В следующей таблице указаны параметры, используемые вышеуказанными функциями -

Sr. No.	Имя и описание	Тип
1	size Он проверяет и получает имя точки останова для указанных функций соответственно.	Строка

Описание

Система сетки Foundation масштабирует до 12 столбцов на странице. Системы сетки используются для создания макетов страниц через ряд строк и столбцов, в которых размещается ваш контент.

Параметры сетки

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

	Маленькие устройства Телефоны (<640 пикселей)	Средние устройства Планшеты (> = 640 пикселей)	Большие устройства Ноутбуки и настольные компьютеры (> = 1200 пикселей)
Поведение сетки	Горизонтально всегда	Свернут, чтобы начать, горизонтально над точками останова	Свернут, чтобы начать, горизонтально над точками останова
Префикс класса	.небольшой-*	.Средняя-*	.large- *
Число столбцов	12	12	12
Гнездовой	да	да	да
Смещения	да	да	да
Порядок столбцов	да	да	да

Базовая структура сетки фундамента

Ниже приводится базовая структура сетки фундамента -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

Сначала создайте класс строк для создания горизонтальных групп столбцов.
Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк.
Столбцы сетки создаются путем указания количества из двенадцати доступных столбцов, которые вы хотите охватить. Например, для четырех одинаковых столбцов мы будем использовать .large-3.

Ниже приведены три класса, используемые в системе сетки Foundation:

Sr. No.	Основные классы сетки и описание
1	Большой В крупно- * классы используются для больших устройств.
2	Средняя Класс medium- * используется для устройств среднего размера.
3	Небольшой small- * класс используется для небольших устройств.

Расширенная сетка

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

Sr. No.	Расширенные сетки и описание
1	Комбинированный столбец / ряд В столбцах и строки классов используются на тот же элемент , чтобы получить полный столбец ширины , чтобы использовать в качестве контейнера.
2	Гнездование Мы можем вкладывать столбцы сетки в другие столбцы.
3	Смещения Используя класс large-offset- * или small-offset- * , вы можете переместить столбцы вправо.
4	Неполные строки Foundation автоматически перемещает последний элемент вправо, если строки не включают столбцы до 12.
5	Свернуть / развернуть строки Используя размер медиа-запроса, классы свертывания и разворачивания включаются в элемент строки для отображения отступов.
6	Центрированные колонны Включив в столбец класс small- center, вы можете сделать столбец в центре.
7	Заказ источников Исходный класс упорядочивания используется для перемещения столбцов между точками останова.
8	Блочные сетки Блок-сетка используется для разделения содержимого.

Семантическое построение

Используя набор миксинов SASS, создается CSS-таблица, которая используется для построения вашей собственной семантической сетки. Для получения дополнительной информации нажмите здесь

Ссылка на SASS

Ниже приведены ссылки на SASS для сетки, используемой в Foundation.

Sr. No.	Основные сетки и описание
1	Переменные Используя переменные sass, мы можем изменить стили по умолчанию для этого компонента.
2	Миксины Окончательный вывод CSS создается с помощью миксина.

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

Поддержка браузера

Гибкая сетка поддерживается в Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+ и iOS 7+.

В следующей таблице описаны функции Flex Grid вместе с описанием.

Sr. No.	Характеристики и описание
1	Импорт Он включает миксин экспорта для гибкой сетки для использования CSS по умолчанию.
2	Основы Структура сетки Flex аналогична структуре плавающей сетки.
3	Расширенный размер Если класс изменения размера не включен в столбец, он расширяется и заполняет оставшееся пространство в столбце.
4	Отзывчивые настройки Если явный размер столбца в гибкой сетке не указан, размер столбцов будет изменяться автоматически.
5	Выравнивание столбца Столбцы гибкой сетки могут быть выровнены по горизонтальной или вертикальной оси в родительской строке.
6	Заказ источников Упорядочивание источников помогает переставить столбцы на экранах разного размера.
7	Справочник по Sass SASS (Syntactically Awesome Stylesheet) - это препроцессор CSS, который помогает уменьшить повторение с помощью CSS и экономит время.

В этой главе мы изучим Forms. Foundation предоставляет мощную, простую и универсальную систему макетов для форм , сочетающую стили форм и поддержку сетки.

В следующей таблице перечислены элементы формы, используемые в Foundation.

Sr. No.	Элемент формы и описание
1	Основы формы Создавать формы легко и очень гибко, они построены с помощью комбинации стандартизованных элементов форм и мощной системы сеток.
2	Текст справки Он используется для уведомления пользователя о назначении элемента и обычно размещается под полем.
3	Расположение метки Вы можете расположить ваши метки слева или справа от ваших входов.
4	Встроенные метки и кнопки Дополнительный текст или элементы управления можно прикрепить слева / справа от поля ввода.
5	Пользовательские элементы управления Пользовательские элементы управления, такие как выбор даты, переключатели или ползунки, требуют некоторого внимания, чтобы получить к ним доступ.
6	Ссылка на SASS Вы можете изменить стили компонентов с помощью SASS Reference.

Описание

Foundation использует классы видимости для отображения или скрытия элементов в зависимости от ориентации устройства (книжная и альбомная) или размера экрана (маленький, средний, большой или большой экран).
Это позволяет пользователю использовать элементы в зависимости от среды просмотра.

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

Sr. No.	Класс видимости и описание
1	Показать по размеру экрана Он показывает элементы на основе устройства с использованием класса .show .
2	Скрыть по размеру экрана Он скрывает элементы в зависимости от устройства с помощью класса .hide .

Foundation поддерживает некоторые классы, в которых вы можете скрыть контент, используя классы .hide и .invisible, и ничего не отображает на странице.

Обнаружение ориентации

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

Доступность

В следующей таблице перечислены методы обеспечения доступности для программ чтения с экрана, которые скрывают контент, делая его доступным для чтения программами чтения с экрана.

Sr. No.	Класс доступности и описание
1	Шоу для читателей с экрана Он использует класс show-for-sr, чтобы скрыть контент, не позволяя программам чтения с экрана читать его.
2	Скрыть для программ чтения с экрана Он использует атрибут aria-hidden, который делает текст видимым, но не может быть прочитан программой чтения с экрана.
3	Создание пропускаемых ссылок Программа чтения с экрана создаст ссылку для пропуска, чтобы перейти к содержанию вашего сайта.

Справочник по Sass

Foundation использует следующие миксины для отображения вывода CSS, что позволяет создавать собственную структуру классов для ваших компонентов:

Sr. No.	Миксин и описание	Параметр	Тип
1	show-for По умолчанию он скрывает элемент и отображает его выше определенного размера экрана.	размер $	Ключевое слово
2	show-for-only По умолчанию он скрывает элемент и отображает его в точке останова.	размер $	Ключевое слово
3	hide-for По умолчанию он показывает элемент и скрывает его выше определенного размера экрана.	размер $	Ключевое слово
4	hide-for-only По умолчанию он показывает элемент и скрывает его выше определенного размера экрана.	размер $	Ключевое слово

По умолчанию для всех этих примесей будет установлено значение none .

Описание

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

В следующей таблице перечислены различные типы типографики, используемые в Foundation.

Sr. No.	Типография и описание
1	Абзацы Абзац - это группа предложений, определенных с разным размером шрифта, выделенными словами, высотой строки и т. Д.
2	Заголовок Он определяет заголовки HTML от h1 до h6.
3	Ссылки Он создает гиперссылку, которая открывает другой документ, когда вы нажимаете на текст или изображение.
4	Разделители Он используется для перерыва между разделами с помощью тега <hr>.
5	Упорядоченные и неупорядоченные списки Foundation поддерживает упорядоченные списки, неупорядоченные списки для перечисления вещей.
6	Списки определений Списки определений используются для отображения пар имя-значение.
7	Цитаты Он представляет собой блок текста, размер которого намного больше обычного.
8	Сокращения и код Аббревиатура определяет сокращенное слово или фразу, а код представляет собой фрагмент кода.
9	Нажатия клавиш Он используется для выполнения определенной функции.
10	Доступность Foundation предоставляет некоторые рекомендации по доступу к содержимому страницы.

Справочник по Sass

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

Ниже приведены стили компонентов с использованием следующих переменных SASS.

Sr. No.	Имя и описание	Тип	Значение по умолчанию
1	$header-font-family Задает семейство шрифтов для элементов заголовка.	Строка или список	$ body-font-family
2	$header-font-weight Задает толщину шрифта заголовков.	Строка	$ global-weight-normal
3	$header-font-style Предоставляет стиль шрифта заголовков.	Строка	обычный
4	$font-family-monospace Стек шрифтов, используемый для элементов с моноширинным шрифтом, таких как образцы кода.	Строка или список	Consolas, 'Liberation Mono', Courier, моноширинный
5	$header-sizes Определяет размеры экрана заголовков, и каждый ключ является точкой останова, а каждое значение представляет собой карту размеров заголовков.	карта	`small: ( 'h1': 24 'h2': 20 'h3': 19 'h4': 18 'h5': 17 'h6': 16 ) medium: ( 'h1': 48 'h2': 40 'h3': 31 'h4': 25 'h5': 20 'h6': 16 )`
6	$header-color Предоставляет цвет заголовков.	цвет	наследовать
7	$header-lineheight Определяет высоту строки заголовков.	номер	1.4
8	$header-margin-bottom Обеспечивает нижнее поле заголовков.	номер	0,5 бэр
9	$header-text-rendering Определяет метод отрисовки текста.	Строка	optimizeLegibility
10	$small-font-size Задает размер шрифта для элементов <small>.	номер	80%
11	$paragraph-margin-bottom Определяет нижнее поле абзацев.	номер	1рем
12	$paragraph-text-rendering Способы отрисовки текста абзаца.	Строка	optimizeLegibility
13	$code-color Предоставляет цвет текста для образцов кода.	цвет	$ черный
14	$code-font-family Предоставляет семейство шрифтов для примеров кода.	Строка или список	$ font-family-monospace
15	$code-border Задает границу вокруг кода.	Список	1px сплошной $ средне-серый
16	$code-padding Задает отступ вокруг текста.	Номер или список	rem-calc (2 5 1)
17	$anchor-color Цвет по умолчанию для ссылок.	цвет	$ первичный цвет
18	$anchor-color-hover Задает цвет по умолчанию для ссылок при наведении.	цвет	scale-color ($ anchor-color, $ lightness: -14%)
19	$anchor-text-decoration Оформление текста по умолчанию для ссылок.	Строка	никто
20	$anchor-text-decoration-hover Оформление текста по умолчанию для ссылок при наведении.	Строка	никто
21 год	$hr-width Определяет максимальную ширину разделителя.	номер	$ global-width
22	$hr-border Задает границу по умолчанию для разделителя.	Список	1px сплошной $ средне-серый
23	$hr-margin Поле по умолчанию для разделителя.	Номер или список	rem-calc (20) авто
24	$list-lineheight Он определяет высоту строки для элементов в списке.	номер	$ paragraph-lineheight
25	$list-style-type Предоставляет маркер для неупорядоченных списков.	Строка	диск
26	$list-style-position Он определяет расположение маркеров в неупорядоченных списках.	Строка	снаружи
27	$list-side-margin Определяет левое (или правое) поле.	номер	1,25 бэр
28	$defnlist-term-weight Предоставляет толщину шрифта для элементов <dt>.	Строка	$ global-weight-bold
29	$defnlist-term-margin-bottom Обеспечивает интервал между элементами <dt> и <dd>.	номер	0,3 бэр
30	$blockquote-color Применяет цвет текста элементов <blockquote>.	цвет	$ темно-серый
31 год	$blockquote-padding Обеспечивает отступ внутри элементов <blockquote>.	Номер или список	rem-calc (9 20 0 19)
32	$blockquote-border Он дает боковую границу для элементов <blockquote>.	Список	1px сплошной $ средне-серый
33	$cite-font-size Определяет размер шрифта для элементов <cite>.	номер	rem-calc (13)
34	$cite-color Предоставляет цвет текста для `<cite>`элементов.	цвет	$ темно-серый
35 год	$keystroke-font Определяет семейство шрифтов для элементов <kbd>.	Строка или список	$ font-family-monospace
36	$keystroke-color Определяет цвет текста для элементов <kbd>.	цвет	$ черный
37	$keystroke-background Предоставляет цвет фона для элементов <kbd>.	цвет	$ светло-серый
38	$keystroke-padding Задает отступ для элементов <kbd>.	Номер или список	rem-calc (2 4 0)
39	$keystroke-radius Отображает радиус границы для элементов <kbd>.	Номер или список	$ global-radius
40	$abbr-underline Предоставляет стиль нижней границы для элементов <abbr>.	Список	1px пунктирная $ черная

В этой главе мы изучим Typography Helpers. Помощники по типографике используются для семантически релевантного форматирования текста. Вспомогательные классы в Foundation позволяют быстрее создавать некоторые типографские стили.

В следующей таблице перечислены помощники по типографике , которые используются в Foundation.

Sr. No.	Помощник по типографике и описание
1	Выравнивание текста Это помогает изменить выравнивание текста элемента, например, влево , вправо , по центру и по ширине .
2	Подзаголовок Подзаголовки можно добавить к любому элементу заголовка с помощью класса .subheader .
3	Ведущий абзац Это значительно больший блок текста по сравнению с обычным текстом, который можно использовать для рекламы или другого описательного текста.
4	Список без маркировки По умолчанию <ul> представляет собой маркированный список в Foundation. Чтобы удалить пули, вы можете использовать класс .no-bullet .
5	Статистика Всякий раз, когда вы имеете дело с дашбордом, вам нужно выделить некоторые важные цифры. Вы можете добиться этого, используя класс .stat .

Справочник по Sass

Переменные

В следующей таблице перечислены переменные SASS в файле настроек проекта, которые настраивают стили компонента по умолчанию.

Sr. No.	Имя и описание	Тип	Значение по умолчанию
1	$lead-font-size Размер шрифта для первых абзацев по умолчанию.	номер	$ global-font-size * 1,25
2	$lead-lineheight Высота строки для ведущего абзаца по умолчанию.	Строка	1.6
3	$subheader-lineheight Высота строки подзаголовка по умолчанию.	номер	1.4
4	$subheader-color Цвет шрифта по умолчанию для подзаголовка.	цвет	$ темно-серый
5	$subheader-font-weight Толщина шрифта по умолчанию для подзаголовка.	Строка	$ global-weight-normal
6	$subheader-margin-top Верхнее поле подзаголовка по умолчанию.	номер	0,2 бэр
7	$subheader-margin-bottom Нижнее поле подзаголовка по умолчанию.	номер	0,5 бэр
8	$stat-font-size Размер шрифта статического числа по умолчанию	номер	2,5 бэр

В этой главе мы изучим basic controls. Foundation предоставляет основные элементы управления, такие как кнопки , ползунки и переключатели .

В следующей таблице перечислены основные элементы управления, используемые в Foundation.

Sr. No.	Основные элементы управления и описание
1	Кнопка Foundation поддерживает множество стилей кнопок, которые можно настроить в соответствии с вашими потребностями.
2	Группа кнопок Они являются контейнерами для соответствующих элементов действия. Прекрасно работает, когда группа действий отображается в панели.
3	Кнопка закрытия Кнопка закрытия используется, когда вы хотите, чтобы что-то удалилось, нажав на нее.
4	Слайдер Ползунки очень полезны для установки определенных значений внутри диапазона.
5	Переключатель Он позволяет выключить или включить переключатель, нажав на него.

Описание

Foundation предоставляет несколько различных вариантов стилизации элементов навигации. В комплект входит множество простых шаблонов навигации; его можно интегрировать в форму для создания надежного адаптивного навигационного решения.

В следующей таблице описаны различные типы навигации вместе с описанием.

Sr. No.	Тип и описание
1	Обзор навигации Навигация содержит ссылки на другой раздел и состоит из множества шаблонов навигации.
2	Меню Меню используется для построения многих компонентов навигации.
3	Выпадающее меню Плагин раскрывающегося меню используется для создания подменю под главным меню.
4	Детализированное меню Плагин детализированного меню используется для создания подменю в главном меню в формате слайдера.
5	Аккордеонное меню Он отображает сворачиваемое меню с эффектами аккордеона и обеспечивает поддержку автоматического сворачивания с помощью подключаемого модуля Accordion Menu.
6	Верхняя панель Верхняя панель помогает легко отображать сложную навигационную панель на экране разного размера.
7	Отзывчивая навигация Плагин адаптивного меню размещает меню на разных размерах экрана.
8	Магеллан Magellan создает навигацию, которая находится в фиксированной позиции; он автоматически отслеживает список навигации на странице в зависимости от положения прокрутки.
9	Пагинация Разбиение на страницы, неупорядоченный список обрабатывается Bootstrap, как и многие другие элементы интерфейса.
10	Панировочные сухари Навигационная цепочка указывает текущее расположение сайта в иерархии навигации.

Контейнеры Foundation используются для обеспечения постоянной ширины всех браузеров для сайта и обертывания содержимого сайта.

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

Sr. No.	Контейнер и описание
1	Аккордеон Аккордеоны содержат вертикальные вкладки, которые используются на веб-сайтах для разворачивания и сворачивания больших объемов данных.
2	Вызывать Он помещает содержимое внутри компонента.
3	Выпадающие панели Он отображает содержимое, когда вы нажимаете кнопку.
4	Медиа-объект Он добавляет медиа-объекты, такие как изображения, видео, комментарии в блогах и т. Д. Вместе с некоторым контентом.
5	Вне холста Он отделяет меню навигации от видимой области и отображает основное содержимое.
6	Показать-модальный Фонд позволяет создавать модальные диалоговые окна или всплывающие окна с помощью выявить класс.
7	Столы Foundation предоставляет макеты для отображения данных в табличном формате.
8	Вкладки Это вкладка, основанная на навигации, которая отображает содержимое на разных панелях, не покидая страницы.

В этой главе мы изучим медиа в Foundation. Foundation состоит из нескольких типов мультимедиа, таких как Flex Video , Label , orbit , progress bar и tooltip . В следующей таблице перечислены все типы носителей.

Sr. No.	Тип и описание носителя
1	Гибкое видео Он используется для встраивания видео в гибкий видеоконтейнер, чтобы сохранить правильное соотношение сторон, несмотря на размер экрана.
2	метка Его можно использовать для встроенного стиля, который можно поместить в тело для вызова определенного раздела или для присоединения метаданных.
3	Орбита Это мощный и отзывчивый слайдер, позволяющий пользователю проводить пальцем по экрану устройства с сенсорным экраном.
4	Индикатор Он используется для отображения вашего прогресса и может быть добавлен в ваши макеты.
5	Всплывающие подсказки Он используется для отображения дополнительной информации о термине или действии на странице.

Описание

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

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

Sr. No.	Тип и описание
1	Соблюдать Abide используется в библиотеке проверки форм HTML5 с собственным API с использованием необходимых атрибутов и шаблонов.
2	Эквалайзер Эквалайзер - это способ создать на странице несколько материалов одинаковой высоты.
3	Обмен Он используется для загрузки адаптивного контента в соответствии с устройством пользователя.
4	Переключатель Toggle используется для переключения с одного параметра на другой.
5	Липкий Плагин Sticky используется для создания постоянного контента или изображения на сайте.

Foundation предоставляет набор служебных функций SASS, которые можно использовать с util , color , selector , unit , value и многими другими.

Вы можете импортировать все служебные файлы за раз, используя следующую строку кода -

@import 'util/util';

Вы также можете импортировать отдельные служебные файлы, как показано ниже -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Справочник по Sass

Вы можете изменить стили компонентов, используя следующие функции SASS.

передний план

Он обеспечивает цвет переднего плана элементам на основе цвета фона. Он использует следующий формат для назначения различных типов параметров -

foreground($color, $yes, $no, $threshold)

Вышеуказанные параметры указаны в следующей таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$color Проверяет яркость цвета.	цвет	Никто
2	$yes Если цвет светлый, возвращается цвет $ yes .	цвет	$ черный
3	$no Если цвет темный, возвращается $ no color.	цвет	$ белый
4	$threshold Он представляет собой порог легкости.	Процент	60%

умные весы

Он обеспечивает соответствующий цвет элементам в соответствии с их легкостью. Он использует следующий формат для указания соответствующего цвета -

smart-scale($color, $scale, $threshold)

Вышеуказанные параметры указаны в следующей таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$color Он используется для масштабирования цвета.	цвет	Никто
2	$scale Он указывает процентное значение для увеличения или уменьшения.	Процент	5%
3	$threshold Он представляет собой порог легкости.	Процент	40%

текстовые поля

Он создает селектор при использовании типа ввода текста. Он использует следующий формат для указания типов ввода -

text-inputs($types)

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

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$types Он предоставляет несколько типов ввода текста для создания селектора.	цвет	-

стрип-блок

Он удаляет единицу измерения из значения и возвращает только число. Он использует следующий формат для удаления единицы из значения -

strip-unit($num)

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

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$num Он указывает число, когда вы удаляете единицу измерения из значения.	цвет	Никто

rem-calc

Он изменяет значение пикселя, чтобы оно соответствовало значениям rem. Он использует следующий формат для преобразования значений пикселей в значения rem -

rem-calc($values, $base)

Он использует следующие параметры, как указано в таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$values Он преобразует значения пикселей в значения rem и разделяет их пробелами. Если вы конвертируете список, разделенный запятыми, заключите список в круглые скобки.	Номер или список	Никто
2	$base Он предоставляет базовое значение при преобразовании пикселя в значение rem. Если для базы задано нулевое значение, функция использует в качестве базы переменную $ base-font-size .	номер	ноль

имеющая ценность

Он указывает значение, если оно не ложно. К ложным значениям относятся null, none, 0 или пустой список. Он использует следующий формат для указания значения -

has-value($val)

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

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$val Проверяет указанное значение.	Смешанный	Никто

получить сторону

Он определяет сторону значения и определяет верхнее / правое / нижнее / левое значения для заполнения, поля и т. Д. Он использует следующий формат для указания стороны значения -

has-value($val)

Он использует следующие параметры, как указано в таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$val Он указывает сторону значения.	Список или номер	Никто
2	$side Он определяет, с какой стороны должно возвращаться значение (верхнее / правое / нижнее / левое).	Ключевое слово	Никто

получить значение границы

Он определяет граничное значение элемента. Он использует следующий формат для указания значения границы -

get-border-value($val, $elem)

Он использует следующие параметры, как указано в таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$val Находит определенное значение границы.	Список	Никто
2	$elem Он используется для извлечения компонента границы.	Ключевое слово	Никто

Импорт

Он импортирует содержимое миксинов SASS, которые помещаются в файл scss / util / _mixins.scss . Вы можете импортировать миксины SASS, используя следующую строку кода -

@import 'util/mixins';

Справочник по Sass

Вы можете изменить стили компонентов с помощью функций SASS.

Миксины

Вы можете использовать следующие миксины для создания структуры классов CSS для ваших компонентов.

CSS-TRIANGLE

Он используется для создания выпадающих стрелок, выпадающих пунктов и многого другого. Он использует селектор <i> & :: before </i> или <i> & :: after </i> для присоединения треугольника к существующему элементу. Он использует следующий формат -

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

Он использует следующие параметры, как указано в таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$triangle-size Он определяет ширину треугольника.	номер	Никто
2	$triangle-color Он определяет цвет треугольника.	цвет	Никто
3	$triangle-direction Он определяет направление треугольника, например, вверх, вправо, вниз или влево.	Ключевое слово	Никто

HAMBURGER

Он используется для создания значка меню с шириной, высотой, количеством полос и цветами. Он использует следующий формат -

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

Он использует следующие параметры, как указано в таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$color Он определяет цвет значка.	цвет	Никто
2	$color-hover Он определяет цвет при наведении курсора на значок.	цвет	Никто
3	$width Он определяет ширину значка.	номер	Никто
4	$height Он определяет высоту значка.	номер	Никто
5	$weight Он определяет вес отдельных полосок на значке.	номер	Никто
6	$bars Он определяет количество полосок на значке.	номер	Никто

BACKGROUND-TRIANGLE

Он используется для указания фонового изображения для элемента. Он использует следующий формат -

@include background-triangle($color);

Он использует параметр, указанный в таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$color Он определяет цвет треугольника.	цвет	$ черный

CLEARFIX

Этот миксин автоматически очищает дочерние элементы, так что нет необходимости в дополнительной разметке. Он использует следующий формат -

@include clearfix;

AUTO-WIDTH

Он автоматически изменяет размер элементов в зависимости от количества элементов, присутствующих в контейнере. Он использует следующий формат -

@include auto-width($max, $elem);

Он использует следующие параметры, как указано в таблице -

Sr. No.	Параметр и описание	Тип	Значение по умолчанию
1	$max Он определяет максимальное количество элементов в контейнере.	номер	Никто
2	$elem Он использует тег для одноуровневых селекторов.	Ключевое слово	Ли

DISABLE-MOUSE-OUTLINE

Он используется для отключения контура вокруг элемента, когда он определяет действие ввода мыши. Он использует следующий формат -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Он используется для скрытия элементов и может быть доступен для клавиатур и других устройств. Он использует следующий формат -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Он используется для удаления невидимых элементов и инвертирования вывода CSS с помощью миксина element-invisible () . Он использует следующий формат -

@include element-invisible-off;

VERTICAL-CENTER

Он используется для размещения элементов по вертикали по центру внутри нестатического родительского элемента с использованием следующего формата:

@include vertical-center;

HORIZONTAL-CENTER

Он используется для размещения элементов по горизонтали внутри нестатического родительского элемента, используя следующий формат:

@include horizontal-center;

ABSOLUTE-CENTER

Он используется для размещения элементов с абсолютным центрированием внутри нестатического родительского элемента с использованием следующего формата:

@include absolute-center;

Foundation предоставляет библиотеку пользовательского интерфейса движения для создания переходов пользовательского интерфейса и анимации и используется такими компонентами Foundation, как Toggler , Reveal и Orbit .

Установка Motion UI

Вы можете установить библиотеку Motion UI в свой проект с помощью npm или bower, как показано в следующей строке кода -

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

Вы можете добавить путь для библиотеки Motion UI в Compass с помощью config.rb, как показано в следующей строке кода -

add_import_path 'node_modules/motion-ui/src'

Вы можете включить путь в gulp-sass, используя следующие строки кода:

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

Импортируйте библиотеку Motion UI в файл SASS, используя следующий код -

@import 'motion-ui'

Встроенные переходы

Foundation предоставляет эффекты перехода с помощью классов перехода, созданных библиотекой Motion UI. Давайте создадим один простой пример, используя эффекты перехода.

Пользовательские переходы

Вы можете установить настраиваемые классы перехода с помощью библиотеки Motion UI. Например, мы установим собственные классы для перехода mui-hinge () , который вращает элемент -

@include mui-hinge(
   $state: in, $from: right,
   $turn-origin: from-back, $duration: 0.5s,
   $timing: easeInOut
);

Анимация

Вы можете использовать эффекты перехода Motion UI для создания CSS-анимации. Щелкните эту ссылку, чтобы проверить, как анимация работает в модальном окне с помощью класса анимации данных .