Как начать работу с Foundation 6

Foundation 6 дает сетку XY Grid, готовые стили и JavaScript-компоненты для адаптивных сайтов. Подключите его через CDN для первого макета или установите npm-пакеты для проекта с Sass. В статье вы соберете одну страницу с шапкой, четырьмя карточками, подвалом и модальным окном Reveal.

Что такое Foundation и когда его выбирать

Foundation for Sites – CSS-фреймворк с адаптивной сеткой, компонентами интерфейса и JavaScript-плагинами. Foundation 6 подходит, когда вы хотите быстро собрать разметку и менять палитру через Sass.

Для небольшой страницы без интерактивных элементов собственный CSS может оказаться проще. Выбирайте Foundation, если проекту нужны повторяемая сетка, готовые компоненты и mobile-first-разметка.

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

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

Если проект исключает jQuery, интерактивные компоненты Foundation добавят лишнюю зависимость. Для одной сетки подключать jQuery не требуется: ее поведение задает CSS.

Как подключить Foundation: CDN, npm, готовая сборка

Выберите способ по задаче. CDN подходит для первого HTML-файла, npm устанавливает исходники для настройки, а готовые файлы можно хранить локально без сборщика. Для каждого способа ниже дан цельный файл index.html.

Подключение через CDN

Создайте файл index.html и сохраните полный пример. Адреса jsDelivr содержат версии пакетов, чтобы обновление зависимости не меняло пример автоматически.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Первый пример Foundation</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation.min.css">
</head>
<body>
  <main class="grid-container">
    <h1>Foundation подключен</h1>
    <button type="button" class="button" data-open="demo">Открыть окно</button>
  </main>
  <div class="reveal" id="demo" data-reveal aria-labelledby="demo-title">
    <h2 id="demo-title">Reveal работает</h2>
    <p>JavaScript-плагин открыл модальное окно.</p>
    <button type="button" class="button" data-close>Закрыть</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/what-input@6.0.1/dist/what-input.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/js/foundation.min.js"></script>
  <script>$(document).foundation();</script>
</body>
</html>

Сохраните файл и откройте его браузером. Кнопка «Открыть окно» покажет Reveal, а кнопка «Закрыть» скроет его.

Установка через npm

Установите Node.js с npm. Создайте папку проекта и откройте в ней терминал.

npm init -y
npm install --save-exact foundation-sites@6.9.0 jquery@3.6.0 what-input@6.0.1

Пакет foundation-sites попадет в node_modules. npm устанавливает файлы пакета, но сам по себе не вставляет их в HTML.

Скопируйте готовые файлы из установленных пакетов следующей командой:

node -e "const fs=require('node:fs'); fs.mkdirSync('assets',{recursive:true}); for(const [src,dst] of [['foundation-sites/dist/css/foundation.min.css','foundation.min.css'],['jquery/dist/jquery.min.js','jquery.min.js'],['what-input/dist/what-input.min.js','what-input.min.js'],['foundation-sites/dist/js/foundation.min.js','foundation.min.js']]) fs.copyFileSync('node_modules/'+src,'assets/'+dst);"

В папке assets появятся CSS и три JavaScript-файла. Создайте в корне проекта файл index.html с локальными подключениями:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Первый пример Foundation</title>
  <link rel="stylesheet" href="assets/foundation.min.css">
</head>
<body>
  <main class="grid-container">
    <h1>Foundation подключен</h1>
    <button type="button" class="button" data-open="demo">Открыть окно</button>
  </main>
  <div class="reveal" id="demo" data-reveal aria-labelledby="demo-title">
    <h2 id="demo-title">Reveal работает</h2>
    <p>JavaScript-плагин открыл модальное окно.</p>
    <button type="button" class="button" data-close>Закрыть</button>
  </div>
  <script src="assets/jquery.min.js"></script>
  <script src="assets/what-input.min.js"></script>
  <script src="assets/foundation.min.js"></script>
  <script>$(document).foundation();</script>
</body>
</html>

Откройте index.html и нажмите «Открыть окно». Стили и Reveal используют локальные файлы из установленных пакетов.

Сохраните package-lock.json вместе с проектом: он фиксирует дерево зависимостей.

Готовая локальная сборка без npm

Если вам не нужны исходники Sass, сохраните четыре готовых файла. Для этого откройте в браузере каждый адрес из списка:

