Bubble: Pracujemy ze stylami

0:00Cześć! Witam Cię w kolejnej lekcji, w której

0:02chciałbym porozmawiać o stylach w edytorze Bubble.

0:05Jeżeli nigdy do tej pory nie tworzyłeś żadnej strony internetowej ani aplikacji,

0:09to możesz zadać sobie pytanie czym w zasadzie są te style?

0:12Dlaczego są nam potrzebne?

0:14Otóż dzięki nim jesteśmy w stanie zachować

0:16spójny wygląd w obrębie całej naszej strony internetowej bądź aplikacji,

0:21a dodatkowo style stanowią takie idealne odzwierciedlenie w praktyce,

0:24zasady DRY, czyli don't repeat yourself.

0:27Jeśli ta zasada nic Ci na chwilę obecną nie mówi, to nie przejmuj się zaraz

0:30pokazać na praktycznym przykładzie o co w niej chodzi.

0:33Wyobraźmy sobie taką hipotetyczną

0:35sytuację, że odsyłamy nasz projekt do klienta i w odpowiedzi dostajemy info, że

0:40klient chciałby, aby te nagłówki te wszystkie nagłówki, które tutaj mamy

0:44były pisane nieco grubszym fontem i może na dodatek w kolorze czerwonym.

0:48Gdybyśmy więc teraz chcieli zastosować się

0:50do jego uwag, to musielibyśmy przejść do każdego takiego nagłówka i ręcznie

0:55poprawić tutaj te właściwości zgodnie z wymogami klienta.

0:59W naszym przypadku takich nagłówków jest

1:01tylko 6 na stronie, więc nie jest to jakoś bardzo męczące zajęcie.

1:04Natomiast wyobraź sobie sytuację, gdy mielibyśmy serwis składający się z

1:08kilkunastu podstron i musielibyśmy przejść na każdą z nich,

1:11mierzyć odpowiedni nagłówek i ręcznie wprowadzić takie poprawki.

1:15Jak się oczywiście domyślasz, byłoby to

1:16niesamowicie czasochłonne i na dodatek wyjątkowo irytujące zajęcie.

1:21Dlatego też możemy wykorzystać style,

1:23dzięki czemu te wprowadzanie takich poprawek będzie znacznie prostsze.

1:26Moje podejście w tym temacie jest takie, że staram się dodawać style dla każdego

1:30elementu na stronie, dla którego zmieniam tutaj jakieś właściwości.

1:34A więc skoro tą część teoretyczną mamy już

1:37za sobą, to przejdźmy teraz do części praktycznej.

1:40Ze stylami pracowaliśmy już wcześniej.

1:42Jak pamiętasz tworzyliśmy taki własny styl dla grupy.

1:45Dadajmy ją sobie tutaj.

1:47Dodaliśmy jej tutaj własny styl o nazwie wire,

1:50który z kolei wykorzystaliśmy potem przy tworzeniu wireframe'u do sekcji features.

1:54Dodatkowo wspominałem również o tym, że w Bubble,

1:57każdy element posiada jakieś pewne predefiniowane style.

2:00Np. tutaj mamy określone style, dla grupy, z których moglibyśmy skorzystać.

2:04Np. wybierzemy ten i nasza grupa ma tutaj taki czerwony kolor.

2:09Dodatkowo, jak widzisz jeszcze czerwone obramowanie.

2:12Aby usunąć style klikamy tutaj w opcje

2:15remove style i teraz możemy je nadpisać, czyli ustalić jakieś własne właściwości.

2:21Takie style, możemy ustalać dla każdego elementu na naszej stronie.

2:24Przejdźmy więc tutaj do naszych nagłówków.

2:28I ustalmy dla nich jakieś określony styl. Aby go utworzyć

2:32jak wiesz, wystarczy, że tutaj rozwinę tą listę, zjadę na sam dół i wybiorę opcję

2:37create a new style

2:39pod warunkiem, że wszystkie te właściwości są dokładnie takie, jakie być powinny.

2:43A więc wykonajmy tą operację, klikam

2:46create a new style i teraz mogę nazwać swój nowy styl.

2:49Kwestia nazewnictwa stylów jest całkowicie

