Zbuduj interfejs użytkownika z fundamentem

Sep 16, 2025

Jak

Oparte na karcie Układy stron internetowych. przejęli sieć. Popularne przez Pinterest, Twitter, Facebook i Google, karty stały się wzorem projektowania dla wielu różnych przypadków użycia.

Nie trudno to zobaczyć dlaczego. Karty działają idealnie Responsive Web Design. . Jako samodzielne jednostki można je przesuwać, tasować i zmieszać z różnymi typami treści. Łatwo odpowiadają również na różne rozmiary ekranu, z pojedynczych kolumn na urządzeniach mobilnych do wielokolumny na większych urządzeniach.

Kroki do idealnego układu strony internetowej

Zespół Zurb używał układów opartych na kartach w pracy na lata. Jego rama Frontend, Fundacja, zawsze starała się wyposażyć projektantów stron internetowych za pomocą narzędzi, które muszą szybko zaprojektować i budować responsywne strony internetowe, w tym szeroką gamę składników modułowych i elastycznych. Wersja 6.3 Dodano do tej kolekcji bloków budowlanych przynosi zupełnie nowy implementację off-Canvas, reagując na akordeony oraz potężny nowy komponent karty.

W tym samouczku będziemy uczyć się tworzenia responsywnego interfejsu użytkownika, który korzysta z siatki opartej na Fundacji, aby otworzyć całą obrót możliwości.

01. Ustaw środowisko rozwoju

Pierwszym krokiem jest utworzenie środowiska programistycznego. W tym samouczku będziemy korzystać z środowiska programistycznego opartego na węźle, więc musisz zainstalować węzeł. Szczegóły dotyczące tego zależą od twojego środowiska, więc sprawdzić tutaj dowiedzieć się, co robić.

Po zainstalowaniu węzła zainstaluj fundament CLI za pomocą NPM Install -g Foundation-CLI , co ułatwi to skonfigurowanie nowego projektu fundamentowego.

02. Rozpocznij nowy projekt

Utwórzmy nowy projekt oparty na szablonie ZBUK. Uruchom polecenie Fundacja New Net-Magazine-Tutorial , wybierz "Strona internetowa (fundament dla witryn)", "Net-Magazine-Tutorial", a następnie szablon zurburski. Spowoduje to utworzenie szablonu projektu na podstawie Fundacji, w komplecie z System Budowy i Serwer Rozwoju.

Szablon jest wyposażony w przykładową stronę SRC / strony / index.html . Dla prostoty usuniemy tę próbkę i zastąpimy pustą & LT; Header & GT; & LT; / Header & GT; Zacząć od zarysowania UII naszego użytkownika. Biegać NPM Start. Z wiersza poleceń, aby uruchomić serwer rozwoju i powinieneś zobaczyć stronę GOE HTML gotowy do kart.

03. Utwórz kartę