https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation.min.css
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/what-input@6.0.1/dist/what-input.min.js
https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/js/foundation.min.js

Сохраните содержимое в папку assets под именами foundation.min.css, jquery.min.js, what-input.min.js и foundation.min.js. Проверьте расширения: браузер не должен дописать к ним .txt. Рядом с папкой assets создайте index.html:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Первый пример Foundation</title>
  <link rel="stylesheet" href="assets/foundation.min.css">
</head>
<body>
  <main class="grid-container">
    <h1>Foundation подключен</h1>
    <button type="button" class="button" data-open="demo">Открыть окно</button>
  </main>
  <div class="reveal" id="demo" data-reveal aria-labelledby="demo-title">
    <h2 id="demo-title">Reveal работает</h2>
    <p>JavaScript-плагин открыл модальное окно.</p>
    <button type="button" class="button" data-close>Закрыть</button>
  </div>
  <script src="assets/jquery.min.js"></script>
  <script src="assets/what-input.min.js"></script>
  <script src="assets/foundation.min.js"></script>
  <script>$(document).foundation();</script>
</body>
</html>

Отключите интернет и заново откройте HTML: оформление и кнопка Reveal должны работать без CDN.

Какие файлы нужны и в каком порядке их подключать

CSS отвечает за сетку и базовые стили. JavaScript нужен интерактивным компонентам: Reveal, Dropdown Menu, Off-canvas и другим плагинам.

1. Добавьте foundation.min.css в секцию head. Собственный CSS подключите после него.
2. Подключите jQuery перед foundation.min.js.
3. Поставьте what-input.min.js после jQuery и перед Foundation.
4. Подключите foundation.min.js после зависимостей.
5. Добавьте $(document).foundation() после HTML-разметки компонентов.

JavaScript Foundation требует jQuery; зависимость описана в документации по подключению плагинов. Для Foundation 6.9.0 минимальная заявленная версия jQuery – 3.6.0. Именно ее используют примеры статьи.

what-input определяет способ ввода: клавиатуру, мышь или касание. Он помогает управлять оформлением фокуса и не заменяет jQuery. Для базового открытия Reveal what-input не обязателен; в примерах он подключен для обработки способов ввода.

Скрипты ставьте перед закрывающим </body> и не добавляйте к ним async.

Вызов $(document).foundation() находит разметку плагинов и запускает их. Атрибут data-reveal отмечает модальное окно, а data-open связывает кнопку с его идентификатором.

Сетка XY Grid: контейнер, ряды и ячейки

Сетка Foundation строит макет из контейнера, ряда и ячеек. Класс grid-container ограничивает ширину содержимого, grid-x создает ряд, а cell задает элемент сетки.

Укажите ширину ячейки классами small-, medium- и large-. Базовая сетка использует 12 колонок: small-12 занимает всю строку, medium-6 – половину, large-3 – четверть.

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell small-12 medium-6 large-3">Первая услуга</div>
    <div class="cell small-12 medium-6 large-3">Вторая услуга</div>
    <div class="cell small-12 medium-6 large-3">Третья услуга</div>
    <div class="cell small-12 medium-6 large-3">Четвертая услуга</div>
  </div>
</div>

XY Grid работает по принципу mobile-first. На узком экране четыре ячейки станут вертикальными, на среднем появятся две колонки, на широком – четыре.

Значение medium-6 действует и на широком экране, если large- не переопределяет ширину.

grid-margin-x добавляет внешние промежутки между ячейками. grid-padding-x добавляет внутреннее пространство. Фон элемента распространяется на padding, но не на margin.

Для одинаковых карточек задайте число элементов в строке на родительском ряду:

<div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-4">
  <div class="cell">Первая карточка</div>
  <div class="cell">Вторая карточка</div>
  <div class="cell">Третья карточка</div>
  <div class="cell">Четвертая карточка</div>
</div>

Число после up- задает количество ячеек в строке.

Для новой блочной сетки используйте small-up-N вместо small-block-grid-N из Foundation 5. Для горизонтального смещения подойдет large-offset-2:

<div class="grid-x">
  <div class="cell small-12 large-8 large-offset-2">
    Текст ограниченной ширины
  </div>
</div>

