Strony WWW z SystemFlow: Marginesy i Padding

SystemFlow 1.0+

0:00Porozmawiamy o sparingu, czyli sparing.

0:02Layout test kolejna sekcja w sekcji Design ostatnio o której będziemy mówić.

0:06A jest to sekcja, która zawiera informacje o klasach, które wykorzystujemy do tego,

0:11aby nałożyć marginesy albo padding na poszczególne elementy.

0:15System Flow.

0:16Staramy się konsekwentnie stosować te klasy również wewnątrz

0:19gotowych komponentów i template ów, które mamy.

0:22W związku z tym zmiana klasy space w tym miejscu w dokumentacji będzie oznaczała,

0:27że zmieni się to wszędzie, jak zwykle w systemie.

0:30I tutaj mamy tylko kilka przykładów klas, które przygotowaliśmy.

0:33Najważniejsze jest jednak to, że wyjściową jednostką są piksele, więc trochę inaczej

0:38niż w przypadku typografii, gdzie mamy Remy jako wyjściową jednostkę, a jedynie

0:42jest to tutaj przeliczone na konkretne wartości w pikselach.

0:46W przypadku sparingu poruszamy się w

0:48obrębie pikseli, czyli jednostek absolutnych, nie natywnych.

0:51Można więc powiedzieć, że system mamy dwie, dwa rodzaje jednostek.

0:56To wszystko, co jest wokół tekstu i

0:58dotyczy tekstu jest w ramach po to, aby dało się zrobić

1:01responsive typografii, czyli tą responsywną typografię, która zmienia się

1:04na przestrzeni black pointów, więc zarówno rozmiar fonty jest podane w

1:09ramach jak i line height, czyli wysokość linii jest podana w ramach.

1:13I rzeczy, które są dookoła.

1:15Font, czyli marginesy i padding również są podane w ramach.

1:20Jeśli zerkniemy na przykładowy nagłówek, to ma on marginesy 0 i 1 rem.

1:25W związku z tym w momencie, kiedy przekładasz typografię z Twojego design

1:29systemu czy z projektu na system flow, powinieneś przeliczyć ją na ramy i do

1:35marginesów i puddingu w obrębie typografii.

1:37Jeśli będzie się zmieniał, powinieneś właśnie uwzględnić te jednostki w ramach.

1:42Natomiast jeśli chodzi o same marginesy i sam Space Ink, czyli Space

1:47Inki Layout, w tej sekcji poruszamy się w celach, a my przygotowaliśmy szereg

1:51predefiniowanych klas, które są klasami sparingu i są oparte o następującą skalę.

1:57Mamy 0, 4, 8, 12, 16 itd.

2:00I to znaczy, że wyłącznie te wartości, te jednostki znajdują się w nazwach klas.

2:06Czyli jeśli mamy przykładowo klasę, która

2:08nadaje padding 32, to tutaj nie możemy wpisać dowolnej wartości, a jedynie tą,

2:13która znajduje się na liście, oczywiście do tej klasy.

2:16Jeśli chcesz, możesz dodać sobie swoje

2:17dodatkowe wartości, natomiast i stworzyć dodatkowe klasy.

2:21Natomiast my przygotowaliśmy tylko tyle i

2:23w zasadzie wystarcza nam spokojnie do wygodnego projektowania.

2:27Natomiast jeśli rzeczywiście będziesz

2:28potrzebował tutaj innych jednostek, możesz dołożyć jeszcze więcej klas.

2:32Natomiast każda taka klasa jest dość starannie przygotowana, dlatego że zaczyna

2:37się od słowa s, czyli od litery S, czyli space passing.

2:39Następnie determinuje my, czy chcemy zmienić padding czy margines.

2:42P to padding, a m to margines.

2:44No i kolejno możemy jeszcze dodać na jakiej osi albo na jakiej krawędzi chcemy

2:49zmienić ten padding margines i będzie to odpowiednio top, right, bottom i rebel.

2:56Natomiast jeśli chcemy zmienić zarówno na górze jak i na dole korzystamy z Y, czyli

3:00z osi Y, z lewej i z prawej strony będzie to X.

3:02Czyli jeśli chcemy zmienić z lewej i z

3:04prawej strony marginesy na 128 pikseli, wtedy skorzystamy z s x 128.

3:12Gdybyśmy użyli 124 nie zadziałało by.

3:14Po prostu nie ma takiej klasy.

3:16Tak czy inaczej sugeruję klas zawsze szukać w tym rozwiniętym menu i zawsze

3:21wybierać je z klawiatury po to, żeby przez przypadek nie stworzyć nowej klasy.

3:24Klasy, które tutaj są rozpisane są to tylko przykłady klas.

3:28W rzeczywistości jest ich dużo więcej.

3:30Na sam parking mamy kilkadziesiąt czy kilkaset nawet klas czy marginesy.

3:35I tutaj wypisana jest po prostu konwencja tego, jak tę klasę tworzymy.

3:38A tutaj?

3:39Jakie klasy mamy dostępne?

3:41Jedźmy w związku z tym do praktyki.

3:43Jeśli przykładowo chcielibyśmy na