Teraz nadszedł czas, aby utworzyć naszą pierwszą kartę. Na razie po prostu umieśćmy prosto w sekcji z klasą .Cards-Container. . Tworząc kartę za pomocą fundamentu, istnieją trzy podstawowe klasy, które należy pamiętać: .karta , . Karda i .Card-Divider. . Dla bardziej zaawansowanych użytkowników każdy z nich odpowiada miksinowi SCSS ( kontener kart , sekcja karty i karta-rozdzielacz ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — Prosta karta z Fundacją Yeti na nim, nagłówek i stopce utworzone za pomocą klasy dzielnicy karty

Ale dla tego samouczka użyjemy domyślnych klas dla prostoty. The. .karta klasa jest pojemnikiem; każda karta będzie żyła w ramach .karta . Określa to takie rzeczy jak granice, cienie i domyślnie kolorowanie.

The. . Karda klasa definiuje rozszerzalny blok treści, w którym można umieścić zawartość, podczas gdy .Card-Divider. Klasa definiuje nie rozwijający się blok, taki jak stopka, nagłówek lub dzielnik. Wykorzystajmy wszystkie te klasy, aby utworzyć naszą pierwszą, podstawową kartę.

 Header & GT;
  & lt; div class = "kolumny wiersza" & gt;
    & lt; H3 & GT; Karty są najlepsze

04. Dodaj style komponentów

Jeśli po prostu to zrobimy, nasza karta będzie ogromna, rozbudowa, aby wypełnić cały ekran. Wkrótce zajmiemy się ogólną wielkością, ale na razie użyj tego jako pretekstu, aby dowiedzieć się, jak dodawać style składowe w szablonie ZQUQUQUE.

Dodaj plik. _card.scss. do SRC / Assets / SCSS / Elementy / Określanie A. Max-szerokość: 300px dla .karta i dołącz plik w naszych głównych CSS, dodając @import Components / Card; do SRC / Assets / SCSS / App.SCSS .

05. Sprawdź swoje karty wielokrotnego użytku

Aby stworzyć powtarzalny układ z wieloma kartami, chcemy, aby nasze karty były komponentami wielokrotnego użytku, które możemy ponownie podłączyć. Szablon Zurb, którego używamy do tego samouczku wykorzystuje język szablonujący o nazwie kierownicy, która obejmuje zdolność do tworzenia częściowych lub wielokrotnego użytku bloków kodu.

Aby przenieść wdrożenie naszej karty do częściowego, po prostu wyciąć i wkleić .karta komponent wbudowaliśmy w plik SRC / Częściowe , mówić src / częściowe / podstawowe-card.html . Następnie możesz dołączyć tę zawartość, po prostu dodając linię {{& gt; podstawowa karta}} W pliku indeksu.

06. Zacznij budować swój układ

Zaprojektujemy kilka typów kart, ale najpierw użyjmy naszej podstawowej karty wielokrotnego użytku, aby rozpocząć tworzenie większego, responsywnego układu dla naszych kart. Aby to zrobić, będziemy korzystać z koncepcji z Fundacji zwanej siatką blokową.

Fundacja zawiera kilka różnych rodzajów siatek, ale wszystkie zaczynają się od koncepcji rzędów i kolumn. Wiersz tworzy poziomy blok, który może zawierać wiele pionowych kolumn. Te podstawowe bloki budowlane stanowią rdzeń prawie wszystkich układów.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — Z prostą siatką blokową, mamy już piękny, skalowalny układ dla wielu kart, ile chcemy włączyć

Siatki blokowe są shorthand sposobem tworzenia równomiernych kolumn i umożliwiają sobie elastyczność i swobodę dodania nieokreślonej ilości treści i umieścić ładnie w równych kolumnach. Po prostu dodaj klasę do wiersza, a następnie dodaj tyle elementów kolumn, ile chcesz. Fundacja ustanawi je starannie i czysto.

Ponieważ spodziewamy się mieć bardzo dużą i zmieniającą się liczbą kart, jest to idealne rozwiązanie dla naszych celów. Szybko ustawmy szybko w siatce czterokolumnowej i dodaj kilka kilkudziesięciu kart. Na razie będziemy się martwić tylko o duże ekrany, więc po prostu zastosujemy .large-up-4 klasa do rzędu.

 Class Class = "Card-Container" & GT;
& lt; div class = "wiersz Duży-4" & GT;
{{#repeat 24}}
& lt; div class = "kolumna" & gt;
{{& gt; podstawowa karta}}
& lt; / div & gt;
{{/powtarzać}}
& lt; / div & gt;
& lt; / sekcja

07. Utwórz to

Następnie rozważmy, co chcemy się wydarzyć na różnych rozmiarach ekranów. Fundacja jest wbudowana z małymi, średnimi i dużymi punktami przerwami wbudowanymi, więc możemy po prostu stosować inną klasę bloków blokowych dla każdego punktu przerwania, aby przesunąć rzeczy wokół.

Umieśćmy jedną kartę na wiersz na ekranach mobilnych, a trzy na wiersz na tablecie, dodając klasy .small-up-1 i .medium-up-3 na rzędzie. Jeśli to zrobimy i usuniemy stopgap Max-szerokość. Nieruchomość _card.scss. . Mamy już pięknie reagujący układ, który wygląda dobrze na wszystkich rozmiarach ekranów.

08. Wypróbuj nowe typy kart

Combine different styles of card to build your layout — Połącz różne style karty, aby zbudować swój układ

Teraz dywersyfikujmy nasz zestaw kart, inny typ to zdjęcie czystej krawędzi do krawędzi. Sekcje kart i dzielnicy kart zawierają domyślnie wyściółki, ale do zawartości krawędzi do krawędzi możemy po prostu umieścić obraz bezpośrednio wewnątrz karty. Dodajmy to jako photo-card.html. częściowy SRC / Częściowe .

09. Przedstaw Flexbox.

Istnieją setki możliwych sposobów, jakie możemy połączyć karty - dla pewnej inspiracji, możesz sprawdzić fundament Repozytorium CardPack. . Ale przejdźmy do tego, jak zarządzamy układem, gdy mamy różne karty. Jeśli włożysz częściową kartę fotograficzną do układu na przemian z podstawową kartą, jak wcześniej, skończymy z odrobiną postrzępionego doświadczenia, ponieważ nasze wysokości są różne. Może to być dobrze lub możemy dostosować nasz układ, aby zrekompensować.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — Pakiet kart podmiotowych zapewnia świetny zestaw wstępnie zbudowanych kart Flexbox do wyrównywania swojej gry karty

W tym samouczku zrekompensujemy korzystanie z naszej ulubionej techniki układu CSS - Flexbox. Fundacja zawiera tryb flexbox dla swojej siatki. Aby go włączyć, wystarczy się otworzyć SRC / Assets / SCSS / App.SCSS , skomentować @inClude Foundation-Siatka; i @inClude Foundation-Float-Classes; i pozbawienie @include Foundation-Flex-Grid; i @inClude Foundation-Flex-Classes; .

10. Zrób twoje karty tej samej wysokości

Dzięki włączonym klasom Flexbox jest proste, aby nasze karty były taką samą wysokość. Po pierwsze, możemy sprawić, że nasze kolumny wygina rodziców, dodając .Flex-kontener. klasa. Jest to prototypowy skrót do dodawania Wyświetlacz: Flex; nieruchomość dla nich. Kiedy to zrobimy, wszystkie karty staną się taką samą wysokością, ale odkąd flex Child Elements stał się domyślnie, niektóre z naszych kart otrzymują wąskie.

Możemy rozwiązać ten problem, mówiąc po prostu opowiadającym tym elementom. Odbywa się to poprzez kierowanie ich z CSS i dając im Flex-Grow: 1; lub dla prostoty podczas prototypowania, tylko dodając klasę .Flex-dziecko-rosną . Po wykonaniu wszystkich naszych kart wypełnij kolumny i będzie ładnie taką samą wysokość.

Ten artykuł był pierwotnie w magazyn netto. wydać 293. Kupuj tutaj lub Subskrybuj netto tutaj .

Lubiłem to? Spróbuj tych...

10 powodów, dla których powinieneś użyć projektu atomowego
Tworzyć i animować wielokątów SVG
CSS Tricks, aby zrewolucjonizować swoje układy

Zbuduj interfejs użytkownika z fundamentem

01. Ustaw środowisko rozwoju

02. Rozpocznij nowy projekt

03. Utwórz kartę

04. Dodaj style komponentów

05. Sprawdź swoje karty wielokrotnego użytku

06. Zacznij budować swój układ

07. Utwórz to

08. Wypróbuj nowe typy kart

09. Przedstaw Flexbox.

10. Zrób twoje karty tej samej wysokości

Jak - Najpopularniejsze artykuły

Użyj Adobe XD, aby utworzyć mikro interakcje

Utwórz starego efektu anaglifów

10 Niesamowite rzeczy, które możesz zrobić z warstwami

Użyj WordPress jako bezgłowego CMS

Farba falująca wodę w olejach

Utwórz efekty marszczenia Pixijs

Jak narysować nos

Boost D3.js wykresy z gradientami SVG

Kategorie