Tailwind CSS: Header i dodawanie globalnego fontu

0:00Widzimy, że mamy tutaj font, font crimson text, dodatkowy font,

0:04kolejny font, który nie jest fontem domyślnym, systemowym.

0:07Jest fontem darmowym, który zostanie też

0:09dołączony do materiałów dodatkowych w tym kursie.

0:12Zachęcam Cię teraz zainstaluj sobie

0:14tę czcionkę w swoim systemie, tak żebyśmy mogli na tej samej zasadzie co

0:18poprzednio tutaj na zasadzie tego fontu Chomsky,

0:22żebyśmy mogli też rozszerzyć swoją paletę fontów dostępnych, żebyśmy mogli używać

0:26tego fontu jako nowy font w naszej aplikacji.

0:29Taka ciekawostka.

0:30Jeżeli chcesz spauzuj sobie to wideo, spróbuj sobie zrobić samemu.

0:33Zainstaluj sobie najpierw font.

0:34Potem spróbuj rozszerzyć tę paletę i zobacz, czy jesteś w stanie aplikować

0:38klasę Font Crimson Text w zależności jak ją sobie tutaj nazwiesz do swojej aplikacji.

0:44Dodatkowo, dodatkowy tip jak widzisz ten

0:46font to jest jakby domyślny font całej aplikacji, czyli spokojnie możesz nadać to

0:50jako domyślny font na całe body w swoim pliku html.

0:55Nie powinno być to dużym błędem w tym momencie.

0:57Ja teraz przechodzę do implementacji.

1:00Potrzebujemy rozszerzyć naszą rodzinę fontów o nowy font, nazwijmy to Crimson.

1:06I teraz zamieńmy sobie font'a na całym naszym Body Crimson.

1:11Zapiszemy sobie te zmiany.

1:13Przejdźmy do naszej aplikacji i już widzisz, font zmienił się w całej naszej aplikacji.

1:17Tu oczywiście nie, no bo Selector jest dokładniejszy w headerze.

1:19Mamy dokładnie zaznaczony header.

1:23Dokładniejszy selektor CSS oznacza ni

1:25mniej ni więcej, że po prostu ten font, który mamy tutaj

1:29na tą h1 to jest ostateczny font, który będzie nadany temu elementowi.

1:34Dlatego też nawet, że nadaliśmy font Crimson na body to i tak tutaj mamy

1:40dokładniejszy selektor na H1 i po prostu ten font nadpisze ten główny w całej

1:44aplikacji, czyli gdziekolwiek teraz będzie jakiś inny font, możemy sobie to

1:48swobodnie nadawać, a w całej naszej aplikacji

1:51jako domyślny font będziemy mieli Crimson Text.

1:54Przejdźmy teraz z powrotem.

1:55Zobaczmy jaka wielkość jest tutaj tej h1 i tego p.

1:59H1 ma 24 piksele.

2:01Wróćmy sobie do implementacji.

2:03Ja tutaj schowam ten header, h1.

2:06Zauważ jeszcze jedną rzecz, że domyślnie

2:09Tailwind CSS, ja sobie to powiększa znowu na 200%,

2:13domyślnie Tailwind CSS, zobacz mamy h2 i p w ogóle

2:17tak naprawdę te napisy się nie różnią, prawda?

2:19Chodzi o to, że domyślnie framework Tailwind CSS resetuje wszystkie domyślne style

2:24przeglądarki, tak żebyśmy zawsze zaczynali z czystą kartką, żebyśmy mieli pełną

2:28kontrolę nad tym, co się dzieje tutaj na naszym wirtualnym płótnie.

2:32Dlatego teraz możesz sobie tutaj nadać na H2 klasę,

2:35na pewno wszystkie headery są pogrubione, dlatego możemy sobie zrobić font bold, font bold.

2:42Już mamy zmianę widoczną na naszym ekranie.

2:44Teraz tekst, jaka wartość będzie odpowiadała 24 pikselom?

2:48Poszukajmy sobie. Mamy text-2xl, 24 piksele.

2:51Tu już mamy tekst zmieniony na 24 piksele.

2:54Teraz skupmy się na tym tekście, który mamy poniżej.

2:57I tutaj mamy 16 pikseli, czyli

2:59domyślny text regular.

3:00Co potrzebujemy to zmienić

3:02kolor. Mamy 1818b i to jest jeden z kolorów z palety zinc, i to jest 900.

3:07I to jest też domyślny kolor dla całej aplikacji dla tekstu.

3:11Dlatego możemy sobie zrobić spokojnie

3:13tutaj na naszym body, zaznaczyć tekst zinc-900.

3:19To będzie domyślny kolor tekstu na naszej stronie i teraz wszystkie teksty na naszej

