Strony WWW z SystemFlow: Praca z Klasami

SystemFlow 1.0+

0:00Sam framework. System Flow składa się z dwóch

0:02podstawowych elementów, które są jego bazą.

0:04Pierwsza to omówione przeze mnie w

0:06poprzedniej lekcji komponenty, czyli wszystkie elementy, które znajdują się w

0:09Components, a także te złożone komponenty, czyli tzw.

0:12template.

0:13Natomiast drugi najważniejszy element składowy system Flow to klasy.

0:17Mamy tutaj mnóstwo przygotowanych,

0:19predefiniowanych klas, z których korzystamy w ramach całego frameworku.

0:23Są to klasy dotyczące typografii, np.

0:26te definiujące nagłówki class klasy do kolorów bez single

0:31layoutu i z pomocą właśnie tych klas jest zdefiniowany cały framework i

0:36wszystkie komponenty również zawierają referencję do tych klas.

0:40Teraz, jeśli przejdziemy do designera i skorzystamy z jakiegoś komponentu np.

0:44wybierzmy sobie Hero, może Hero Video.

0:47I teraz w ramach takiego komponentu, jeśli go od linkujemy a link instance

0:53znajdują się przyciski, znajdują się jakieś akapity.

0:57Oczywiście mamy tutaj nagłówek i wszystkie te elementy.

1:00Jeśli przyjrzymy się w panelu Class, zawierają odpowiednią klasę.

1:04W tym przypadku jest to Head XML.

1:06No i gdybyśmy spojrzeli tutaj w

1:09naszej dokumentacji na typografię, to mamy jednak XML, czyli ten największy nagłówek.

1:15To znaczy, że my budując wszystkie komponenty, oczywiście

1:18wzięliśmy pod uwagę te klasy, które przygotowaliśmy dla System Flow.

1:21Dzięki temu oczywiście masz pewność, że

1:23modyfikując jedną klasę czy to w dokumentacji, tutaj na podstronach, czy

1:28również modyfikując ją bezpośrednio na żywo np.

1:31tutaj modyfikując ten link XML.

1:33W ten sposób zmodyfikuję wszystkie

1:35nagłówki typu X, ale w ramach całego frameworka, całego systemu.

1:39I oczywiście o ile będziesz konsekwentny w

1:41stosowaniu tych klas, to wszystkie elementy, które Ty dodasz do Twojej strony

1:46będą również zmieniały się razem z tymi klasami.

1:49Co mam na myśli? Jeśli np.

1:50dodasz tutaj jakiś element i będzie to akapit paragraf?

1:54No to na razie nie ma on żadnej klasy.

1:55Więc gdybyśmy teraz weszli sobie do tego

1:58akapitu, który ma klasę body text L i zmienili tu jakieś właściwości.

2:01Naturalnie nie będzie to wpływało na ten akapit, który dodaliśmy, ale jeśli

2:06sprawdził byś jakie klasy są używane dla tekstu, przykładowo dla body teksty w tej

2:11zakładce typografii mamy Body Text Elements, to możesz

2:15skorzystać z tej nazwy Control Enter albo Control Command Return na Macu.

2:20I teraz wpisujemy sobie body text

2:23i najlepiej wybrać to strzałką na klawiaturze i zatwierdzić enterem.

2:27Już mamy nadaną klasę body dla tego nowego elementu.

2:29I teraz jeszcze raz Command return czy Control Enter

2:33i możemy wybrać jedną z combo class M albo S, więc możemy wybrać sobie np.

2:37Body text symbol tym razem

2:40i ta klasa automatycznie jest zastosowana do całego akapitu.

2:44No i teraz jeśli będziemy modyfikować

2:46gdziekolwiek indziej czy to w dokumentacji, czy na stronie custom list,

2:50czy na stronie typografii, modyfikować tą klasę, ona wpłynie na wszystkie te

2:54akapity, które sformatować jako body text s.

2:57To też jest dobry sposób na to, żeby

2:58nauczyć się pewnej sensownej konwencji nazywania klas w ramach Twojej strony.

3:03No i w ten sposób klasami mamy nazwane nie tylko style dla tekstu, ale

3:08tak jak wspomniałem, również wszystkie kolory są opisane swoją konkretną klasą.

