Побудуйте інтерфейс на основі картки з фундаментом

Sep 16, 2025

Як

Заснований Макети веб-сайтів взяли в Інтернеті. Зроблено популярним за допомогою Pinterest, Twitter, Facebook та Google, карти стали дизайнерським малюнком для різних випадків використання.

Це не важко зрозуміти, чому. Картки працюють ідеально всередині Реактивний веб-дизайн . Як самостійні одиниці, вони можуть бути переміщені, перемішували та змішувати з різними типами вмісту. Вони також легко реагують на різні розміри екрана, від окремих стовпців на мобільних пристроях до багатостороннього стовпця на більших пристроях.

Кроки до ідеального макета веб-сайту

Команда Zurb використовувала карткові макети у своїй проектній роботі протягом багатьох років. Його основа, фундамент, завжди прагнуть оснастити веб-дизайнерів за допомогою інструментів, які їм потрібно швидко розробляти та створювати чутливі веб-сайти, включивши широкий спектр модульних та гнучких компонентів. Версія 6.3 Додана до цієї колекції будівельних блоків приносить абсолютно нову впровадження, чутливі аккордеони / вкладки та потужний новий компонент карт.

У цьому підручнику ми дізнаємося, як створити відповідний картковий інтерфейс, який користується перевагами Flexbox-Flexbox на базі Flexbox, щоб відкрити цілісну кількість можливостей.

01. Налаштуйте середовище розробки

Першим кроком є створення середовища розробки. Для цього навчального посібника ми будемо використовувати середовище розробки вузлів, тому вам потрібно встановити Node.js. Деталі для цього залежить від вашого середовища, тому перевірте тут щоб дізнатися, що робити.

Після встановлення вузла встановіть, встановіть за допомогою Cli Foundation NPM install -g foundation-cli , що дозволить легко створити новий фондовий проект.

02. Запустіть новий проект

Давайте створимо новий проект на основі шаблону Zurb. Запустити команду Фонд Новий Net-Magazine-Tutorial , виберіть "Веб-сайт (фундамент для сайтів)", "Net-Magazine-tutorial", а потім шаблон Zurb. Це створить шаблон проекту на основі фундаменту, у комплекті з системою створення та сервера розробки.

Шаблон оснащений зразком сторінки src / сторінки / index.html . Для простоти ми вилучимо цей зразок і замінюємо його порожнім & lt; заголовок & gt; & lt; / заголовок & gt; Почнемо з подряпин, який виходить на наш картонний інтерфейс. Запустити npm починається З командного рядка для запуску сервера розробки, і ви повинні побачити голі HTML-сторінку, готові до карт.

03. Створіть картку

Тепер прийшов час створити нашу першу картку. Наразі давайте просто покласти його прямо в розділі з класом .Card-контейнер . При створенні картки з використанням фундаменту є три основні класи, щоб знати: мандрівник , розтин і .card-divider . Для більш досвідчених користувачів кожен з них відповідає SCSS Mixin ( кард-контейнер , розтин і дільник ).

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

Але, для цього навчального посібника ми будемо використовувати за замовчуванням за замовчуванням для простоти. Точний мандрівник Клас - це контейнер; Кожна картка буде жити в межах мандрівник . Це визначає такі речі, як межі, тіні та забарвлення за замовчуванням.

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

 & lt; заголовок & gt;
  & lt; div class = "колонки рядків" & gt;
    & lt; h3 & gt; карти є кращими & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / заголовок & gt;
& lt; розділ Class = "Карти-контейнер" & GT;
  & lt; div class = "карта" & gt;
    & lt; div class = "card-divider" & gt;
      & lt; h4 & gt; yeti header & lt; / h4 & gt;
    & lt; / div & gt;
    & lt; div class = "card-section" & gt;
      & lt; img src = "https://foundation.zurbur.com/sites/docs/assets/img/yeti.svg" & gt; & lt; / img & gt;
    & lt; / div & gt;
    & lt; div class = "card-divider" & gt;
      & lt; p & gt; yeti нижній колонтитул & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / розділ & gt;

04. Додайте стилі компоненти

Якщо ми просто зробимо це, наша карта буде величезною, розширюється, щоб заповнити весь екран. Ми будемо справлятися з загальним розміром незабаром, але тепер давайте використовувати це як виправдання, щоб дізнатись, як додати стилі компонентів у шаблоні Zurb.

Додайте файл _card.scss до SRC / Активи / СКС / Компоненти / уточнення a Max-ширина: 300px за мандрівник і включати файл у наших основних CSS, додавши @import компоненти / картка; до SRC / Активи / SCSS / App.scss .

