Strony WWW z SystemFlow: Dokumentacja

SystemFlow 1.0+

0:00O dokumentacji System Flow, dlaczego ona jest ważna i jak z niej korzystać?

0:03Przede wszystkim jeśli wejdziesz na system Flow.

0:05Co tutaj znajdziesz?

0:07W głównym menu wersję dokumentacji, która dotyczy najnowszego systemu.

0:12Po kliknięciu na Box przeniesiesz się do

0:14dokumentacji tej najnowszej, bieżącej wersji frameworka.

0:18Więc jeśli chciałbyś skorzystać z

0:19dokumentacji dla wcześniejszych wersji, bo na tej wersji np.

0:23stworzyłeś wcześniej kiedyś swoją stronę,

0:25albo chcesz nie masz update'u i chcesz właśnie doczytać dokumentację dotyczącą

0:30tej wersji, którą posiadasz, to polecam przejść do changelog.

0:34Część jest tutaj na samym dole w folderze i dostęp do changelog gwarantuje przede

0:39wszystkim informacje o wszystkich AppData, które wydajemy razem z krótkimi filmikami,

0:43w których omawiamy nowości i w kolejnej wersji System Flow.

0:47Co się zmieniło?

0:48Co jest poprawione i wszystkie inne rzeczy się tutaj też

0:51znajdują, ale znajdziesz też w Change logu linki do starszej wersji System Flow, tzn.

0:59jeśli wydaliśmy np.

1:00wersję 1.0 to tutaj znajduje się dokumentacja do tej wersji poprzedniej

1:051.0, więc stąd możesz przejść do tej poprzedniej wersji dokumentacji.

1:10Jeśli chodzi o samą dokumentację, to jest ona podzielona na trzy sekcje.

1:15Sekcja po lewej stronie obejmuje cały spis treści, wszystkie zagadnienia, które.

1:19Wszystkie rzeczy, które znajdują się w System Flow.

1:21Na górze są informacje o tej konkretnej zakładce, no i pod spodem cała

1:25konkretna treść zakładki, w której się znajdujemy, czyli właśnie tutaj.

1:29Akurat w sekcji Overview mamy wszystkie

1:31linki do tych rzeczy, które znajdują się też po lewej stronie.

1:34Taka sekcja jest podzielona na

1:36taby i to po prostu scroll do dolnych sekcji do dalszych sekcji, czyli np.

1:41do template ów.

1:41I wszystko zachowujemy się tutaj bezpośrednio do template.

1:45No i mamy też stronę Introduction, gdzie znajdziesz takie wprowadzenie do System

1:48Flow również tutorial, aczkolwiek w tym materiale uczysz się wszystkiego.

1:51Listen Resources Polecam przeczytać naszą

1:54licencję, ponieważ korzystając z niej z nią gadasz i

1:57mamy też sekcję, gdzie będziemy dodawali różne ciekawe zasoby.

2:01Postaramy się zdobyć też szereg różnych zniżek, które będą obowiązywać np.

2:05na ilustracje, czyli na sety, które mógłbyś wykorzystać.

2:09Teraz w sekcji Design znajduje się typografii kolor Space Icons, czyli

2:13zaczynając od typografii mamy tutaj wszystkie klasy dotyczące typografii.

2:17Jeśli chcemy korzystać z typografii, to korzystamy z odpowiedniej klasy, a

2:20następnie mamy combo class, którą możemy użyć, czyli mamy np.

2:24klasa HAVING i decydujemy później combo klasą, który reading chcemy wybrać.

2:29Tutaj te linki są domyślnie ustawione na konkretne wartości,

2:33przeliczone jeśli chodzi o piksele i pokazane jak się prezentują.

2:37Natomiast jeśli oczywiście je pozmieniać

2:39to będą one miały inne wartości w systemie.

2:41Tego nauczymy się później.

2:42Następnie mamy tekst Komponenty, czyli

2:44tekst komponent jak on wygląda Kolejno tag line, extra, upper

2:49i te rzeczy oczywiście można już wykorzystać w reflow.

2:52Jeśli chcesz skorzystać z jakiejkolwiek

2:54rzeczy, która znajduje się w dokumentacji, po prostu klikasz na nazwę tej rzeczy

3:00i w tym momencie jest ona skopiowana do schowka.

3:03Wystarczy użyć skrótu Command i wstawić taki element.

3:07Czyli jeśli jesteśmy w naszym frameworku na stronie głównej na stronie głównej.

3:11Zresztą od razu można zaznaczyć sobie tą sekcję pierwszą i ją usunąć.

