Создание сайтов Superfast с Foundation 5 [A Guide]
Использование инфраструктуры веб-интерфейса может улучшить рабочий процесс веб-дизайна во многих отношениях. Он может помочь вам следовать современным принципам дизайна, таким как мобильный подход, семантическая разметка и адаптивный дизайн. Вы можете воспользоваться многими готовыми элементами CSS и JavaScript и значительно ускорить процесс разработки, высвободив больше времени, чтобы сосредоточиться на визуальном и пользовательском дизайне.
Zurb Foundation 5 является одной из самых мощных сред на рынке. Он логически построен, прост в использовании и полностью бесплатен. Это позволяет вам использовать гибкую CSS-сетку, которая облегчает создание чистого, удобного для пользователя макета. Платформа Foundation также тщательно протестирована, поэтому она заботится о кросс-браузерном и кросс-устройстве совместимость,
В этом уроке я покажу вам, как вы можете создать сверхбыстрый сайт с помощью Zurb Foundation 5. Вы можете взглянуть на конечный результат на демонстрационной странице.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Я создам макет сайта, задача добавления тонких элементов дизайна ждет вас. Веб-сайт, который мы создадим вместе в этом уроке, осуществит мечту современного UX-дизайнера: он будет адаптивным, мобильным, удобным и семантическим.
Из-за продолжительности этого руководства, вот ссылки для быстрого перехода к нужному разделу:
1. Загрузка Foundation 5
Вы можете скачать Foundation 5 в 4 разных формах:
- полный код
- облегченная версия только с необходимым кодом
- пользовательская версия, где вы можете настроить то, что вам нужно, а что нет
- версия Sass, если вы хотите установить свои переменные и миксины в SCSS.
В этом уроке я выберу полный код с ванильным CSS, но, конечно, вы можете выбрать любые другие версии, если вы хотите оптимизировать свой сайт и использовать только то, что вам действительно нужно.
После того, как вы загрузили и распаковали zip-файл, откройте файл index.html в своем браузере, и вы увидите что-то вроде этого:
Да, разработчики включили удобные ссылки в индексный файл. Вы можете оставить это так и создать новый файл для своего прототипа с именем home.html или чем-то подобным, но вам не нужно его хранить, так как вы можете легко добраться до Учредительная документация когда угодно.
Откройте файл index.html в вашем любимом редакторе кода и удалите все внутри
раздел, но до закрытияПравила стилей, которые мы добавляем в файл app.css для создания нашего прототипа:
header {
нижнее поле: 2em;
}
.popular-дополнительный h4 {
размер шрифта: 1,125em;
на полях: 0.4em;
}
.row .row.popular-main {
нижнее поле: 1.5em;
}
Так как Foundation 5 использует относительные единицы измерения, нам нужно использовать «em» -s или «rem» -s вместо пикселей, чтобы не отставать от правил. (Вы можете прочитать о единицах CSS: Пиксели против ems против% здесь.) Я использовал Firefox поджигатель Расширение, чтобы определить, где мне нужно переопределить CSS-правила Foundation 5, вы можете использовать любые другие расширения браузера для веб-разработки, если хотите.
Здесь, в этом коротком фрагменте CSS, нам нужно было переопределить CSS-код по умолчанию только один раз, в последнем правиле (.row .row.popular-main). Вот как выглядит демонстрационный сайт:
4.4 Добавление еще некоторого контента
Используя те же правила, что и раньше, мы добавим еще немного контента в основной раздел страницы. Контент, который мы добавим сейчас, будет «Последние сообщения» с небольшими миниатюрами.
Фонд 5 действительно здорово подготовлен стили эскизов что мы будем использовать на этом этапе. Базовые миниатюры используют предварительно созданный класс CSS под названием «th», который нам нужно добавить к изображениям, которые мы хотим отобразить в виде миниатюр, так, как вы можете видеть их в фрагменте кода ниже.
Для каждой Последней публикации мы добавляем новую строку под Популярной панелью с нашим собственным классом CSS под названием «latest-post».
На планшетах и настольных компьютерах мы покажем небольшую миниатюру с использованием класса миниатюр Foundation в левой части, а заголовок и краткое описание - справа. На мобильном телефоне заголовок и описание будут отображаться под миниатюрой.
Теперь я использовал классы «medium-3 columns» и «medium-9 columns», чтобы разделить экран на 1: 3, 25% для изображения и 75% для текста выше среднего размера.
Вставьте следующий фрагмент кода под Популярной панелью три раза (для трех последних сообщений). Здесь я просто включил код одной строки Последней публикации, поскольку все они используют одну и ту же разметку HTML, отличается только содержание.
Наш пользовательский CSS-файл, созданный на шаге 4.3, app.css также получает некоторые новые правила стиля, чтобы сохранить внешний вид демонстрации. Примечание. Если вы хотите добавить свой собственный CSS в Foundation, не забудьте проверить с помощью инструмента веб-разработки, где вы должны переопределить правила по умолчанию.
В приведенном ниже фрагменте CSS мы должны переопределить их в первом правиле (.row .row.latest-post). Во втором правиле достаточно просто использовать наш собственный селектор (.latest-post h4).
.row .row.latest-post {
нижнее поле: 1.5em;
}
.latest-post h4 {
margin-top: 0;
размер шрифта: 1,125em;
}
Наш прототип теперь выглядит так:
4.5 Добавление пагинации
На этом этапе мы добавим классную нумерацию страниц под последними сообщениями. Foundation 5 протягивает нам руку помощи благодаря удобной, готовой к использованию классы нумерации страниц, На этом шаге мы используем тот же код, который вы можете найти в разделе «Дополнительно» внутри Документы по нумерации страниц,
Вот последние сообщения с недавно добавленным разделом пагинации:
5. Заполнение боковой панели
Теперь, когда мы готовы к основному содержанию нашего демонстрационного сайта, пришло время заполнить правую боковую панель. Правая боковая панель будет скользить ниже основного контента на мобильных устройствах и планшетах.
Вам нужно вставить все фрагменты кода в этом разделе внутри
<
aside class=”large-4 columns”> HTML-тег, который мы установили для боковой панели в шаге 2.
Левая боковая панель будет содержать форму подписки на рассылку новостей (1), последнее видео (2) и меню боковой панели в стиле аккордеона под ником «Наша кулинарная книга» (3).
В конце этого шага мы будем готовы с нашей демонстрацией, которая будет выглядеть следующим образом:
5.1 Форма информационного бюллетеня
Чтобы построить форму в Foundation 5, вам больше ничего не нужно делать, просто поместите сетку внутри
<
form> HTML-тег
Если вы посмотрите на фрагмент кода ниже, то увидите, что мы поместили форму в ряд, в котором мы установили различные селекторы CSS для всех трех сеток: «small-12», «medium-9» и «large». -12” .
Мы выбрали это решение, потому что форма новостной рассылки шириной 100% выглядит круто для мобильных устройств, но она действительно очень неудобна для размеров планшетов очень широкий. К счастью, Foundation 5 позволяет нам использовать «Incomplete Rows»: нам просто нужно добавить класс «end» в определение класса CSS неполного столбца.
Вот что здесь произойдет: на мобильных устройствах под основным контентом будет отображаться боковая панель с формой подписки на рассылку, которая покрывает весь экран.
При средних размерах боковая панель останется под основным контентом, но форма информационного бюллетеня будет только покрывать 75% экрана, а оставшиеся 25% останутся пустыми.
При размере рабочего стола боковая панель будет находиться рядом с основным содержимым, а форма информационного бюллетеня снова будет занимать всю ширину боковой панели.
Увидеть Сетка Документов чтобы узнать больше о Incomplete Rows.
Подпишитесь на наши новости
Теперь загляните внутрь
<
form> тег во фрагменте кода выше. Мы используем встроенную систему форм Foundation с опцией Postfix Button (class = ”button postfix”).
Основы Формы есть много других параметров макета, таких как метка префикса, метка префикса радиуса, кнопка постфикса и метка постфикса. Мы выбрали опцию Postfix Button здесь, так как
удобный: пользователи могут щелкнуть по нему и отправить форму сразу.
Внутри формы мы добавим новую вложенную строку, которая делит экран на 2: 1. Ввод текста получит 8 столбцов, а кнопка постфикса - 4. Поскольку мы хотим, чтобы этот макет был даже на мобильном экране, мы установим здесь CSS-селекторы «small-8 columns» и «small-4 columns», Small Grid - наименьший размер, где мы хотим реализовать эту разметку.
В приведенном выше HTML-коде вы можете увидеть еще одну новую вещь, которая является классом «сжатие строк». Это встроенный стиль Foundation 5. По умолчанию между двумя соседними столбцами есть водосточный желоб, но если мы добавим класс «коллапс» в нашу строку, водосточный желоб исчезнет. Мы делаем это потому, что хотим, чтобы кнопка находилась рядом с вводом текста без пробелов между ними.
Теперь пришло время вставить этот фрагмент кода в
<
aside> раздел вашего HTML-файла.
5.2 Flex Video
Под разделом новостной рассылки мы добавим ежедневный видеоклип к нашей боковой панели. Foundation 5 помогает нам адаптировать встроенные видео и автоматически масштабировать их Flex Video характерная черта.
Во Flex-видео используется встроенный CSS-класс «flex-video». Мы создаем новую строку для боковой панели «Ежедневный рецепт видео» и помещаем в нее один широкий столбец с помощью CSS-селекторов «small-12 medium-9 large-12 column end» по той же причине, по которой мы использовали неполную строку в Medium Grid предыдущий шаг.
Вот код, который вам нужно вставить под разделом Newsletter. Вы можете использовать любое видео с Youtube, Vimeo и т. Д.
Ежедневный Рецепт Видео
5.3 Меню боковой панели
Для бокового меню мы будем использовать аккордеон Особенность Foundation 5. Аккордеоны - это веб-элементы, которые раскрывают и сворачивают контент в логические разделы.
На нашем демонстрационном сайте эти логические разделы представляют собой 3 различные группы продуктов питания (основные блюда, гарниры, десерты), и каждая группа содержит более мелкие группы, такие как «Домашняя птица», «Свинина», «Говядина», «Вегетарианец».
Мы помещаем всю боковую панель Accordion в один широкий столбец с той же логикой, что и в шагах 5.1 и 5.2. Мы помещаем аккордеон внутри него как неупорядоченный список с соответствующими встроенными классами CSS, такими как «аккордеон» и «аккордеон-навигация».
Поскольку Foundation Accordions работает с JavaScript, вы можете настроить его поведение с помощью предварительно созданных переменных JavaScript, если хотите. Для этого посмотрите раздел «Необязательная конфигурация JavaScript» в Аккордеонные Документы, Следующий фрагмент кода находится ниже раздела Flex Video внутри файла index.html.
Наша кулинарная книга
Вывод
Теперь, когда мы готовы к нашему демонстрационному сайту, давайте посмотрим, что еще можно сделать с помощью Foundation 5. Элементы, которые мы использовали в этой демонстрации, представляют собой лишь небольшой набор функций платформы Foundation. Есть много других вещей, которые вы можете использовать в своем дизайне, такие как настраиваемые панели значков, хлебные крошки, лайтбоксы, ползунки диапазона, проверка формы и многие другие. Документы довольно хорошо написаны, и они помогают разработчикам с большим количеством примеров кода.
Если вы знакомы с Sass, у вас есть еще больше возможностей, поскольку в каждом разделе Документов объясняется, как вы можете создавать свои собственные миксины, и какие переменные Sass вы можете использовать для настройки своего сайта. Прежде чем приступить к разработке веб-страницы, не забудьте проверить совместимость фреймворка Foundation, чтобы убедиться, что он работает во всех браузерах, для которых нужно создать.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