2:51dowolna, natomiast ja pokażę Ci w jaki sposób ja podszedłem do tego tematu.

2:55Oczywiście możesz stosować własne nazwy.

2:58Staraj się nazywać swoje style w taki sposób, aby było to dla Ciebie zrozumiałe,

3:02żebyś wiedział, jakie style będą tutaj miały odpowiednie zastosowanie.

3:06Ja wszystkie własne style zawsze rozpoczynam od podkreślnika.

3:10Dzięki takiemu rozwiązaniu będą się

3:11one pojawiać na samej górze listy stylów dostępnych dla danego elementu.

3:15Następnie stosuję nazewnictwo, które w

3:18pierwszej kolejności określa z jakim elementy mam do czynienia.

3:21Tutaj jest to paragraf.

3:27Kolejno rozmiar.

3:29W moim przypadku jest to paragraf 300.

3:31A na koniec kolor, który ma tutaj zastosowanie, czyli paragraf 300 dark.

3:38Nasz styl został dodany.

3:40Pojawia się teraz tutaj na liście

3:42jak widzisz, dzięki temu podkreślnikowi na przodzie pojawia się na samej górze.

3:47Skoro wiemy już jak usuwać style, wiemy

3:49jak je tworzyć, to teraz porozmawiajmy o sobie o tym, jak edytować takie własne style,

3:53które tutaj utworzyliśmy lub jakieś style predefiniowane przez samo Bubble.

4:01Aby przejść do edycji stylów wystarczy, że klikniemy tutaj w edit style,

4:05zostaniemy przeniesieni na zakładkę styles.

4:08Opcjonalnie do tego samego miejsca możemy

4:11dojść wracając tutaj do zakładki Witaj, i teraz wybierając tutaj styles.

4:16Wówczas, jak widzisz, otrzymujemy listę wszystkich dostępnych stylów w edytorze

4:20Bubble, zarówno tych predefiniowanych, jak i tych np.

4:23które stworzyliśmy sami.

4:24Jak tutaj ten styl wire, dodatkowo taką listę możemy zawęzić.

4:29Możemy tutaj wyszukać określony styl po jego nazwie np.

4:33paragraf,

4:35jak widzisz odpowiedni styl został tutaj namierzony.

4:37Mogę usunąć to i np.

4:39tutaj wybrać sobie konkretny element.

4:42Powiedzmy, że będzie to grupa.

4:44Jak widzisz zostały tu nam zwrócone wszystkie style, dla grupy.

4:48Jeżeli teraz chciałbym zmienić np.

4:50właśnie ten styl dla paragrafu, namierzmy go sobie tutaj, wybieram styl paragraf.

4:57I teraz powiedzmy, że chcemy tutaj takim nagłówkom nadać kolor czerwony.

5:03Wracamy do zakładki design i zobacz kolor został tutaj odpowiednio zastosowany.

5:08Jeżeli teraz taki styl,

5:09nadamy dla wszystkich naszych nagłówków, wystarczy, że tutaj wskażę

5:15ten styl na liście.

5:20Zróbmy to dla wszystkich nagłówków.

5:25To teraz wprowadzanie jakichkolwiek poprawek będzie niesamowicie proste,

5:30ponieważ wystarczy, że tylko zedytujemy odpowiedni styl.

5:33A więc przywróćmy mu ten właściwy kolor.

5:36Skopiujmy go sobie stąd.

5:39Wróćmy tutaj do tego elementu.

5:41Przejdźmy do edit style i teraz przywróćmy ten ciemny kolor.

5:47Jeżeli wrócę do podglądu to jak widzisz ma to zastosowanie do wszystkich nagłówków,

5:51dla których mamy tutaj wybrany ten styl paragraf 300 dark.

5:57W ten właśnie sposób nasza praca będzie znacznie prostsza,

6:00jeżeli będziemy stylować wszystkie swoje elementy.

6:03Ponieważ wyobraź sobie sytuację, że

6:05przyjdzie Ci zmienić kolorystykę na całej Twojej stronie.

6:08Jeżeli będziesz miał wszędzie zastosowane

6:10odpowiednie style, to wystarczy tylko, że zedytujesz.

6:13Wprowadzenie takich poprawek będzie niesamowicie proste.

