Strony WWW z SystemFlow: Typografia

SystemFlow 1.0+

0:00W tej lekcji chciałbym porozmawiać o typografii system Flow i o tym, jak

0:03dostosować ją oraz zmieniać swoje ustawienia i swoje fonty.

0:06Przede wszystkim, jeśli przejdziesz do ustawień projektu, w zakładce Font

0:10znajduje się lista fontów, z których korzystasz.

0:12I jeśli chcesz dodać do swojego projektu jakiś niestandardowy font, możesz zrobić

0:16to na kilka sposobów, korzystając z Google Fonts.

0:18My korzystamy z Ponta Interes Google Fonts i jeśli nie chcesz go używać, to po prostu

0:23wybierz Divi i dodaj tutaj swój własny font.

0:25Możesz także wgrać swój własny font TdF albo WFF z pomocą tej funkcji Upload.

0:31A jeśli korzystasz z Adobe Fonts, możesz

0:33tutaj wkleić swój API token i uzyskać dostęp do kolekcji fontów na Google Fonts.

0:39Bez problemu możesz później te fonty zastosować w system Flow, ponieważ

0:43wystarczy, że zaznaczysz w Navigator Body na dowolnej stronie.

0:47Następnie przejdziesz do selektora i wybierzesz Body Pages.

0:51I to jest właśnie miejsce, w którym

0:52zmieniamy globalne, najważniejsze ustawienia dla naszych fontów.

0:56To znaczy, że tutaj w sekcji typografii, bo to nas najbardziej interesuje, możesz

0:59teraz wybrać font, który dodałeś sobie, albo dodać inne fonty.

1:03Stąd to przekieruje nas właśnie do tego

1:05miejsca, które pokazywałem przed chwilą w ustawieniach.

1:07Ale teraz zmieniając font zobacz, że jesteśmy, mamy.

1:11Zmieniamy font we wszystkich elementach w ramach całego frameworka.

1:15Więc jeśli wybrałbym konsoleta Teraz

1:17traktuję ten font jako bazowe i on jest we wszystkich tutaj elementach nagłówkach.

1:22I teraz możemy dopiero zacząć wpisywać ten font np.

1:25specyficznymi ustawieniami dla konkretnych

1:28nagłówków czy dla konkretnych typów body tekstu.

1:31Następnie zerknij, że tutaj mamy też ustawiony kolor tekstu, który jest kolorem

1:35bazowym dla tej klasy pages, a także rozmiar tekstu.

1:40Za chwilę do rozmiaru tekstu wrócę, gdy będziemy mówić o jego zaawansowanych

1:43ustawieniach, ale proszę zwróć uwagę na to, że rozmiar jest domyślnie ustawiony na

1:471 rem, a także wysokość linii na półtora rema.

1:51I to będzie ważne w kontekście kolejnych informacji na temat wielkości tekstu.

1:55Tymczasem gdybym chciał teraz zmienić i nadpisać np.

2:00konkretny nagłówek, to mogę go zaznaczyć i

2:03widzę, że dla tego nagłówka została zastosowana klasa Height XL.

2:06Teraz mogę nadpisać ustawienia tej klasy,

2:09a wszystkie rzeczy, które są ustawione dla tej konkretnej klasy height XL

2:13w panelu Web podświetlają się na niebiesko, więc margines górny oraz dolny

2:18został specyficznie ustawiony dla head XXL.

2:21Tak samo font weight na 700 bold oraz rozmiar i wysokość i per linii.

2:26Natomiast te właściwości, które są na

2:28pomarańczowo są zmienione, ale są one dziedziczone z innych miejsc, np.

2:33jeśli kliknę na font, to jest on

2:34dziedziczony z body pages i to właśnie pozwala nam jedną zmianą w Body Old Pages

2:39zmienić wszystkie teksty, dlatego, że właśnie ten font jest tutaj dziedziczony.

2:44Natomiast jeśli ja zmieniłbym font dla tego konkretnego nagłówka i dla niego

2:48wybrał przykładowo Inter, to już zmieni się na niebiesko.

2:51No i to znaczy, że napisałem to ustawienie z body Pages tylko dla nagłówka typu XL.

2:57Jeśli cofnę tą zmianę i teraz np.

3:00na chwilę usunę tę klasę, bo mogę tak zrobić Simów klas, to mamy taką strukturę,

3:04że wszystkie nagłówki zaczynają się od Helsing, później mam S, M, L, XL, XXL też.

3:09Jeśli bym zmienił tą klasę head i np.

3:12zastosował dla niej inny font czyli przykładowo Inter.

3:16Zwróć uwagę, że zmodyfikowałem teraz wszystkie nagłówki.

3:19Dobrze by było jeszcze do tego nagłówka

3:21ponownie zastosować klasę XL, żeby było to zgodne z frameworkiem.

