Webflow: Style Komponentów

0:00Ok, wygląda na to, że w poprzedniej lekcji

0:01trochę się zapędziłem, ponieważ zrobiłem dwie Style Guide Section, czyli zarówno tekst jak i kolor w

0:07jednej sekcji, czyli wrzuciłem to wszystko do jednego kontenera.

0:11W związku z tym naprawiłem tę pomyłkę,

0:13skopiowałem sobie całe Style Guide Section i wyrzuciłem niepotrzebne elementy tak, żeby mieć dwie.

0:17Teraz tutaj mamy sekcję Color, tutaj mamy sekcję Typography i to jest potrzebne

0:23dlatego, że dla tej sekcji musimy nadać odpowiednią nazwę.

0:27Tutaj nie będzie Typography, ale Color.

0:29No i oczywiście podlinkujemy ją w

0:31odpowiednim miejscu z menu, czyli tutaj przejdziemy do sekcji Color.

0:35No właśnie tak to powinno być.

0:36Teraz możemy już stworzyć sobie kolejną sekcję, czyli jeszcze raz skopiuję i wkleję

0:41to. Następnie w ramach tego kontenera zostawię sobie tylko tytuł.

0:45Wszystkie kolory usunę stąd.

0:47One mogły też by być w jakimś pojedynczym kontenerze.

0:50Ale to jest struktura, która nas interesuje.

0:52I ta sekcja to będą komponenty (Components).

0:57Od razu podlinkuję to w dobrym miejscu do menu. Wybieramy Components i wchodzimy do środka,

1:04następnie zmieniamy nazwy, czyli ogólnie cały Heading 2,

1:07tutaj to będzie Components

1:09i będziemy mieli informację o tym, czym są komponenty na naszej stronie. To są takie

1:13podstawowe elementy, z których budujemy i będą to np.

1:17takie rzeczy jak Button'y, czyli stawiamy tutaj sekcję Buttons.

1:21Jeśli przejdziemy do naszej strony, do strony głównej, wybieramy polecenie Home, to

1:25okaże się, że na tej stronie głównej znajdują się już jakieś przyciski i to

1:29właśnie z nich będziemy chcieli skorzystać.

1:30Mamy jeden przycisk Button Big, który jest

1:33symbolem. Komponenty to są generalnie symbole, ale specjalnie nie użyłem tej

1:37samej nomenklatury co w Webflow dlatego, że niekoniecznie komponent musi być symbolem.

1:42Symbol przypominam w Webflow to jest coś co zamykamy jako taki Master symbol.

1:46Następnie wystawiamy jakieś właściwości, które da się łatwo zmieniać, a inne

1:50właściwości trzeba zmienić po wejściu do środka, do edycji takiego Master symbolu.

1:55Dzięki temu, że mamy Master symbol, reużywając jego instancji na poszczególnych podstronach,

1:59będziemy mogli zmienić to w jednym miejscu i zmieni się wszędzie.

2:02Natomiast sama idea komponentów moim zdaniem jest trochę szersza.

2:06Nie jest wcale powiedziane, że musimy mieć

2:09coś takiego jak symbol w Webflow, żeby coś było komponentem.

2:12Przykładowo mamy Feature block i moim

2:15zdaniem ta klasa jest na tyle uniwersalna, że to jest taki mały komponent, czyli nie

2:20musi to być zamknięte dodatkowo w symbol, ponieważ tutaj jeszcze mamy jakąś

2:24możliwość edycji tych elementów, nie musimy wcale zamykać części właściwości do edycji,

2:29żeby uznać, że jest to jakaś reużywalna część naszego systemu. Więc można powiedzieć, że

2:34komponenty są o tyle szersze co symbole w Webflow, że możemy tam mieć symbole, ale

2:39też takie uniwersalne klasy, uniwersalne jakieś kafelki, z których będziemy

2:43korzystać i wcale nie musimy ich zamykać w symbole.

2:46I powstaje tutaj w ogóle pytanie o sens symboli w Webflow.

2:49Czy w ogóle robić symbole czy nie. Są do tego różne podejścia,

2:51tak szczerze mówiąc, bo właśnie ten sam cel można osiągnąć wyłącznie na klasach.

