Адаптивный интерфейсный фреймворк Foundation

Первый релиз Foundation состоялся 10 лет назад, тем не менее, до сих пор этот фреймворк остаётся одним из самых популярных и стабильно обновляется.

В чем же его секрет?

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

Число сайтов, которые работают на базе Foundation уже давно перевалило за сотни тысяч и ежедневно увеличивается. Foundation совместим с любыми CMS. Прежде всего Foundation - это гарантия, что ваш сайт на его основе будет работать везде, ведь фреймворк испытывался и оттачивался годами.

Что вы узнаете из этого урока?

Научитесь настраивать проект для работы с Foundation
Познакомитесь и научитесь работать с сеткой XY Grid Foundation
Познакомитесь с шаблонами кнопок
Познакомитесь с навигационными шаблонами
Кратко ознакомитесь с некоторыми другими возможностями Foundation

1) Подготовка проекта

Чтобы начать работать с фреймворком, необходимо его скачать. Сделать это можно двумя способами - скачать с сайта, либо установить через пакетный менеджер. Для простоты, мы пойдём по первому пути.

Ссылка на прямое скачивание фреймворка:

https://static.download.foundation/sites-css-latest

Из скачанного архива сперва нужно достать foundation.css и добавить в папку со своим проектом. Этого уже достаточно, чтобы работать с сеткой данного фреймворка, создавать и управлять статичными шаблонами - кнопки, навигационное меню и т.д. Но чтобы раскрыть все возможности данного фреймворка, нужно ещё подключить JS.

Для этого достанем папку js из скачанного архива и добавим её в наш проект. В этой папке содержится огромное количество плагинов - в дальнейшем их можно добавлять выборочно.

Теперь создадим index.html в корневой папке проекта. Стартовый шаблон в index.html будет выглядеть так:

Теперь мы можем приступить к работе с фреймворком.

2) Сетка XY Grid

Эта сетка появилась в версии 6.4. и на данный момент является сеткой по умолчанию. Она работает подобно сетке на float'ах, но также заимствует новые полезные функции, доступные в flexbox - горизонтальное и вертикальное выравнивание, автоматические задание размеров и другие функции. Кроме того, такая сетка отлично поддерживается браузерами.

Попробуем на практике:

Основу XY сетки составляют следующие элементы:

.grid-x - горизонтальная сетка
.grid-y - вертикальная сетка
.cell - элемент сетки

Приведем простейший пример. Допишем в наш стартовый шаблон следующий код:

Результат на странице будет таким:

Мы создали 2 элемента в горизонтальной сетке с шириной 100%, поэтому второй элемент оказался вытеснен вниз. Давайте это исправим, немного дописав код:

Что здесь произошло? Для начала надо сказать, что сетка состоит из 12-ти колонок. Выглядит это примерно так:

Каждый элемент сетки занимает заданное количество колонок. В самом первом примере элемент сетки по умолчанию занимает 12 колонок, поэтому он растянут на всю ширину экрана и вытесняет второй элемент сетки. В новом примере мы сами задаем количество колонок, занимаемое элементом для разных разрешений экрана.

Есть три разрешения экрана:

large - ширина экрана больше или равна 1024px
medium - ширина экрана в пределах 640px - 1024px
small - ширина экрана меньше 640px

Результат для разных разрешений получился таким:

Отлично, теперь вы знаете, как быстро сделать адаптивный шаблон без использования медиазапросов.

В сетке можно также задавать внутренние и внешние отступы, применяя к сетке классы .grid-margin-x и .grid-padding-x:

Выглядит это так:

Однако наш контент занимает все свободное пространство и выглядит это не очень красиво. Решить эту проблему можно, обернув нашу сетку в блок с классом .grid-container:

Теперь наш контент находится в контейнере, шириной 1200px строго по центру при любых разрешениях.

Через CSS можно задать контейнер другой шириной, при необходимости.

К классу контейнера можно добавить два класса - .fluid и .full. Если коротко - первый растягивает контейнер на всю доступную ширину, второй же растягивает контейнер на всю ширину, игнорируя отступы. Советуем попрактиковаться с ними самостоятельно.

Также вместо задания фиксированной ширины элемента сетки в колонках можно добавить элементу класс auto - тогда его ширина будет высчитываться автоматически. Если всем элементам сетки задать ширину auto, место в контейнере распределится равномерно между каждым элементом. Можно использовать автоматический расчет ширины элемента только при определенном размере экрана - например, добавив класс .medium-auto. Тогда начиная с этого разрешения ширина будет распределяться автоматически.

Есть ещё пара полезных свойств. Свойство .medium-margin-collapse уберет все отступы у сетки, которой это свойство задали, начиная со среднего размера экрана. И ещё одно полезное свойство .offset - оно эквивалентно свойству margin-left и применимо к любому элементу, также можно задавать это свойство для определенного разрешения экрана (.large-offset-2).

Напоследок расскажем о возможности создания вертикальной сетки .grid-y. Чтобы задать вертикальную сетку, ей обязательно нужно задать фиксированную высоту. Код будет таким:

Результат:

3) Шаблоны кнопок в Foundation

Добавить на страницу шаблоны кнопок в Foundation довольно просто:

Выглядят они так:

Можно изменить размер кнопки, если дописать соответствующий класс к ней - tiny, small, large, expanded, small-expanded. Советуем попробовать каждый размер самостоятельно.

Таким же образом кнопкам можно задать шаблонный цвет - primary, secondary, success, alert, warning.

Через CSS или CSS-Препроцессоры можно и самостоятельно задавать собственные цветовые решения.

Если добавить кнопке атрибут disabled, внешне получится такой результат:

Отдельно стоит отметить простое и удобное создание и скрытие уведомлений без единой строчки js:

Вот что получилось:

4) Навигационные шаблоны в Foundation

Навигация создается так же просто, как и кнопки. Вот пример простейшего меню:

Если немного оформить, то будет вполне неплохо:

В документации предложено большое количество различных шаблонов - меню аккордеон, выпадающее меню, бургер-меню и другое. Рассмотрим самый показательный шаблон:

Всего 20 строк HTML-кода делают возможным это:

Один этот пример стоит того, чтобы попробовать этот фреймворк в своих проектах.

5) Другие возможности Foundation

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

Слайдеры:

Прогресс-бары:

Уведомления:

И многое другое...

Надеемся, вам понравился обзор на Foundation и вы нашли для себя что-то новое. Если хотите изучить фреймворк подробнее - советуем перейти на официальную документацию https://get.foundation/sites/docs/

До скорой встречи!

Ссылка на канал: https://t.me/sitodel