Sestavte si kartu UI s nadací

Sep 16, 2025
jak

Karta Rozložení webových stránek převzali web. Vyrobeno Populární Pinterest, Twitter, Facebook a Google, karty se stávají vzorem pro design pro mnoho různých případů použití.

Není těžké vidět proč. Karty fungují perfektně uvnitř Reagovat web design . Jako samostatné jednotky mohou být přesunuty, zamíchány a smíchány s různými typy obsahu. Oni také snadno reagují na různé velikosti obrazovek, od jednotlivých sloupců na mobilních zařízeních na více sloupce na větších zařízeních.

  • Kroky k dokonalému rozložení webových stránek

Tým ZURB používal layouts založené na karet v jeho konstrukčních prací po celá léta. Jeho Frontend Framework, Nadace, vždy se snažil vybavit web designéry s nástroji, které potřebují rychle navrhnout a budovat citlivé webové stránky včetně široké škály modulárních a flexibilních komponent. Verze 6.3 Přidána k této sbírce stavebních bloků přináší zcela novou implementaci off-canvas, citlivé akordeby / karty a výkonnou novou kartu.

V tomto tutoriálu se budeme učit, jak vytvořit citlivou kartu-založenou UI, která využívá Flexbox-based mřížku pro otevření celého zabil možností.

01. Nastavte vývojové prostředí

Prvním krokem je vytvořit vývojové prostředí. Pro tento tutoriál budeme používat rozvojové prostředí založené na uzlu, takže je třeba nainstalovat node.js. Podrobnosti, které to dělají, závisí na vašem prostředí, tak šek tady zjistit, co dělat.

Po instalaci uzlu instalujte nadaci CLI pomocí NPM Instalovat -G Foundation-Cli , což usnadní nastavení nového nadačního projektu.

02. Spusťte nový projekt

Vytvořme nový projekt založený na Šablonu ZURB. Spustit příkaz Nadace New Net-Magazine-tutorial , Vyberte 'webovou stránku (Foundation for Weass)', 'Net-Magazine-tutorial' a pak Zrb šablona. To zřídí šablonu projektu založenou na nadaci, kompletní s Sestavte systémový a vývojový server.

Šablona je dodávána se vzorovou stránkou SRC / STRANAGE / INDEX.HTML . Pro jednoduchost odstraníme tento vzorek a nahradit ji prázdným & lt; záhlaví & gt; & lt; / záhlaví & gt; Chcete-li začít od nuly, buduje naše karty založené na kartě. Běh NPM START. Z příkazového řádku spustit vývojový server a měli byste vidět holé HTML stránku připravené pro karty.

03. Vytvořte kartu