3:45zaznaczony element dodać jakiś ekstra margines np.

3:49od góry i od dołu, po prostu przechodzimy

3:51do klasy i możemy dodać jako combo klasę zawsze space, następnie Margin i teraz

3:58chcemy dodać ją na górze i na dole, a więc Y.

4:01I najlepiej już jest korzystać tutaj z klawiatury, czyli strzałką w dół.

4:05Wybieramy sobie wariant, który chcemy np.

4:07jeśli chcemy 64 piksele z góry i z dołu możemy to zrobić.

4:12Jak widzisz zostało to dodane.

4:14Pamiętaj jednak o tym, że taki body tekst może mieć też nadane swoje marginesy w

4:20ramach, które ustawisz w systemie czy to w sekcji custom, czy w typografii.

4:25No i wtedy oczywiście te marginesy będą się sumować.

4:28Padding zostanie dodawany, więc trzeba

4:29pamiętać o tym, że poszczególne elementy naszego systemu, np.

4:33Reading może mieć już jakiś jeden margines na dole i jeśli nadali byśmy dodatkowo dla

4:39niego taką klasę, czyli przykładowo spróbujmy nadać space.

4:43Następnie margin i tylko na dole bottom skorzystajmy z wartości 16 16.

4:48To będzie dokładnie 1R, więc wybierzmy sobie 16.

4:52Jak widzisz nic się nie stało. Dlaczego?

4:54Dlatego, że ten jeden ram już tak czy inaczej jest tutaj dodane.

4:59Chciwość marginesów powoduje, że nie będą one nakładane na siebie.

5:03W związku z tym dodanie takiej klasy może

5:05w pewnych przypadkach nic nie zdziałać i warto o tym pamiętać, jeśli ją usunę.

5:10Jak widzisz, nic w layoucie się nie zmieniło.

5:12W ten sposób dodajemy klasę, ale jeszcze

5:14mamy pewne wyjątkowe klasy w ramach PASSING u.

5:17Są to klasy, które zmieniają nam

5:20ustawienia puddingu czy marginesów wyłącznie na jakimś break poincie.

5:24Mamy tablet Empire, Model i Move.

5:28Oczywiście bielą już nie ma, bo to jest ostatnie.

5:30Więc gdybyśmy chcieli od tabletu w dół zrobić jedynie np.

5:34na tym wspomnianym elemencie,

5:37które zmieniliśmy ten body text, zaznaczmy sobie ten body tekst

5:42i gdybyśmy chcieli, żeby ten margines był dodany wyłącznie od tabletu w dół,

5:47to musielibyśmy w tej klasie dodać jeszcze space tablet, czyli s t

5:53I w ten sposób nie mamy żadnego sparingów na desktopie.

5:58Ale jeśli przejdziemy w tablet, to jak widzisz ten Extras Pack jest już tutaj

6:03dodane i ponieważ od tabletu w dół wszystko dziedziczy te ustawienia,

6:08czyli tą klasę STEM y 64, tutaj również będziemy mieli na

6:13urządzeniach mobilnych taki margines dodany.

6:15W związku z tym

6:17tak, możemy właśnie stworzyć klasy, które są właściwe, czy nawet klasy, które są

6:21właściwe tylko dla konkretnych rozdzielczości konkretnych break pointów.

6:25I możemy to zrobić nie tylko dla tabletu,

6:28ale tak jak powiedziałem, możemy też od mobile landscape albo mobile.

6:32Jest to dosyć korzystne, bo nie musimy wychodzić z naszego layoutu desktopowego.

6:36Możemy dodawać tę klasę i też nie musimy najpierw robić jednej klasy, a później

6:41zmieniać tego w każdym kolejnym break poincie.

6:44Więc można z takich klas skorzystać.

6:46Tutaj są tak samo skonstruowane klasy marginesów.

6:49O tym już wspominałem.

6:50No i też te klasy marginesów mają

6:53możliwości zrobienia tego albo dla tabletu wyłącznie w dół.

6:56Później mamy Ha, czyli landscape, horizontal mobile i samo mobile.

7:01To będzie właśnie dla tych konkretnych klas.

7:03No i w końcu mamy też grid.

7:05Może nie tyle jest to marginesy czy

7:07padding, ale klasy sparingu, które przygotowaliśmy.

7:10Możesz bardzo łatwo

7:12nadać grid na jakiś dowolny element, korzystając z odpowiedniej klasy.

7:17To znaczy, że gdybyś chciał wyświetlić np.

7:21testy box boxy w grid, byłoby to przydatne do umieszczenia ich obok siebie.

7:27Możemy wrzucić do tego wrapper, a po

7:30prostu layout element grid, czyli na klawiaturze.

7:32Następnie dodaje grid, zatwierdzam go i do tego grid.

7:36Przeciągam teraz testy box 3 i ten drugi.

7:40I teraz możemy zaznaczyć grid.

7:42Jak widzisz mamy już to w dwóch kolumnach, ale tutaj są dwie jeszcze dwa rzędy

7:46niepotrzebne Command return albo Control Enter.

7:49Na pececie szukamy e g, czyli spacja.

7:52Natomiast jeżeli wpiszesz LG np.

