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

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

2020

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

Зачем использовать 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 для формирования сетки расположения элементов

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

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

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

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

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

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

Float-элементы

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

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

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

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

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

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

Навигация

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

Foundation предоставляет гибкий набор навигационных элементов. Рассмотрим необходимый минимум:

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

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

Контейнеры

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

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

Формы

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