Дизайн-система Foundation.

Дизайн-система Foundation для сайтов с реальной средой выполнения

Foundation для сайтов с работающей средой выполнения

Foundation для сайтов сочетает адаптивную платформу CSS с плагинами JavaScript. Для верстки proof desk используется XY Grid, для валидации — Abide, а для диалога проверки — Reveal. Скомпилированная среда выполнения загружается после jQuery 3.7.1, а вызов $(document).foundation() инициализирует атрибуты данных после создания страницы.

Это отличается от Foundation для писем. На странице используются браузерные формы, валидация JavaScript и модальное окно; ее разметка не является шаблоном письма. Автономный пример включает фактические файлы версии 6.9.0 и небольшой оригинальный скрипт, а не статичную имитацию этих компонентов.

Прочитать вспомогательную спецификацию

Настройки Sass и стандартная палитра дизайн-системы Foundation

Настройки Sass и стандартная палитра

В таблице перечислены настройки из установленной конфигурации Sass. Стандартная палитра включает основной цвет #1779ba, вторичный #767676, цвет успеха #3adb76, предупреждения #ffae00 и ошибки #cc4b37. Они обозначают цветовые роли фреймворка; теплая обложка буклета — оригинальная иллюстрация CSS со своей палитрой.

Настройки с префиксом доллара — это входные значения на этапе компиляции. Это не пользовательские свойства CSS, которым можно присвоить значение в атрибуте style браузера. Чтобы изменить тему фреймворка, используйте сборку Sass или добавьте после скомпилированной таблицы стилей обычный CSS с четко ограниченной областью действия, чтобы настроить отдельный экран. В примере выбран второй способ: так заданы заголовок, внутренние отступы формы и фон.

Прочитать вспомогательную спецификацию

Стандартная геометрия дизайн-системы Foundation и локальная иерархия чтения

Геометрия по умолчанию и локальная иерархия чтения

Foundation использует размер шрифта 100% относительно браузера, межстрочный интервал основного текста 1.5 и стек Helvetica Neue/Helvetica/Roboto/Arial. Глобальный радиус равен нулю, поэтому стандартные компоненты имеют более угловатую форму, чем во многих современных наборах компонентов. Поля ввода, выноски и форма пробной печати сохраняют этот характер, не приобретая несвойственных им крупных скруглений.

В приложении для заголовка страницы выбран размер 38px и межстрочный интервал 1.15; на мобильных устройствах размер уменьшается до 30px. Лид — 18 пикселей. Иллюстрация с крупными строками текста и простым кругом задает контекст печати, а форма остается устойчивой рабочей поверхностью белого цвета. Эти локальные решения полностью перечислены в прилагаемом CSS.

Прочитать вспомогательную спецификацию

Выбор XY Grid и межколонников в дизайн-системе Foundation

Выбор сетки XY и межколонника

Контейнер grid-container содержит строку grid-x grid-margin-x. В ней две ячейки — medium-7 и medium-5, которые делят двенадцать колонок между формой и предпросмотром буклета на экранах шириной от 640px. Ниже этой точки останова они располагаются друг под другом в порядке исходного кода. Во вложенной строке Pages/Proof используются ячейки small-6, чтобы два компактных поля количества оставались рядом на телефоне.

Foundation поддерживает сетки как с внешними, так и с внутренними отступами. В этом примере внутри контейнера последовательно используются межколонники с внешними отступами, без смешивания обоих типов в одной строке. Карта точек останова включает xlarge и xxlarge для Sass, но настройка breakpoint-classes по умолчанию создает классы ширины small, medium и large. Наличие точки останова в карте не означает, что в скомпилированном файле автоматически появится соответствующий класс-утилита.

Прочитать вспомогательную спецификацию

Зарегистрируйте фактические правила валидации в дизайн-системе Foundation

Укажите фактические правила проверки

В форме используются data-abide с novalidate и data-validate-on=submit, чтобы избежать перестроения ошибок при изменении значения во время нажатия кнопки. Каждый элемент form-error связан с полем ввода через data-form-error-for. Для сводки ошибок всей формы используется выноска alert с атрибутом data-abide-error. Ошибки обязательных полей заголовка и флажка предпечатной проверки обрабатываются наряду с двумя явно заданными числовыми валидаторами.

Валидатор буклета принимает целые числа от четырех до двухсот, кратные четырем. Валидатор количества экземпляров принимает целые числа от одного до десяти. Оба зарегистрированы в Foundation.Abide.defaults.validators до инициализации и указаны через data-validator. В проверенном сценарии один лишь нативный атрибут step не обеспечил нужный шаг для числа страниц в буклете, поэтому реализация на него не полагается. Требование кратности четырем относится к этому примеру, а не ко всем процессам печати.

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

Прочитать вспомогательную спецификацию

Свяжите отображение ошибок с навигацией в дизайн-системе Foundation

Свяжите отображение ошибок с навигацией

При событии forminvalid.zf.abide приложение переводит фокус на первое поле с атрибутом data-invalid. Так пользователь сразу попадает к месту, требующему исправления, а выноска alert объясняет проблему целиком. Элементы form-error связаны с полями через aria-describedby, поэтому сообщения — не просто красные маркеры рядом с полями без пояснений.