2:55Natomiast symbole potrafią być pożyteczne,

2:57zwłaszcza dlatego, że jeżeli wystawimy naszą stronę do edycji dla osoby

3:01postronnej, to będzie ona miała jakieś uprawnienia,

3:04to w symbolach będzie mogła edytować tylko to co wystawimy, czyli tylko to co będzie

3:08tutaj. Nie będzie mogła zmienić wszystkich

3:10elementów. Natomiast jeśli nie będzie to symbol, będzie ona miała odpowiednio

3:13większe możliwości edycji, których nie możemy w ten sposób zawęzić.

3:17Także, czy będziemy mieli symbole, czy jakieś takie reużywalne bloki,

3:20Moim zdaniem to wszystko są komponenty.

3:22Więc w pierwszej kolejności możemy przejść do Style Guide'u i dodać w sekcji komponentów

3:28przyciski, które są symbolami, czyli wybieram a trzy razy i tutaj mam Button BIG.

3:33Następnie mogę jeszcze trzy razy wybrać kolejny Button i kolejny Button.

3:38Mamy takie trzy typy symboli dla Button'ów, ale

3:41dodatkowo, nie widzę problemu w tym, żeby przejść jeszcze na stronę główną i

3:45skopiować sobie ten Button, który co prawda nie jest symbolem, można go zamknąć w

3:49symbol, ale może nie ma wcale takiej potrzeby, skopiować go stąd i wrzucić też

3:53do Style Guide'a tak, żeby pojawiał się w sekcji Button'ów właśnie w tym miejscu. Jest

3:57on trochę inny, ponieważ ma cień, więc to nie jest do końca tak, że np.

4:01dostylujemy go tą klasą z naszym kolorem BG

4:03i będzie już dobrze wyglądał. Po prostu to jest inny rodzaj przycisku i wtedy możemy

4:08go spokojnie wrzucić sobie tutaj jako osobny komponent, więc mamy Button'y.

4:12Kolejna rzecz, którą zrobimy w ramach tych

4:15komponentów, to możemy sobie przykładowo zrobić Feature Blocks.

4:20Jeśli uznamy, że to są rzeczy, które moglibyśmy reużywać, to dlaczego by ich nie

4:25zrobić właśnie w ten sposób. Czyli możemy zrobić coś takiego jak znowu jakiś div,

4:31który będzie techniczny i możemy powiedzieć, że to jest komponent wrapper

4:37i do środka do tego komponent wrappera możemy wstawić to, co znajduje się w

4:43w sekcji Home. Skopiować sobie cały ten Feature block pierwszy, a następnie

4:48wrócić do Style Guide'u i wrzucić go dokładnie w to miejsce.

4:53Tutaj, wybieram ctrl + V

4:55i w ten sposób cały nasz Style Guide staje się dużo bardziej pojemny.

4:59Dużo, więcej rzeczy możemy stąd pożyczyć.

5:01Jedyny problem jaki tu jest to, że nie mamy jakiś odpowiednich odstępów, ale to też

5:05właśnie dlatego wrzuciłem to w Component wrappery,

5:07teraz mogę dla takich Component wrapper'ów ustawić sobie np.

5:10margines z góry i z dołu.

5:12W zasadzie w te same Component wrapper'y

5:14można było zamknąć przyciski, czyli zrobimy

5:17tutaj technicznego div bloka, któremu nadamy tę samą klasę Component wrapper.

5:21Teraz powielimy to jeszcze trzy razy i powrzucamy przyciski do środka,

5:26do Component wrapper'ów. Można to zrobić stąd albo można to zrobić też chyba trochę

5:30łatwiej stąd, czyli pierwszy, to będzie drugi przycisk,

5:34to będzie trzeci stan disabled i to będzie

5:36czwarty. W ten sposób mamy przyciski w osobnych liniach i w Component wrapperze, który

5:40dodatkowo ma jakiś margines. Gdybyśmy potrzebowali to zrobić np.

5:43tu, też możemy powkładać to w jakieś Component wrappery i w ten sposób te rzeczy będą

