Краткое знакомство с CSS-фреймворком Foundation

Андрей Васильев

2020

Использование CSS-фреймворка Foundation

Зачем использовать CSS-фреймворк

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

Подключение Foundation

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

Мы будем ориентироваться на использование уже скомпилированного кода

Готовая сборка https://get.foundation/sites/docs/installation.html
Сделать свою сборку https://download.get.foundation/sites/download/

Локальная разработка с помощью ADSF

adsf — это джем Ruby, который позволяет запустить веб-сервер на Ruby для раздачи статического содержимого из каталога

Подключение в Gemfile:

gem 'adsf'
gem 'adsf-live'

Джем adsf-live предоставляет возможности по перезагрузке страницы, когда данные на жёстком диске изменяются

После установки джема перейдите в каталог, из которого надо показывать статический контент, и запустите:

bundle exec adsf --live-reload

Базовый шаблон страницы

<!doctype html>
<html class="no-js" lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Шаблон Zurb Foundation</title>
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
    <h1>Здравствуй, мир!</h1>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

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

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

Исключением является подключение JS от CSS-фреймворка:

    <script>
      $(document).foundation();
    </script>

Использование средств разработки HTML

Современные браузеры предоставляют отличный инструментарий для отладки HTML и JavaScript-кода

Структурирование документа с помощью сеток

Foundation предлагает XY-Grid для формирования сетки расположения элементов

Официальная документация содержит информацию обо всех технических моментах использования сетки

Ключевые применения сетки:

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

Расположение элементов внутри ячеек

При формировании текста внутри ячеек можно настраивать горизонтальное и вертикальное расположение элементов внутри ячейки, документация

Горизонтальное расположение

.align-right
.align-center
.align-justify
.align-spaced

Вертикальное расположение

.align-top
.align-middle
.align-bottom
.align-stretch

Float-элементы

Если необходимо «приклеить» элемент к одной из сторон, то можно воспользоваться Float Classes

<div class="callout clearfix">
  <a class="button float-left">Left</a>
  <a class="button float-right">Right</a>
</div>

Базовые типографические элементы

Foundation предлагает хорошие стили для базовых типографических элементов

Их возможности также расширяются с помощью классов-помощников

Ещё пара полезных элементов

Label — отображение метки, например для выделения нового текста
Badge — отображение числа или буквы в кружочке

Управляющие элементы

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

Button — базовый элемент для выполнения действий, перехода к другим страницам
Button Group — набор кнопок для выполнения действий над элементом

Контейнеры

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

Callout — базовый контейнер. Предлагает рамку и фон для своего содержимого
Card — карточка, обычно используется для предварительного показа элементов
Media Object — элемент для представления медиа-элемента (картинка, видео) и комментирующего его текста
Table — красивое оформление для табличных данных

Ситуативные компоненты

Accordion — контейнер, позволяющий отобразить или скрыть элементы из набора
Tabs — контейнер, позволяющий переключаться между вкладками

Формы

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

Forms — базовое оформление форм ввода данных
Switch — элемент для ввода логического значения
Slider — элемент для ввода числа с помощью ползунка