Tailwind CSS: Struktura elementu Header
od Podstaw
3 godz. 55 min · HTML i CSS · Full-stack i Programowanie
Daniel NoworytaFull stack DeveloperCzego się nauczysz
- Zrozumienie podstawowych koncepcji i zalet frameworka TailwindCSS.
- Instalacja i konfiguracji frameworka TailwindCSS.
- Tworzenie stylów strony internetowej przy użyciu gotowych klas CSS.
- Stylowanie strony internetowej w sposób responsywny, tak aby dostosowywała się do różnych rozmiarów ekranów.
- Stylowanie strony internetowej w sposób dedykowany dla wyświetlania na dużych ekranach.
- Zastosowanie różnych technik stylowania, takich jak tworzenie układów za pomocą display flex i display grid.
- Zbudowanie atrakcyjnej strony internetowej, korzystając z frameworka TailwindCSS.
- Optymalizacja pracy i przyspieszenia procesu projektowania interfejsów użytkownika dzięki wykorzystaniu gotowych klas CSS oferowanych przez framework TailwindCSS.
Pierwszy rzut oka na TailwindCSS
W tej sekcji zapoznasz się z frameworkiem TailwindCSS i poznasz podstawowe pojęcia związane z systemem klas. Dowiesz się, czym jest TailwindCSS, jakie problemy rozwiązuje i jakie zalety posiada. Będziesz miał okazję zobaczyć, jak wyglądają gotowe klasy CSS, które oferuje TailwindCSS i jak można je wykorzystać w projektach.
Projekt The Eduweb Times
Ta sekcja zawiera praktyczne zadanie polegające na zbudowaniu strony internetowej projektu The Eduweb Times na urządzenia mobilne. Będziesz mieć okazję zastosować swoje nowo zdobyte umiejętności w praktyce, tworząc atrakcyjną i funkcjonalną stronę internetową.
The Eduweb Times i responsywność
Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób responsywny, czyli tak, aby strona dobrze wyglądała na różnych urządzeniach. Zaczniemy od stylowania na Tablety. Nauczysz się, jak tworzyć style, które dostosowują się do rozmiaru ekranu, na którym jest wyświetlana strona.
The Eduweb Times i duże ekrany
Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób dedykowany dla wyświetlania na dużych ekranach, takich jak monitory desktopowe. Nauczysz się, jak wykorzystać różne techniki stylowania, aby stworzyć atrakcyjny i funkcjonalny wygląd strony na większych ekranach.
Dla kogo jest ten kurs?
Ten kurs wprowadzający do frameworka TailwindCSS jest przeznaczony dla programistów i web developerów, którzy mają już podstawową wiedzę i umiejętności z zakresu HTMLa i CSSa, ale chcą nauczyć się używać jednego z najnowocześniejszych narzędzi do stylowania stron internetowych.
I przejdźmy sobie do budowania już naszej aplikacji.
Ja może, żeby to było lepiej widać
odpalimy sobie od razu narzędzie developerskie na inspect i włączymy sobie
urządzenia mobilne o szerokości 414 pikseli.
Z tego względu, że
powiększymy to na 200%, z tego względu, że design, który dostaliśmy tutaj
też jest wzorowany na 414 pikseli na urządzeniu na szerokość 414 pikseli.
Dzięki temu będziemy mogli dokładnie sobie
odwzorować te wszystkie odległości, które tutaj mamy.
Wróćmy teraz do naszego pliku.
Mamy powiększenie na 200%, tu sobie też powiększymy na 200%,
żebyśmy mogli dokładniej jakby porównywać sobie te dwa widoki.
No i zaczniemy sobie od implementowania
tego pierwszego elementu, który mamy, czyli headera, potrzebujemy header
i w headerze będziemy potrzebowali dwie ikonki i napis na środku.
To może być H1, bo jest to tytuł naszej strony The Eduweb Times.
Jeżeli chodzi o te ikonki, czyli hamburger i ta lupa skorzystamy sobie z Heroicons.
Jest to dosyć znana biblioteka ikonek,
generalnie stworzona przez twórców Tailwind CSS i szeroko wykorzystywane również
w Tailwind Ui. Poszukamy sobie hamburger,
to jest ta ikona tutaj kopiuj svg,
wkleimy sobie w to miejsce jako pierwszy element w tym headerze.
No i jeszcze będziemy potrzebować na pewno
ikonki szukania, czyli search, magnifying glass i możemy sobie to wkleić.
Równie dobrze może sobie korzystać z tych ikonek za pomocą jsX
w projekcie np. reactowym. Mamy już te trzy elementy.
Możemy sobie zamknąć te ikony, przejdziemy do naszej strony.
No i mamy wszystkie trzy elementy.
Natomiast tak jak widzisz nie jest to ustawione tak jak powinno być.
Także zajmijmy się teraz tym wrapperem, żeby te elementy odpowiednio sobie tutaj poustawiać.
Przejdźmy sobie do tego headera.
Zamkniemy sobie wszystko i skupimy się
tylko i wyłącznie na tym elemencie, na tym wrapperze, żeby go odpowiednio ostylować.
Zróbmy sobie class.
No i tak potrzebujemy Flex.
Jak widzisz tutaj rozszerzenie Tailwind IntelliSense.
Bardzo fajnie pokazuje nam klasy, które mamy dostępne w tym momencie.
I dodatkowo, co jeszcze ciekawe, jak
widzisz po prawej stronie od razu widzisz jaki jest CSS będzie aplikowany.
Jeżeli sobie aplikuje klasę flex mamy display flex jako aplikowany.
Tak że tu po najechaniu myszką można sobie zobaczyć dokładnie jaki CSS
będzie aplikowany jeżeli sobie wybiorę tę klasę.
My sobie wybierzemy tę klasę, zapiszemy,
już w tym momencie wszystkie elementy powinny się ustawić koło siebie.
Co jeszcze potrzebujemy?
To na pewno Items-Center, żeby je wyśrodkować.
Możesz sobie łatwo podejrzeć też najeżdżając myszką w Twoim edytorze kodu.
Masz tutaj taką podpowiedź.
Po zainstalowaniu właśnie tego rozszerzenia jeszcze raz Ci je pokażę.
Jest to bardzo fajne rozszerzenie, które przyda się w tym kursie.
Dokładnie to, Tailwind CSS IntelliSense.
Polecam Ci jeżeli jeszcze tego nie masz
po wstępie zainstaluj sobie to teraz.
Zapiszemy sobie nasz plik.
Mamy Items Center, czyli wyśrodkowaliśmy sobie te wszystkie elementy w pionie.
Natomiast jeszcze potrzebujemy
justify-between, żeby elementy ustawiały się jakby z przerwą między sobą.
Jak widzisz na razie nie mamy żadnych padding'ów.
Zaraz się tym zajmiemy.
Natomiast na chwilę obecną zmieńmy jeszcze sobie tło tego headera, bo
tak jak zobaczymy sobie tutaj w designie tło ma jakąś wartość.
Jest to wartość dokładnie 27272A.
I jest to jeden z kolorów, z palety kolorów Tailwind'a, który dostajemy tutaj.
Głównie design opieramy
na kolorze zinc jest ten kolor, który jest tłem naszego headera to jest zinc-800.
Czyli w tym momencie możemy zrobić czyli bg-zinc-800, no i poszukamy wartości 800,
to jest właśnie ten kolor, o który nam chodzi tutaj.
Zapiszemy.
Wróćmy do naszego pliku.
No i już jak widzisz zmieniłem,
zmieniło nam się tło.
Teraz jako że nie widać tego tekstu, powinno być wszystko białe.
Jeszcze sprawdzimy, czy to jest rzeczywiście białe w naszym designie.
Wróćmy sobie tutaj. Zobaczmy sobie, co tutaj designer miał na myśli.
I tutaj mamy wartość koloru, FAFAFA.
To też jest zinc.
Natomiast to jest zinc-50.
Czyli możemy sobie zrobić tutaj kolor
zinc-50 i zapiszemy tę wartość, przejdziemy do naszej strony.
No i już mamy kolor taki, jaki chcieliśmy.
To jest nasz tekst fajnie od jakby, oddzielony od tła.
I jeszcze ciekawa rzecz, którą mogę Ci pokazać.
Zobacz jak łatwo debugować sobie klasy. Już to pewnie wiesz
po wstępie, natomiast jeszcze przypominam jeżeli nie wiesz jaka klasa za co
odpowiada, to tutaj mamy wszystko, bg-zinc-800 odpowiada za nadanie właśnie
background color to jest CSS, który jest aplikowany temu elementowi.
I tak togglując sobie te poszczególne
klasy możesz sobie sprawdzać co na co i jak wpływa.
Dobrze mamy, tutaj,
oczywiście wszystkie te spacingi nie
działają, czyli odstępy nie działają tak jak byśmy chcieli.
Zobaczmy sobie jak to jest w naszym designie.
Przejdźmy do tego widoku mobilnego.
I tutaj mamy 16 pikseli, tak, width 16.
Czyli potrzebujemy na pewno padding na osi X wielkości 16 pikseli.
Poszukajmy sobie tej wartości to jest dokładnie px4, 4x4=16.
O tym wspominaliśmy już we wstępie do tego kursu.
I wracając do naszej strony.
Mamy już padding po lewej, po prawej stronie na 16,
Jeszcze potrzebujemy górę, dół.
Jak to wygląda u nas?
Zobaczmy. Z góry mamy odległość tu to jest 21,
co prawda, zobaczmy jak to wygląda z tekstem.
Z tego co tutaj wygląda to jest 20 pikseli. Py,
I poszukajmy 20 pikseli.
Mamy py 5, to jest 20 pikseli.
Zapiszemy sobie tę wartość i
już mamy nasz header generalnie zrobiony tak, jak powinien być.
Natomiast sprawdzimy sobie jego wysokość, czy rzeczywiście jest tak jak chcieliśmy.
24 + 20 + 20, czyli 64.
W sumie sprawdźmy sobie jak to wygląda teraz w naszym designie.
Ile wynosi wysokość tego obramowania dla naszego headera?
Wysokość to jest 56.
Czyli tutaj zamiast py możemy nadać wysokość tego elementu na 56 pikseli.
Zobaczmy czy mamy taką wartość.
Jest wartość Tailwinda h14, odpowiada 56 pikselom w naszym przypadku.
Czyli zapisujemy sobie ten element i już
nasz header powinien mieć wysokość 56 pikseli.
Sprawdźmy sobie, czy rzeczywiście jest tak, jak mówimy.
Jest 56 z góry, z dołu nie ma nic.
Tak że już dokładnie odzworowaliśmy sobie design, który jest tutaj.
Natomiast jest jedna rzecz, która na pewno rzuca się w oczy i jest to ten font,
który generalnie wygląda zupełnie inaczej niż w naszym projekcie.
Dlatego teraz przejdziemy do
inicjalizowania naszego customowego fontu w projekcie i pokażę Ci, w jaki sposób
możesz rozszerzać fonty w swoim projekcie przy użyciu właśnie frameworka Tailwind CSS.