5:48rozsunięte, jeżeli potrzebujemy więcej przestrzeni w ramach Style Guide'u.

5:52No dobra to mamy następny element,

5:55czyli Feature block'i. Co jeszcze powinniśmy zrobić?

5:57Myślę, że na przykład możemy skorzystać z

6:00tych FAQ item'ów, które znajdują się na stronie głównej.

6:03I tak samo zrobić sobie Submenu block, czyli

6:06tutaj FAQ item'y one co prawda znów nie są komponentami, ale są takim elementem, który

6:11może być reużywalny, dodatkowo one działają, fajnie się rozwijają, więc mają jakąś

6:16funkcjonalność i to jest właśnie dobry pomysł, żeby cały taki FAQ item sobie stąd

6:20pożyczyć i przejść do Style Guide'a, a następnie zrobić dla niego nawet osobną sekcję.

6:27FAQ item wklejam tutaj

6:30z pomocą cmd+V no i teraz warto się zastanowić nad jedną rzeczą - czym w

6:34ogóle są komponenty, gdzie przestać, gdzie postawić kropkę

6:38w dodawaniu rozmaitych komponentów.

6:39Oczywiście możesz dodać masę różnych

6:41rzeczy, ale jeżeli kochasz Atomic design to tutaj powinny rzeczywiście znaleźć się

6:46takie molekuły, nie całe zestawy, czyli jakby atomy połączone ze sobą, czyli mamy np.

6:52tekst połączony z jakimś tłem, który tworzy guzik.

6:54Jest to jakaś molekuła, natomiast większe całości, czyli już systemy, layout'y,

7:00nie powinny się tutaj znaleźć i chciałbym na to stworzyć kolejną sekcję, a dobrym

7:05rozróżnieniem, które mogę Ci pokazać jest na stronie głównej menu.

7:08No, bo możemy się zastanawiać, czy to menu powinno być całe jednym, dużym komponentem.

7:13Moim zdaniem nie powinno być komponentem, który wstawimy do Style Guide'u do sekcji Components.

7:19To co mogłoby być komponentem, który możemy wstawić, to jest np.

7:23jakaś taka dropdown lista albo ewentualnie

7:25ten element, który właśnie mamy zrobiony jako symbol, czyli ten element

7:31Submenu block. To jest naprawdę dobry pomysł na to, żeby ten Submenu block jako element

7:36właśnie menu wstawić do Style Guide'a, do sekcji komponentów. Zróbmy może to

7:41i zrobię na niego kolejny nagłówek, nazwę go Submenu block.

7:46Dokładnie tak.

7:50Wstawię do Submenu block dokładnie ten symbol.

7:53Zobacz jak on wygląda i to nie jest całe menu.

7:56To jest tylko jego element, który co prawda działa, w jakiś sposób jest funkcjonalny.

8:01Natomiast jest to element menu.

8:03Ale całe menu też fajnie by było wstawić,

8:06natomiast nie do tej sekcji Components. Potrzebowalibyśmy stworzyć kolejną Style Guide

8:11Section, czyli klikamy cmd+C, cmd+V i to jest właśnie coś co nazwę Sections.

8:18I w Sections upewnimy się, że też nadamy odpowiedni identyfikator, z małej litery

8:24pisane sections i podlinkujemy to do Menu.

8:28I tutaj będą właśnie całe takie moduły, czyli, najpierw usuńmy wszystko co mamy

8:34poniżej H3, czyli przykładowo cały Footer, cały Header, cały jakiś Footer alternatywny

8:40czy Header alternatywny, który będziemy tworzyli dla bloga właśnie znajdzie się w sekcji.

8:44Jeśli wybierzesz a w Webflow, to też masz tutaj coś takiego jak symbole, gdzie

8:48tworzymy pojedyncze symbole i też masz layout'y.

8:51No i właśnie to jest to rozróżnienie, czyli

8:53sekcje to będą bardziej layouty, które mogą składać się np.

8:56z kilku symboli naraz albo z jednego symbolu

8:59i z jakiegoś dodatkowego akapitu tekstu czy z nagłówka.

9:02Więc to będą layout'y i ja to nazywam sekcjami.

