Создание сайтов Superfast с Foundation 5 [A Guide]

Использование инфраструктуры веб-интерфейса может улучшить рабочий процесс веб-дизайна во многих отношениях. Он может помочь вам следовать современным принципам дизайна, таким как мобильный подход, семантическая разметка и адаптивный дизайн. Вы можете воспользоваться многими готовыми элементами CSS и JavaScript и значительно ускорить процесс разработки, высвободив больше времени, чтобы сосредоточиться на визуальном и пользовательском дизайне.

Zurb Foundation 5 является одной из самых мощных сред на рынке. Он логически построен, прост в использовании и полностью бесплатен. Это позволяет вам использовать гибкую CSS-сетку, которая облегчает создание чистого, удобного для пользователя макета. Платформа Foundation также тщательно протестирована, поэтому она заботится о кросс-браузерном и кросс-устройстве совместимость,

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

Я создам макет сайта, задача добавления тонких элементов дизайна ждет вас. Веб-сайт, который мы создадим вместе в этом уроке, осуществит мечту современного UX-дизайнера: он будет адаптивным, мобильным, удобным и семантическим.

Из-за продолжительности этого руководства, вот ссылки для быстрого перехода к нужному разделу:

1. Загрузка Foundation 5

Вы можете скачать Foundation 5 в 4 разных формах:

  1. полный код
  2. облегченная версия только с необходимым кодом
  3. пользовательская версия, где вы можете настроить то, что вам нужно, а что нет
  4. версия Sass, если вы хотите установить свои переменные и миксины в SCSS.

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

После того, как вы загрузили и распаковали zip-файл, откройте файл index.html в своем браузере, и вы увидите что-то вроде этого:
Скачать Фонд 5Да, разработчики включили удобные ссылки в индексный файл. Вы можете оставить это так и создать новый файл для своего прототипа с именем home.html или чем-то подобным, но вам не нужно его хранить, так как вы можете легко добраться до Учредительная документация когда угодно.

Откройте файл index.html в вашем любимом редакторе кода и удалите все внутри раздел, но до закрытия

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

Сначала вы всегда должны добавить строку. Когда вы создали строку, вы должны добавить столбцы внутри строки. Количество столбцов нужно добавить до 12. Если столбцов больше или меньше, чем 12, сетка не будет работать.

В нашей компоновке рабочего стола я выделил 8 столбцов для основного содержимого слева и 4 столбца для боковой панели справа.

Давайте посмотрим, как это выглядит в коде. Сначала вы можете увидеть

<

div> с классом «ряд». Чтобы разделить макет на две полосы, нам нужно поместить всю страницу в ряд. Позже мы можем вложить в нее новые строки, поскольку строки и столбцы могут быть неограниченно вложены в Foundation 5.

Внутри каждой строки необходимо поместить столбцы, которые в сумме составляют 12. Столбцы помечаются классом CSS «столбцы» и соответствующим классом «large-n», «medium-n» или «small-n».

Некоторый контент для Main Div

Когда использовать классы Large-n, Medium-n и Small-n

Теперь вы наверняка спросите, почему я использовал только классы «Large-8» и «Large-4» и не установил ничего для Малой и Средней сеток. Если вы помните, у нашего запланированного макета есть только боковая панель по размеру рабочего стола, которая представлена ​​Большой сеткой. На мобильном телефоне и планшете это всего одна широкая колонка.

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

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

Теперь измените классы «large-8» и «large-4» на «medium-8» и «medium-4». Вы увидите, что теперь у сайта есть боковая панель как для планшета, так и для рабочего стола, но не для мобильного. Помните, что вам всегда нужно устанавливать наименьшую сетку, на которой вы хотите использовать данный макет.

Ради интереса теперь поменяйте классы на «small-8» и «small-4». Теперь боковая панель появится на всех макетах, даже на мобильных устройствах.

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

Таким образом, Средняя и Большая Сетка наследуется от Малой Сетки, а Большая Сетка наследуется от Средней Сетки, но не наоборот. Адаптивная структура

3. Добавление верхней строки меню

На шаге 3 мы добавим на наш сайт панель верхнего меню с двухуровневым раскрывающимся подменю. Верхняя строка не является частью макета рабочего стола 2: 1, который мы создали на шаге 2, поэтому вам нужно разместить фрагмент кода, который мы создадим здесь на шаге 3, над тем, который мы добавили на шаге 2.

В верхней строке меню слева будет название сайта («Foundation 5 Recipes») с некоторыми пунктами меню, относящимися к контенту, а справа мы разместим два пункта меню утилит.

В конце этого шага наш сайт будет выглядеть так: Добавьте верхнюю панельМы выполним шаг 3, используя Foundation 5 Топ Бар характерная черта. Чтобы оставаться семантическим, мы помещаем верхнюю строку меню внутри

тег.

Код - это вариант того, который вы можете найти внутри Документы, Я не слишком изменился об этом; Я просто добавил контент и изменил порядок элементов списка. Название CSS-классов, таких как «has-dropdown» и «dropdown», самоочевидно. Я также сделал заголовок липким, добавив два CSS-класса Top Bar в Foundation: «Содержит в сетку» и «Прилипает».

Если вы скопировали этот фрагмент в индексный файл, быстро взгляните на него на мобильном устройстве и посмотрите, как он классно выглядит.

4. Заполнение основной части

На шаге 4 мы заполним основной раздел контента нашей страницы. Все фрагменты кода на этом этапе необходимо вставить внутрь

столбец, который мы создали на шаге 2.

К концу этого шага внешний вид нашего демонстрационного сайта значительно улучшится и будет примерно таким: Основное содержание Заключительный шаг4.1 Добавление панели для популярных сообщений Сначала мы добавим раздел «Популярные» (светло-серая рамка на скриншоте выше), который мы поместим внутри Фонд Панель,

На шаге 4.1 мы создадим один большой пост с большой картинкой и кратким описанием, в демоверсии он будет работать под псевдонимом «Летний салат», а на шаге 4.2 мы добавим 3 небольших популярных поста с меньшими изображениями под ним.

Мы помещаем весь раздел в класс «панель», который является предварительно подготовленным CSS-классом Foundation 5. Внутри панели мы размещаем новый ряд, который будет нашим первым вложенным рядом. На планшетах и ​​настольных компьютерах эта строка будет разделена на 50-50: одна половина строки для изображения и одна половина для субтитров и описания.

На маленьком экране это будет выглядеть неловко, поскольку изображение будет крошечным, поэтому здесь мы просто хотим, чтобы текстовая часть находилась под изображением. В качестве наименьшего экрана мы хотим установить этот макет 50-50 в качестве среднего экрана; мы будем использовать CSS-селектор «средние-6 столбцов» для столбцов.

Мы также добавили пользовательский класс CSS под названием «Popular-Main» во вложенную строку. Это не класс Foundation 5, а наш. Мы поместили его там, чтобы было проще добавить наши собственные правила стиля позже. Вы можете добавить столько собственных CSS-селекторов на свой веб-сайт Foundation, сколько захотите.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.