Strony WWW z SystemFlow: Strona Customize

SystemFlow 1.0+

0:00Przygodę z systemem Flow warto rozpocząć od eksplorowania strony Customers.

0:03Jest to prosta strona, która zawiera

0:05jedynie podstawowe ustawienia frameworku, ale za to są one fajnie przedstawione, a

0:10po prawej stronie znajduje się rezultat tego, jak będą wyglądały zmiany, które

0:15wprowadzimy do frameworku za pomocą strony Custom, tzn.

0:19i wyłączy na moment podgląd element bez krawędzi elementów.

0:24To po lewej stronie znajduje się taka sekcja, gdzie będziemy mogli ustawić sobie

0:28podstawowe parametry fontów, typografii, tekstu i przejdziemy przez ten przez to

0:33ustawienia, a po prawej stronie będziemy mogli podejrzeć jak by to mogło wyglądać.

0:37Na przykładowej stronie zbudowanej

0:39przez system Flow mamy kilka takich prostych komponentów, z których

0:43korzystamy i one będą się zmieniać w zależności od tego co ustawimy w custom.

0:48A więc po pierwsze mamy możliwość zmiany typografii.

0:51Jeśli chodzi o typografię, to Global Font ustawiamy na Body old Pages.

0:56To znaczy, że przechodzimy najpierw do body.

0:59Następnie wybieramy selektor body pages i w tym momencie jesteśmy gotowi do tego,

1:05żeby zmienić globalnie font family dla naszego projektu.

1:08W związku z tym zamiast container mogę wybrać sobie inne np.

1:12menu i zobaczę cały projekt.

1:14Wszystko bazuje na tym konkretnym momencie.

1:16Wszystkie nagłówki, całe body, tekst, listy i inne elementy bazują na tym

1:20głównym koncie, które w ten sposób ustawiamy.

1:22Powiem Ci jeszcze więcej w osobnej lekcji dotyczącej fontów.

1:26Natomiast możesz też ustawić osobno sobie właściwości dla nagłówków dla body tekstu.

1:32Więc jeśli chciałbyś zmienić przykładowo

1:34nagłówek XML i zmienić jego font, to teraz możesz nadpisać to ustawienie i np.

1:40nagłówki typu XML, czyli takie, które mają

1:42nadaną klasę HAVING, a następnie Combo klasy XL możesz sformatować fontem.

1:47Lato to jest też odpowiednie miejsce po to, żeby zmienić np.

1:50marginesy, które są na nagłówkach typu

1:53pixel i możesz zdefiniować i zmienić tutaj wszystkie właściwości ustawienia.

1:57To samo tyczy się body tekstu.

1:59Mamy tutaj wersje Large medium oraz Small.

2:02Jeżeli uznasz, że np.

2:04body tekst w wersji small byłby bardziej

2:06czytelne z pomocą font lato czy jakiegoś innego bezproblemowego

2:10możesz to zmienić i tylko wyłącznie dla body tekstu w wersji S.

2:14Taki font zostanie domyślnie zastosowany.

2:16Kolejna rzecz, która znajduje się w

2:18tej naszej stronie Custom list to jest Primary and Secondary Color.

2:22Oczywiście we frameworku jest dużo więcej

2:23kolorów, ale tutaj możesz pobawić się tymi ustawieniami głównego koloru.

2:28I tutaj mamy ten primary oraz zakręt color czyli primary.

2:32Kolor jest na razie niebieski.

2:34Jeśli przejdziemy do sekcji, w której

2:36definiowany jest kolor background kolor tła dla tego elementu, to zobaczysz, że

2:40będziemy edytować taką klasę CMP Primary 60, czyli będziemy edytować

2:44klasę, ale możemy też kliknąć na kolor i od razu wyedytować.

2:49Ponieważ wszystkie kolory w naszym systemie są też definiowane jako słodsze,

2:53co będę opowiadał bardziej szczegółowo w lekcji o kolorach.

2:56W każdym razie modyfikacja tego koloru sprowadza się do tego, że wybieramy Edycja

3:00edytować, a następnie zmieniamy ten kolor np.

3:04na kolor różowe, a następnie koniecznie zapisujemy za pomocą save.

3:09W tym momencie zmieniliśmy dwie rzeczy.

3:10Po pierwsze kolor.

3:11Po drugie definicja czy kolor?

3:13W ramach tej klasy CB Primary 60 i zobacz, że ten kolor główny jest używany np.

3:18w tym miejscu, w tym miejscu jest też

3:20używany na linkach, na ikonach, na tonach, więc ten kolor główny jest w

3:25wielu miejscach, a my teraz zmieniliśmy go na przestrzeni całego frameworku.

3:29To samo możemy zrobić z kolorem,

3:31czyli po prostu wyedytować go i zapisać po to, żeby go zmienić w całym frameworku.

3:35Takich kolorów mamy 100, więc w

3:38lekcji szczegółowej o kolorach będę tłumaczył tutaj więcej.

3:42Jeśli chodzi o ikony, to możemy tutaj zobaczyć, że mamy np.

3:46w tym komponencie różne ikony, korzystamy z ikon ikon, ale można te ikony

3:51fajnie zmieniać i w łatwy sposób je modyfikować.

3:54Czyli mamy tutaj klasę

3:56ikon, która jest przypisana i zamiast niej możemy zmienić tą klasę np.

4:02na Material Icons Outline i w zależności od tego jakiego stylu ikon

4:07będziesz potrzebował to możesz wybrać jedną z tych klas.

4:11A sama zmiana ikon jest też dziecinnie prosta, ale to pokażę Ci w osobnej lekcji.

4:15Na razie ustawiamy tutaj stream, czyli ten główny motyw dla tych ikon.

4:19No i jeszcze jest dokumentacja, które możemy ukryć albo odkryć.

4:22Tutaj nic się nie zmieni.

4:23Zaznaczamy dok i wybieramy dla niego

4:25display, ale nasza dokumentacja będzie pozbawiona tej lewej szpalty.

4:29Na razie więc, dopóki pracujemy w samemu FL u i z niej korzystamy można to ukryć.

4:34A później jak nasza strona jest gotowa i chcemy stworzyć taką

4:37dokumentację, która jest żyjąca, jest pod jakimś adresem i ją przekazujemy, to wtedy

4:40możemy znów to odkryć dodając display block i będzie ona widoczna.

4:45Ja cofnę te zmiany i przechodzę do

4:46następnej lekcji, aby tłumaczyć Ci kolejne rzeczy.