Создание пользовательского интерфейса на основе карты с основой

Sep 13, 2025

Инструкции

Карта Макеты сайта взяли через Интернет. Сделано популярным Pinterest, Twitter, Facebook и Google, карты стали узором для дизайна для многих различных случаев использования.

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

Шаги к идеальному макету сайта

Команда ZURB использовала макеты на основе карт в своей конструкторской работе в течение многих лет. Его Frontend Framework, Фонд, всегда стремился оснастить веб-дизайнеров с инструментами, необходимые для быстрого проектирования и создания адаптивных веб-сайтов, включая широкий ассортимент модульных и гибких компонентов. Версия 6.3 Добавлена к этой коллекции строительных блоков, приносит совершенно новый вне холст, отзывчивые аккордеоны / вкладки и мощный новый компонент карты.

В этом руководстве мы узнаем, как создать реагирующее пользовательское интерфейс на основе карт, который использует преимущество GreeBox на основе Flexbox, чтобы открыть целую степень возможностей.

01. Настройте среду развития

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

Как только у вас установлен узел, установите Foundation CLI, используя NPM установить -G фундамент-CLI , что облегчает настройку нового проекта фундамента.

02. Начните новый проект

Давайте создадим новый проект на основе шаблона ZURB. Запустить команду Фонд Новый Net-Magazine-Tutorial , выберите «Веб-сайт (Foundation для сайтов),« Net-Magazine-Tutorial », а затем шаблон ZURB. Это создаст шаблон проекта на основе фундамента, в комплекте с системой сборки и сервером разработки.

Шаблон поставляется с пробной страницей в SRC / Pages / index.html Отказ Для простоты мы удалим этот образец и замените его пустым & lt; header & gt; & lt; / header & gt; Начать с нуля, создание нашего пользовательского интерфейса на основе карты. Пробег Начнем NPM Из командной строки для запуска сервера разработки, и вы должны увидеть страницу HTML HTML для карт.

03. Создать карту

