Tailwind CSS: Sekcja nowości i używanie swoich wartości w klasach
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.
Przejdziemy sobie teraz do implementowania kolejnego elementu, czyli tej sekcji,
tutaj z tymi linkami, które mamy po prawej stronie. No to zacznijmy od sekcji.
To jest osobna sekcja na naszej stronie, tak że
możemy to tak potraktować. I skupimy się na
razie na odzwierciedleniu jednego elementu.
Bez tych tutaj przerw tylko i wyłącznie skupimy się na tym elemencie.
Tak że mamy tutaj obrazek.
Mamy jakiś dodatkowy wrapper na tekst, który ma header i dodatkowo jakiś opis.
Przejdźmy teraz więc do implementacji.
Mamy image.
Na razie nie będziemy tutaj nic wstawiać i
mamy kolejny div, w którym będziemy mieli h3 powiedzmy i nasze p, które będzie
skróconym opisem tego newsa, który tutaj jest.
H3 możemy sobie skopiować już tą zawartość.
No i skopiujemy również zawartość tego tekstu.
Jak widzimy on jest dużo dłuższy niż to co widzimy.
Będziemy musieli sobie to za chwilkę jakoś z tym poradzić.
Natomiast wróćmy teraz do naszej strony.
Powinien się pojawić nowy element.
Mamy tutaj nowy element, który się pojawił już na naszej stronie.
Póki co nie mamy jeszcze żadnego obrazka, dlatego teraz
ja sobie skopiuję obrazek z tych, które masz dostępne w materiałach dodatkowych do
tego kursu i za chwilkę wkleimy sobie tutaj ten link.
Ja tutaj korzystając z magii kina już wkleiłem sobie ten obrazek.
Mamy writing_note, jest obrazek, który sobie wykorzystamy, dlatego możemy teraz tutaj w
naszym src spokojnie się do niego odnieść.
Images, i writing_note, zapiszemy.
No i mamy nasz obrazek już tutaj gotowy na stronie.
Natomiast jest jeden problem.
Mamy padding tutaj na sekcji x4, który tutaj się na razie nie nałożył.
Dlatego musimy sobie te klasy tutaj skopiować, bo tę sekcję też chcemy mieć,
dokładnie ten sam padding po prawej, po lewej stronie.
Na razie margin usuniemy, zapiszemy.
No i też mamy już takie wyrównanie tutaj
zgodnie z całą resztą strony.
Musimy sobie odsunąć całą tą sekcję od tego linku.
Sprawdźcie sobie jaka to była odległość tutaj.
I tu mamy 40 pikseli, czyli pewnie mt10.
Sprawdzimy tę wartość już za chwilkę.
No wygląda to podobnie, tak jak tutaj.
Tak że możemy sobie zostawić tę wartość zdecydowanie.
Tutaj musimy teraz zająć się ustawieniem tych elementów odpowiednich.
Ja sobie na razie tutaj zakomentuję
tę sekcję, która jest nad naszą, żeby widzieć tylko i wyłącznie ten element.
I skupmy się teraz na tych dwóch elementach.
Czyli tu mamy jakiś nagłówek i mamy p.
Wróćmy tutaj do tego nagłówka.
Na pewno font bold albo semi-bold, bo generalnie nagłówki mamy bold.
Dlatego zrobimy sobie bold, wielkość
zróbmy sobie na razie 2-XL, oczywiście z myślnikiem.
Tutaj mamy wielkość.
Zobaczmy jaka to jest wielkość czcionki. 24.
Zobaczmy sobie, jak, co nam mówi design.
Tutaj. Czcionka powinno być 18, dlatego mamy za dużo zdecydowanie.
18 to jest w naszym przypadku 20,
czyli pewnie będzie font lg-18 pikseli jak widzisz.
Zapiszemy to sobie i już powinniśmy być bliżej naszego efektu.
Tak?
Ten font tutaj ma wielkość, która jest nadana mu 16 pikseli.
Wszystko wygląda dobrze, teraz tylko
musimy sobie ustawić te dwa elementy koło siebie, a nie pod sobą, tak jak to jest
teraz, czyli obrazek i to musi być koło siebie.
Czyli na pewno musimy na całą tą sekcję.
Załóżmy, że to będzie sekcja z tymi wszystkimi linkami.
Dlatego teraz może owrappujemy sobie ten pojedynczy link jeszcze jednego diva,
który pomoże nam później w stylowaniu tego wszystkiego.
To jest nasz jeden element tutaj.
I nadamy teraz klasę, flex i już powinny się te elementy koło siebie ustawić.
Zróbmy sobie wysokość tego elementu na 32,
tak żeby obrazek też już wszystko nie rosło w nieskończoność.
Sprawdźmy sobie dokładnie czy ta wysokość jest odpowiednia.
Ja sobie sprawdzę wysokość tego obrazka.
To jest w naszym przypadku 128 pikseli.
Wróćmy do naszego designu i zobaczmy, ile
ten obrazek powinien mieć tak naprawdę wysokości.
Tu jest 119.
Poszukamy sobie, czy mamy taką arbitralną wartość tutaj bliską naszemu celowi.
119. Poszukajmy sobie 119.
Mamy 112 i 128, także nie ma dokładnie tego, czego szukamy.
Dlatego możemy sobie spokojnie tutaj nadać po prostu arbitralną wartość.
I tutaj nowość, którą wprowadzę.
Nie musisz korzystać z tych wartości, które są dostarczane przez Tailwind, ale bardzo
łatwo też możesz nadać swoją wielkość, czy to poprzez rozszerzenie konfiguracji,
czy to poprzez właśnie użycie takiej wartości w takich nawiasach kwadratowych.
I teraz ja wpisując 119 pikseli po prostu
nadaję wysokość danemu elementowi, którą będzie 119 pikseli.
Widzisz, to jest po prostu escape hatch, którym uciec i nie korzystać tylko i
wyłącznie z tych wartości, które są dane przez ten framework.
Ale możesz sobie
wykorzystywać swoje arbitary value takie jakie chcesz,
domyślne, jeżeli nie są dostępne dla Ciebie od razu przez twórców Tailwinda.
119 nie jest dostępne dlatego, że cały
framework generalnie opiera się na systemie ośmio/cztero pixelowym.
A wartość 119 nie jest dzielona przez 8,
dlatego też nie mamy jej domyślnie w systemie Tailwinda.
Dlatego użyjemy tutaj tej wartości.
Teraz przejdziemy do naszej strony,
natomiast obrazek powinien mieć już te 119 pikseli.
Sprawdźmy sobie to jeszcze.
Mamy 119 dokładnie wysokości.
Możemy nadać obrazkowi też klasę.
Jeszcze przydałoby się tutaj ALT, to dla czytników, dla osób niewidomych.
Powinniśmy dbać o takie rzeczy.
Dodatkowo tutaj zróbmy sobie klasę width na 1/3.
Bo generalnie obrazek powinien zajmować około jednej trzeciej szerokości całego
tego swojego wrappera tutaj, tak jak to jest w tym przypadku.
Jeżeli sobie włączymy tutaj
to, co nasz designer miał na myśli, to zobacz, że cały design jest podzielony
na 6, 1, 2, 3, 4, 5, 6 stripe'ów i obrazek zajmuje 2.
Czyli mamy jedną trzecią, a to tutaj powinno zajmować dwie trzecie
odległości, która jest dostępna na całej szerokości naszego elementu.
Wróćmy teraz do naszego stylowania.