Strony WWW z SystemFlow: Style i Tokeny

SystemFlow 1.0+

0:00Kolejną bardzo ważną rzeczą w ramach naszego frameworku w firmie są tokeny.

0:04Podobnie jak ma to miejsce w Web Flow.

0:07Mamy tutaj zapisane i zapamiętane style dla kolorów, a także style dla tekstu.

0:12Dodatkowo w filmie mamy możliwość jeszcze zapisywania stylów dla efektów, aczkolwiek

0:17jak na razie nie mamy ich zbyt dużo, bo mamy tylko pojedynczy card shadow, który

0:20jest standardowym cieniem, który można łatwo nałożyć.

0:23I mamy jeszcze style dla GRID u, które są zdefiniowane tylko na 12 kolumn dla

0:28desktopu, ale być może się to zmieni i dodamy tutaj więcej stylów.

0:31Na razie więcej nie było potrzebne, ale

0:34to co jest ważne to oczywiście style tekstu oraz style kolorów.

0:37Jak dostać się do tej tabeli?

0:39Po prostu musimy kliknąć się z aktualnej selekcji.

0:41Jeśli mamy coś zaznaczone, nie będzie to widoczne, bo mamy tutaj właściwości tego

0:45elementu, więc od klikniemy się na szare tło i wtedy wszystkie style będą widoczne.

0:50Mamy np. style dla body tekstu, mamy style

0:53nagłówków, mamy style inne i pokrywa się to w całości z tym co mamy w łeb.

0:58Czyli przykładowo dla stylów tekstu mamy styl XML.

1:01Teraz możemy przejść do jego edycji,

1:03wyedytować sobie ten styl i zobaczyć, że ten styl to jest Inter Bold 38 44 piksele.

1:09Co się zgadza z tym przeliczenie dla

1:11kremów, o których mówiłem w odpowiedniej lekcji dla web Flow.

1:14Tutaj nie korzystamy z jednostek Remy,

1:17korzystamy z Pixeli i wybieramy właśnie tej wielkości w

1:20pikselach, które później w razie zmiany należy przeliczyć łatwo i pokażę to w tej

1:25lekcji, w której będę pokazywał jak przenieść rzeczy z firmy Flow.

1:29Tymczasem właśnie tutaj mamy ustawienia dla tego stylu tekstu.

1:32Jeśli chcielibyśmy go edytować, możemy to zrobić.

1:35Jeżeli zmieniłbym to np.

1:36na 42, to nagłówki zmienią mi się na

1:39przestrzeni całego Stargate czy na przestrzeni całego System Flow.

1:43Mogę to robić również z poziomu

1:46poszczególnych elementów, czyli z poziomu np.

1:48nagłówków. Teraz zaznaczyłem nagłówek.

1:51Widzę, że tutaj w środku mam styl zrobiony jako head XML, czyli muszę wejść aż do

1:58środka aż do tego tekstu i mam healing X ustawiony jako styl.

2:03Mogę go odłączyć, nie chcę tego robić.

2:05Chcę, żeby wszystkie moje style tutaj były uwzględnione.

2:08I teraz jak edytować taki styl?

2:10Wystarczy, że kliknę na niego, zobaczysz, że mogę przełączyć się

2:13pomiędzy inne style, ale mogę też wybrać tą opcję edytowania.

2:17Czyli jeśli chcemy edytować style nagłówków np.

2:20możemy to zrobić też z poziomu bieżącego nagłówka i łatwo stąd można to edytować.

2:25Albo drugi sposób tak jak powiedziałem

2:27kliknąć sobie na puste miejsce i znaleźć tu odpowiedni styl.

2:31Teraz, jeśli stworzyli byśmy np.

2:33ramkę tekstową i rozpoczęli pisać, to automatycznie ta ramka tekstowa dziedziczy

2:37ostatni styl, który mieliśmy zaznaczone, czyli w naszym przypadku padding XL.

2:42Gdybyśmy jednak takiego stylu nie mieli, czyli stworzyli sobie ramkę tekstową z

2:46takim dowolnym jakimś tekstem, odetniemy ten styl raz jeszcze.

2:49OK, teraz chyba się udało.

2:51To oczywiście możemy dowolny tekst, który

2:55tutaj stworzymy przerobić na taki nagłówek klikając na te małe cztery kropeczki

3:00style, a następnie wybierając odpowiedni styl np.

3:03link XML, możemy wpisać XML i

3:06automatycznie zaaplikować ten styl do zaznaczonego fragmentu tekstu.

3:11W lekcji praktycznej będę pokazywał Ci też Batch killer, który pozwala na bardzo

