Construiți un UI bazat pe card cu fundație

Sep 11, 2025
să

Card bazat pe card Layout-urile site-ului au luat pe web. Foarte popular de Pinterest, Twitter, Facebook și Google, cardurile au devenit un model de proiectare pentru multe cazuri de utilizare diferite.

Nu este greu să vezi de ce. Cardurile funcționează perfect în interiorul Designul web receptiv . Ca unități autonome, ele pot fi mutate, amestecate și amestecate cu diferite tipuri de conținut. De asemenea, răspund cu ușurință pe diferite dimensiuni ale ecranului, de la coloane singulare pe dispozitive mobile la multi-coloană pe dispozitive mai mari.

  • Pași la aspectul perfect al site-ului web

Echipa Zurb a folosit layout-urile bazate pe card în munca sa de proiectare de ani de zile. Cadrul său Frontend, Fundația, a căutat întotdeauna să echipeze designeri web cu instrumentele de care au nevoie pentru a proiecta rapid și de a construi site-uri web receptive prin includerea unei game largi de componente modulare și flexibile. Versiunea 6.3 adăugată la această colecție de blocuri de construcție aduce o nouă implementare în afara canampasului, acordeoniile responsabile / tab-uri și o nouă componentă de carduri puternice.

În acest tutorial vom învăța cum să creați o UI bazată pe carduri receptive, care profită de rețeaua bazată pe Fundația Foundation pentru a deschide o mulțime de posibilități.

01. Creați un mediu de dezvoltare

Primul pas este de a crea un mediu de dezvoltare. Pentru acest tutorial, vom folosi un mediu de dezvoltare bazat pe noduri, deci trebuie să instalați NODE.JS. Detaliile pentru a face acest lucru depind de mediul dvs., deci verificați Aici pentru a afla ce să facă.

Odată ce ați instalat nod, instalați Fundația CLI utilizând NPM Install-Foundation -G-CLI , ceea ce va facilita înființarea unui nou proiect de fundație.

02. Începeți un nou proiect

Să creăm un nou proiect bazat pe șablonul Zurb. Rulați comanda Fundația New Net-Magazine-Tutorial , selectați "un site web (fundație pentru site-uri)," Net-Magazine-Tutorial "și apoi Zurb Format. Acest lucru va configura un șablon de proiect bazat pe fundație, complet cu sistemul de construcție și server de dezvoltare.

Șablonul vine cu o pagină de probă în src / pagini / index.html . Pentru simplitate, vom elimina această probă și o vom înlocui cu o goală & lt; header & gt; & lt; / header & gt; Pentru a începe de la zero construirea de către UI pe bază de carduri. Alerga NPM Start. De la linia de comandă pentru a rula serverul de dezvoltare și ar trebui să vedeți o pagină HTML goală pregătită pentru carduri.

03. Creați un card

Acum este timpul să creați prima noastră carte. Deocamdată, să o punem direct în interiorul unei secțiuni cu clasa .Card-container . La crearea unei cartele folosind fundația, există trei clase de bază pentru a fi conștienți de: .card , .Card-secțiune și .Card-divizor . Pentru utilizatorii mai avansați, fiecare dintre acestea corespunde unui mixin SCS ( Card-container. , Card-secțiune și Card-divider ).

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

O cartelă simplă cu Fundația Yeti pe ea, antetul și subsolul creat folosind clasa de separare a cardului

Dar, pentru acest tutorial vom folosi clasele implicite pentru simplitate. .card clasa este containerul; Fiecare carte va trăi în cadrul unui a .card . Aceasta definește lucruri precum granițele, umbrele și colorarea implicită.

.Card-secțiune Clasa definește un bloc de conținut extensibil, unde ați putea pune conținut, în timp ce .Card-divizor Clasa definește un bloc care nu se extinde, cum ar fi un subsol, antet sau divizor. Să folosim toate aceste clase pentru a crea prima noastră carte de bază. 

 & header & gt;
  & lt; div clasa = "coloane rând" & gt;
    & h3 & gt; cărțile sunt cele mai bune & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / header & gt;
& lt; secțiunea Clasa = "Cards-container" & GT;
  & lt; div clasa = "card" & gt;
    & Lt; Div Clasa = "Card-divider" & GT;
      "H4 & GT; Yeti Header & Lt; / H4 & GT;
    & lt; / div & gt;
    & lt; div clasa = "secțiunea card" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & Lt; / IMG & GT;
    & lt; / div & gt;
    & Lt; Div Clasa = "Card-divider" & GT;
      & lt; p & gt; Yeti Footer & Lt; / P & Gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / secțiune & gt;