9:05Możesz to też nazwać Layouts.

9:07I to będą całe bloki reużywalne, takie jak np.

9:10menu czy footer. Natomiast w komponentach będą rzeczywiście mniejsze elementy całości,

9:15które mogą się przydać również poza tymi sankcjami, poza layout'ami.

9:19Mam nadzieję, że rozumiesz tę subtelną, ale

9:21jednak różnicę. Dodajmy tutaj jeszcze opis właściwy do sekcji.

9:26I pierwsza rzecz, którą możemy zrobić to możemy tutaj np.

9:29dodać cały Header Seciton, który moim zdaniem

9:32jest to coś co może wylądować w tym miejscu.

9:34Jeśli przejdziemy do symboli to mamy tutaj Header Section, mamy 5

9:38instancji takiego symbolu na stronie i wydaje mi się, że on właśnie bardziej

9:41pasuje jednak do sekcji. To jest jakaś część naszej strony, jakaś taka sekcja

9:45naszej strony, która składa się z kilku niezależnych elementów, aniżeli do

9:49komponentów, które tworzą jakąś taką jedną zgraną całość.

9:51Natomiast no chyba jeszcze prostsze rozróżnienie jest właśnie wtedy, kiedy

9:55dodamy tutaj header and footer czyli header zrobimy sobie.

9:59Idziemy teraz na stronę Home, a następnie weźmiemy stąd nasz header albo sam navbar.

10:05Możemy to zrobić w ten sposób, że

10:07weźmiemy samo menu, a następnie przejdziemy do Style Guide'u i wkleimy je w odpowiednią

10:12część, czyli tutaj pod header footer, po prostu wrzucimy sobie navbar.

10:16I już jest widoczny.

10:18I jeszcze wrócimy po footer, czyli przechodzę do Home.

10:21Jak widziałeś Header nie był symbolem,

10:24natomiast footer, z tego co pamiętam jest symbolem, rzeczywiście. W zasadzie

10:28naprawdę nie ma to większej różnicy. Jedyna

10:31sprawa fajna to taka, że z symboli będziemy mogli korzystać z tego panelu, czyli footer

10:35bardzo łatwo wstawić na jakąś inną stronę po prostu stąd. W przypadku header'a będziemy

10:40musieli się udać do tej strony Style Guide i następnie go skopiować i wkleić,

10:45aczkolwiek niektórych elementów tak jak np.

10:47naszego header'a nie można zrobić w postaci symbolu, ponieważ on już zawiera w

10:51środku symbole, a nie można jednego symbolu wkładać w inne.

10:53Więc tutaj akurat pozostaje nam taka opcja. Natomiast w przypadku footer'a będziemy mieli

10:58trochę inny problem, mianowicie nie można jednego kontenera wstawić w drugi.

11:02Gdybym chciał teraz do tej sekcji wkleić

11:04footer, to mamy informację o tym, że jednej sekcji nie można wstawić w drugą.

11:09Więc to, co robimy, to po prostu

11:10przechodzimy do body i wklejamy to tu. Zostanie to po prostu wklejone poza sekcją,

11:14nie ma problemu. Na dole to zawiera inną sekcję, więc po prostu nie można tego

11:18połączyć razem, ale jest i jest gotowe do tego, żeby

11:21zaznaczyć sobie taki element skopiować go i przerzucić, gdzie indziej, więc

11:25w ten prosty sposób stworzyliśmy funkcjonalny Style Guide. Ten Style Guide będzie

11:30naszym repozytorium elementów, kolorów, nagłówków, jednocześnie ostylowaliśmy,

11:35stworzyliśmy wiele klas, które będą reużywalne w kolejnych częściach layout'u.

11:39No i dodatkowo ten Style Guide oczywiście też jest stroną,, która jest wystawiona.

11:43Możemy go komuś wysłać, ktoś może sobie

11:45przejść do sekcji Color i zobaczyć wszystkie nasze brand kolory.

11:48Jeżeli będzie chciał to może skopiować wartość szesnastkową.

11:51Może zerknąć sobie do komponentów, może przykładowo zobaczyć nawet efekty Hover,

