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

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

2020

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

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

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

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

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

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

Локальная разработка с помощью 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 предоставляет гибкий набор навигационных элементов. Рассмотрим необходимый минимум:

  • Menu — базовый элемент навигации
  • Top Bar — общий верхний навигационный элемент
  • Pagination — переход между страницами приложения
  • Breadcrumbs — иерархия страниц

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

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

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

Контейнеры

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

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

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

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

Формы

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

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