Webflow: Ustawienia Style Guide

0:00Witaj w części kursu, w której chciałbym

0:02powiedzieć Ci jak przygotować Style Guide, czyli zestaw komponentów, zestaw

0:07informacji na temat stylów typograficznych, kolorów i wszystkich innych rzeczy na

0:10naszej stronie. Robimy to w dwojakim celu: po pierwsze dlatego, że chcielibyśmy, aby było

0:16jedno wspólne miejsce gdzie możemy wyedytować np.

0:19wszystkie nagłówki typu h1, h2 i h3,

0:22a nie żebyśmy musieli robić to na każdej podstronie z osobna.

0:25Sam CSS oczywiście działa w ten sposób, że

0:27jeżeli będziemy stosować spójne nazwy klas czyli nomenklaturę, która pozwoli nam

0:31te same klasy stosować na różnych podstronach, będziemy mieli style uwspólnione.

0:36Natomiast rolą Style Guide'u jest także to, aby

0:39po pierwsze wszystko było w jednym miejscu i reużywalne, a po drugie, żebyśmy

0:45taki Style Guide mogli zastosować na nieograniczonej ilości podstron, mieć łatwą referencję do tego jak

0:49wyglądają klasy, jak wyglądają symbole w naszym projekcie i finalnie w konsekwencji

0:54może się on rozwijać w kierunku takiego kompletnego Designu Systemu, z którego

0:59będzie korzystać cały nasz zespół, który będzie żyjący, będziemy go edytować.

1:03No i dzięki Webflow możemy stworzyć taki Style Guide, który od razu jest Style Guidem html-owym, czyli

1:08ma wpływ bezpośrednio na to jak wyglądają i prezentują się elementy na stronie. Ja w

1:13jednym z poprzednich kursów zacząłem go tworzyć.

1:15Stworzyłem osobną, stateczną stronę, którą nazwałem Style Guide

1:19i pokazałem, że to właśnie tutaj warto umieścić takie rzeczy jak np.

1:22symbole. No, ale my teraz chcemy ten Style Guide rozbudować, m.in. dlatego, że w kolejnych

1:28sekcjach tego kursu będziemy tworzyć następne podstrony. W momencie, gdy masz jedną

1:32podstronę gotową i zastanawiasz się nad stworzeniem kolejnych.

1:36To właśnie jest bardzo dobry moment, aby wszystko uporządkować w ramach Style Guide'u, bo później

1:40budowanie kolejnych podstron będzie opierało się na wykorzystywaniu tych klocków i

1:45będziemy zawsze mogli w Style Guidzie znaleźć referencje do tego co

1:49potrzebujemy. Jak taki Style Guide przygotować?

1:51Otóż w Webflow potrzebujemy zrobić kilka

1:54rzeczy, które sprawią, że nasz Style Guide będzie uporządkowany.

1:58Na razie to sub menu blok stąd po prostu usunę.

2:00Mam czyste body i zaczynamy od zera.

2:03Tworzę tutaj pierwszy element i może to

2:05być nawet dowolny element konstrukcyjny, taki jak div blok, ponieważ chciałbym do niego

2:10do środka wrzucić nawigację. Czyli przechodzimy do sekcji components,

2:13tutaj znajduję navbar'a i wrzucam navbar'a.

2:16W miejsce brand, logo, będę chciał wstawić obrazek z logo.

2:20Czyli przejdźmy do a, wstawmy tutaj obrazek, wybieram polecenie image

2:25i jako obrazek wybiorę jeden z logotypów, który mam tutaj wgrany.

2:29To będzie ten. Kolejnym dobrym pomysłem, aby wyrównać wszystkie elementy w menu.

2:33Będzie taka sztuczka, gdzie do kontenera wrzucę sobie konstrukcyjny div blok i wewnątrz tego

2:38div bloku umieszczę wszystkie jego elementy, czyli wszystkie elementy menu.

2:42Zarówno nav menu jak i brand

2:44i teraz na ten div blok nadam klasę menu, którą mam przygotowaną i ta klasa menu po prostu

2:51ustawia wszystko na display flex i wyrównuje w ten sposób.