3:15To jest tylko informacyjna sekcja na

3:17stronie home, natomiast nie usuwamy tej tego custom kod.

3:21On musi być na każdej stronie.

3:23Można ustawić się na body, wybrać Command

3:25command V, wstawić to co mamy w schowku i automatycznie ten element dokumentacji,

3:31który sobie tutaj kliknę jest wstawiany bezpośrednio.

3:35Web jest już funkcjonalny na naszej stronie.

3:37Także w ten prosty sposób można używać tych wszystkich rzeczy.

3:40Natomiast sekcji Design głównie będziesz poruszał się po to, żeby zapamiętać nazwy

3:43klas, albo przypomnieć sobie nazwy klas, np.

3:46klasy dotyczące kolorów.

3:48Zauważ, że mamy tutaj taką nomenklaturę.

3:50C od konkretnej sekcji kolor, później B to

3:54będzie kolor background i później neutral 10, 20 itd.

3:58Jeśli chodzi o kolory tekstu to one mają

4:01podobną po lewej schemat czyli C jak kolor, później T jak tekst.

4:04No i też mamy kolejno te same kolory, które są w palecie naszej kolorystycznej.

4:09O tym będę jeszcze oczywiście mówił.

4:10Znów klasy dotyczące sparingu zaczynają się od S, czyli z passing.

4:14Później mamy padding lub margin np. .

4:17I później mamy np.

4:18oś Y, czyli pionowe odstępy góra i dół oś X, czyli poziome lewo i prawo.

4:23Mamy też top right, bottom left, margin i odpowiednią wartość.

4:26To jest oczywiście tylko przykład.

4:28Natomiast tych wartości jest bardzo dużo i warto się z nimi zapoznać.

4:32Kolejna sekcja to komponenty.

4:33Komponenty to np.

4:35przyciski down, konsumpcyjna w menu itd.

4:39I można znowu kliknąć na przycisk po to, żeby z niego skorzystać.

4:43Ważne jest to, że w sekcji komponentów na

4:45ogół znajduje się specjalna sekcja Custom list i to jest często sekcja, od której

4:50chciałbyś pewnie zacząć, czyli zmienić wygląd konkretnych przycisków.

4:55Na razie nie będę tego pokazywał, bo

4:56zrobimy to w jednej z kolejnych lekcji, ale pamiętaj, że komponenty.

5:00Mają tam sekcję customizacji, która to

5:02pozwala Ci wyedytować poszczególne elementy, poszczególne rzeczy np.

5:08padding dla przycisku, wielkość tekstu, border radius.

5:11Jeśli to zmienisz tutaj w tym miejscu, to we wszystkich przyciskach w Twoim w

5:15obrębie frameworku te zmiany zostaną uwzględnione.

5:18I następnym razem jak będziesz korzystał z takiego komponentu czyli kopiował sobie

5:22go z tąd no to on już będzie oczywiście miał np.

5:25większy tekst czy zaokrąglone krawędzie.

5:27A to właśnie robimy w tej sekcji custom.

5:29Następnie mamy linki w komponenty.

5:31O nich będę jeszcze mówił w osobnej lekcji.

5:33Są to komponenty, kawałki kodu, które np.

5:36odliczają nam czas i inne takie fajne

5:38rzeczy, których instrukcję tutaj znajdziesz.

5:41Nawigacja drop down w menu.

5:44Oczywiście my będziemy dodawać szereg

5:46komponentów tutaj, więc to nie jest ich ostateczna lista.

5:48To co jest fajne to to, że oczywiście to

5:50wszystko działa, bo jest już taką żyjącą dokumentacją

5:53i ta dokumentacja, którą przeglądasz w tym momencie jest dokumentacją domyślną.

5:58System flow natomiast w momencie, gdy Ty będziesz zmieniać np.

6:01kolory, zaokrąglenia krawędzi itd.

6:03Będziesz automatycznie generował swoją

6:05własną wersję takiej dokumentacji Web Flow.

6:08To znaczy, że wszystko to jest odwzorowane

6:11w web flow na stronach, które znajdują się w sekcji Steal Guides.

6:14Dokładnie to samo Introduction over listening typografii kolor.

6:18Więc jeśli przeszli byśmy tutaj np.

6:21do sekcji z batonami z przyciskami

6:24podobnie jak mieliśmy tam, to zobacz, że nawet znajduje się tutaj to samo menu

6:30i te przyciski można edytować też w sekcji w sekcji Custom size.