05. Зробіть свої картки багаторазовими

Щоб створити повторювану макет з кількома картками, ми хочемо, щоб наші картки були багаторазовими компонентами, які ми можемо переключити знову і знову. Шаблон Zurb, який ми використовуємо для цього підручника, використовує шаблону, що називається керма, що включає в себе можливість створювати часткові або багаторазові блоки коду.

Щоб перемістити нашу карту в частково, просто розрізати та вставте мандрівник Компонент, який ми вбудовані в файл SRC / частки , сказати SRC / частки / basic-card.html . Потім ви можете включити цей вміст, просто додаючи лінію {{& gt; basic-card}} у файлі індексу.

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; section class = "cards-container" & gt;
& lt; div class = "row large-up-4" & gt;
{{#Repeat 24}}
& lt; div class = "стовпець" & gt;
{{& gt; basic-card}}
& lt; / div & gt;
{{/ Repeat}}
& lt; / div & gt;
& lt; / розділ & gt;

07. Зробіть його чутливим

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

Давайте покласти одну картку в рядку на мобільних екранах, а три в ряд на планшеті, додавши класи .mall-up-1 і .medium-up-3 на ряд. Якщо ми це зробимо, і вийміть зупинку макс-ширина Майно, яку ми поклали _card.scss . У нас вже є чудово реактивний макет, який добре виглядає на всіх розмірах екрана.

08. Спробуйте нові типи карт

Combine different styles of card to build your layout — Поєднуйте різні стилі карти для створення макета

Тепер давайте диверсифікувати наш набір карт, інший тип є чистою краю до краю фотографії. Розділянки та дільники картки містять заставку за замовчуванням, але, щоб мати вміст краю до краю, ми можемо просто покласти зображення безпосередньо всередині картки. Давайте додати це як photo-card.html частковий SRC / частки .

 & lt; div class = "card" & gt;
& lt; img src = "http://foundation.zurbur.com/assets/img/foundation-emails/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 — Пакет карт фундаменту дає вам великий набір попередньо вбудованих карток Flexbox, щоб вирівнювати картку

Для цього навчального посібника ми компенсуємо, використовуючи наш улюблений новий метод макета CSS - Flexbox. Фонд поставляється з режимом Flexbox для своєї сітки. Щоб увімкнути його, вам просто потрібно відкрити SRC / Активи / SCSS / App.scss , коментар @include foundation-grid; і @Clude Foundation-Float-Classes; і розкол @include foundation-flex-grid; і @Vlude Foundation-Flex-Classes; .

10. Зробіть свої картки такою ж висотою

За допомогою класів FlexBox увімкнено, це просто отримати наші картки, щоб бути такою ж висотою. По-перше, ми можемо зробити наші стовпці Flex Parleafy, додавши .flex-контейнер клас. Це ярлик прототипів для додавання Дисплей: Flex; майно для них. Одного разу ми це зробимо, всі карти стануть такою ж висотою, але оскільки гнучкі дитячі елементи зменшуються за замовчуванням, деякі з наших карток отримують вид вузький.

Ми можемо виправити цю проблему, просто кажучи, що ті елементи зростати. Це робиться, орієнтуючись на них CSS і надаючи їм Flex-Grow: 1; або для простоти під час прототипування, просто додаючи клас .flex-дитина-росте . Як тільки все це було зроблено, всі наші картки заповнюють стовпці і буде красиво такою ж висотою.

Ця стаття була спочатку представлена чистий журнал випуск 293. Купити його тут або Підписатися на мережу тут .

Це сподобалося? Спробуйте ці ...

10 причин, чому ви повинні використовувати атомний дизайн
Створюйте та анімутні багатокутники SVG
CSS трюки до революції ваших макетів

Побудуйте інтерфейс на основі картки з фундаментом

01. Налаштуйте середовище розробки

02. Запустіть новий проект

03. Створіть картку

04. Додайте стилі компоненти

05. Зробіть свої картки багаторазовими

06. Почніть побудувати макет

07. Зробіть його чутливим

08. Спробуйте нові типи карт

09. Введіть flexbox

10. Зробіть свої картки такою ж висотою

Як - Найпопулярніші статті

Як використовувати масштабний ескіз

Основне керівництво для переходів у мистецтві

Створити спеціальну друк обробку в InDesign

Намалюйте пустотливий заєць у акварелі

Створіть просту колірну діаграму

Створіть гнучкий компонент каруселі

Оновіть текстури в дизайнері речовини

Як намалювати ландшафт з пастелями

Категорії