На широком экране этот текст займет 8 колонок со смещением на 2. Полный перечень классов размещен в документации XY Grid.

Собираем простую страницу

Сохраните следующий код в index.html. Он содержит шапку, блок «Кто мы», четыре карточки услуг, подвал и Reveal для проверки JavaScript.

Полный HTML-файл

Пример использует CDN; для локального подключения замените только пути к библиотекам.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Студия «Контур»</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation.min.css">
  <link rel="stylesheet" href="site.css">
</head>
<body>
  <header class="page-header">
    <div class="grid-container">
      <nav aria-label="Главное меню">
        <ul class="menu">
          <li><a href="#about">Кто мы</a></li>
          <li><a href="#services">Услуги</a></li>
          <li><a href="#contacts">Контакты</a></li>
        </ul>
      </nav>
      <div class="hero">
        <h1>Студия «Контур»</h1>
        <p>Проектируем сайты для небольших компаний.</p>
        <button class="button" type="button" data-open="contact-modal">Обсудить проект</button>
      </div>
    </div>
  </header>
  <main class="grid-container">
    <section id="about" class="page-section" aria-labelledby="about-title">
      <div class="grid-x">
        <div class="cell small-12 large-8 large-offset-2">
          <h2 id="about-title">Кто мы</h2>
          <p>Помогаем представить услуги компании в интернете и доводим сайт до публикации.</p>
        </div>
      </div>
    </section>
    <section id="services" class="page-section" aria-labelledby="services-title">
      <h2 id="services-title">Наши услуги</h2>
      <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-4 services">
        <article class="cell service">
          <h3>Структура</h3>
          <p>Организуем разделы и путь посетителя к заявке.</p>
        </article>
        <article class="cell service">
          <h3>Дизайн</h3>
          <p>Подбираем типографику, цвета и оформление интерфейса.</p>
        </article>
        <article class="cell service">
          <h3>Разработка</h3>
          <p>Собираем адаптивные страницы и подключаем систему управления.</p>
        </article>
        <article class="cell service">
          <h3>Поддержка</h3>
          <p>Обновляем содержимое сайта и исправляем ошибки интерфейса.</p>
        </article>
      </div>
    </section>
  </main>
  <footer id="contacts" class="page-footer">
    <div class="grid-container">
      <div class="grid-x grid-margin-x">
        <div class="cell small-12 medium-6">
          <nav aria-label="Меню подвала">
            <ul class="menu">
              <li><a href="#about">О студии</a></li>
              <li><a href="#services">Услуги</a></li>
            </ul>
          </nav>
        </div>
        <div class="cell small-12 medium-6">
          <p>Студия «Контур». Работаем с веб-проектами.</p>
        </div>
      </div>
    </div>
  </footer>
  <div class="reveal" id="contact-modal" data-reveal aria-labelledby="contact-title">
    <h2 id="contact-title">Обсудим ваш сайт</h2>
    <p>Это демонстрационное окно для контактов компании.</p>
    <button class="button" type="button" data-close>Закрыть</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/what-input@6.0.1/dist/what-input.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/js/foundation.min.js"></script>
  <script>$(document).foundation();</script>
</body>
</html>

Стили и проверка результата

Сохраните CSS в файле site.css рядом с HTML. Foundation рассчитает ширину ячеек, а эти правила зададут фон, границы и отступы.

body {
  color: #243247;
}
.page-header {
  background: #edf3fa;
}
.hero {
  max-width: 45rem;
  padding: 4rem 0;
}
.page-section {
  padding: 3rem 0;
}
.services {
  row-gap: 1.5rem;
}
.service {
  padding: 1.25rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #f8fafc;
}
.page-footer {
  padding: 2rem 0;
  border-top: 1px solid #cbd5e1;
}
.menu {
  flex-wrap: wrap;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid #2458a6;
  outline-offset: 3px;
}

1. Откройте index.html. На широком экране четыре карточки появятся в одной строке.
2. Уменьшите ширину окна. Карточки перейдут сначала в две колонки, затем в одну.
3. Нажмите «Обсудить проект». Reveal появится поверх страницы.
4. Нажмите «Закрыть». Окно исчезнет, а страница снова примет нажатия.
5. Пройдите меню клавишей Tab. На активных ссылках появится видимый контур.

На мобильной ширине меню должно переноситься без горизонтальной прокрутки.