2:54Teraz możemy jeszcze, aha teraz jeszcze zmieńmy oczywiście kolejność tych rzeczy,

2:58brand i nav menu w ten sposób. No i, jeśli chodzi o sam navbar, ustawię dla niego kolor tła

3:05jako białe. On będzie sobie jeździł po stronie, więc powinien być zafiksowany, więc cały ten

3:09div blok, w którego go wsadziłem, mogę mu nadać klasę np.

3:13fixed i upewnię się, że w sekcji position mam

3:17fixed, a następnie wyrównam to w ten sposób. No i mamy zrobione menu. Ono będzie sobie

3:22ładnie jeździć na stronie i będzie zawsze wyświetlało się na górze.

3:26Teraz zrobimy jeszcze jakąś taką główną

3:28sekcję, czyli dodam element sekcji i ten element będzie pod samym menu, więc

3:34nie chcę żeby był w menu, chcę go stąd wyjąć.

3:37Mamy to menu zrobione teraz mamy sekcję, którą możemy nazwać na przykład Style Guide

3:44Hero Section.

3:47Taka sekcja będzie właśnie sygnalizowała na swą klasę, że odnosi się tylko do Style Guide'a,

3:53do środka standardowo, prawie zawsze to robię w Webflow wrzucam kontener, żeby centrował mi

3:57elementy i zostawię taką główną strukturę tych sekcji, będę je kopiował.

4:02Dlatego do środka, do tego kontenera, wstawię kolejny element, kolejny div blok, to

4:08będzie element, który nazwę Style Guide Hero, to już będzie właściwa treść. Czyli Style Guide Hero

4:13to będzie w zasadzie element, który będzie zawierał tylko tło, a do środka wstawię

4:18jeszcze jeden div blok, który będzie zawierał Text Wrapper, mogę go nazwać.

4:25Będzie to nagłówek typu pierwszego i wrzucę jeszcze do niego akapit, czyli

4:30Paragraph. Dla całej Style Guide Hero Section zrobimy marginesy od góry i od dołu np.

4:37około 100 pikseli.

4:39I teraz jeszcze chciałbym zrobić tak, jeśli chodzi o Style Guide Hero to

4:43wrzucimy tutaj tło i zaokrąglone krawędzie, czyli ten element będzie miał białe tło,

4:50a także zaokrąglimy border radius na 12

4:54I dodatkowo zrobimy tutaj padding, zróbmy go z alt'em

4:59i z shift'em, zrobimy około 50 z każdej strony. Ok, myślę że tak jest w porządku.

5:05Ogólnie cały kontener będę chciał rozciągnąć trochę w widoku. Tutaj jest dużo

5:09miejsca po lewej i prawej i w przypadku Style Guide'a nie muszę tego miejsca

5:12jakoś specjalnie oszczędzać, więc możemy tutaj wybrać sobie max width i np.

5:18wpisać 1200, a w tej rozdzielczości np.

5:201280. OK już wygląda to dużo lepiej. Jeszcze został nam ten Text Wrapper do ostylowania i

5:26ten Text Wrapper będzie centrował nam cały tekst, więc jako spacing możemy wybrać

5:32po prostu tę małą ikonkę, ona ustawi nam marginesy na auto, będzie to

5:36wyśrodkowane, a dodatkowo wstawimy sobie szerokość tego elementu np.

5:40zadeklarujemy ją na 50 proc. i

5:42wycentrujemy tekst z pomocą opcji

5:45wyrównania. Teraz wstawimy tutaj nazwę Style Guide, a także opis, że celem tego

5:50Style Guide'u jest zrobienie po prostu bardzo przejrzystego, jednego miejsca, gdzie

5:54będziemy mieli dostęp do wszystkich naszych assetów, zasobów.

5:57I jeszcze jedna rzecz, którą chciałbym zrobić, to jest rzucimy tutaj cień, czyli przejdę do

6:02box shadows i wrzucimy cień w ten sposób, który będzie miał tutaj właściwości 20, 30

6:10rozmycia i wybierzemy dla niego kolor o przezroczystości na przykład 5 czy 6.

6:17Taki duży cień. No i super, mamy nagłówek i menu naszego Style Guide'u i teraz zrobimy dla

