Создавайте сайты очень быстро с помощью Foundation 5 [Руководство]
Использование инфраструктуры веб-интерфейса может улучшить рабочий процесс веб-дизайна во многих отношениях. Оно может помочь вам следовать современным принципам дизайна такие как мобильный подход, семантическая разметка и адаптивный дизайн. Вы можете использовать множество готовых к использованию элементов CSS и JavaScript и значительно ускорить процесс разработки, высвободить больше времени, чтобы сосредоточиться на визуальном и пользовательском дизайне.
Zurb Foundation 5 - одна из самых мощных на рынке фреймворков. Он логически построен, прост в использовании и полностью бесплатен. Это позволяет вам использовать гибкая сетка CSS тот облегчает создание чистого, удобного для пользователя макета. Платформа Foundation также тщательно протестирована, поэтому она обеспечивает совместимость между браузерами и устройствами..
В этом уроке я покажу вам как вы можете создать сверхбыстрый сайт с Zurb Foundation 5. Вы можете посмотреть окончательный результат на демо-странице..
Я создам макет сайта, задача добавления тонких элементов дизайна ждет вас. Веб-сайт, который мы создадим вместе в этом уроке, осуществит мечту современного UX-дизайнера: он будет адаптивным, мобильным, удобным и семантическим..
Из-за продолжительности этого руководства, вот ссылки для быстрого перехода к нужному разделу:
- Загрузка Foundation 5
- Понимание решетки
- Когда использовать классы Large-N, Medium-N и Small-N
- Добавление верхней строки меню
- Заполнение основной части
- Добавление панели для популярных сообщений
- Добавление еще 3 сообщений на популярную панель
- Разглядывая CSS
- Добавление еще немного контента
- Добавление нумерации страниц
- Заполнение боковой панели
- Форма информационного бюллетеня
- Flex Video
- Меню боковой панели
- Заключение
1. Загрузка Foundation 5
Вы можете скачать Foundation 5 в 4 различных формах:
- полный код
- облегченная версия с только необходимым кодом
- пользовательская версия, где вы можете настроить то, что вам нужно, а что нет
- версия Sass, если вы хотите установить свои переменные и миксины в SCSS.
В этом уроке я выберу полный код с ванильным CSS, но, конечно, вы можете выбрать любые другие версии, если вы хотите оптимизировать свой сайт и использовать только то, что вам действительно нужно.
После того, как вы загрузили и распаковали zip-файл, откройте файл index.html в вашем браузере, и вы увидите что-то вроде этого:
Да, разработчики включили удобные ссылки в индексный файл. Вы можете оставить это так и создать новый файл для своего прототипа с именем home.html или чем-то подобным, но вам не нужно его хранить, так как вы можете легко получить доступ к базовой документации в любое время..
Откройте файл index.html в вашем любимом редакторе кода и удалить все внутри раздел, но до закрытия Правила стиля, которые мы добавляем к app.css Файл, который можно использовать для создания нашего прототипа: В качестве основания 5 используются относительные единицы, нам нужно использовать “Эм”-с или “рем”-с вместо пикселей идти в ногу с правилами. (Вы можете прочитать о единицах CSS: Пиксели против ems против% здесь.) Я использовал расширение Firebug Firefox, чтобы определить, где я должен переопределить правила CSS для Foundation 5, вы можете использовать любые другие расширения браузера для веб-разработки, если хотите. Здесь, в этом коротком фрагменте CSS, нам нужно было переопределить CSS-код по умолчанию только один раз, в последнем правиле (.row .row.popular-main). Вот как выглядит демонстрационный сайт: Используя те же правила, что и раньше, мы добавим еще немного контента в основной раздел страницы. Контент, который мы добавим сейчас, будет последние сообщения с маленькими миниатюрами. В Foundation 5 есть действительно классные предварительно подготовленные стили миниатюр, которые мы будем использовать на этом шаге. Эскизы фонда используют предварительно созданный класс CSS называется “го” что нам нужно добавить к изображениям, которые мы хотим отобразить в виде миниатюр, так, как вы можете видеть их в фрагменте кода ниже. Для каждого последнего сообщения мы добавляем новую строку под популярной панелью с нашими пользовательский класс CSS называется “последний пост”. На планшетах и настольных компьютерах мы покажем небольшую миниатюру, используя класс миниатюр Фонда слева, а заголовок и краткое описание справа. На мобильном телефоне заголовок и описание будут отображаться под миниатюрой.. Теперь я использовал “средний 3 столбца” а также “средние 9 столбцов” классы, чтобы заставить их разделить экран на 1: 3, 25% для изображения и 75% для текста от среднего размера. Вставьте следующий фрагмент кода под Популярной панелью три раза (для трех последних сообщений). Здесь я просто включил код одной строки Последней публикации, поскольку все они используют одну и ту же разметку HTML, отличается только содержание. Содержание последнего сообщения ... Наш пользовательский файл CSS, созданный на шаге 4.3, app.css также получает некоторые новые правила стиля, чтобы сохранить внешний вид демонстрации приборки. Заметка: Если вы хотите добавить свой собственный CSS в Foundation, не забудьте проверить с помощью инструмента веб-разработки, где вы должны переопределить правила по умолчанию. В приведенном ниже фрагменте CSS мы должны переопределить их в первом правиле (.row .row.latest-post). Во втором правиле достаточно просто использовать наш собственный селектор (.latest-post h4). Наш прототип теперь выглядит так: На этом этапе мы добавим классную нумерацию страниц под последними сообщениями. Фонд 5 помогает нам с его удобными, готовыми к использованию классами нумерации страниц. На этом шаге мы используем тот же код, который вы можете найти в “продвинутый” раздел внутри документации по нумерации страниц. Вот последние сообщения с недавно добавленным разделом разбиения на страницы: Теперь, когда мы готовы с основным содержанием нашего демонстрационного сайта, пришло время заполнить правую боковую панель. Правая боковая панель будет скользить ниже основного контента на мобильных устройствах и планшетах. Вам нужно вставить все фрагменты кода в этом разделе внутри Левая боковая панель будет содержать форму подписки на рассылку новостей (1), последнее видео (2) и меню боковой панели в стиле аккордеона под ником “Наша кулинарная книга” (3). В конце этого шага мы будем готовы с нашей демонстрацией, которая будет выглядеть так: Чтобы построить форму в Foundation 5, вам больше ничего не нужно делать, просто поместите сетку внутри HTML-тег. Если вы посмотрите на фрагмент кода ниже, вы увидите, что мы поместили форму в ряд, в котором мы установили различные селекторы CSS для всех 3 сеток: “малые 12”, “средне-9”, а также “большой 12”. Мы выбрали это решение, потому что форма новостной рассылки шириной 100% выглядит круто для мобильных устройств, но на самом деле она очень неудобна с размерами планшетов. очень широкий. К счастью, Foundation 5 позволяет нам использовать “Неполные строки”: мы просто должны добавить “конец” класс для определения класса CSS неполного столбца. Вот что здесь произойдет: на мобильных устройствах под основным контентом будет отображаться боковая панель с формой подписки на рассылку, которая покрывает весь экран.. При средних размерах боковая панель останется под основным контентом, но форма информационного бюллетеня будет покрывать только 75% экрана, а оставшиеся 25% останутся пустыми.. При размере рабочего стола боковая панель будет находиться рядом с основным содержимым, а форма информационного бюллетеня снова охватит всю ширину боковой панели.. Смотрите Grid Docs, чтобы узнать больше о Incomplete Rows. Теперь загляните внутрь header margin-bottom: 2em; .popular-дополнительный h4 font-size: 1.125em; маржинальная вершина: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Добавление еще некоторого контента
Название последнего сообщения
.row .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; размер шрифта: 1,125em;
4.5 Добавление пагинации
5. Заполнение боковой панели
5.1 Форма информационного бюллетеня
Подпишитесь на наши новости
Фундаментные формы имеют много других параметров макета, таких как метка префикса, метка префикса радиуса, кнопка постфикса и метка постфикса. Мы выбрали опцию Postfix Button, так как она более удобна для пользователя: пользователи могут щелкнуть по ней и сразу отправить форму.
Внутри формы мы добавим новую вложенную строку, которая делит экран на 2: 1. Ввод текста получит 8 столбцов, а кнопка постфикса - 4. Поскольку мы хотим, чтобы этот макет был даже на экране мобильного устройства, мы установим “маленькие 8 колонок” а также “маленькие 4 колонки” Здесь CSS-селекторы, Small Grid - наименьший размер, где мы хотим реализовать эту разметку.
Вы можете увидеть еще одну новую вещь в HTML-коде выше, который является “разрушение строк” учебный класс. Это встроенный стиль Foundation 5. По умолчанию между двумя соседними столбцами есть водосточный желоб, но если мы добавим “коллапс” класс нашему ряду, желоб исчезнет. Мы делаем это потому, что хотим, чтобы кнопка находилась рядом с вводом текста без пробелов между ними.
Теперь пришло время вставить этот фрагмент кода в
5.2 Flex Video
Под разделом новостной рассылки мы добавим ежедневный видеоклип к нашей боковой панели. Фонд 5 помогает нам сделать встроенные видео адаптивными и заставить их автоматически масштабироваться с его функцией Flex Video.
Flex Videos используют встроенный “Flex-видео” CSS класс. Мы создаем новую строку для раздела боковой панели «Рецепт ежедневного видео» и помещаем в него один широкий столбец с “малый-12 средний-9 большой-12 колонн конец” Селекторы CSS по той же причине, по которой мы использовали неполную строку в средней сетке на предыдущем шаге.
Вот код, который вам нужно вставить под разделом Newsletter. Вы можете использовать любое видео с Youtube, Vimeo и т. Д..
Ежедневный Видео Рецепт
5.3 Меню боковой панели
Для бокового меню мы будем использовать функцию Accordion в Foundation 5. Accordions - это веб-элементы, которые раскрывают и сворачивают контент в логические разделы..
На нашем демонстрационном сайте эти логические разделы представляют собой 3 различные группы продуктов (основные блюда, гарниры, десерты), и каждая группа содержит более мелкие группы, такие как “домашняя птица”, “Свинина”, “говяжий”, “вегетарианец”.
Мы помещаем всю боковую панель Accordion в один широкий столбец с той же логикой, что и в шагах 5.1 и 5.2 ранее. Мы помещаем аккордеон внутри него как неупорядоченный список с соответствующими встроенными классами CSS, такими как “аккордеон” а также “баян-навигация”.
Поскольку Foundation Accordions работает с JavaScript, вы можете настроить его поведение с помощью предварительно созданных переменных JavaScript, если хотите. Для этого посмотрите на “Необязательная конфигурация JavaScript” раздел Аккордеонных Документов. Следующий фрагмент кода находится ниже раздела Flex Video внутри файла index.html..
Заключение
Теперь, когда мы готовы к нашему демонстрационному сайту, давайте посмотрим, что еще можно сделать с помощью Foundation 5. Элементы, которые мы использовали в этой демонстрации, представляют собой лишь небольшой набор функций платформы Foundation. Есть много других вещей, которые вы можете использовать в своем дизайне, такие как настраиваемые панели значков, хлебные крошки, лайтбоксы, ползунки диапазона, проверка формы и многие другие. Документы довольно хорошо написаны, и они помогают разработчикам с множеством примеров кода.
Если вы знакомы с Sass, у вас есть еще больше возможностей, поскольку в каждом разделе Документов объясняется, как вы можете создавать свои собственные миксины, и какие переменные Sass вы можете использовать для настройки своего сайта. Прежде чем приступить к разработке веб-страницы, не забудьте проверить совместимость платформы Foundation, чтобы убедиться, что она работает во всех браузерах, для которых необходимо создать.
- Посмотреть демо
- Скачать исходный код