04. Adăugați stiluri de componente

Dacă facem acest lucru, cardul nostru va fi imens, extins pentru a umple întregul ecran. O să ne ocupăm de dimensionarea globală, dar pentru moment, să folosim acest lucru ca o scuză pentru a învăța cum să adăugăm stiluri de componente în șablonul Zurb.

Adăugați un fișier _card.scrs. la SRC / Active / SCSS / Componente / Specificarea A. Max-lățime: 300px pentru .card și includeți fișierul din CSS principal prin adăugarea componente / carduri @import; la SRC / Active / SCSS / App.scs .

05. Faceți-vă cardurile reutilizabile

Pentru a crea un aspect repetabil cu mai multe carduri, vom dori ca cardurile noastre să fie componente reutilizabile pe care le putem conecta din nou și din nou. Șablonul Zurb pe care îl folosim pentru acest tutorial utilizează un limbaj de templare numit ghidon, care include abilitatea de a crea parțiale sau blocuri reutilizabile de cod.

Pentru a deplasa implementarea cartelei într-un parțial, pur și simplu tăiați și lipiți .card Componenta am construit într-un fișier în SRC / partials. , Spune SRC / Partials / Basic-Card.html . Apoi puteți include acest conținut prin adăugarea pur și simplu a liniei {{& gt; Card de bază}} În fișierul index.

06. Începeți să vă construiți aspectul

Vom acoperi diferite tipuri de carduri într-un pic, dar mai întâi să folosim cardul nostru de bază reutilizabil pentru a începe să creați un aspect mai mare și receptiv pentru cardurile noastre. Pentru a face acest lucru, vom folosi un concept de la fundație numit grila bloc.

Fundația conține câteva tipuri diferite de grilă, dar toate încep de la conceptul de rânduri și coloane. Un rând creează un bloc orizontal care poate conține mai multe coloane verticale. Aceste blocuri de bază constituie nucleul aproape tuturor layout-urilor.

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

Cu o rețea de bloc simplă, avem deja un aspect frumos și scalabil pentru cât mai multe cărți pe care vrem să le includem

Blocurile de blocare sunt un mod de scurt timp de a crea coloane de dimensiuni egale și pentru a vă permite flexibilitatea și libertatea de a adăuga o cantitate nedeterminată de conținut și de a fi frumos în coloane egale. Pur și simplu adăugați o clasă la rând și apoi adăugați cât mai multe componente ale coloanei pe care le doriți. Fundația le va pune pentru tine îngrijorător și curat.

De când ne așteptăm să avem un număr foarte mare și schimbat de cărți, acest lucru este ideal pentru scopurile noastre. Să punem rapid acest lucru într-o rețea cu patru coloane și adăugați câteva cărți de duzină. Deocamdată, ne vom îngriji doar de ecrane mari, așa că vom aplica pur și simplu .Rarge-up-4 clasa la rând. 

 & lt; secțiunea Class = "Cards-container" & GT;
