Tailwind CSS: Widok na tablety i pierwsze cztery sekcje
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.
Dobrze, to to jest stan, który mieliśmy po ostatniej lekcji.
Jeżeli podążałeś/podążałaś ze mną w
tym kursie, to powinnaś/powinieneś mieć właśnie to na swoim ekranie.
Tutaj mamy zaimplementowany widok mobilny, mamy nasze poszczególne sekcje.
I teraz spójrzmy na nasz design i widzimy, że ta pierwsza sekcja, druga,
trzecia i czwarta, które są tutaj pod sobą, będą razem we wspólnym gridzie.
Czyli możemy sobie już od razu, teraz, założyć, że zgrupujemy sobie to wszystko
w jednego grida, którym później będziemy mogli dosyć łatwo sterować.
I sekcja z opiniami to jest ta tutaj numer 4.
Mamy opinie, czyli możemy sobie to tutaj zminimalizować.
Co znaczy, że te pierwsze cztery sekcje zgrupujemy sobie w jednego diva, dzięki
czemu będziemy mogli sobie sterować rozmieszczeniem tych elementów
na naszym ekranie w zależności od widoku, w którym się będziemy znajdywać.
I teraz zacznijmy od widoku na tablety.
I tak jak wspominałem, klasy
responsywne w Tailwindzie nadajemy poprzez używanie odpowiednich właśnie tutaj
przedrostków i przedrostek md oznacza ni mniej ni więcej, że po prostu targetujemy
tutaj ekrany większe niż 768 pikseli.
To jest dokładnie ta wielkość, którą mamy tutaj.
I ustalmy sobie, że
nasz element, tutaj na ekranach MD, będzie gridem,
na ekranach MD będzie gridem z kolumnami, z dwoma kolumnami. Możemy ustalić, że to będą
dwie kolumny, bo tutaj potrzebujemy tego wyraźnego podziału na dwie części.
I zapiszemy sobie teraz to i przejdziemy
teraz do naszego designu i przełączamy się na widok, Ja tutaj może zmienię na 100%,
przełączamy się teraz na widok na tablet.
I jak widzisz coś tutaj już się zaczęło dziać.
Natomiast jeszcze nie ułożyliśmy sobie odpowiednio naszych elementów.
Dlatego teraz musimy powiedzieć
elementowi, czyli tej sekcji numer 1, że na widoku mobilnym od md
musi mieć col span na 1. I chcemy żeby to było na jednej kolumnie.
Tu oczywiście jest błąd, grid.
Jak widzisz, już nam się to ustawiło tutaj na dwie kolumny.
Mówimy sobie, że ta pierwsza sekcja ma być
jakby rozszerzona tylko i wyłącznie na jedną kolumnę.
Teraz przejdziemy do sekcji numer 2 i jej
też musimy powiedzieć, że hej, Ty musisz zajmować tutaj też tylko jedną kolumnę.
Dlatego możemy sobie spokojnie: md-col-span-1.
Też to oznacza, że ta sekcja będzie zajmowała jedną kolumnę.
Teraz przejdźmy sobie tutaj i sekcja z reklamą,
chcemy, żeby zajmowała całą szerokość naszego grida.
Czyli Grid ma dwie kolumny,
czyli musimy tutaj powiedzieć, że sekcja z
reklamą musi rozciągać się dokładnie na dwie kolumny.
Zapisujemy to i już.
Nasza sekcja z reklamą widzisz rozciągnęła się na dwie kolumny.
Jeszcze musimy powiedzieć temu elementowi, że też ma rozciągnąć się na dwie kolumny,
bo tak dokładnie dostaliśmy w naszym designie.
Czyli już te opinie zostały rozciągnięte.
Teraz jak sobie zobaczysz nasz design, to one właśnie mają też zajmować
tutaj jakby,
skupimy się teraz na tych tabletach.
Mają rozciągać się na dwie kolumny, które mamy tutaj. Teraz
oczywiście musimy troszkę popracować nad
stylami tych elementów, na widoku na tablety.
Natomiast jedna rzecz, na którą warto
zwrócić uwagę to tutaj jest niepotrzebne, dlatego, że elementy w
gridzie domyślnie jakby zajmują jedną kolumnę.
Czyli jeżeli sobie teraz skasujemy te dwa style, to nasze elementy na naszej stronie
i tak domyślnie będą zajmowały sobie jedną kolumnę.
Nie musimy tutaj ustawiać domyślnej wartości.
Korzystamy z tego col span tylko i wyłącznie jeżeli chcemy jakby
ekstra powiedzieć: Słuchaj, ty powinieneś rozciągnąć się na dwie kolumny, a nie
tylko zajmować jedną tak jak jest domyślnie.
Widzisz, że tak naprawdę
stosując sobie takiego grida już od razu mamy praktycznie widok na tablety gotowy.
I oczywiście trzeba tutaj troszeczkę popracować nad tymi stylami.
Teraz zajmiemy się dokładnym odwzorowaniem tych styli na właśnie widoki na tablety.
Natomiast jak widzisz już za pomocą takiej
drobnej sztuczki jest zgrupowania sobie tego odpowiedniego,
tych elementów już możemy sobie przejść
bardzo łatwo właśnie z tego widoku mobilnego.
Jeszcze sprawdzimy widok mobilny czy nie został tutaj popsuty.
Zobacz, mamy, cały czas wygląda tak, jak miało wyglądać.
I teraz przejdźmy sobie na tablet.
I tutaj już mamy ładnie ułożone.
To tak jak jest na naszym desginie.
Teraz przejdźmy do naszego designu i sprawdźcie sobie tutaj te nasze elementy.
Na pewno wysokość tego elementu chyba tutaj troszkę się różni.
To jest 320 pikseli.
Sprawdzimy sobie ile to jest na chwilę obecną u nas.
Wysokość tego elementu,
mamy 272 piksele, czyli możemy sobie jeszcze powiększyć ten element.
Natomiast sprawdźmy sobie co tutaj jest
wyraźnie, można powiększyć paddingi tutaj z góry i z dołu.
Mamy troszeczkę za małe, czyli wejdźmy sobie
tutaj właśnie mamy ten element P I tutaj
mamy nasz element, który jakby pokazuje to wszystko, co jest tutaj w nim
zamknięte, czyli możemy sobie zwiększyć jego wysokość.
Wejdźmy sobie z powrotem do naszego kodu.
To jest sekcja numer 3, sekcja z reklamą.
Tu jest nasze p i tu jest nasz div, który określa tutaj tą powierzchnię.
I jeżeli wiemy, że
całość naszego elementu powinna mieć tutaj 320 i wiemy, że tutaj te elementy
mają dokładnie po 24+24 to jest 48
i 320 odjąć 48 to wyjdzie nam wysokość właśnie tego elementu.
To jest 272 piksele.
Czyli możemy tak naprawdę na medium
ustalić, że wysokość tego elementu może mieć dokładnie 272 piksele.
I myślę, że to nie będzie nic złego, jeżeli sobie właśnie teraz to tak
zastosujemy, czyli md height i możemy ustawić 272 piksele.
Zapiszemy sobie to.
Przejdźmy teraz do naszej strony.
Już tutaj wysokość tego elementu powinna się ustawić właśnie na 272 piksele.
Widzisz, mamy 272 piksele, dlatego to, już ten efekt uzyskaliśmy.
Teraz musimy zająć się tutaj tę sekcją, bo
nie wyświetla się ona tak, jak byśmy tego chcieli na designie.
I przejdźmy do tej sekcji.
Mamy tutaj te trzy elementy.
Które są flexami i które jak na razie wyświetlają się na całej długości.
Natomiast na naszym designie jak sobie
podejrzymy to musimy zmienić sposób wyświetlania tych elementów.
One już nie są pod sobą, ale muszą teraz być obok siebie.
Dlatego warto, żebyśmy sobie teraz
owrappowali sobie te elementy w diva i wsadzimy sobie wszystkie te trzy opinie,
które mamy już stworzone do tego naszego nowego diva.
To będzie nasz nowy wrapper.
I teraz określmy sobie, że tutaj jest klasa.
Na medium.
Niech to będzie flex.
Zapiszemy.
Przejdźmy do naszego, naszego ekranu i już elementy mamy ustawione koło siebie.
Teraz po prostu musimy w każdym z tych
elementów zmienić sposób wyświetlania go, żeby pokazywało się to tak jak mamy tutaj.
Czyli wszystko musi być tutaj pod sobą.
Czyli każdy z tych trzech elementów możemy
sobie tutaj złapać i zmienimy sposób wyświetlania się tych
trzech elementów i ich wielkość, żeby dokładnie określić, że mają tutaj jakby
dokładnie mieć jedną trzecią szerokości rodzica.
Czyli możemy podejść do tego na dwa sposoby.
Tak naprawdę możemy zacząć tutaj md-flex,
ale możesz też skorzystać z grida 3 kolumnowego grida i uzyskamy ten sam efekt.
Czyli może poćwiczymy sobie grida tym razem. Grid md: grid-cols-3.
I już w tym momencie mamy 3 kolumny, które są równo rozdzielone.
Nie musimy się tym martwić.
I teraz przejdźmy do każdego z tych elementów i na prefiksie medium
musimy zmienić sposób wyświetlania, czyli najlepiej, żeby to wszystko było pod sobą.
Czyli zróbmy sobie flex col.
Już mamy tak zrobione, że obrazki i teksty są pod sobą.
Możemy sobie tak naprawdę zrobić reverse,
co pozwoli nam sprawić, żeby te obrazki jednak były u góry.
Teraz mając już te kolumny revers musimy zwrócić uwagę na to jak mamy wyświetlane
to wszystko w środku, bo z tego co pamiętam mieliśmy to tutaj zrobione w taki
sposób, że szerokość tego elementu miała 5/6.
I teraz sprawdzimy sobie to dokładnie.
I widzisz, że mamy tutaj wrapper na tekst,
który ma dokładnie szerokość 5/6 co musi ulec zmianie, bo wrapper na text teraz
powinien mieć szerokość całego, całej kolumny.
Dlatego przejdźmy do naszego kodu
i musimy odszukać sobie tutaj te pierwsze divy, które wrappują nasze teksty.
To są dokładnie te elementy tutaj pod spodem, gdzie mają 5/6.
I musimy ztargetować sobie każdy z nich.
Czyli ja sobie tutaj skorzystam z multikursora,
zaznaczę sobie te elementy i na md robimy sobie width full.
No i teraz już mamy pełną szerokość tych elementów na poszczególnych,
na widoku właśnie na tablety.
Teraz musimy skupić się na tym, żeby
wszystko tutaj, w środku tej kolumny wyśrodkować.
Dlatego złapiemy sobie znowu tych
rodziców, którzy odpowiadają za poszczególne
elementy, zminimalizujemy sobie każdy ten główny div.
Mamy trzy nasze elementy, które odpowiadają za te opinie i teraz za pomocą
multikursora znowu zaaplikujemy sobie odpowiednie klasy, oczywiście dla MD.
I możemy zacząć od wycentrowania tego tekstu.
Center. Już mamy wyśrodkowane odpowiednio te
teksty, Możemy nadać na te elementy justify-end, żeby przesunąć to
wszystko tutaj w górę na ten element, czyli md: justify-end.
Już przesunęły nam się, żeby były równe.
Zaczynają się od, od góry każdej kolumny.
Co teraz trzeba zrobić?
To na pewno mieliśmy marginesy z lewej strony na te obrazki.
Czyli musimy odszukać teraz te obrazki.
I to są tutaj te elementy image w środku.
I zauważ, że każdy z nich ma margin left auto.
I takie było założenie na widoku mobilnym.
Natomiast tutaj teraz możemy sobie
spokojnie przejść na koniec każdego z tych elementów i na md po prostu usunąć margin left.
I już mamy wszystko wyśrodkowane tak jak powinno być.
Teraz spójrzmy jeszcze na nasz design.
W jaki sposób nasz designer chciał to zaimplementować?
Widzimy, że jest jeden wielki border poniżej całej tej sekcji.
I mamy jakby bordery, które oddzielają w sobie te elementy.
I tutaj kolejny raz Tailwind, framework Tailwind przychodzi nam z pomocą.
Mianowicie możemy sobie skorzystać z
utility class specjalnie stworzonej do tworzenia właśnie takich divader'ów.
I to jest właśnie klasa Divide, którą sobie możesz znaleźć tutaj w dokumentacji.
Divide, to otworzy nam właśnie takie przestrzenie pomiędzy elementami w gridzie.
Czyli bardzo łatwo możemy sobie przejść tutaj na ten element, który jest gridem,
który jest wrapperem na te wszystkie opinie.
I tutaj, gdzie mamy te 3 kolumny na MD
możemy sobie nadać divide, x wielkości 2 piksele.
Jeżeli sobie to zapiszemy zapiszemy, przejdziemy teraz do naszej strony.
To już pojawiły się takie elementy odgraniczające tą całą resztę.
Teraz potrzebujemy sobie jeszcze przesunąć ten border poniżej.
z tego co tutaj widzimy to jest tutaj jakaś przerwa pomiędzy tymi elementami.
I to możemy uzyskać dwojako.
I tak naprawdę teraz ten border jest nałożony, z tego co widzimy, tutaj na każdy
z tych elementów, który wrappuje nasze opinie.
Tu mamy pierwszy div, tu mamy div numer 2 i tu mamy div numer 3.
Każdy z nich ma border bottom 1 piksel.
I co teraz możemy sobie zrobić?
Albo możemy sobie usunąć te wszystkie bordery i nałożyć sobie border na ten cały
wrapper, żeby uzyskać efekt, który mieliśmy podany przez designera.
I zróbmy sobie,
podejdźmy do tego właśnie w taki sposób, czyli ten border bottom,
złapmy tutaj klasę.
I dokładnie na widoku md,
czyli medium, screen medium.
Zrobimy sobie border
bottom na 0. To powinno nam usunąć te wszystkie bordery, które mamy.
I teraz na naszym głównym gridzie, głównym
elemencie, który trzyma te wszystkie elementy w sobie.
Tutaj na klasie MD możemy nałożyć border bottom.
Tam był jeden piksel, pojawił nam się border.
Teraz co potrzebujemy to na pewno jeszcze popracować nad tym
wide space'em tutaj w tych elementach, czyli tutaj potrzebujemy jakieś przerwy i pomiędzy
tymi dividerami i elementami w środku też potrzebujemy mieć przerwę.
Czyli tak naprawdę ten element ma padding po prawej stronie.
Jeszcze zobaczę jak on wygląda.
Tutaj możemy sobie nadać padding na te
elementy, żeby odsunąć je troszkę tutaj od tych od tych dividerów.
Czyli przejdźmy sobie na każdy z tych elementów, i na klasie MD możemy sobie
powiedzieć padding na x to jest left i right.
Ustalimy sobie najpierw dosyć mały na 4.
Przejdźmy do naszego elementu, zobaczmy jak to teraz wygląda.
No i już odsunęliśmy się tutaj od tych, od tych dividerów.
Natomiast jak zauważyłeś w designie te ostatnie elementy one są dokładnie
wyrównane tutaj do tych linii po lewej, po prawej stronie.
Jak zobaczysz sobie tutaj,
tutaj tekst się kończy dokładnie na tym, czy nie ma ekstra paddingu po tej stronie.
Czyli możemy sobie jakby
indywidualnie łapać te elementy i odpowiednio nadawać im paddingi. Ten akurat
w środku ma po dwóch stronach, natomiast ten pierwszy element będzie miał tylko po
prawej stronie, natomiast drugi element będzie miał po lewej stronie.
I teraz jak sobie przejdę do
naszej stronie i zapiszę to sobie No to już mamy
to tak jakbyśmy chcieli. One są wyrównane.
Tutaj ten jest równy do prawej strony, ten
jest równy do lewej strony, a ten w środku tutaj ma padding po tej i po tej stronie.
I teraz na główny element rodzica jeszcze
musimy sobie odsunąć ten border czyli na md
możemy zrobić padding bottom wielkości 4 i już odsunęło nam to ten border.
Już osiągnęliśmy dokładnie ten efekt,
który chcieliśmy tutaj za pomocą właśnie korzystania z grida i odpowiedniej,
odpowiedniego grupowania tych wszystkich elementów.
Teraz przejdźmy sobie do zgrupowania tej drugiej sekcji i zaimplementujemy sobie
widok na tablety tutaj poniżej dla tych elementów.