3:15łatwe, bardzo łatwą zmianę wszystkich typów tekstu i również zmianę font

3:19wewnątrz Sigmy na inny font w obrębie całego system Flow.

3:24Można to zrobić w kilka kliknięć i pokażę rzeczywiście w tej lekcji praktycznej.

3:28Natomiast tutaj chcę, żebyś nauczył się eksplorować style, a także je zmieniać.

3:33I to dotyczy zarówno stylów dla tekstu, jak i stylów kolorów.

3:37Zwróć proszę uwagę na to, że wszystkie

3:39kolory są też tutaj dostępne i jest to kalka 1:1 tego, co znajduje się web.

3:46Mamy tutaj kolory typu primary, mamy kolor

3:49główny primary, który ja zresztą zmieniłem.

3:51Możemy wyedytować go i właśnie zmienić ten

3:54kolor z tego poziomu w momencie, gdy go zmienimy.

3:57Może zerknijmy na jakąś sekcję, w której

3:59znajduje się więcej tego koloru, czyli wszystkie te sekcje Hero.

4:03I teraz spróbujmy wyedytować ten kolor raz jeszcze.

4:07Zmieńmy go na jakiś kolor zielony

4:10i zobacz, że wszystkie elementy korzystają właśnie z tego konkretnego stylu.

4:16W momencie, gdy go zmienimy, to zmieniają się również wszystkie kolory.

4:19Jak to się dzieje, że te elementy korzystają z tego stylu?

4:22Wystarczy kliknąć np.

4:24Commander przez kontrolę na pececie, aby wejść do najgłębiej zagnieżdżone go

4:28elementu w firmie i zobaczysz, że ten konkretny main button medium

4:32używa właśnie jako koloru wypełnienia tego koloru Primary 60.

4:36Jak w związku z tym nadać taki kolor innym elementom, które będziemy tworzyć np.

4:40stworzymy sobie jakiś kwadrat i ma on w tym momencie kolor wypełnienia

4:44szary dokładnie tak, jak robiliśmy to w przypadku stylów tekstu.

4:48Też mamy cztery kropki, które pozwalają

4:50nam wejść do styli i możemy albo wpisać sobie np.

4:53primary to bardzo szybko znajdziemy kolor,

4:56o który nam chodzi, albo skorzystać właśnie z tej listy.

5:00I mamy tutaj podzielone kolory, sekcje, primary, secondary, sekcje itd.

5:04Możemy łatwo wybrać stąd kolor.

5:06No i jest to teraz zrobione tym stylem secondary 50.

5:09Jeśli w edytujemy ten styl czy to w tym

5:12miejscu, czy to nawet z tego miejsca, przechodząc do tego konkretnego koloru.

5:16Prawy przycisk myszy Wybierając polecenie Edit Tile i zmieniając kolor zmienimy

5:21wszystkie instancje, które z tego koloru korzystają.

5:24Czy zmienimy cały ten kolor secondary?

5:26I w ten sposób wszystkie elementy, które

5:28były tym kolorem, z tym kolorem podlinkowane będą teraz wyglądać inaczej.

5:33Więc tak wyglądają style tekstu oraz style kolorów.

5:37Jeśli chodzi o te specyficzne style dla Sigmy, to mamy jeszcze efekty dla kart.

5:41Czyli jeśli stworzyliśmy sobie jakiś

5:43element, któremu chcemy nadać cień, możemy to zrobić stylami efektów.

5:48Tutaj znajduje się karta Shadow. Taki delikatny cień.

5:50Być może tych efektów będzie więcej, jak

5:52również mamy grid tile i jeśli korzystali byśmy to też w tym praktycznym.

5:58Jakby stworzyć tutaj

6:01layout przykładowo dla Mac Booka i czyli dla desktopu i chcielibyśmy

6:05ustawić dla niego grid to możemy dodać layout grid, który jest już w ramach

6:09naszych stylów i jest to 12 kolumnowy grid.

6:12Większość komponentów System Flow pasuje

6:15po prostu do tego grida, więc gdybyśmy chcieli z nich korzystać, może wybierzmy

6:19jakieś karty, czyli Card i wybierzmy może trzy razy dwa,

6:24to zobaczysz, że ustawiając to w odpowiedni sposób będziemy

6:28mieli elementy w ramach tych kart dopasowane do glinu.

6:31Tak samo mamy tutaj.

6:33Wszystko jest dopasowane do tego i tak właśnie system flow był budowany.

6:36W ten sposób możemy zarządzać stylami, a

6:39także je nakładać na poszczególne elementy.

6:42To wszystko w tej lekcji. Dziękuję Ci za uwagę.

6:44Do usłyszenia.