11:55może zobaczyć jak działają animacje na tych poszczególnych elementach, może

11:59zobaczyć efekt rozwijania FAQ item'a, więc to wszystko jest żyjące i to działa.

12:03W momencie, gdy będziemy to edytować tutaj

12:05będzie też automatycznie zmieniać się na poszczególnych podstronach naszej witryny, no

12:10oczywiście pod warunkiem, że nie zmienimy, nie odepniemy tego z symboli i nie pozmieniamy

12:15klas, które stworzyliśmy tutaj w Style Guidzie.

12:18Co prawda nasza strona nie jest jakaś bardzo rozbudowana, nie ma np.

12:23wielu pól formularza, które też powinny się

12:25znaleźć w takim Style Guidzie i ich stylów oraz różnych elementów, ale

12:29wydaje mi się, że stworzenie ich i dodanie tutaj byłoby już powtarzalną czynnością.

12:34Bardziej chodziło mi o to, żebyś zrozumiał to jak taki Style Guide może funkcjonować i

12:38zrozumiał jego wartość, że teraz mamy wszystkie elementy w jednym

12:43miejscu, możemy je kopiować i wklejać na poszczególne podstrony.

12:46Natomiast zmiana tutaj pozwoli nam to zmienić wszędzie.

12:49Może to też być początek takiego Style Guide'a,

12:52który będziesz używał nawet razem z zespołem do tego, żeby utrzymywać strukturę

12:56twoich projektów i żeby ta struktura była zgodna z ewoluującym

13:00Brand book'iem czy jakimiś wytycznymi,

13:03jakimiś stylami dla Twojej firmy, dla twojego projektu.

13:06Na razie nie ma możliwości współdzielić

13:08takich Style Guide'ów pomiędzy różnymi projektami w Webflow.

13:11To byłoby na pewno ciekawe.

13:13Możemy na pewno coś takiego udostępnić i

13:15pracować nad tym w zespole, z pomocą tej opcji udostępniania projektu.

13:19Czyli mamy możliwość zaproszenia osób,

13:21które będą razem z nami współtworzyć taki Style Guide.

13:24Natomiast nie ma możliwości zrobienia osobnego Style Guide'u

13:27i później np.

13:29podlinkowania go do całego konta Webflow albo szeregu projektów w Webflow.

13:33To jak to się odbywa, będziemy musieli dalej skopiować wszystkie rzeczy, które

13:36tutaj są, ale możemy to zrobić nawet stąd, na zasadzie copy-paste.

13:40Możemy sobie wszystko skopiować i wkleić do

13:42nowego projektu, do nowego Page'a Style Guide.

13:46Tyle, że wtedy niestety zmiana kolorów wymaga zmiany we wszystkich Style Guide'ach

13:51jeśli mamy różne projekty, aczkolwiek

13:53szczerze mówiąc, to też w tym momencie chyba nie stanowi, aż tak dużego problemu.

13:57Ciekawą opcją jest też możliwość udostępnienia komuś linku do Designera.

14:01Możemy stworzyć taki link i wybrać polecenie copy, a następnie go komuś

14:05wysłać i wtedy nie tylko w takim widoku na stronie, czyli po prostu pod adresem.

14:11W ten sposób będzie można przeglądać sobie taki Style Guide, ale można będzie również zobaczyć go

14:17w Designerze, czyli zobaczyć rozmaite właściwości elementów.

14:20To jest zwłaszcza przydatne dla webdeweloperów, którzy mogą zobaczyć taki przygotowany przez Ciebie

14:24Style Guide i skopiować sobie jakieś właściwości np.

14:27do aplikacji natywnych, czy jakiegoś innego projektu, który tworzą, ale niekoniecznie będą w

14:32stanie cokolwiek popsuć, ponieważ osoby które nie są zaproszone z pomocą tego

14:37invite link'u będą miały tylko tryb "view only", więc to jest kolejna fajna opcja.

14:42Jednocześnie wszystko co chciałem

14:44powiedzieć na temat tworzenia Style Guide'u, który być może będzie ewoluował w

14:48kolejnych etapach w jakiś design system, który będziesz tworzył w Webflow.

14:52Do usłyszenia.