Полный ход событий показан в примере JavaScript. Обычное событие submit отменяется, чтобы браузер не переходил на несуществующий адрес. Только событие formvalid.zf.abide создает временный снимок данных и открывает окно проверки. Это важно: если привязать диалог проверки напрямую к кнопке отправки, он откроется независимо от результата валидации.

Прочитать вспомогательную спецификацию

Просмотр снимка в Reveal в дизайн-системе Foundation

Проверьте снимок в Reveal

Для модального окна используется data-reveal и связь aria-labelledby с его заголовком. Обработчик корректно заполненной формы создает временный объект и формирует список определений с помощью textContent. Reveal открывает окно через Foundation API, обеспечивает поведение модального окна и закрывает его кнопками с data-close или обработчиком подтверждения.

Кнопка «Продолжить редактирование» закрывает окно, не сохраняя результат. Кнопка «Зафиксировать локальную пробную печать» записывает те же временные значения в выноску статуса, а затем закрывает окно. У значка закрытия есть явная подпись. При подтверждении не утверждается, что файл загружен или заказ на печать создан: приложение не выполняет ни одну из этих операций.

• В Reveal показаны значения, сохраненные при успешной проверке формы.
• Отмена не изменяет сохраненный локальный результат.
• Подтверждение фиксирует только статус предпросмотра, а не внешний заказ.

Прочитать вспомогательную спецификацию

Зафиксируйте версии и загрузите цепочку зависимостей в дизайн-системе Foundation

Зафиксируйте и загрузите цепочку зависимостей

Установите [email protected] и [email protected], затем скопируйте скомпилированные CSS, Foundation JavaScript и jQuery в локальные ресурсы. Таблицу стилей подключите перед локальными доработками страницы. Сначала загрузите jQuery, затем Foundation, а третьим — скрипт приложения; атрибут defer сохраняет этот порядок после разбора документа.

Зарегистрируйте пользовательские валидаторы до вызова $(document).foundation(). Их регистрация после инициализации создает ненужную зависимость от времени выполнения. Для воспроизводимости в текущем примере используется полная скомпилированная среда выполнения. В рабочей сборке можно выбрать нужные плагины и их зависимости, но нельзя удалять Abide или Reveal, оставляя при этом соответствующие атрибуты данных в разметке.

Прочитать вспомогательную спецификацию

Предпечатная проверка в дизайн-системе Foundation — локальное решение, а не подтверждение для производства

Предварительная проверка — локальное решение, а не подтверждение готовности к рабочей среде

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

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

Прочитать вспомогательную спецификацию

Примеры компонентов дизайн-системы Foundation

<main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>

Foundation.Abide.defaults.validators.booklet=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=4&&n<=200&&n%4===0};
Foundation.Abide.defaults.validators.copies=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=1&&n<=10};
$(document).foundation();let pending=null;
$('#proof-form').on('submit',event=>event.preventDefault()).on('formvalid.zf.abide',()=>{pending={title:$('#job').val().trim(),pages:Number($('#pages').val()),copies:Number($('#copies').val()),stock:$('#stock').val()};const list=document.getElementById('proof-summary');list.replaceChildren();for(const[label,value]of [['Job',pending.title],['Pages',pending.pages],['Proof copies',pending.copies],['Stock',pending.stock]]){const dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=label;dd.textContent=value;list.append(dt,dd);}$('#proof-review').foundation('open');}).on('forminvalid.zf.abide',()=>{document.querySelector('#proof-form [data-invalid]')?.focus()}).on('reset',()=>{$('#result').text('No proof recorded. This preview does not submit a print order.')});
$('#confirm').on('click',()=>{$('#result').text('Recorded locally: '+pending.title+' — '+pending.pages+' pages, '+pending.copies+' proof copies. No order was created.');$('#proof-review').foundation('close')});

body{background:#f6f5f1}.proof-desk{max-width:1100px;padding-top:32px;padding-bottom:32px}header{margin-bottom:32px;max-width:760px}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;color:#596456}h1{font-size:38px;line-height:1.15}.lead{font-size:18px;color:#53606a}form{background:white;padding:24px;border:1px solid #ddd}.paper-preview{background:#e3d8bd;aspect-ratio:4/3;padding:24px;position:relative;overflow:hidden;margin-bottom:20px}.paper-preview span{position:relative;z-index:1;font-size:36px;line-height:1;font-weight:700;letter-spacing:-.04em;color:#31483b}.paper-circle{position:absolute;width:75%;aspect-ratio:1;background:#718474;border-radius:50%;top:25%;left:40%}.paper-preview strong{position:absolute;bottom:20px;left:24px;color:#31483b;font-size:12px;letter-spacing:.13em}.callout h2{font-weight:600}#result{margin-top:16px}.reveal dl{display:grid;grid-template-columns:110px 1fr;gap:10px}.reveal dd{overflow-wrap:anywhere}.button:focus-visible{outline:3px solid #143e5b;outline-offset:3px}@media(max-width:639px){h1{font-size:30px}form{padding:18px}.paper-preview{margin-top:16px}}