3:22stronie domyślnie będą miały tekst zinc-900.

3:25Jeżeli sobie sprawdzimy tutaj ten element,

3:27zobaczmy klasy I mamy, 1818b, czyli nadaliśmy sobie domyślny kolor

3:35dla naszej całej aplikacji na wszystkie teksty.

3:37Natomiast wróćmy, sprawdźmy czy to jest ten sam kolor tutaj.

3:40Tak, to są te same kolory, tylko wyłącznie font się różni.

3:44Dlatego tak naprawdę prace na ten pierwszy element prawie mamy skończoną.

3:47Jeżeli jeszcze nam brakuje tutaj tego

3:49elementu poniżej, który mamy, czyli Continue reading.

3:52Zróbmy sobie teraz ten link, ja sobie tutaj sobie zwinę h2, zwiniemy sobie p.

3:57I tutaj stworzymy sobie nowy element,

3:59to będzie link.

4:00Dajmy na razie #Continuereading.

4:03Teraz musimy odpowiednio ostylować ten element.

4:05Przejdźmy do naszego designu.

4:07Zobaczymy jak to jest ostylowane.

4:08Na pewno mamy italic, na pewno mamy bold.

4:11Wielkość jest domyślna, czyli nie musimy

4:13tutaj nic zmieniać. Crimson Text to też jest domyślny font dla naszej aplikacji.

4:17No to przejdźmy sobie tutaj class=italic,

4:22font-bold, zróbmy sobie bold albo semi-bold. Zróbmy sobie bold na początek.

4:27Zapiszemy.

4:30Zobaczmy jak to będzie wyglądało w naszym designie.

4:33No już jest ok i teraz potrzebujemy

4:35jeszcze na pewno odsunąć to tutaj od tej krawędzi u góry.

4:38Ja sobie narysuję znowu kwadracik.

4:40To jest wielkość dwadzieścia osiem.

4:44Zobaczymy, czy mamy taką wielkość dostępną w systemie Tailwind.

4:49To jest margin top i szukamy 28 pikseli.

4:52Jest mt=7 dokładnie.

4:54Zapiszemy sobie to, sprawdzimy naszą stronę i,

4:57no nie odsunęło się.

4:59Dlaczego? Dlatego, że a jest elementem liniowym, czyli musimy go

5:03zamienić na element blokowy na naszej stronie, żeby móc nadać mu margines.

5:07Dlatego tutaj Tailwind też przychodzi nam z pomocą

5:10mamy klasę block, która zamienia display elementu A na blokowy.

5:14Zapiszemy sobie. Już w tym momencie usunęliśmy sobie nasz link

5:17troszeczkę niżej. Zobaczmy, czy nie jest troszeczkę jednak za nisko.

5:21Porównamy sobie te dwa design'y.

5:23Tak, myślę, że jest ten margin. Jest troszeczkę za.

5:25Myślę, że margin 4 jest lepszym rozwiązaniem w tym przypadku.

5:30No i tak mamy tak naprawdę pierwszą sekcję.

5:32Jeszcze potrzebujemy tutaj zrobić

5:34odległości pomiędzy tym tytułem i tym tekstem.

5:37Przejdźmy sobie do naszej, do naszego designu.

5:39Sprawdźmy sobie ile wynoszą dokładnie te odległości.

5:42Znowu narysujemy kwadracik.

5:44Tutaj mam wysokość 24,

5:46a tutaj pomiędzy tym tekstem i tym będzie wysokość 16. 24 na top, 16 na bottom.

5:53Przejdźmy do naszego H2.

5:54Tu mamy font bold i text-2xl nadane na chwilę obecną.

5:59Weźmy sobie margin top,

6:00szukamy 24, czyli mt=6, 6x4 mamy 24.

6:04I margin bottom 16, czyli 4.

6:10Zapisujemy sobie tę wartość.

6:12Jak widzisz udało nam się dokładnie odwzorować tutaj za pomocą utility classes

6:15i frameworka Tailwind CSS to co na myśli miał nasz designer.

6:19Widzisz, nie napisaliśmy tak naprawdę żadnej linijki kodu.

6:23Udało nam się rozszerzyć tylko i wyłącznie

6:25paletę naszych fontów, które używamy na naszej stronie.

6:28Tak szybko mogliśmy sobie iterować,

6:30zbudować dokładnie taki wygląd, o jaki nam chodziło.

6:34O jaki naszemu designerowi chodziło.

6:36Teraz przejdziemy sobie do implementowania kolejnych elementów na tej stronie.

6:40Otóż zostało nam jeszcze kilka rzeczy i następną z nich będzie właśnie ta sekcja

6:44tutaj linków do następnych artykułów wartych przeczytania.