Tailwind CSS: Wstęp do responsywności w TailwindCSS
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 przejdziemy do implementowania responsywnych styli na naszej stronie.
Póki co mamy tylko i wyłącznie widok
mobilny zaimplementowany, dlatego teraz warto, żebyśmy zajęli się
responsywnym designem. I jeżeli wejdziesz na dokumentację Tailwind CSS
to mamy tutaj responsywny design, specjalny dział, poświęcony właśnie temu.
I jak widzisz Tailwind, framework Tailwind ma domyślnie 5 breakpointów, z których możemy już korzystać.
My w tym kursie nie będziemy rozszerzać
konfiguracji, dodawać dodatkowych breakpointów, natomiast jeżeli
Cię to interesuje to jest to tutaj dosyć dobrze napisane
w jaki sposób możesz sobie rozszerzyć swój
team i w jaki sposób możesz sobie nadpisywać te breakpointy i tworzyć nowe.
Dla naszego przykładu skorzystamy sobie z
trzech podstawowych, które mamy. Mianowicie MD na 768 pikseli.
I jeszcze nasz designer dostarczył nam widok desktopowy na 1440, czyli wszystko
powyżej 1280 możemy sobie zaimplementować u nas w naszym projekcie.
Bardzo łatwo można implementować style
mobilne poprzez właśnie dodawanie takiego prefiksu.
W zależności od widoku, w którym
użytkownik naszej strony się znajduje, będą aplikowane poszczególne style.
I teraz przyjrzyjmy się naszemu projektowi
i temu w jaki sposób podejdziemy do rozwiązania tego zadania.
Bo póki co mamy tylko i wyłącznie ten widok z tymi sekcjami i nie myśleliśmy
tutaj o tym, jak sobie grupować, implementować to wszystko.
Teraz spojrzymy sobie troszeczkę z lotu ptaka na
ten projekt i zobaczymy style nie tylko na urządzenia mobilne, ale tablety i
urządzenia desktopowe, czyli większe ekrany. I na tablety
szerokość to jest 768, czyli dokładnie
taka szerokość jaką mamy tutaj, w tym breakpoincie MD.
Czyli będziemy stosować w naszym projekcie
breakpoint md, prefix md.
Natomiast tutaj mamy szerokość 1400
i to oznacza dla nas ni mniej ni więcej, że będziemy już powyżej XL,
będziemy łapać się w tym breakpoincie,
dlatego wszystko z prefiksem XL będzie
dotyczyło u nas w naszym projekcie widoku już desktopowego.
Spójrzmy teraz jak to wszystko jest zbudowane.
Otóż musimy sobie przeskoczyć dosyć
płynnie z widoku mobilnego na desktopowy i popatrz, że mamy tutaj kilka rzeczy.
Mamy tutaj zgrupowanych kilka sekcji z widoku mobilnego.
To pierwsze co teraz zaznaczyłem na czerwono.
To mamy tak naprawdę cztery sekcje.
Mamy pierwszą sekcję, którą myśmy
stworzyli na widoku mobilnym, czyli to, co, to co jest tutaj,
mamy w tym miejscu.
Później mamy następną sekcję z tymi newsami.
Tak naprawdę to jest ten numer 2, który stworzyliśmy na widok mobilny.
Potem tu po prawej stronie mamy czwartą sekcję, która została przez nas
stworzona i to jest ta tutaj poniżej, która znajduje się na dole ekranu.
I tutaj poniżej jeszcze jest wrzucony ten,
ta sekcja z reklamą. I mamy na widoku jakby desktopowym,
mamy dosyć skomplikowanego grida, tutaj
widzę, który będzie musiał odpowiednio ustawiać nam te elementy.
Dodatkowo jeszcze przejście pomiędzy widokiem mobilnym a desktopowym
to jest coś takiego, że tutaj mamy widoczne dwie kolumny, czyli pierwszy nasz,
pierwszy nasz element z widoku mobilnego i drugi nasz element z widoku mobilnego.
I tutaj poniżej mamy kolejne dwa elementy, które są jakby ustawione pod sobą.
To też nie jest trudne.
Natomiast musimy zwrócić uwagę na to, co
dzieje się tutaj, na tym najwyższym widoku.
I myślę, że warto, żebyśmy już na początku
zgrupowali sobie te pierwsze cztery elementy, czyli sekcję z głównym newsem.
Sekcję z tymi pobocznymi newsami, reklamę i opinie.
Żebyśmy to sobie zgrupowali jakby w jednego grida.
Dzięki czemu będzie nam tutaj dużo łatwiej sterować tymi elementami na stronie.
Dlatego przejdźmy teraz do, do kodu i spróbujemy zaimplementować te dwa widoki w
zależności właśnie od tych prefiksów, które będziemy używali.
Jeszcze dodatkowa rzecz, którą warto wspomnieć.
Mamy tutaj, Designer korzystał z grida, który jest 12 elementowy, czyli 12 kolumn.
I tak samo my sobie ustawimy naszego grida
na 12 kolumn, żeby móc dosyć łatwo rozmieszczać te elementy.
Zobacz ten element jest na 5 kolumn, ten, ta tutaj
sekcja, którą teraz zaznaczam też jest na 5 kolumn.
I ta tutaj ostatnia sekcja mamy na dwie kolumny.
I będzie nam, jeżeli będziemy mieli 12, 12 kolumnowego grida
dosyć łatwo będzie nam później rozmieszczać te elementy na naszej stronie
i uzyskać taki sam efekt jaki był tutaj zamierzony przez naszego designera.
Dlatego przejdźmy teraz do implementacji i przejdźmy sobie do kodu.
Zaczniemy sobie pisać logikę, która pozwoli nam uzyskać te widoki na
urządzeniach, na tabletach i na urządzeniach desktopowych.