Tailwind CSS: Customizowanie grida
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 to, w jaki sposób możemy ręcznie
wpisywać wartości wysokości naszych rzędów czy kolumn, czy
szerokości kolumn znajdziesz sobie w dokumentacji tutaj.
I w sekcji Grid Templates Rows
mamy tutaj na końcu informację w jaki
sposób możemy sobie wpisywać ręcznie nasze style, czyli skopiujemy teraz to co mamy.
I
tutaj na naszą sekcję XL wkleimy sobie to co mieliśmy i my chcemy tak.
Pierwszy nasz row ma mieć po prostu jeden fr.
Ma rosnąć zgodnie z naszymi, z naszym contentem.
Trzeciego rzędu nie chcemy mieć.
Te underscore to jest po prostu spacja, jakbyśmy normalnie w CSS'ie pisali nasze style.
Dlatego też trzeciego rzędu tutaj nie chcemy mieć w ogóle.
Natomiast nasz drugi rząd ma mieć od zera pikseli do 87 pikseli.
Zróbmy sobie 88.
Zapiszemy to sobie i zobacz co się stało.
Grid template rows-1fr min/max 0 do 88.
Czyli określiliśmy sobie, że tak naprawdę
tutaj mamy mieć element, który jest bardzo flexible, czyli dostosowuje się do
treści, natomiast ten drugi ma mieć dokładnie 88 pikseli.
Troszkę to nam zepsuło nasz widok.
Natomiast ja sobie teraz zakomentuję tutaj te kolejne,
może sekcje, które nam przeszkadzają troszeczkę na tym, żeby się skupić.
I zobacz, że tutaj jak sobie zbadamy
naszą stronę, to nasz grid, który mamy tutaj kończy się dokładnie w miejscu, w
którym chcemy, żeby się kończyła nasza reklama.
I teraz możemy sobie popracować nad naszą
reklamą, odpowiednio ją wystylizować w taki sposób, żeby zmieściła się tutaj.
Natomiast jeszcze jedna rzecz.
Zobacz, że ten pierwszy element tutaj.
Jeżeli sobie go sprawdzimy,
to on kończy się na pierwszym rzędzie, a my tego nie chcemy.
My chcemy, żeby on kończył się dopiero tutaj tak naprawdę.
Dlatego przejdźmy teraz do naszego kodu.
I ten pierwszy element, czyli ta pierwsza sekcja, którą mamy tutaj.
My chcemy, żeby ona się rozszerzała na dwa rzędy.
Teraz jak sobie sprawdzimy poprawnie ten element jeszcze raz
to zobacz ta pierwsza sekcja ona już jest rozszerzona na dwa rzędy.
Czyli teraz zwiększając sobie po prostu odstępy tego tekstu, dając większy tekst.
Ta sekcja będzie dokładnie tutaj dochodziła aż do tej wysokości.
Możemy sobie to teraz sprawdzić i przejdźmy sobie teraz
właśnie do tej pierwszej sekcji i nadajmy sobie tutaj na
te p
np. klasę na xl.
Leading
tutaj zwiększymy sobie wysokość linii, i zwiększę ją aż na 9.
No i widzisz, że po prostu to nam się dalej rozszerza.
Żeby to lepiej sprawdzić dajmy na 10
i to będzie ta sekcja może dochodzić, aż do końca tej.
Natomiast z tego względu, że nie mamy
wystarczająco dużo tego tekstu, możemy sobie na XL troszeczkę ten leading
powiększyć, żeby on był troszkę większy niż standardowo.
Zróbmy sobie
piątkę.
Szóstkę.
Zróbmy sobie ósemkę tak naprawdę,
żeby troszeczkę powiększyć ten leading niż był on w standardowym widoku
i przejdźmy teraz do stylowania reszty tutaj.
Przede wszystkim musimy się skupić teraz
na tej reklamie, żeby nie wyskakiwała nam tutej z tego grida, który mamy.
Dlatego schowajmy tę sekcję.
Wskoczymy tutaj teraz w reklamę, czyli to
jest sekcja numer 3 i skupimy się teraz na tym elemencie.
Teraz tak, przede wszystkim, co chcemy zrobić?
Na pewno musimy na sztywno mieć określoną wysokość.
Dlatego nam właśnie ten element wyskakuje I z tego co widzę tak, mamy tutaj na tym
wrapperze, na ten tekst mamy wysokość, height na 272 piksele.
Czyli weźmy na XL teaz.
Także mamy wysokość tego elementu ustawioną na 272 piksele.
Nie chcemy.
Chcemy mieć wysokość określoną właśnie przez naszego designera i to jest 87.
Ustawmy sobie 88 pikseli.
Myślę, że to jest po prostu błąd związany z tym, że jest tu jakiś border.
I przejdźmy do naszego elementu i zróbmy sobie xl,
h na 88 pikseli. Zapiszemy to sobie już.
Zmniejszyła nam się wielkość tego elementu.
Jeszcze mamy problemy z obrazkami, które wyskakują nam z tego wrappera.
Natomiast wrapper też jest zdecydowanie za szeroki.
Obrazek to ma tylko jedną trzecią
na naszym przykładzie tak że możemy sobie
na XL stargetować to i zrobić width na jedną trzecią.
Zapiszemy sobie już tamten tekst, powinien się zwiększyć trochę.
I w tym momencie też na tekst na XL, na
ten wrapper, na tekst zrobimy sobie XL width na dwie trzecie.
Już tekst się zwiększył na całą szerokość tego wrappera.
Na pewno możemy sobie ściągnąć tutaj ten,
mamy padding right, margin bottom.
Możemy sobie ściągnąć tego Get it today,
bo na pewno nie będziemy tego na ekranie XL potrzebować.
Czyli mb zróbmy sobie 1.
Zmniejszymy sobie ten margin, żeby tylko troszeczkę.
Tutaj margin top
na te Marcin K. też mamy 3 ustawione na XL.
Możemy sobie to zmniejszyć na np. na 0.
W naszym przypadku już jesteśmy bliżej tego, co chcielibyśmy uzyskać.
Co my tutaj jeszcze mamy?
To na pewno problemy z tym obrazkiem.
Musimy się zająć tym obrazkiem.
Zlikwidujemy sobie teraz tego diva całkowicie.
Tak naprawdę będziemy sobie stylizować tylko i wyłącznie
ten tag i.
Co już pozwoli nam tak naprawdę wrócić do tego, co chcielibyśmy uzyskać.
I problem w tym, że on zmienia tutaj
jakby swoje ratio z tego względu, że zmieniamy objętość tego wrappera.
Żeby temu zapobiec, możemy skorzystać z Object Cover.
To oczywiście nie pasuje.
Zróbmy sobie contain,
żeby, określamy tutaj, że obrazek tego tego
e-booka ma zmieścić się w naszym, w naszym wrapperze.
Natomiast patrzę, 1/3 będzie troszkę nawet chyba za dużo.
Możemy sobie jeszcze pomniejszyć troszkę ten wrapper.
I.
Tutaj zamiast jednej trzeciej zróbmy sobie jedną czwartą.
A tutaj trzy czwarte.
Jeszcze zmniejszymy troszeczkę ten wrapper.
No i już to wygląda troszkę lepiej i teraz popracujemy nad tymi tekstami.
Jeszcze zdecydowanie mamy za duże gwiazdki.
Sprawdźmy sobie jak to tutaj
wiedział nasz designer, bo z tego co widzę to tu mamy wysokie na 87 pikseli.
Nasz obrazek ma 80.
Sprawdźmy sobie jak to wygląda u nas.
Ach, na pewno ten tekst jest dużo mniejszy.
Sprawdźmy sobie wielkość tego tekstu. To jest 12 pikseli.
Zgadza się, Musimy sobie pomniejszyć zdecydowanie ten tekst, który mamy
tutaj, bo w naszym przypadku na chwilę obecną, zobaczmy ile mamy.
To jest 12 pikseli, czyli dokładnie tekst taki, jaki byśmy chcieli.
Natomiast co tutaj jeszcze nie pasuje?
Tutaj ten margin, który mamy pod tym tekstem jest za duży.
Jak zobaczymy na design tutaj nie ma
żadnego marginesu, dlatego to wszystko tak fajnie wygląda razem.
Wróćmy do naszej implementacji, do naszego kodu.
I w miejscu gdzie mamy ten margin, bottom na 1 ustawmy go jednak na 0.
No i już w tym momencie przesunie nam się wszystko.
Sprawdźcie sobie, czy jeszcze nie mamy gdzieś jakiegoś paddingu narzuconego.
Tu mamy elementy, które są związane z tymi gwiazdkami.
Tu jest wszystko ok.
Tu mamy główny
element określający wrapper na nasze dwie rzeczy.
Advertisement tutaj już nie istnieje. Padding bottom jest tutaj na zero ustawiony, jest ok.
I tu sprawdźmy sobie margin top,
jest też na 0.
Wygląda na to, że wszystko jest w porządku.
Natomiast cały czas nie podoba mi się to,
w jaki sposób układają się te teksty i z tego co widzę tutaj.
Sprawdźmy sobie jeszcze raz design.
Get it today jest mniejsze,
tak, jest mniejsza czcionka.
Przejdźmy sobie do Get it today,
tutaj sobie zrobimy text-sm.
No i już nam się to wszystko teraz fajnie tutaj zmieściło.
Możemy sobie jeszcze przesunąć tutaj ten,
ten napis Marcin K na xl, możemy zrobić margin top i zrobimy sobie -1.
Z przedrostkiem minus.
I już mamy bliżej naszego designu.
Pierwszą sekcję mamy za sobą.
Tak naprawdę. Teraz musimy się skupić nad resztą, którą mamy poniżej.
Ja sobie odkomentuję tę sekcję tutaj, żeby sprawdzić
jak wygląda to wszystko teraz. Zapiszemy i już mamy te kolejne sekcje pod sobą.
Sprawdźmy sobie jeszcze teraz czy po drodze nie zepsuliśmy niczego.
Sprawdzimy sobie wygląd na tablety.
Jak to wygląda?
Póki co jest wszystko ok, tak jak powinno być.
Sprawdzimy sobie wygląd na urządzenia mobilne.
Tu też jest bez zmian, tak że teraz możemy sobie spokojnie przejść i dalej
tutaj stylować nasz widok na urządzenia desktopowe.
Natomiast możemy się teraz skupić na tych kolejnych dwóch sekcjach.