Webflow: Jak działają breakpointy

Webflow 2020+

0:00Cześć.

0:00Witaj w kolejnej lekcji.

0:01Do tej lekcji w plikach źródłowych dołączyłem plik layout xd czyli plik

0:05który można otworzyć w aplikacji adobe xd. Zdecydowanie polecam Ci pobrać xd jak

0:10również zachęcam cię do tego żebyś przynajmniej przejrzał kurs Adobe xd projektowanie interfejsów.

0:14Żeby zobaczyć jak to zostało zaprojektowane.

0:17Tam jest też dużo takich wskazówek odnośnie tego jak później

0:21powinno zostać to wszystko zaprogramowane zakodowane i warto chociaż go przejrzeć.

0:26Zrobiłem też trochę bardziej zaawansowany kurs do pracy zespołowej i tego jak można

0:30przygotować taki lek eksportować zasoby pod tzw.

0:33proces handow czyli właśnie do developmentu.

0:36Razem z taką specyfikacją z całym style quidem.

0:39Aczkolwiek tutaj zaczniemy raczej w miejscu w którym skończyliśmy kurs

0:44projektowania interfejsów xd czyli po prostu mamy gotowe projekty graficzny.

0:48Dlaczego.

0:48Dlatego że uważam że będzie to przydatne zdecydowanie w większości przypadków

0:53bo zakładam że sam chcesz tworzyć stronę zarówno chcesz mieć orientację w tym jak

0:58to działa w narzędziu graficznym jak również później jak to przenieść na webflow.

1:03Sytuacja w której mamy już gotowe specyfikacje i w ogóle nie przejmujemy się

1:07tym layoutem wtedy gdy pracujemy w jakimś większym zespole.

1:10Aczkolwiek uważam że te umiejętności bardziej nisko poziomowe.

1:13Też się tam przydają. Dlatego zamiast zarzucać teraz dokumentacją odnośnie

1:17wszystkich rozmiarów itd. To wszystko będziemy sprawdzać po drodze dlatego, że

1:21nie boimy się tego żeby otworzyć taki layout xd po prostu z nim pracować.

1:25Pierwsza istotna rzecz na którą trzeba

1:27zwrócić uwagę to jest to że zaprezentowaliśmy go w szerokości

1:30tysiąc trzysta osiemdziesiąt sześć.

1:32No i teraz zobaczmy jak przekłada się to na webflow.

1:34My jesteśmy w naszym głównym break poincie.

1:36To jest break point powinniśmy cały czas pracować teraz.

1:40Jest oznaczony gwiazdką natomiast jest o szerokości tysiąc siedemset siedemdziesiąt trzy.

1:44Dlaczego.

1:45Dlatego że na tyle pikseli pozwala mój monitor.

1:48Gdybym to teraz zmienił przykładowo na tysiać trzysta sześćdziesiąt sześć to się oczywiście dostosuje.

1:52Zresztą mamy tutaj

1:54taką miarkę którą możemy złapać i zobaczyć jaka fajna rzecz na dole.

1:58Webflow podpowiada nam jakie rozdzielczości mają takie typowe urządzenia czyli np.

2:03Macbook Air 11 czy MacBook Pro itd. więc to jest jakiś swojego rodzaju pomoc w tym na

2:09jakie urządzenie możemy projektować, testować.

2:12Ale oczywiście my nie pracujemy na

2:14urządzenie ani też nie projektujemy na konkretną rozdzielczość raczej chcemy te

2:18wszystkie rozdzielczości obsłużyć i zrobić stronę która jest responsywna.

2:22Awebflow nam to umożliwia.

2:23Ale musimy od czegoś zacząć.

2:25Najlepiej jest zacząć od tego co mamy

2:27przygotowane designie czyli najlepiej byłoby zacząć od szerokości tysiąć trzysta sześćdziesiąt sześć.

2:33Jeśli ustawiamy tutaj tysiąć trzysta sześćdziesiąt sześć to rzeczywiście jesteśmy w domu.

2:37Problem polega na tym że w przeciwieństwie

2:39do grafiki którą przygotowaliśmy w ten sposób że najpierw zrobiliśmy sobie layout