3:12Przy czym kolory podzieliliśmy na kolory background, a także kolor tekstu.

3:16Czyli innych klas będziesz używał, żeby

3:18sformatować tło, a innych klas żeby sformatować tekst.

3:21Tyle, że te klasy są na tyle podobne, że

3:23bardzo łatwo je skojarzyć, bo zaczynają się od C.

3:25Kolor. Następnie mamy.

3:27B jak background.

3:28A jeśli byśmy formatować tekst, to po prostu byłoby tutaj C zamiast B, czyli

3:32kolor tekst, no i później jeden z kolorów, czyli np.

3:34Primary 50.

3:36Spróbujmy teraz taką klasę zastosować do

3:38naszego body tekstu, czyli wciskam command i Therm czy Control Enter.

3:41Czyli dodaję tutaj kolejną klasę, kolejną combo klasę, ale same klasy kolorów np.

3:47czy sparingu zostały przygotowane w ten

3:49sposób, że można bez problemu też je dodawać jako któreś kolejne combo klasy.

3:53Tutaj jeśli zacznę wpisywać CT, czyli

3:55kolor, tekst, a następnie primary to teraz już mogę z klawiatury wybrać sobie, że np.

4:00chcę zastosować tutaj kolor tekstu primary 60.

4:03I kolor został zmieniony na niebieski.

4:06Jeśli chciałbym sformatować tło też nie ma

4:09problemu i mogę dodać tutaj jeszcze jedną kolejną klasę.

4:12Będzie to C, B czyli kolor background. No i np.

4:15dodajmy sobie error 10 to zastosujemy taki

4:17delikatny czerwony kolor jako tło dla tego akapitu.

4:21Więc jak widzisz te wszystkie klasy mogą koegzystować ze sobą i funkcjonować razem.

4:25Mamy też inne ciekawe klasy, np.

4:28dedykowaną dla tekstu klasę T, a tu mamy tekst line np.

4:33Center po to, żeby wyśrodkować tekst text

4:35align center po prostu wyświetli w środku nam tekst, więc nie musimy tutaj

4:39szukać opcji wyśrodkować, a wystarczy wrzucić szybko taką klasę.

4:43No i jak widzisz, nasz framework pozwala

4:45na to, żeby wykorzystać wiele różnych klas i wrzucić je na jeden element.

4:50Takich klas mamy również więcej.

4:53Jeśli chodzi o sam passing i layout są one

4:55przygotowane w takiej konwencji Space Ink, a następnie mamy P, która oznacza padding.

5:00Analogicznie możesz skorzystać z em, czyli margin.

5:03Następnie podajemy liczbę pikseli i to jest padding value.

5:07Na razie w pikselach.

5:08Być może we frameworku później będą inne wartości, także relatywne.

5:11Natomiast tutaj podajemy np.

5:1332 i cała lista tych wariantów jest tu, czyli mamy 0, 4, 8, 12, 16, 24, 32 itd.

5:21Możemy to podać i wtedy padding zostanie zastosowany z każdej strony tej wielkości.

5:26Natomiast jeśli chcemy tylko od góry i od dołu to dodajemy tutaj y, czyli na osi Y.

5:30Jeśli chcemy po lewej i prawej dodajemy X.

5:33Jeśli chcemy dla każdej z krawędzi osobno to mamy top ride, bottom i left.

5:38Więc możemy spokojnie

5:40teraz przetestować jakby to zadziałało na naszym body tekście.

5:43Czyli idziemy do Space Ink.

5:45Następnie padding albo margin.

5:47Może dodajmy sobie margin i np.

5:50wybierzmy tę klasę 128.

5:52W tym momencie dodaliśmy kolejne dodatkowe

5:54kolejne marginesy 128 do tej klasy Body text.

5:58Jeśli chcielibyśmy skorzystać z class tylko dla tabletu albo

6:03dla urządzeń mobilnych, to możemy to zrobić.

6:06Mamy tutaj Space Ink Tablet, a tutaj Space Ink Horizontal dla moba, eleganckie

6:11Horizontal i Space ING Mobile ogólnie dla mobile.

6:15Dlaczego moglibyśmy korzystać z takich klas?