Если карточки не перестраиваются, проверьте классы grid-x, cell и адаптивные значения. Если Reveal не открывается, проверьте порядок скриптов и вызов инициализации.

Настройка через Sass

Dart Sass превращает исходники Sass в CSS. Такой подход позволяет изменить палитру, шрифты, ширину контейнера и число колонок до сборки.

Файл _settings.scss и переменные

После установки пакета Foundation установите Sass:

npm install --save-dev sass
node -e "const fs=require('node:fs'); for(const dir of ['scss','css']) fs.mkdirSync(dir,{recursive:true});"

Создайте файл scss/_settings.scss. Не редактируйте файлы в node_modules: обновление пакета перезапишет такие изменения.

@import 'util/util';

$foundation-palette: (
  primary: #2458a6,
  secondary: #526277,
  success: #16834b,
  warning: #ffae00,
  alert: #c52c34
);

$body-font-family: Arial, Helvetica, sans-serif;
$header-font-family: Georgia, serif;
$global-width: 75rem;
$grid-columns: 12;

$foundation-palette меняет цвета компонентов. Переменные шрифтов задают гарнитуры текста и заголовков. $global-width ограничивает контейнер, а $grid-columns задает число колонок.

Импорт util/util находится в файле настроек, перед переменными.

Сначала оставьте 12 колонок, чтобы разметка примеров сохранила пропорции. Если вы поменяете число колонок на 16, половину ряда будет занимать medium-8. Классы вида large-up-4 по-прежнему задают количество карточек в строке.

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

Создайте scss/app.scss и подключите настройки перед Foundation:

@import 'settings';
@import 'foundation';

@include foundation-everything;

Такой порядок импортов и подключение компонентов описаны в документации Foundation по Sass.

Запустите команду из корня проекта:

npx sass --load-path=node_modules/foundation-sites/scss scss/app.scss css/app.css --style=compressed

Параметр --load-path указывает Sass, где искать исходники Foundation. Файл scss/app.scss служит входом, css/app.css – результатом сборки.

Исходники Foundation используют старый синтаксис @import. Dart Sass может выводить предупреждения об устаревших конструкциях; предупреждение отличается от ошибки компиляции. При успешной сборке появится файл css/app.css.

Замените готовый CSS Foundation в HTML результатом сборки:

<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="site.css">

Не подключайте одновременно готовый foundation.min.css и свою сборку. Обновите страницу: кнопка получит цвет primary, а заголовки – гарнитуру Georgia.

Для автоматической сборки запустите наблюдение:

npx sass --load-path=node_modules/foundation-sites/scss --watch scss/app.scss:css/app.css

Измените значение primary и сохраните файл. После пересборки обновите страницу: цвет кнопки изменится. Нажмите Ctrl+C, чтобы остановить наблюдение.

Для отката верните ссылку на готовый CSS вместо css/app.css.

Основные компоненты Foundation

Компоненты без поведения используют CSS. Интерактивные элементы требуют JavaScript и вызова $(document).foundation(). Разметку ищите в документации Foundation for Sites.

Top Bar не превращает обычное меню в выпадающее. Для этого добавьте Dropdown Menu и инициализируйте Foundation.

Responsive Embed использует класс responsive-embed вместо прежнего flex-video.

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

Ошибки при подключении Foundation

Сначала отделите проблему CSS от проблемы JavaScript. Сетка и базовые кнопки работают без инициализации, а Reveal требует зависимости, разметку и вызов Foundation.

Классы row и columns относятся к другой системе сетки, встречающейся в старых примерах. Внутри XY Grid используйте согласованный набор grid-container, grid-x и cell.

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

Сообщение $(...).foundation is not a function часто означает, что библиотека не загрузилась. Еще одна причина – повторное подключение jQuery после Foundation, которое заменяет объект с зарегистрированными плагинами.

Какой способ подключения выбрать

Для первого макета берите CDN: один HTML-файл показывает работу XY Grid и Reveal. Для проекта со своей палитрой устанавливайте npm-пакеты и собирайте CSS через Sass. Для автономной страницы храните готовые файлы в каталоге assets.

Сначала добейтесь работы одной карточной сетки и одного Reveal, затем меняйте палитру и число колонок. Такой порядок сокращает область поиска при ошибке.