7:542 to i tak to znajdzie cały projekt.

7:56Na tyle Sprytne.

7:57Potrzebujemy tutaj layout grid, tu kąt i

7:59wybieramy tę klasę z Existing classes i już mamy ładnie zrobione dwie kolumny.

8:03Te dwa rzędy zostały usunięte.

8:05Kolejną zaletą takiego rozwiązania jest to, że nasz Layout Grid zachowuje się na

8:12urządzeniach mobilnych w pewien predefiniowane sposób.

8:15Przykładowo Layout Grid 2 kolumnowy będzie

8:17miał tylko jedną kolumnę w widoku mobile i below, czyli poniżej

8:233 kolumnowy będzie miał odmowę, ale również tylko jedną kolumnę.

8:26A jeśli użyjemy czterech kolumn to będą

8:28dwie kolumny automatycznie na tablecie i jedna kolumna od mobile cap i poniżej.

8:34Co to dla nas oznacza?

8:36To oznacza, że w tym momencie, jeśli byśmy przeszli na mobile portret, np.

8:41mielibyśmy już jedną kolumnę, na mobile Landscape to samo.

8:45Czyli nie mamy dwóch elementów obok siebie, tylko wyświetlamy jeden pod

8:49drugim, więc nie musimy już tych opcji modyfikować.

8:52Jest to na pewno mniej pracy.

8:54Natomiast jeszcze jedna fajna rzecz, która się wiąże z wykorzystaniem GRID u jest

8:58taka, że możemy też edytować jego zachowanie na urządzeniach mobilnych i

9:03zmieniać go, a także łączyć ze sobą rozmaite klasy.

9:06Podobnie jak dla klas spinningu przygotowaliśmy tutaj tę klasę tablet.

9:11Czyli to jest to, co mieliśmy tutaj.

9:14To mamy też tablet dla GRID u, mamy też

9:16dla GRID u dostępne, czyli Horizontal i mamy mobile dostępne dla grid, więc

9:21jeżeli chcesz to możesz dodawać te klasy bezpośrednio do elementów, czyli np.

9:25taka klasa Elite Grid.

9:27Jedna kolumna spowodowałaby, że grid byłby wyświetlany w jednej kolumnie

9:32tylko od tabletu, ale możesz też łączyć ze sobą te klasy.

9:35I chciałem pokazać Ci to na jakimś gotowym naszym komponencie.

9:38Przykładowo wrzućmy tutaj jakiś pricing.

9:42W pressingu Basic 2 mamy np.

9:44zastosowany taki grid, ponieważ oczywiście

9:46wszystkie te klasy są stosowane też w naszych komponentach.

9:50I zobacz, że mamy tutaj grid LG friko, czyli trzy kolumny w

9:54tym widoku desktopowe, ale mamy jeszcze dodane coś takiego jak.

10:00TG 1 cal, czyli w tablecie chcemy zmodyfikować wygląd tego klipu, bo

10:06domyślnie to byłoby tak, że jeśli mamy trzy kolumny na desktopie, to zgodnie z

10:11regułą, którą mamy tutaj, że jeśli jest LG 3 kolumny to w tablet owej wersji też będą

10:173 kolumny, a dopiero od Mobile Landscape będziemy mieli jedną kolumnę.

10:21Natomiast my chcemy to zmodyfikować tak, aby już od wersji tablet owej była jedna

10:25kolumna i możemy to zrobić po prostu tą dodatkową klasą.

10:30Czyli mamy tutaj layout tablet grid jedna

10:33kolumna i jest ona dodana jako combo klasa.

10:36W tym przypadku jeśli przejdziemy do

10:38tabletu będziemy mieli od razu jedną kolumnę.

10:41Gdyby tej klasy nie było rymów klas,

10:44mielibyśmy tutaj cały czas trzy kolumny na tablecie.

10:46Natomiast dopiero od mobile tej horyzontalnej wersji mielibyśmy jedną

10:50kolumnę, zgodnie z domyślnym zachowaniem 3 kolumn nowego Grida.

10:54Więc jak widzisz, te klasy można ze sobą łączyć i jest to naprawdę przydatne.

10:59Myślę, że wejdzie Ci w krew jak zaczniesz pracować z grid i operować tymi klasami.

11:03Zobaczysz, że to znacznie przyspiesza pracę.

11:05Nie trzeba się tak dużo przełączać pomiędzy break point.

11:08Ja jeszcze mam na koniec tip, czyli skrót przełączenia pomiędzy ich płytami.

11:12Jeśli wciśniesz na klawiaturze 1, 2, 3, 4 to będziesz odpowiednio przenosił się

11:16pomiędzy płytami, czyli 1 to jest desktop, 2 na klawiaturze to będzie tablet 3.

11:22Tutaj mamy widok horyzontalne i portretowe, ostatnie także.

11:26Łatwo można się też za pomocą klawiatury przeklikać po tych widokach, żeby zobaczyć

11:30czy ten grid rzeczywiście poprawnie działa.

11:32To wszystko o klasach typu sparing i o sekcji z passing system Flow.

11:36Do usłyszenia w kolejnej lekcji.