6:17Po prostu wtedy, kiedy chcemy, żeby

6:19ten margines czy padding został zastosowany tylko np.

6:23dla tabletu i mniejszych rozdzielczości, a na desktopie będzie niewidoczny.

6:27Czyli jeśli ja bym dodał do tego elementu Space Ink tablet, a następnie

6:34podał tutaj margin i dodał 12 pikseli marginesu, to jak widzisz ta zmiana jest

6:41niewidoczna w desktopie, Ale jeśli wejdę na tablet, to ten margines zostanie tutaj

6:46uwzględniony i jest widoczny wyświetlany w tym miejscu.

6:49Natomiast na desktopie, jak widzisz, go nie ma, więc to jest fajna klasa.

6:52No i my możemy oczywiście usuwać też te klasy.

6:55Jeśli chcesz, to możesz po prostu name, czyli zmienić nazwę tej klasy np.

7:00Natal i wtedy zostanie ona zastosowana

7:03tutaj text align left i to też będzie działać bez problemu.

7:06Tak właśnie wygląda dodawanie istniejących

7:08klas, które są już we frameworku do jakichś nowych elementów.

7:12Rzecz jasna do istniejących elementów też możesz dodawać tę klasę.

7:15Przykładowo w tym zbudowanym komponencie mamy body text, ale gdybyśmy chcieli

7:19uwzględnić jakiś margines, to możemy to zawsze zrobić.

7:22Albo gdybyśmy chcieli np.

7:24sformatować jakiś kawałek tekstu konkretnym kolorem.

7:27Możemy zawsze wyodrębnić tutaj span, czyli span, a następnie podać kolor text i np.

7:33error 50, żeby uzyskać czerwony kolor.

7:36Korzystanie z tego typu zabiegów

7:39pozwoli nam uzyskać spójność w całym projekcie, a dodatkowo z racji tego,

7:44że używamy tych spójnych klas, to później modyfikacja klasy w jednym miejscu

7:48spowoduje, że wszystkie komponenty zostaną adekwatnie zmodyfikowane.

7:52Dodajmy to może jeszcze jeden komponent i

7:54może znów skorzystamy z jakiegoś hero z video np.

7:58tego. Teraz możesz zastanowić się nad tym jak

8:02modyfikować istniejące klasy i czy będzie miało to wpływ na inne elementy.

8:05Oczywiście, że tak.

8:06I ta modyfikacja może przebiegać na dwa sposoby.

8:09W zasadzie po pierwsze możesz iść do odpowiedniej strony typu customs albo

8:13strony dokumentacji i tutaj wybrać sobie któryś z nagłówków z typografii czy któryś

8:18z kolorów, a następnie zmodyfikować go w panelu stylów.

8:22Natomiast bardzo często mi się zdarza po prostu pracować na

8:26projekcie, dodawać tutaj nowe komponenty od linkować i w locie zmieniać właściwości

8:32tych rozmaitych klas, gdzie efekt będzie dokładnie taki sam.

8:35Bo czy my tutaj zaznaczymy sobie head h1 i zmodyfikujemy head XML właściwości?

8:41Czy zrobimy to na stronie dokumentacji?

8:43Rezultat będzie identyczny.

8:44Więc gdybym ja tutaj np.

8:46zmienił sobie nagłówek Bold na nagłówek Norma, to zobacz, że razem z tą zmianą

8:50zmieniają mi się wszystkie nagłówki na stronie, czyli również ten.

8:53Dlatego, że to również jest XML.

8:56To samo by się stało, gdybym modyfikował body text.

8:58Jeśli zmieniłbym np.

8:59font ładna medium.

9:01No to wszędzie zmieniło mi się na medium, bo modyfikuje tą jedną konkretną klasę.

9:06Więc w ten sposób możemy sobie w locie modyfikować klasy, z których korzystamy.

9:09I też zobacz, że mamy taką specyficzną konwencję, że np.

9:12jest head ing, później XML albo body text.

9:15L w przypadku różnych innych elementów też

9:17jest podobna konwencja i mogę oczywiście zmodyfikować cały

9:21Helsinki XL, ale mogę też po prostu usunąć na chwilę tą kombo klasę XL.

