Tailwind CSS: Partnerzy i scieżki - klasy divide i reverse
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.
Przejdźmy do naszego designu, żeby sprawdzić jak to powinno wyglądać.
I z tego co tutaj widzimy, to musimy te dwie sekcje ustawić koło siebie.
Dlatego też przyda nam się tutaj ten wrapper, z którego ostatnio
nie korzystaliśmy, natomiast teraz na pewno już się nam przyda.
Mamy te dwie sekcje owrappowane w jednego diva, tak że teraz na xl możemy tylko
ustawić sobie tutaj Flex i już powinno nam to przestawić nasze, nasze elementy.
Możemy skorzystać tak naprawdę z grida.
Będzie to nam łatwiej kontrolować
tym wszystkim. Zrobimy sobie xl Grid col 2.
Mamy dwie kolumny i już w tym momencie mamy te elementy ustawione koło siebie.
Możemy sobie
teraz, przejdźmy sobie więc na ten Eduweb Partners.
Chcemy, żeby to było z przodu, czyli na xl col-Start na 1.
Powinno nam to przesunąć ten element. Mamy wystartowane na 1, natomiast tutaj
tą drugą sekcję przesuniemy w prawą stronę i damy, że col start na 2.
I mamy to przesunięte w prawą stronę. Xl row start 1.
No i mamy to w jednym rzędzie zrobione tak jak powinno być.
Teraz możemy skupić się na tym, żeby
wyświetlić te elementy w odpowiedni sposób.
Tutaj jak widzisz mamy 3 kolumny koło siebie.
Zobaczmy jak to jest w naszym przypadku.
To jest jedna kolumna.
Dzieje się tak dlatego, że nasi partnerzy,
których mamy tutaj, to jest to grid, który ma od mida ma 6 kolumn.
My teraz chcemy mieć 3 kolumny, czyli teraz z powrotem na xl grid cols-.
już sobie ustawiamy to koło siebie tak jak
byśmy chcieli i tutaj to musimy praktycznie całkowicie przebudować z tego
względu, że wyświetlanie tego na urządzeniach desktopowych,
tutaj mamy scrolla,
widać to po tym wystającym elemencie po prawej stronie.
Dlatego wróćmy teraz do naszego designu i
zastanówmy się jak możemy to sobie zaimplementować.
Mamy tutaj w tej sekcji,
tego diva z tymi,
to jest sekcja z partnerami.
My musimy się zająć sekcją powyżej, czyli
tą sekcją tutaj, z tymi wszystkimi ścieżkami nauki na eduweb.
I zastanówmy się teraz, co można zrobić.
Na pewno mamy tutaj kolumnę jedną, to byłoby jeszcze OK.
Natomiast myślę, że na xl'u warto byłoby tutaj jednak ustawić to wszystko we flexie.
Mamy tutaj kontenery, które są koło siebie tak naprawdę.
Czyli jeżeli zmienimy sposób wyświetlania tego głównego elementu, to już te elementy
powinny się ustawić koło siebie, a z tego co widać one powinny być koło siebie.
Czyli przejdźmy tutaj do tego elementu
wrappującego, to wszystkie te wszystkie sekcje tutaj, to jest ten element.
I zastanówmy się teraz jak możemy to zmienić.
Na xl spróbujemy przemienić na Flex.
Zapiszemy to sobie.
No już nam się coś tutaj zmieniło.
Już elementy są ustawione koło siebie.
Co prawda nie mamy scrolla żadnego,
natomiast możemy też skorzystać tutaj z klasy, Utility class Tailwinda, overflow.
Mamy overflow-x-scroll już te elementy możemy sobie tutaj scrollować.
Teraz przejdźmy sobie do tych
poszczególnych elementów i musimy zmienić wyświetlanie ich.
W jaki sposób zostają nam wyświetlane?
Mamy tutaj flex row, czyli na xl
musimy z powrotem przejść na wyświetlanie
na flex column, żeby były pod sobą, czyli xl:
flex-col.
Już mamy elementy wyświetlane pod sobą.
Teraz musimy troszeczkę popracować nad
tymi poszczególnymi elementami, żeby ich wielkość była odpowiednia.
Przejdźmy tutaj do designu.
Zobaczmy, jaka jest szerokość takiego jednego elementu.
I to jest dokładnie.
Mamy 100, 186 pikseli, czyli to jest,
chyba będzie to samo, co mieliśmy tutaj w tym przypadku.
Sprawdźmy sobie teraz ten design.
I tutaj mamy szerokość 186.
Dokładnie taka sama szerokość jest jak na pierwszym, na pierwszym widoku.
Czyli przejdźmy do poszczególnych elementów.
Sprawdźmy, co tu się zmieniało.
Mieliśmy tutaj wysokość 132
i na medium zmienialiśmy szerokość na jedną czwartą i wysokość na 107.
Czyli możemy sobie teraz przejść do takiego poszczególnego elementu.
Musimy oczywiście znaleźć wszystkie te elementy, które mieliśmy tutaj wcześniej.
Czyli to jest kolejny.
Ja sobie teraz korzystam z magii kima i po
prostu wszystkie sobie pozaznaczam, bo jest tych sekcji 7.
Musimy przejść do elementu, który jest dokładnie tutaj, czyli pozaznaczamy sobie
wszystkie siedem takich samych elementów i co potrzebujemy?
Potrzebujemy na pewno width zmienić,
xl-width, zrobimy sobie
stałą wartość, 132 piksele.
Przejdźmy do naszej strony.
Już zaczynają się wyświetlać troszkę
lepiej te elementy, natomiast nie wiem czy to było 132 czy 100,
186. Przepraszam.
Mamy 186 pikseli, czyli możemy sobie zmienić te wartości tutaj na 186.
Mamy już odpowiednią szerokość tego pojedynczego elementu.
Teraz zajmijmy się tymi tekstami,
które mają marginy nastawione od od klasy wielkości na tablety.
Czyli teraz musimy sobie skasować te
marginesy, bo są one nam zupełnie niepotrzebne.
Tak samo te width też możemy sobie skasować dla tych elementów.
Czyli zaznaczymy sobie te wszystkie elementy znowu, 7 takich samych elementów.
Ja sobie znalazłem. Przeskoczę tutaj na stylowanie,
i na xl zrobię sobie width full spacja już mamy, width full, nie mamy trzy czwarte
i tak samo zrobimy sobie na xl margin na left 0.
I już wyrównały nam się wszystkie elementy.
Sprawdźcie sobie jeszcze raz ten design,
czy to rzeczywiście jest tak, jak ma być na designie.
Tutaj mamy jeszcze line-clamp na 5 linii
ustawiony i z tego co widzimy to tutaj są 3 linie.
Sprawdźmy nasze elementy gdzie są nasze line-clamp ustawione.
Tutaj
mamy na trójki, czyli znajdźmy sobie 7 tych samych elementów.
Kolejny raz multikursor. I na xl możemy sobie ustawić line-clamp.
Na 3.
Na 5 znowu, tak?
Już powiększyło to nam te wszystkie
elementy, są wyższe, tak naprawdę takie same jak na naszym designie.
Tutaj mamy raz, dwa, trzy, cztery, pięć rzędów i tu przejdziemy sobie i
potrzebujemy ustawić na xl divide, x na 2.
Zapisujemy sobie to.
I już mamy przedziałkę, która się pojawiła po prawej stronie.
No i to wygląda na to, że mamy tak naprawdę style na desktopy
gotowe.
Sprawdźmy sobie teraz na pełnym ekranie jak ta nasza strona wygląda.
Ja sobie tutaj teraz
deaktywuje narzędzia deweloperskie i widzisz, że wszystko tak naprawdę się
rozjeżdża z tego względu, że nie mamy naszej aplikacji
opakowanej w klasę container, która jest bardzo pomocną klasą w Tailwindzie.
Teraz sobie przejdę do kodu i
to wszystko co sobie modyfikowaliśmy oprócz
tak naprawdę headera i footera, bo tutaj nie potrzebujemy naszego kontenera.
To wszystko pakujemy w dodatkowego diva,
który będzie naszym kontenerem, czyli zróbmy sobie wrap, div,
container i tutaj jeszcze chcemy klasę mx auto.
Zapiszemy sobie to i zobacz już strona nam się wyśrodkowała tak jak powinno być.
Tutaj mamy problem z tą przedziałką.
Musimy ją zrobić z prawej strony.
Jest to spowodowane tym, że zmieniliśmy po
prostu kolejność wyświetlania tych dwóch elementów.
Sprawdzimy teraz sobie jak możemy sobie z tym poradzić.
Zobacz nawet scroll tutaj wszystko działa tak jak powinno być na designie.
Przejdźmy teraz do kodu.
Ja sobie teraz te okno tutaj troszeczkę zmniejszę.
Tu mamy już widok na tablety nam
przeskoczył, natomiast za chwilkę sobie wrócimy na urządzenia desktopowe.
Natomiast wróćmy do tego i sprawdźmy, jak
możemy naprawić te oddzielanie tych dwóch elementów
na tym właśnie, na tym widoku desktopowych.
I tutaj możemy zrezygnować z grida.
Tak naprawdę możemy sobie to wyświetlić naszym flexem.
Flex, tutaj nie potrzebujemy tak naprawdę niczego.
I divide x na 2 może być ustawiony.
Sprawdźmy sobie teraz jak ustawią się nasze, tak, dobrze są ustawione.
Natomiast my musimy zrobić flex reverse. Flex-row-reverse.
Zapiszemy sobie to.
Już nasze sekcje wyświetlają się w porządku,
tylko teraz musimy powiedzieć jakby, że muszą być,
muszą być tak naprawdę wielkości połowy ekranu.
Oczywiście klasy związane z gridem też nie będą nam potrzebne.
Czyli możemy sobie wyczyścić te dwa elementy.
Zapiszemy sobie, już mamy dwa elementy koło siebie.
Teraz załóżmy, że obydwa muszą mieć widht jedną/drugą, czyli na xl width-1/2.
To samo zrobimy z tym elementem, który jest wokół wszystkich ścieżek nauki.
Mamy width jedna/druga.
Mamy scroll bar, który chcemy mieć.
Jeszcze mamy problem z dividerem, który pojawia się po tej stronie.
Tutaj Tailwind kolejny raz przyjdzie nam z pomocą ze swoim utility classes.
Otóż możemy sobie dać Divide X i możemy
sobie dać divide x reverse, czyli
Divide i xl, Divide X i na dwa.
Mamy już przedziałkę, która powinna być
pomiędzy tymi dwoma sekcjami i mamy to podobnie tak naprawdę zrobione do
tego, co przekazał nam tutaj designer.
I teraz kolejna, ostatnia rzecz, na której
powinniśmy się skupić to zostanie nam tutaj footer.