2:43desktopowy, a później przenieśliśmy layout desktopowy i po prostu zrobiliśmy

2:48jego wersję responsywne na tabletowe telefonowe itd.

2:51O tyle moją rekomendacją w przypadku

2:53kodowania tego w webflow jest robienie od razu wszystkich wersji responsownych.

2:58Ponieważ gdy przygotujemy taką długą stronę.

3:01dopiero wtedy zaczniemy przełączać się na widok responsywne i

3:04naprawiać to będzie nam bardzo trudno to ogarnąć więc będziemy tutaj dużo częściej

3:08przełączali się pomiędzy różnymi widokami i próbowali dostosować komponenty które

3:12stworzymy tak aby dobrze się skalowały na różne urządzenia.

3:15Taka jest filozofia tej pracy i w tym przypadku gdy wrócimy do tego widoku

3:20desktopowego webflow działa w ten sposób że znowu powrócimy do tego widoku tysiąc siedemset siedemdziesiąt trzy.

3:25O ile nie dodamy tutaj kolejnego breakpointa u większego np.

3:29tysiąć dwieście osiemdziesiąt czy tysiąc czterysta czterdzieści jeśli dodamy break point

3:33tysiąc czterysta czterdzieści mimo wszystko będziemy chcieli pracować w tym break poincie

3:38ale zobaczy że on teraz jest na tysiąc czterysta czterdzieści trzydzieści dziewięć dokładnie jeden piksel mniej niż ten

3:43kolejny będziemy jeszcze później dużo mówić o break pointach, a także o tej skali.

3:47Więc zostawiam to na później lepiej jest mówić gdy mamy więcej elementów.

3:51Jedna istotna rzecz gdybyś na przykład

3:53chciał zmienić skalę i zmienił ją przykładowo do osiemset pikseli

3:56to jeśli ta skala osiemset pikseli zawiera się w inny break poincie to zamiast zmniejszyć.

4:01Canvas automatycznie przeniesie nas do tego innego break point.

4:05To tylko tak

4:06warto wiedzieć że nie jesteśmy już w tym break poincie. W którym chcieliśmy być bo jest

4:11zrobione inny który obsługuje tę rozdzielczość.

4:13Jeżeli chodzi o wstępny setup breakpointów to wszystko myślę że najważniejszą rzeczą

4:16która jest do zapamiętania z tej lekcji jest to abyśmy spróbowali zrobić sobie

4:19taki break point który będzie jak najbliżej rozdzielczości desktopowej którą

4:23mamy zaprojektowaną czyli u nas najbliżej tysiąc trzysta osiemdziesiąt sześć jestem break point

4:27tysiąc czterysta trzydzieści dziewięć jest gwiazdką i spokojnie będziemy dla niego teraz projektować po prostu

4:31zrobimy sobie jakiś szerszy margines niż tutaj te niż sześćdziesiąt dwa.

4:35A jeśli chodzi o całą strukturę strony to

4:38będziemy też czasem korzystać z layout gridu i Command Shift

4:41cudzysłów pozwoli nam włączyć go w Adobe xd. Ja przygotowałem go na 12 kolumn w desktopie.

4:46Dokładnie tak samo działa ale layout grid w webflow.

4:50Zrobiłem nie bez powodu tutaj mamy małą ikonkę

4:53którą możemy włączyć najpierw guide, a następnie ewentualnie taki layout grid.

4:59Który jest podobny który mamy w adobe xd

5:03niestety nie da się go na razie w webflow jakoś modyfikować ale on jest rzeczywiście

5:06spójny z tym co zrobiliśmy więc mamy 12 kolumn.

5:09I przykładowo jeśli mamy trzy kolumny rozciągnięte kafelki czyli ten kafalek

5:13rozciągnięty na sześć kolumn będzie nam może czasem ten

5:18layout grid się przydawał. Na razie go wyłącze i przejdziemy do

5:20kolejnej lekcji w której stworzymy podstawowy szkielet strukturę naszej

5:23strony a ja wyjaśni ci najważniejsze elementy layoutu webflow.

5:26Do usłyszenia.