6:35Natomiast jeśli pracujesz z tym takim standardem wewnątrz system flow,

6:40to najczęściej nie potrzebujesz tutaj tego menu obok i polecam Ci je wyłączyć.

6:46W sekcji Custom Size można przejść do ustawienia, które

6:50znajduje się tutaj na dole dokumentacji lib.

6:54I teraz jeśli to zaznaczysz to zobaczysz, że jest coś takiego

6:58jak Set display dx suite textbox display property to on jest text

7:02block tu height można to zaznaczyć i po prostu display ustawić na none.

7:09Później oczywiście możesz wrócić i to odkryć w dowolnej chwili.

7:12Natomiast jeśli to zrobisz to już po wszystkich tych stronach.

7:15Jeśli wrócę np.

7:15do Button, nie będę miał rzeczy przeszkadzających mi w łeb, albo jeśli

7:19tutaj pracuję jestem tym schematem, więc nie mam opisów.

7:22Nie mam tego menu po lewej stronie już mam

7:24wszystkie komponenty, które bardzo łatwo np.

7:26.

7:26Stąd mogę po prostu zaznaczyć w Command C, skopiować i wstawić wkleić na stronę.

7:31Czyli jest to alternatywna metoda pracy do tej metody, którą pokazałem Ci tutaj,

7:35gdzie poruszamy się potem i po prostu kopiujemy.

7:38Natomiast nic nie stoi na przeszkodzie, żebyś tak stworzony swój system flow,

7:43swoją wersję frameworka, swoją wersję dokumentacji opublikował.

7:47I wtedy warto jest jednak przejść do tej

7:49strony custom size i tutaj odkryć to dokumentacji.

7:54Czyli przejdźmy do raz jeszcze i wybierzmy Display na Block.

7:58Następnie opublikujemy nasz projekt.

8:01Jeśli teraz przeniesiemy się do np.

8:03jakiejś jednej ze stron dokumentacji i

8:05przykładowo strony kolor, to z jej poziomu możemy przejść teraz do tej podstrony.

8:10I to już jest wersja Twoja dokumentacji.

8:12Jeśli kolory będą inne u Ciebie, to będą tutaj odzwierciedlone.

8:16Przykładowo, jeśli zmienisz wygląd

8:18jakiegoś guzika, czyli tekstylia, to tutaj już będą te docelowe.

8:23To jest dokumentacja już tego konkretnego Twojego projektu.

8:26Można ją łatwo komuś później udostępnić.

8:28Można także z niej korzystać właśnie przy

8:31budowaniu kolejnych elementów strony, bo dokładnie będziesz wiedział już jak one

8:34wyglądają i tam możesz skopiować nazwę, a następnie do designera przechodzić sobie w

8:38command e, wklejać i tam korzystać z takich elementów.

8:41Poza tymi molekuł ami i atomami, które tutaj mamy, mamy także całe gotowe

8:46organizmy, czyli template, poczynając od Barra.

8:49Oczywiście te wszystkie rzeczy są

8:51wyposażone w te atomy, które widzieliśmy wyżej, czyli np.

8:55nasz bar będzie się składał z logo, będzie

8:57się składał, zrobi down, o którym wcześniej będzie się składał z batonów,

9:01footer, będzie się składał z jakichś importów itd.

9:03Ale to już są gotowe poskładane komponenty template, które możesz wykorzystać.

9:07I zrobiliśmy mnóstwo takich template ów, np.

9:10Hiro.

9:10Sekcje całe gotowe, z których można korzystać i one oczywiście

9:14wszystkie osadzone są w ramach frameworku, więc zmiana kolorów, zmiana fontów

9:18daje rezultat taki, że wszystkie one się zmieniają.

9:21W każdym razie to jest kilka wariantów dokumentacji.

9:24Jak możesz z nich korzystać.

9:25Możesz korzystać z nich ze strony System Flow.

9:27Możesz korzystać z Change Loga, aby zobaczyć je do poprzednich wersji.

9:30Pamiętaj jednak, że pracując System Flow

9:33dokumentacja jest także publikowana per projekt i najlepiej gdybyś korzystał z tej

9:38dokumentacji Twojego projektu, która zmienia się przy publikowaniu.

9:41Jest najbardziej aktualną wersją, która

9:43pozwoli Ci zobaczyć jakie komponenty masz do dyspozycji, a także szybko użyć je w

9:47łeb z pomocą skrótu, którego który pokazałem.

9:50To wszystko w tej poglądowej lekcji dokumentacji.

9:53Do usłyszenia już za chwilę.