& lt; div clasa = "rând mare-up-4" & gt;
{{#repeat 24}}
& lt; div clasa = "coloană" & gt;
{{& gt; Card de bază}}
& lt; / div & gt;
{{/repeta}}
& lt; / div & gt;
& lt; / secțiune & gt;

07. Faceți-o receptivă

Apoi, să luăm în considerare ceea ce vrem să se întâmple pe diferite dimensiuni ale ecranului. Fundația vine cu puncte de întrerupere mici, medii și mari, astfel încât să putem aplica pur și simplu o altă clasă de blocare a blocului pentru fiecare punct de întrerupere pentru a schimba lucrurile în jur.

Să punem un singur card pe rând pe ecrane mobile și trei pe rând pe tabletă, adăugând clasele .ball-up-1 și .mediu-up-3 pe rând. Dacă facem acest lucru și scoatem stopgapul lățimea maximă proprietate pe care am pus-o _card.scrs. . Avem deja un aspect frumos receptiv care arată bine pe toate dimensiunile ecranului.

08. Încercați câteva tipuri de carduri noi

Combine different styles of card to build your layout

Combinați diferite stiluri de card pentru a vă construi aspectul

Acum, să ne diversificăm setul de cărți, un alt tip este o fotografie pură de la margine. Secțiunile de carduri și separatoarele de carduri conțin umplutură în mod implicit, dar pentru a avea conținut de margine, putem pur și simplu imaginea direct în interiorul cardului. Să adăugăm acest lucru ca a Photo-card.html. parțial în SRC / partials. . 

 și lt; div clasa = "card" & gt;
& lt; img src = "http://foundation.zurb.com/assets/img/foundation-emails/inky-all-devices.svg" / & gt;
& lt; / div & gt;

09. Introduceți FlexBox

Există sute de moduri posibile pe care le putem pune împreună cărți - pentru o anumită inspirație, puteți verifica fundația Cardpack Repository. . Dar să trecem la modul în care gestionăm aspectul când avem cărți de dimensiuni diferite. Dacă introduceți parțial cardul foto în aspectul alternativ cu cardul de bază așa cum am făcut înainte, ajungem la un pic de experiență jagged, deoarece înălțimile noastre sunt diferite. Acest lucru poate fi bine, sau putem dori să ne ajustăm aspectul pentru a compensa.

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

Pachetul de card Foundation vă oferă un set excelent de carduri flexibile pre-construite pentru a vă ridica jocul pe card

Pentru acest tutorial, vom compensa utilizând noua noastră tehnică de layout CSS preferată - Flexbox. Fundația vine cu un mod Flexbox pentru grila sa. Pentru ao activa, pur și simplu trebuie să deschideți SRC / Active / SCSS / App.scs , comentează @ Fundația @include; și @ Fundație-Foundation-Food-clase; și de nerespectare @ Fundația @include-flex-grilă; și @ Foundation-Foundation-Flex-clase; .

10. Faceți cărțile la aceeași înălțime

Cu clasele Flexbox sunt activate, este simplu să obțineți cărțile noastre să aibă aceeași înălțime. În primul rând, putem face coloanele noastre Flex părinții prin adăugarea .flex-container. clasă. Aceasta este o comandă rapidă de prototipare pentru adăugarea Afișaj: Flex; proprietate pentru ei. Odată ce facem acest lucru, toate cărțile vor deveni aceeași înălțime, dar din moment ce elementele flexibile ale copilului se micșorează în mod implicit, unele dintre cărțile noastre sunt un fel îngust.

Putem rezolva această problemă prin simpla elemente pentru a crește. Acest lucru se face fie prin direcționarea lor cu CSS și oferindu-le Flex-cresc: 1; sau pentru simplitate în timp ce prototipul, doar prin adăugarea clasei .flex-copil-cresc . Odată ce toate acestea s-au făcut toate cărțile noastre umple coloanele și va fi frumos aceeași înălțime.

Acest articol a fost inițial prezentat în revista netă Problema 293. Cumpărați-l aici sau Abonați-vă la net aici .

I-a plăcut asta? Incearca astea...

  • 10 motive pentru care ar trebui să utilizați designul atomic
  • Creați și animați poligoane SVG
  • CSS Trucuri pentru a vă revoluționa layout-urile

să - Cele mai populare articole

Setări de confidențialitate Facebook: Cum să păstrați profilul dvs. privat

să Sep 11, 2025

(Credit Imagine: Alex Blake / Facebook) Setările de confidențialitate Facebook pot părea un pic de paradox. Facebo..

Începeți cu Express.js

să Sep 11, 2025

Crearea aplicațiilor orientate spre browser cu NODE.JS devine plictisitoare. Express.js. este A. Cadrul J..

Cum să schițezi rapid mâinile

să Sep 11, 2025

Pentru a desena mâinile, trebuie să vă uitați trecând complexitatea anatomiei mâinii și să recunoașteți regulile simple..

Creați seturi de pictograme de produs în Illustrator

să Sep 11, 2025

Faceți clic pe pictograma din dreapta sus pentru a mări pictogramele Icoanele ilustrat..

Iluminează lucrul 3D cu lumini de cupolă

să Sep 11, 2025

Utilizarea luminilor Dome a fost una dintre cele mai mari progrese în crearea CGI în ultimul deceniu. Baie o scenă din fiecare..

vopsea o peisaj energetic în uleiuri

să Sep 11, 2025

Materialele Sarah vopsele ..

Plante în Houdini

să Sep 11, 2025

Punctul puternic al lui Houdini a fost întotdeauna natura sa procedurală. Cu câteva noduri și un mic set de expresii, puteți..

Faceți un logo în Illustrator

să Sep 11, 2025

În această săptămână a văzut lansarea unor videoclipuri noi pe Adobe, face acum playlist, o colecție de clipuri despre cum să creați proiecte de design cu aplicații creative cloud ..

Categorii