3:25Natomiast jak widzisz ten font Inter teraz jest dziedziczony niezbyt old pages tylko

3:31Zhejiang i w ten sposób zmodyfikowaliśmy ustawienia wszystkich nagłówków.

3:34Podobnie moglibyśmy np.

3:36zrobić z body tekstem.

3:37Mamy trzy wersje body tekstu Large, medium

3:40oraz Small i one bazują na bardzo podobnej zasadzie, czyli body.

3:44Tekst jest podstawową wyjściową klasę, a następnie dodajemy kombo klasę typu small.

3:49Więc modyfikacja tego body tekstu może się odbywać na tej klasie s ml,

3:54albo możemy ją na chwilę usunąć i zmodyfikować samym body text, albo.

3:57Trzecim miejscem najmniej ważnym w tym

4:00przypadku będzie modyfikacja fontów w miejscu body Pages.

4:04Skąd w tym momencie on pochodzi?

4:05Wracając jeszcze na chwilę do nagłówków,

4:07możesz zastanawiać się, dlaczego nadaliśmy im konkretne klasy head xml padding elem

4:13zamiast przejść do ustawień i po prostu modyfikować typ nagłówka, a

4:18następnie w stylach korzystać wyłącznie z takiej ogólnej klasy o API Helix.

4:24Moglibyśmy rzeczywiście to zrobić i

4:25sformatować wszystkie nagłówki tą klasą, ale i wtedy zmienić dla nich style.

4:31Jednak taki zabieg, gdzie mamy np.

4:33Healing ML i XL jest bardziej wygodne, ponieważ może pozwolić nam odróżnić

4:40samą strukturę HTML a i to jak chcemy, aby ten element był ważny np.

4:44dla robota interesującego wyszukiwarki od jego wyglądu.

4:48To znaczy, że gdybyśmy chcieli coś wyświetlić dużymi literami np.

4:52w postaci Head XL, ale jednak nie jest to ważne dla robota,

4:56to możemy w każdej chwili teraz przejść i powiedzieć, że to jest nagłówek.

4:59Tego typu i to absolutnie nic nie zmieni jeśli chodzi o jego wyświetlanie, bo nadal

5:04ważna jest ta klasa head XML, którą formatuje ten nagłówek.

5:09W ten sposób mamy oczywiście podpinane wszystkie nagłówki.

5:12To jest nagłówek 1, to jest nagłówek, 2 to 3, 4, 5 i odpowiednio 6.

5:17Ale jeśli chcesz, możesz zmienić typy tych

5:20nagłówków w zależności od tego, jak struktury zmieniasz treść na stronie.

5:23OK, to jest prosta zmiana tych właściwości tekstu za pomocą strony Custom size, czyli

5:30ustawienie body tekstu w pierwszej kolejności, czyli Global font, a następnie

5:34zmiana nagłówków oraz analogicznie body tekstu.

5:37Teraz przenieśmy się do części

5:38zaawansowanej, gdzie znajdują się wszystkie te rzeczy i jeszcze więcej, a

5:42jest to na specjalnej stronie Stargate, która nazywa się typografii.

5:46Na tej stronie znajdziesz wszystkie

5:47nagłówki i body text to co pokazywałem wcześniej, ale także np.

5:50komponent Rich Text i jeszcze kilka innych rzeczy, które zaraz omówię.

5:54Natomiast przejdźmy jeszcze do tej skali topograficznej.

5:57Tutaj znajdują się przykłady komponentów,

6:00które stworzyliśmy odpowiednio dla każdego z nagłówków.

6:03W związku z tym, jeżeli będziesz chciał dodać do Twojej strony nagłówek czy body

6:07text, możesz to zrobić też za pomocą komponentu.

6:09To oznacza, że nie musisz wchodzić w Add

6:13Web, następnie dodawać head, Następnie dlatego head określać Settings.

6:19Czy to ma być H1, H2 czy np.

6:21h3 i kolejno jeszcze dodawać tutaj klasę link a następnie np.

6:28Combo klasę XL.

6:30I to było trochę kliknięć pozwoliło mi uzyskać Healing XL.

6:34Zamiast tego możesz tak naprawdę przejść

6:36sobie do wyszukiwarki, wpisać tutaj healing i mamy H1 head XL w postaci

6:42symbolu czy tam jakieś inne, które chcemy sobie wybrać.

6:45Ja chcę wybrać XL i go wstawić.

6:47I od razu jest wstawiony.

6:49Dodatkowo jako override ma tekst, który

6:53możemy tutaj wyświetlić, więc można łatwo nadpisać treść tego nagłówka.

6:56Nie trzeba go nawet od niego wybrać.

6:58No i on jest już w środku sformatowany tą naszą odpowiednią klasą.

7:01W razie potrzeby możemy go jeszcze od linkować i edytować.

7:04Ja teraz ten element usunę.