9:27Następnie, jeśli chcę wprowadzić zmianę do wszystkich nagłówków, nieważne czy te S,

9:32M, L, XL, to mogę zrobić to tutaj i na przykład dodać jakiś ekstra margines u

9:37góry, a następnie mogę przywrócić tutaj te kombo klasę XL i to co zrobiłem

9:43spowodowało, że zmieniłem globalnie ustawienie dla wszystkich head głów, czyli

9:48wcześniej zmieniłem, ustawiłem dla nich margines jest tutaj i tutaj.

9:52Natomiast na klasie XL tego marginesu już nie ma.

9:55On jest dziedziczony z tej klasy chemik, więc można.

10:00W ten sposób i w ten sposób sobie rozbijać te klasy na czynniki pierwsze.

10:04Jedna bardzo, bardzo, bardzo istotna rzecz.

10:07Szkoda, że na koniec, ale proszę, byś ją zapamiętał.

10:09Polega na tym, że jeśli chcesz dokonywać

10:11jakichś swoich własnych modyfikacji, a nie chcesz przypadkiem zmodyfikować np.

10:16wszystkich nagłówków na stronie teraz, to

10:18naszą preferowaną metodą jest po prostu dodanie tutaj jeszcze jednej combo klasy.

10:22Jeśli wciśniesz Command Return Command

10:25Enter to możesz dodać combo klasę, dowolną nazwę np.

10:29klas, miting, cokolwiek.

10:31Fajnie, żeby to było rzeczywiście jakieś sensowne i jakaś racjonalna nazwa.

10:36Natomiast jeśli dodasz dodatkową klasę, to

10:39w tym momencie możesz dokonać takie modyfikacje, które są lokalne dla tego

10:43jednego Binga i jesteś pewien, że nie zmodyfikuje sobie wszystkich pozostałych.

10:47Czyli zawsze dodajemy jeszcze jedną, kolejną klasę.

10:50I teraz możemy przykładowo zmienić kolor

10:53na kolor granatowy i nie będzie miało to odzwierciedlenia w tym link, który

10:59znajduje się tutaj, bo to już jest zupełnie inna klasa.

11:02My w tym momencie modyfikujemy ten combo selektor klas.

11:05To jest bardzo ważne, żeby pamiętać, aby

11:07te nasze własne selektory czy combo klasy znalazły się na samym końcu w strukturze.

11:12No bo gdybym tutaj dodał np.

11:13text align left jeszcze combo klasę i w niej zmodyfikował kolor albo cokolwiek

11:19innego, to nie modyfikuje tego my class, tylko modyfikuje już having x

11:24all my class tail, czyli ostatnią klasę, a tego byśmy nie chcieli.

11:29Niestety trzeba na to uważać i mi się zdarza często.

11:31Rzeczywiście da to przegapić, żeby właśnie

11:34pamiętać, żeby nie zmodyfikować jakiejś istniejącej klasy systemowej, jeśli

11:38oczywiście chcemy te zmiany zastosować lokalnie dla jednej instancji.

11:41Natomiast nie ma problemu z tym, żeby np.

11:44zamiast klas marginesów, jeśli przykładowo

11:47nie pamiętamy jaka była klasa dla marginesu, albo

11:50chciałbym zrobić jakieś kilka zmian w CSS, a nie tylko przykładowo ustawić padding

11:54czy margines, to nie muszę tego robić klasą

11:57space ink margin i później jeszcze kolejną klasą systemu i kolejną klasą systemu.

12:02To jest tylko taka pomoc dla Was.

12:04Natomiast wolałbym wtedy zrobić to właśnie klasą jakąś dowolną nową My class i

12:08poustawiać sobie tutaj dokładnie tak właściwości, jak bym chciał.

12:12Zatem pamiętaj o tej ważnej zasadzie o tworzeniu własnych combo class.

12:16Możesz Nie musisz korzystać z tych klas frameworku.

12:19Nie jest to konieczne, zwłaszcza w momencie, kiedy będziesz miał

12:22nadpisane lokalnie zmiany dla tej jednej instancji takiego elementu.

12:26Poza tym, jeśli chodzi o klasę myślę, że to najważniejsze informacje.

12:29Dzięki za uwagę i do usłyszenia.