Nyní je čas vytvořit naši první kartu. Prozatím, pojďme ho dát přímo do sekce s třídou .cards-Container. . Při vytváření karty pomocí nadace existují tři základní třídy, které mají být vědomi: .Kartu , .card-sekce a .card-Divider. . Pro pokročilejší uživatele, každý z nich odpovídá SCSS Mixin ( karetní kontejner , Karta-sekce a karta-dělič ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class

Jednoduchá karta s nadací Yeti na IT, záhlaví a zápatí vytvořené pomocí třídy Divider Card

Ale pro tento tutoriál použijeme výchozí třídy pro jednoduchost. . \ T .Kartu třída je kontejner; Každá karta bude žít v rámci .Kartu . To definuje věci jako hranice, stíny a výchozí zbarvení.

. \ T .card-sekce Třída definuje rozšiřitelný blok obsahu, kde byste mohli dát obsah, zatímco .card-Divider. Třída definuje expandující blok, jako je zápatí, záhlaví nebo dělič. Použijte všechny tyto třídy pro vytvoření naší první základní karty. 

 Header & gt;
  & lt, divové třídy = "řádkové sloupce" & gt;
    & lt; h3 & gt; karty jsou nejlepší & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / záhlaví & gt;
& lt; třída sekce = "card-container" & gt;
  & lt; dig class = "card" & gt;
    & lt, divová třída = "karta-dělič" & gt;
      & lt; h4 & gt; záhlaví yeti & lt; / h4 & gt;
    & lt; / div & gt;
    & lt, divová třída = "karetní sekce" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & gt; & lt; / img & gt;
    & lt; / div & gt;
    & lt, divová třída = "karta-dělič" & gt;
      & lt; p & gt; yorti zápatí & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / sekce & gt;

04. Přidat styly komponent

Pokud to uděláme, naše karta bude obrovská a rozšiřuje se k vyplnění celé obrazovky. Chystáme se vypořádat s celkovým dimenzováním krátce, ale teď ho použijeme jako omluvu, abyste se naučili, jak přidat styly komponent v šabloně ZURB.

Přidat soubor. _Card.scss. na SRC / Assets / SCS / SOMSONS specifikace A. Max-šířka: 300px pro .Kartu a zahrnout soubor do našich hlavních CSS přidáním @Import komponenty / karta; na SRC / Assets / SCS / APP.SCSS .

05. Proveďte opakovaně své karty

Abychom vytvořili opakovatelné uspořádání s více kartami, cheme, aby naše karty byly opakovaně použitelné komponenty, které můžeme zapojit znovu a znovu. Šablona ZURB, kterou používáme pro tento tutoriál, používá šablonování jazyka zvaného řídítka, který zahrnuje schopnost vytvářet dílčí a opakovaně použitelné bloky kódu.

Přesunout implementaci karty do dílčího, jednoduše řezu a vložit .Kartu komponenta, kterou jsme zabudovali do souboru SRC / PARTIARS. , řekněme SRC / PARTIALS / BASIC-CARDS.HTML . Pak můžete tento obsah zahrnout jednoduchým přidáním řádku {{& gt; Základní karta}} ve vašem indexovém souboru.

06. Začněte budovat rozložení

Budeme pokrýt různé typy karet v trošce, ale nejprve pojďme použít naši opakovaně použitelnou základní kartu, abychom začali vytvářet větší, citlivý rozložení pro naše karty. Chcete-li tak učinit, použijeme koncept z nadace zvané blokové mřížky.

Nadace obsahuje několik různých typů mřížek, ale všichni začínají z konceptu řádků a sloupců. Řádek vytváří horizontální blok, který může obsahovat více vertikálních sloupců. Tyto základní stavební bloky tvoří jádro téměř všech dispozic.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include

S jednoduchou blokovou mřížkou již máme krásné, škálovatelné rozložení pro tolik karet, jak chceme zahrnout

Blokové mřížky jsou zkrácený způsob, jak vytvořit rovnoměrné sloupce a umožnit si flexibilitu a svobodu přidat neurčitou množství obsahu a dát pěkně ve stejných sloupcích. Jednoduše přidáte třídu do řádku a přidejte tolik komponent sloupců, jak chcete. Nadace je pro vás ukrmne úhledně a čistě.

Protože očekáváme, že budete mít velmi velký a měnící se počet karet, je to ideální pro naše účely. Pojďme to rychle nastavit do čtyřkolečných mřížek a přidat několik desítek karet. Prozatím se budeme starat o velké obrazovky, takže budeme jednoduše aplikovat .large-up-4 třída do řady. 

 & lt; třída sekce = "card-containeral" & gt;
& lt; dig class = "řádek rozsáhlý-up-4" & gt;
{{#repeat 24}}
& lt; dig class = "sloupec" & gt;
{{& gt; Základní karta}}
& lt; / div & gt;
{{/opakovat}}
& lt; / div & gt;
& lt; / sekce & gt;

07. Aby to reagovalo

Dále, pojďme zvážit, co se chceme stát na různých velikostech obrazovky. Nadace je dodávána s malými, středními a velkými zarážkami zabudovanými, takže můžeme jednoduše aplikovat jinou třídu blokové mřížky pro každý přerušení pro posun věci kolem.

Pojďme dát jednu kartu za řádek na mobilní obrazovkách a tři na řádku na tabletu, přidáním tříd .small-up-1 a .Medium-up-3 na řádku. Pokud to uděláme, a odstraňte stopku max-šířka nemovitost, kterou jsme dali _Card.scss. . Už máme krásně citlivé uspořádání, které vypadá dobře na všech velikosti obrazovek.

08. Vyzkoušejte některé nové typy karet

Combine different styles of card to build your layout

Kombinujte různé styly karty pro sestavení rozložení

Nyní pojďme diverzifikovat naši sadu karet, jiný typ je čistá fotografie k hraně. Sekce karet a rozdělovače karet obsahují výchozí polstrování, ale mají obsah hrany na hranu, můžeme jednoduše dát obrázek přímo uvnitř karty. Přidejme to jako Foto-card.html. částečný in. SRC / PARTIARS. . 

 & lt; divová třída = "karta" & gt;
& lt; img src = "http://foundation.zurb.com/assets/img/foundation-emails/inky-all-devices.svg" / & gt;
& lt; / div & gt;

09. Zavést FlexBox.

Existují stovky možných směrů, které můžeme dát dohromady karty - pro nějakou inspiraci, můžete zkontrolovat nadaci CardPack repository . Ale pokračujme na to, jak řídíme uspořádání, když máme různé karty. Pokud vložíte fotografickou kartu částečnou do rozvržení střídající se se základní kartou, jak jsme to udělali dříve, skončíme s trochou zubaté zkušenosti, protože naše výšky jsou jiné. To může být v pořádku, nebo budeme chtít upravit naše uspořádání kompenzovat.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game

Pack Foundation Card vám poskytuje skvělou sadu předem postavených kartových karet FlexBox na úrovni své karty

Pro tento návod, budeme kompenzovat pomocí našich oblíbených nových CSS rozvržení techniky - FlexBox. Nadace je dodáván s režimem FlexBox pro jeho mřížku. Chcete-li to povolit, prostě musíte otevřít SRC / Assets / SCS / APP.SCSS , komentovat @include nadace-mřížku; a @include foundation-float-třídy; a suspendent. @include nadace-flex-grid; a @include nadace-flex-třídy; .

10. Udělejte si karty stejné výšky

S aktivovanými třídami FlexBox je snadné, aby naše karty byly stejné výšky. Za prvé, můžeme udělat naše sloupy Flex rodiče přidáním .flex-kontejner třída. Jedná se o prototypovou zkratku pro přidání Displej: Flex; vlastnictví. Jakmile to uděláme, všechny karty se stanou stejnou výškou, ale protože Flex Dětské prvky smršťují ve výchozím nastavení, některé z našich karet získávají úzký.

Můžeme tento problém vyřešit jednoduchým vyprávět ty prvky růst. To se provádí buď zacílením s CSS a dávat jim Flex-růst: 1; nebo pro jednoduchost při prototypování, jen přidáním třídy .flex-dítě-růst . Jakmile to vše bylo provedeno všechny naše karty vyplnit sloupce a bude pěkně stejná výška.

Tento článek byl původně uváděn v Čistý časopis Vydání 293. Koupit to tady nebo Přihlásit se k odběru netto .

Líbilo se to? Vyzkoušejte tyto ...

  • 10 důvodů, proč byste měli používat atomový design
  • Vytvořit a animovat polygony SVG
  • CSS triky k revolucii rozložení

jak - Nejoblíbenější články

Jak vytvořit aplikaci s Vue.js

jak Sep 16, 2025

Ekosystém JavaScript se mění po dobu několika desetiletí, což znamená, že vývojáři předních konců museli sledovat n..

Proveďte svou aplikaci offline s pracovníky služby

jak Sep 16, 2025

Strana 1 z 2: Page 1: Rychlejší zatížení Page 1: Rychlejší zatíž..

Vytvořte 3D krajinu v 6 jednoduchých krocích

jak Sep 16, 2025

Vytvoření kusu 3D umění S přirozenou krajinou se může zdát jako výzva, ale pokud používáte správné n..

vybudovat komplexní 3D sci-fi scénu v mixéru

jak Sep 16, 2025

Vytvoření apokalyptické scény sci-fi měst 3D umění je něco, co umělci by se mohli pryč od práce kvůli ..

Vytvoření efektů zvlnění s Pixijs

jak Sep 16, 2025

Existuje spousta zajímavých efektů, které mohou být přidány na stránku, aby se zvýšila zapojení, ale je důležité vy..

4 tipy pro rozvoj vašich vývojářských dovedností

jak Sep 16, 2025

(Image Credit: Robert Pizzo) Superfriendly režisér Dan Mall bude sdílet jeho pro tipy, jak zůsta..

Jak malovat panoráma s bloky barvy

jak Sep 16, 2025

Dech beroucí výhledy, ohromující panorama a krásné městské scraky dělají skvělé fotografie, ale mohou být poněkud s..

Vyostřete své skicování dovednosti

jak Sep 16, 2025

Kreslení je jednoduchý, ale silný nástroj pro každého, kdo se zabývá výrobou digitálních výrobků. Pera, papír a tabule jsou snadno dostupné v každé kanceláři; N..

Kategorie