7:06Warto zapamiętać, że właśnie to jest

7:08alternatywny sposób na dodawanie elementów i raczej nie korzystajmy z tego menu.

7:12Add Web Flow Można to zrobić zawsze za

7:15pomocą wyszukiwania Kolejny element, który znajduje się na podstronie typografii.

7:19Jest to element typu reach text i jeśli wejdziemy do środka to ten element typu

7:23reach text to jest właśnie specjalny komponent Web Flow,

7:26który pozwala nam oscylować jakąś specyficzną część naszego serwisu.

7:31Przykładowo, jeśli robimy bloga i cały interfejs bloga ma mieć określone

7:36nagłówki, określamy body text, natomiast artykuły chcemy sformatować inaczej.

7:40I wtedy właśnie dla artykułów możemy użyć

7:43sobie tego tekstu, ponieważ struktura w tekście i style dla nagłówków,

7:48akapitów, wszystkiego w zasadzie co znajdzie się w środku jest zupełnie

7:52odrębna niż struktura stylów dla naszej głównej strony.

7:54To znaczy, że możesz pomyśleć o osobnym

7:57pliku CSS, który jest dedykowany wyłącznie dla tego elementu read text i możemy

8:02zmieniać go na tej zasadzie, że wchodzimy w dowolny element.

8:05Tutaj następnie selektor, że w stylu

8:07wybieramy otagowane links, czyli formatuje my teraz wszystkie nagłówki, ale uwaga

8:13te nagłówki będą sformatowane tylko w kontekście tego naszego rich tekstu.

8:18Jeśli klikniemy tutaj na mały plus, to

8:20mamy next selektor i informacja o tym, że jeśli ten nagłówek AGE będzie w

8:27wewnątrz takiego pola rich text, to wtedy ma przyjąć takie i takie style.

8:31I właśnie w ten sposób dodajemy style do elementu rich text.

8:34Tutaj możemy zupełnie inaczej sformatować te rzeczy, które znajdują się w tekście.

8:40Zmiany, które tutaj wstawimy będą miały zastosowanie wyłącznie do tych elementów

8:44rich text i nie wpłyną na wszystkie inne elementy w ramach naszego frameworku.

8:49Więc tak stylu merge text.

8:51Następnie mamy kilka ciekawych dodatkowych rzeczy, które możemy wykorzystać.

8:55Przykładowo komponent Line, który możemy łatwo użyć.

8:58Cały taki tekst wrapper, czyli przykładowa struktura z fajnym nagłówkiem

9:04typu child, tekstem typu medium i dwoma przyciskami.

9:07Kolejny komponent

9:09podobny, ale w centrum danych i w końcu mamy listy, z których możemy skorzystać.

9:14I znów tutaj sugestia jest taka, żeby nie

9:17korzystać z tych list, które możemy dodać za pomocą panelu Add i tutaj sobie np.

9:23dodać list item, tylko właśnie korzystać z wyszukiwarki Command.

9:28Wpisujemy any order list i wtedy wrzucamy tą listę jako symbol.

9:33Dlaczego? Ponieważ po prostu będzie ona miała

9:36automatycznie odziedziczone wszystkie klasy, które znajdują się w środku, więc

9:40będzie ona spójna jeśli chodzi o framework i taki taki list items.

9:44Jeśli chcemy sterować globalnie na

9:46frameworku, będziemy mogli przez celować właśnie w tym miejscu.

9:49Później mamy listę, uporządkowaną listę z ikonami i to też jest ciekawe, bo

9:54korzystając z listy z ikonami i mogę ją tutaj sobie może wrzucić List Icons.

10:01Czyli an order listy bez ikon symbol.

10:04I od razu otwierają nam się łatwo dostępne override, m.in. możemy podmienić ikonę.

10:08Tutaj wystarczy podać nazwę ikony z Material Design np.

10:11zmienić check na lock i już mamy kółeczka.

10:14Mamy też możliwość podmiany tych trzech list itemów.

10:17A gdybyśmy potrzebowali podmienić więcej

10:19list itemów to po zmianie ikony po prostu od ink of an link instance.

10:24No i oczywiście możemy łatwo te itemy

10:26teraz dodawać poprzez kopiowanie i wklejanie.

10:29No i poza tym usunę teraz tą listę.

10:31Mamy też kilka klas do element czyli wyrównania

10:36te all wyrówna do lewej czyli text align center do środka, TR do prawej i tr j.

10:43Wyniósł to nam taki tekst, więc te klasy można sobie użyć np.

10:47na końcu pola tekstowego gdzie mamy paragrafy.

10:49I tutaj jako ostatni selektor combo klasa możemy użyć np.

10:53T, a L.

10:54I to wszystko jeśli chodzi o podstawowe komponenty i ustawienia tekstu, ale w

10:57kolejnej lekcji porozmawiamy jeszcze o rozmiarach tekstu.