6:16A skoro jesteśmy przy elementach

6:18tekstowych, to utwórzmy np. styl, powiedzmy

6:23dla tego nagłówka.

6:25W moim przypadku taki styl będzie tutaj nosił nazwę

6:32h2, ponieważ jest to nagłówek drugiego typu kolor dark.

6:38Ok. Klikam create, jak widzisz styl

6:40został odpowiednio utworzony.

6:42Wiem również, że dokładnie taki sam styl będzie miał tutaj zastosowanie, a więc

6:47temu elementowi też nadajemy dokładnie taki sam styl, czyli h2 dark.

6:50Jak się okazuje teraz nasz tekst został tutaj wycentrowany.

6:56Dlaczego tak się stało?

6:57Otóż jak pamiętasz w jednej z poprzednich lekcji mówiłem, że w przypadku stylów dla

7:01tekstu obejmują one również wyrównanie tekstu.

7:05Niestety tak działa to w Bubble.

7:07Jeżeli teraz przeszedłbym do podglądu tutaj tego stylu, kliknął edit style.

7:11Jak się okazuje, właśnie ten tekst jest tutaj wycentrowany.

7:14Dlatego ja rozwiązuję to za pomocą kodów bb-code, o których też już Ci wcześniej

7:18wspominałem, tworząc style dla elementów tekstowych.

7:22Zawsze wyrównuje tutaj ten tekst do lewej strony.

7:26Wróćmy do naszego designu.

7:28Teraz tutaj się to zgadza.

7:30Natomiast w tym przypadku chcemy mieć tekst wycentrowany.

7:33Już wiesz doskonale jak to zrobić.

7:35Wystarczy tutaj zastosować odpowiednie znaczniki.

7:48I teraz możemy wszędzie wykorzystywać ten sam styl, czyli np.

7:52w tym przypadku h2 dark, a dodatkowo tylko

7:54wycentrować sobie ten tekst za pomocą odpowiednich tutaj znaczników bb-code.

7:59Jeżeli chciałbyś tekst

8:00wyrównać do prawej strony, to zamiast center piszemy po prostu right.

8:09Jak widzisz, teraz tekst jest odpowiednio przesunięty tutaj do prawej strony.

8:14Wróćmy jednak do wycentrowania

8:17i dodatkowo wróćmy jeszcze na chwilę do zakładki styles, czyli przechodzimy tutaj.

8:23Jak widzisz mamy tutaj dwa przyciski.

8:25Za pomocą przycisku apply theme

8:27możemy dodać do edytora takie dodatkowe style predefiniowane przez same Bubble,

8:33czyli oprócz tych, które będziemy mieli tutaj zostaną dodane jeszcze dodatkowe.

8:36Część z nich zostanie tutaj nadpisana, natomiast działa to w ten sposób, że Bubble

8:40nigdy nie nadpisuje Twoich utworzonych stylów.

8:43Ewentualnie może nadpisać tutaj style predefiniowane dla grupy przycisków itd.

8:48Jeżeli kliknął bym apply theme.

8:50Jak widzisz mam tutaj

8:52cały szereg różnych takich predefiniowanych stylów dla elementów.

8:56Ja z tej opcji nigdy nie korzystam.

8:58Zawsze sam definiuję style dla wszystkich

9:00swoich elementów, dzięki czemu zgodne są one z moim layoutem i brandingiem.

9:05Dodatkowo nowy styl możemy utworzyć za pomocą tego przycisku.

9:10Znów nie jest to opcja, z której bym korzystał.

9:13Zdecydowanie bardziej wolę ten sposób, którym właśnie tutaj np.

9:18usuwam jakiś styl.

9:20Zmieniam właściwości i z tego poziomu tworzę jakiś swój własny styl.

9:25Przywróćmy tutaj ten styl dla nagłówka.

9:29A skoro wiesz już jak pracować ze stylami,

9:31jak tworzyć nowe style, jak je edytować, to chciałbym, abyś w ramach pracy domowej

9:36ostylował teraz wszystkie elementy tutaj w ramach utworzonej przez nas strony indeksowej.

9:41Ja zrobię dokładnie to samo po swojej

9:43stronie i widzimy się już za chwilę w kolejnej lekcji.