Теперь пришло время создать нашу первую карту. На данный момент давайте просто поставим его прямо в раздел с классом Карты-контейнер Отказ При создании карты используя фундамент, есть три основных классов, которые необходимо знать: .карта , .card-сечение и .card-deder. Отказ Для более продвинутых пользователей каждый из них соответствует смеси SCSS ( карточный контейнер , карта сечения и карт-делитель ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Простая карта с фундаментом Yeti на нем, заголовок и нижний колонтитул, созданный с помощью класса делителя карты

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

То .card-сечение класс определяет расширяемый блок контента, где вы можете поставить контент, в то время как .card-deder. Класс определяет не расширяющий блок, такой как нижний колонтитул, заголовок или разделитель. Давайте использовать все эти классы для создания нашей первой базовой карты.

 & lt; header & gt;
  & lt; class = "ряд колонн" & gt;
    & lt; h3 & gt; карты - лучшие & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / header & gt;
& lt; Раздел Class = "Карты-контейнер" & gt;
  & lt; class = "карта" и GT;
    & lt; div class = "карточный делитель" & gt;
      & lt; h4 & gt; leti header & lt; / h4 & gt;
    & lt; / div & gt;
    & lt; class = "карточный раздел" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & lt; / img & gt;
    & lt; / div & gt;
    & lt; div class = "карточный делитель" & gt;
      & lt; P & GT; Yeti Footer & lt; / P & GT;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / раздел & gt;

04. Добавить компонент стили

Если мы просто сделаем это, наша карта будет огромной, расширяя, чтобы заполнить весь экран. Мы собираемся справиться с общим количеством размеров в ближайшее время, но пока используем это как оправдание, чтобы узнать, как добавить стили компонента в шаблоне ZURB.

Добавить файл _card.scss. к SRC / Активы / СКС / Компоненты / Указание А. Макс-ширина: 300 пикселей за .карта и включите файл в наших основных CSS, добавив @import Компоненты / карта; к SRC / Активы / SCSS / APP.SCS Отказ

05. Сделайте свои карты многоразовыми

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

Переместить нашу реализацию карты в частичную, просто вырезать и вставить .карта компонент, который мы встроили в файл в SRC / Partials. , сказать SRC / Partials / Basic-Card.html Отказ Затем вы можете включить этот контент, просто добавляя строку {{& gt; Основная карта}} В вашем файле индекса.

06. Начните строить свой макет

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

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

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — С простым блочным сеткой у нас уже есть красивый, масштабируемый макет для как можно больше карт, сколько мы хотим включить

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

Так как мы ожидаем иметь очень большое количество и меняющихся номеров карт, это идеально подходит для наших целей. Давайте быстро установим это в сетке четырех столбца и добавьте несколько десятков карт. На данный момент мы будем беспокоиться о больших экранах, поэтому мы просто применяем .large-up-4 класс к ряд.

 & lt; Класс раздела = "Карты-контейнер" & gt;
& lt; class = "ROW Bard-Up-4" & GT;
{{#repeat 24}}
& lt; class = "колонна" & gt;
{{& gt; Основная карта}}
& lt; / div & gt;
{{/повторение}}
& lt; / div & gt;
& lt; / раздел & gt;

07. Сделай это отзывчивым

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

Давайте положим одну карту на ряд на мобильных экранах и три на ряд на планшете, добавив классы .small-Up-1 и .medium-up-3 на ряд. Если мы сделаем это, и удалите StopGap Максимальная ширина Недвижимость мы ставим _card.scss. Отказ У нас уже есть красиво отзывчивый макет, который выглядит хорошо на всех размерах экрана.

08. Попробуйте новые типы карт

Combine different styles of card to build your layout — Объедините разные стили карты для создания вашего макета

Теперь давайте диверсифицировав наш набор карт, другой тип - это чистое фото для края. Секции карты и делители карты содержат прокладку по умолчанию, но, чтобы иметь основание для края для края, мы можем просто поставить изображение прямо внутри карты. Давайте добавим это как photo-card.html. частично SRC / Partials. Отказ

 & lt; class = "карта" и GT;
& lt; img src = "http://foundation.zurb.com/assets/img/foundation-eamails/inky-all-devices.svg" / & gt;
& lt; / div & gt;

09. Представьте Flexbox.

Есть сотни возможных способов собрать карты - для некоторого вдохновения, вы можете проверить фундамент Репозиторий Cardpack Отказ Но давайте перейдем к тому, как мы управляем макетом, когда у нас есть карты разных размеров. Если вы вкладываете фотокарту, частичную в макет, перемещающийся с базовой картой, поскольку мы раньше, мы в конечном итоге в конечном итоге с незначительным опытом, потому что наши высоты отличаются. Это может быть хорошо, или мы можем захотеть настроить наш макет для компенсации.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — Пакет Card Foundation дает вам отличный набор предварительно построенных карт Flexbox, чтобы повысить вашу карту

Для этого урока мы компенсируем, используя нашу любимую новую технику макета CSS - Flexbox. Фонд поставляется с режимом Flexbox для своей сетки. Чтобы это включить, вам просто нужно открыть SRC / Активы / SCSS / APP.SCS , закомментировать @include Foundation-Grid; и @include Foundation-float-классы; и без вредных @include Foundation-Flex-Grid; и @include Foundation-Flex-классы; Отказ

10. Сделайте свои карты одинаковую высоту

С включенными классами Flexbox включены, просто наши карты будут одинаковыми. Во-первых, мы можем сделать нашими колоннами Flex родителей, добавив .flex-contacter учебный класс. Это ярлык прототипирования для добавления Дисплей: flex; недвижимость им. Как только мы сделаем это, все карты станут одной и той же высотой, но поскольку Flex дочерние элементы сокращаются по умолчанию, некоторые из наших карт получают вид узкого.

Мы можем решить эту проблему, просто рассказывая о тех элементах расти. Это делается либо нацелена с ними с CSS и дает им Flex-рост: 1; или для простоты во время прототипирования, просто добавляя класс .flex-ребенок-рост Отказ Как только все это было сделано, все наши карты заполняют колонн и будут хорошо одинаковыми.

Эта статья была первоначально представлена в Чистый журнал Выпуск 293. Купить это здесь или же Подписаться на Net здесь Отказ

Понравилось это? Попробуйте это...

10 причин, по которым вы должны использовать атомный дизайн
Создание и анимированные полигоны SVG
CSS трюки для революции ваших макетов

Создание пользовательского интерфейса на основе карты с основой

01. Настройте среду развития

02. Начните новый проект

03. Создать карту

04. Добавить компонент стили

05. Сделайте свои карты многоразовыми

06. Начните строить свой макет

07. Сделай это отзывчивым

08. Попробуйте новые типы карт

09. Представьте Flexbox.

10. Сделайте свои карты одинаковую высоту

Инструкции - Самые популярные статьи

Как использовать React Spring для анимации компонентов

Как создать цифровые картины воздуха Plein

Как сделать логотип в Photoshop

Как создать эффекты текста глюков и изображения в CSS

Создать проиллюстрированные портреты из фотографий

Включите блог с помощью API WordPress

Как перемещаться между Daz Studio и Cinema 4D

Используйте частицы, чтобы создать 3D-всплеск

Категории