Чтобы создать адаптивный веб-сайт с помощью Foundation, который будет корректно отображаться на разных устройствах, можно следовать таким рекомендациям:
- Выбрать вариант настройки. 1 Можно скачать версию со стилями по умолчанию (Default CSS) или самостоятельно настроить некоторые стили: структуру сетки, цвета и типографику, размер кнопок и т. д. (Custom css). 1
- Создать структуру сайта. 1 Модульная сетка фреймворка (12-колоночная по умолчанию) позволяет создавать адаптивные шаблоны страниц для десктопа и мобильных устройств. 1 Строки создают максимальную ширину и содержат столбцы, которые формируют структуру. 1 Размер столбцов будет изменяться в зависимости от размеров экрана монитора. 1
- Добавить слайдер. 1 В Zurb Foundation есть адаптивный слайдер изображений Orbit, который можно использовать отдельно от фреймворка. 1 Для этого нужно включить код в контейнер для контента. 1
- Добавить постраничную навигацию. 1 С Foundation это сделать легко: нужно вставить соответствующий код. 1
Также рекомендуется протестировать макет сайта на разных категориях устройств и при необходимости внести корректировки. 4