6:22niego kolejne sekcje, czyli zrobimy tak, Style Guide Hero Section,

6:26powielimy sobie, usunę tę klasę - remove class i to będzie po prostu Style Guide Section.

6:33Style Guide Section,

6:35Już bez Hero.

6:37Dodatkowo w środku mamy kontener i Style Guide Hero,

6:40to też sobie usuniemy i wybieram remove class, a zamiast tego wpiszę Style Guide Title albo

6:48Section Title.

6:52I tutaj będziemy mieli już, możemy bez

6:55Text Wrappera, ale wrzucić nagłówek typu, może nie pierwszego tylko,

6:59typu drugiego, a także akapit. Text Wrapper mogę usunąć. I to będzie jakaś struktura dla

7:06każdych kolejnych nagłówków sekcji. Czyli przykładowo gdybyśmy mieli tutaj

7:10sekcję z typografią to ten nagłówek nazwali byśmy Typography napisalibyśmy tutaj,

7:17że typografia pomaga nam zorganizować hierarchię na naszej stronie i dodatkowo jedna rzecz,

7:22dodanie tego, tej sekcji, do menu, czyli tutaj dodalibyśmy Typography,

7:28w ten sposób i linkowali do tej sekcji, czyli

7:32sekcję Style Guide Section tą moglibyśmy dodatkowo opatrzyć identyfikatorem.

7:37Byłby to identyfikator Typography.

7:43I do tego identyfikatora linkowalibyśmy stąd,

7:46czyli przejdźmy do ustawień. Będziemy

7:48linkować do sekcji na stronie i będzie to sekcja Typography.

7:52I tak będziemy tworzyć kolejne sekcje.

7:55Następną sekcją będzie Color, więc mogę ją

7:57tutaj od razu umieścić i kolejną sekcją będzie Components.

8:02Tutaj będą wszystkie nasze komponenty.

8:04Skopiuję sobie jeszcze jeden nav linc, oczywiście ten nasz Style Guide

8:07może się rozrastać w miarę jak będziemy umieszczali tu elementy, ale

8:11ja jeszcze zrobię tylko jedną zakładkę, czyli Sections.

8:14Będą to sekcje takie jak footer czy nawigacja.

8:17No i pod tym Style Guide Section zrobimy sobie jeszcze

8:22taki nagłówek typu trzeciego, ja go wrzucę po prostu tutaj pod spodem

8:27Heading 3. Ten Heading 3 będzie dość specyficzny, więc

8:31nazwijmy go Style Guide h3 albo h3 Styleguide.

8:35Wrzućmy go do tego kontenera do contentu,

8:39w ten sposób, ale zmieńmy kolejność i nadajmy mu pewne specyficzne style.

8:44Może zrobimy sobie tutaj font DM sans.

8:49Wybierzemy dla niego grubość 400 Normal.

8:53Wielkość to będzie 16.

8:55Zrobimy 32 wysokość linii.

8:58Następnie zrobimy go kapitalikami, czyli

9:01wybierzemy tę opcję capitalize i dodatkowo chciałbym rozstrzelić ten tekst.

9:06W związku z tym, w jego ustawieniach, wybiorę jeszcze dwa piksele letter spacing.

9:10Na dole zrobimy linię grubości jednego

9:12piksela, wybierzmy kolor ten nasz Midnight Blue, a także typ Solid.

9:18I będzie to zorganizowane w ten sposób, czyli w to miejsce np.

9:22wpiszemy HEADINGS i będą poniżej się

9:25znajdowały wszystkie nasze nagłówki, czyli mamy najpierw nazwę sekcji, a później mamy

9:30nazwę konkretnego elementu, który będzie zawarty w Typography i będą tutaj pod spodem,

9:35poniżej, wszystkie nagłówki i mając taką

9:38strukturę jestem gotowy do tego, żeby zacząć tworzyć Style Guide, bo po prostu poszczególne

9:42Style Guide Section będę sobie kopiował, wklejał, wklejał, wklejał i tu będę miał kolory, tu będę miał komponenty itd.

9:47To wszystko całkiem nieźle wygląda.

9:50Możemy przejść do kolejnej lekcji, gdzie rozpoczniemy od typografii.