Tailwind CSS: Footer na tabletach
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.
Teraz musimy jeszcze popracować nad tymi
partnerami, bo na tabletach one po prostu, partnerzy są koło siebie
wyświetlani, to nie jest tak jak tutaj w rządku.
Czyli przejdźmy teraz do tego, do tej sekcji.
Tę sekcję możemy sobie już teraz tutaj zminimalizować.
To jest tutaj ta ostatnia sekcja.
I tutaj mamy grida z kolumnami i
prawdopodobnie wystarczy nam po prostu tutaj zmienić tak naprawdę liczbę kolumn.
Tak, powinna być jedna kolumna.
Nie, zróbmy sobie 6 kolumn.
W takim przypadku 6 tych elementów będzie ustawionych koło siebie.
Czyli spróbujmy takiego zabiegu, przejdźmy
sobie na naszą stronę, żeby widzieć zmiany.
I tutaj na ekrany md grid-cols,
zróbmy na 7, na 6.
No i już mamy te wszystkie elementy ustawione dokładnie koło siebie.
Widzisz, praktycznie widok na tablety mamy prawie gotowy.
Jeszcze tylko musimy zająć się tym footerem.
Przejdźmy teraz w takim razie do designu.
Zobaczmy co tutaj się działo i widzimy, że footer zmienił się
drastycznie, bo ikonki tych social mediów przeskoczyły nam tutaj zupełnie na dół.
Ten napis wyskoczył nam z tego ostatniego
ciemnego elementu i wskoczył nam tutaj w ten główny wrapper na te linki.
Dlatego prawdopodobnie musimy się
troszeczkę zastanowić jak to tutaj sobie pogrupować.
Teraz oczywiście, że moglibyśmy do tego
podejść w sposób skomplikowany i od razu starać się to wszystko ograć tutaj jednym
gridem, żeby mieć łatwość tutaj stylowania tego.
Natomiast ja pokażę Ci też troszeczkę inne
podejście w jaki sposób możesz do takich problemów podchodzić w swoich projektach.
Otóż w momencie kiedy widzę, że coś np.
znika, pojawia się w zupełnie innym miejscu.
Bardzo często jest to case na to, żeby po prostu ukryć dany element w danym widoku i
skopiować logikę, po prostu użyć jej gdzie indziej.
Oczywiście jakbyśmy korzystali tutaj z jakiegoś frameworka
frontendowego typu React, to bardzo łatwo było nam używać komponentu wielokrotnie w
różnych miejscach, czy też pisać osobną logikę dla tych komponentów.
Natomiast my tutaj nie mamy tej przewagi.
Jest to po prostu jeden plik HTML, na którym sobie teraz pracujemy.
Dlatego przejdźmy do tego footera i zobaczmy co tutaj się dzieje.
Mamy mamy trzy wrappery i to są te trzy elementy.
To jest ten jeden do góry, drugi i trzeci.
Tutaj w tym pierwszym elemencie u góry tak naprawdę dużo się nie zmieni.
Oprócz tego, że przestaniemy wyświetlać te ikony.
No to zróbmy to teraz, przejdźmy do naszej strony.
I tutaj jesteśmy na widoku na tablety.
I to jest ten pierwszy wrapper.
I tutaj mamy rzecz, która nadaje nam ten border na to wszystko.
Natomiast w środku jak zobaczysz mamy dwa wrapper.
W jednym z nich właśnie są te wszystkie ikonki.
Czyli swobodnie możemy sobie tutaj md hidden.
To jest też klasa, która pozwoli nam zrobić display non na tym widoku.
No i już tak naprawdę uzyskaliśmy praktycznie efekt, który chcemy uzyskać.
Oprócz tego, że border rozciąga się tutaj
na całą szerokość, a w designie mamy wyraźnie pokazane, że designer sobie życzy
czegoś innego, że musimy tutaj mieć jakiś padding po dwóch stronach.
I możemy sobie teraz przejść do tego elementu i nadać mu margines na
na ekranach, na tabletach, żeby miał margines na X wielkości 4.
I już w tym momencie odsuniemy sobie ten border po dwóch stronach.
Jedną rzecz mamy skończoną.
Teraz kolejna rzecz, która potrzebuje nam zmienić sposób wyświetlania tych elementów
i sprawdźmy sobie dokładnie, jak powinny być one wyświetlane.
Otóż tutaj mamy trzy kolumny,
czyli przejdźmy do tego drugiego diva, który oplata nam te wszystkie linki.
No i z tego co tutaj widzimy to tak naprawdę te wszystkie linki to są grupy.
My nie pogrupowaliśmy ich sobie jeszcze w
widoku mobilnym, nie widzieliśmy takiej potrzeby i słusznie.
Tak naprawdę tutaj już widzimy tę potrzebę.
Fajnie byłoby mieć to wszystko zgrupowane w trzy osobne divy.
Dlatego teraz możemy sobie przejść i owrappować te wszystkie elementy.
Mamy trzy elementy, którymi teraz możemy się zająć,
w jaki sposób się będą wyświetlały. Jeżeli sobie to zapiszemy, to w tym momencie tak
naprawdę widok mobilny nie powinien nam ulec większej zmianie.
Zobaczmy, jak to wygląda. Nie jest prawdą.
Widzimy, że jest tutaj jakiś problem, dlatego, że te poszczególne elementy po
prostu nie wyświetlają swoich dzieci w odpowiedni sposób.
Musimy sobie zmienić tutaj tak naprawdę
te style musimy sobie przekleić na poszczególnych rodziców, którzy wrappują
nam te linki do poszczególnych sekcji w stopce.
Dlatego teraz za pomocą multikursora ja sobie skopiuję class,
no i tutaj możemy sobie wkleić dokładnie to co mamy tutaj.
Jeżeli sobie to zapiszemy to już wróciło to do takiej postaci w jakiej
powinno być i teraz możemy sobie swobodnie tutaj to tak naprawdę usunąć.
Dalej wyświetla nam się to tak jak powinno się wyświetlać.
Oczywiście justify-center też nie potrzebujemy na tym głównym wrapperze.
Jak tylko będzie kolor tych czcionek.
Natomiast teraz przejdźmy sobie na tablety i zobaczmy co możemy z tym fantem zrobić.
Otóż teraz mamy pełną władzę tego jak te trzy elementy będą się wyświetlały.
Potrzebujemy je wyświetlić koło siebie.
Czyli możemy de facto skorzystać tutaj z 3 kolumnowego grida, md-grid-col
na 3 no i już mamy 3 elementy ustawione koło siebie.
Oczywiście teraz musimy zająć się odpowiednim wystylizowaniem tych elementów.
Przejdźmy sobie tutaj
i widzimy, że te 3 elementy są jakby wyrównane do lewej strony
na każdej z tych części. Do tego skoczymy
tutaj, na pewno justify-center i items-center
tutaj nie jest odpowiednią właściwością.
Musimy sobie zadbać o to, żeby na md items-start mamy przesunięcie do lewej strony.
I teraz tutaj na cały nasz
wrapper możemy nadać odpowiedni margines z lewej strony albo padding.
Po prostu też powinno nam pomóc.
Czyli md: pl-4.
I już mamy przesunięcie tych wszystkich elementów w prawą stronę.
Zobaczmy jak to teraz się prezentuje zgodnie z designem.
Tak, widać, że wszystko jest tak jak powinno być.
Oprócz tego, że te elementy są tutaj na
środku dlatego, że mają justify-center.
Dlatego tutaj na MD też musimy zająć się justify-start.
No i już mamy przesunięcie tych wszystkich elementów do góry.
Natomiast z tego co widzę tutaj w designie, to
chyba ten margines jest troszeczkę większy niż ten, który oplata nam ten border bottom.
Dlatego zrobimy sobie dwukrotną wartość tego na 8.
I przesunięcie powinno teraz się zgadzać. Tak.
Mamy już dokładnie ustawione te elementy tak jak byśmy chcieli.
Teraz musimy zadbać o to, żeby pod tym, pod tym całym elementem wyświetlić
kolejny element, czyli social media i napis Eduweb Times.
Czyli tutaj, pod tym wszystkim pojawi nam się kolejny
element, który wyświetli nam te social media i wyświetli nam napis The Eduweb Times.
Czyli Przejdźmy teraz do tej rzeczy.
To jest nasz drugi div, który oplata nam wszystkie teksty.
I tutaj pod spodem, pod tym divem możemy sobie zrobić kolejny element, czyli div,
I tutaj elementy, które ukryliśmy sobie
na MD, czyli dokładnie ten wrapper z tymi wszystkimi social mediami.
Możemy sobie go skopiować, skorzystać z niego, bo to jest to co chcemy wyświetlić
i wkleić sobie w to miejsce, oczywiście ściągając tutaj md-hidden.
I na razie ściągniemy sobie też wszystkie tak naprawdę gapy.
Gapy możemy zostawić,
margin top sobie ściągniemy na
chwilę obecną i tutaj poniżej będziemy potrzebować
napisu The Eduweb Times, który oryginalnie tak naprawdę był tutaj.
Czyli kopiujemy tą H1, i kolejny raz wkleimy sobie to tutaj.
Tutaj ten napis na MD znika.
Nie ma go tutaj w tej i w tej części jak widzisz, dlatego możemy spokojnie hidden użyć.
I teraz na naszym ekranie średnim, już tutaj tego napisu.
Natomiast tutaj mamy dwa elementy pod sobą.
Musimy teraz popracować troszeczkę nad sposobem wyświetlania tych elementów.
To jest nasz nowy element, który się pojawił.
Czyli możemy najpierw zadbać o to, żeby ten element tylko był wyświetlany na
ekranach medium, czyli domyślnie on ma być ukryty.
Nie potrzebujemy go na ekranach mobilnych,
bo jeżeli teraz sobie to zostawimy, przejdziemy na ekran mobilny.
Zobacz, że mamy tutaj niepotrzebny
element, który nam się pojawił, którego nie potrzebujemy na ekranie mobilnym.
Dlatego przeskoczymy sobie znowu wpisując tutaj hidden jako domyślnie.
Te elementy znikają. Jest,
zostaje ta stopka, tak jak powinna być.
Przejdźmy teraz tutaj do naszego widoku na
tablet i teraz na MD ma ten element się pojawić.
Niech będzie flexem.
No i już mamy ustawione elementy koło
siebie i teraz możemy zrobić items center, żeby wyrównać napis i całą resztę.
I teraz zobaczmy co my tutaj mamy.
Mamy padding bottom nastawiony na ten, na ten napis.
Czyli możemy sobie spokojnie,
oczywiście tego nie chcemy dotykać,
chcemy dotykać ten napis tutaj.
I teraz padding bottom sobie ściągniemy z tego napisu.
Niepotrzebny nam jest do niczego.
Dlatego już mamy wyśrodkowane te elementy.
Teraz co potrzebujemy?
Potrzebujemy też nadać margin po lewej stronie
na ten element. Już są wyrównane te social media z całą resztą.
No i na Eduweb Times tak naprawdę możemy
sobie maksymalnie w prawą stronę odsunąć ten napis, jak to jest tutaj w designie.
On jest wyśrodkowany dokładnie w tym elemencie.
Czyli zróbmy sobie tak, że ten element
tutaj się kończy, kolejny element
H1
możemy ją owrappować w kolejnego
diva, przeskoczyć H1 tutaj do środka i tutaj nadać klasę,
flex-items, justify-center tylko będziemy
potrzebowali tutaj i width, grow, już mamy wyśrodkowany ten napis.
Po prostu sprawiliśmy tutaj, żeby ten
element urósł tutaj na całą szerokość tego, co mamy tutaj.
Jak sobie teraz zobaczymy inspect, to zobacz, że dokładnie ten element tutaj
nam urósł i cały content, który jest w środku jest jakby jest wyśrodkowany.
Czyli w taki sposób sprawiliśmy, że odsunęliśmy to wszystko tutaj.
Natomiast tutaj ten element mi się jeszcze nie podoba z tego względu, że musimy
odsunąć to wszystko troszeczkę od całej reszty.
Zobaczmy, czy to jest podobnie jak w design.
Tak, tylko odsunięty musimy nawet jakiś
margines tutaj, żeby odsunąć te elementy od siebie.
Dlatego przejdźmy teraz do kodu.
Mamy tutaj tego, tego naszego diva na wszystkie te elementy
i to sobie możemy spokojnie tutaj na md, margin top,
zrobić na 10.
Zobaczmy jak to będzie wyglądało.
Tak, już w tym momencie odsunęliśmy te elementy.
No i mamy odzwierciedlony design na tablety.
Teraz przejdziemy do pisania logiki, która pozwoli nam
odzwierciedlić design na urządzenia desktopowe.
I to będzie ostatni jakby punkt tego, tego projektu.
I jeszcze na koniec jako bonus zbudujemy sobie tutaj
ten header, bo póki co mamy tylko i wyłącznie wersję mobilną i na tablety.
Natomiast my też chcemy, żeby na ekranach desktopowych wyglądało to tak jak tutaj.