Bubble: Sekcja Companies

0:00Cześć! Mam nadzieję, że praca domowa nie sprawiła

0:02Ci problemu i odpowiednio ostylowałeś elementy na naszej stronie indeksowej.

0:06Ja pokażę Ci w jaki sposób ja do tego podszedłem.

0:09Tak jak wspominałem wcześniej, staram się

0:11zachować pewną konsekwencję w tworzeniu nazw swoich stylów.

0:15Jak widzisz mam tutaj element logo w kolorze primary.

0:19Podobnie zresztą zrobiłem to tutaj.

0:22Mam element navlink w kolorze dark.

0:25Odpowiednie style dla przycisków, to styl outline.

0:29W tym przypadku jest to styl primary.

0:33Dodatkowo poprawiłem tutaj wszystkie teksty na naszej stronie.

0:36Tam gdzie tekst musiał być wycentrowany, zastosowałem odpowiedni bb-code.

0:41W ten sposób mogłem tutaj wykorzystać odpowiedni styl.

0:44Jeżeli nie chcesz korzystać z tych kodów bb-code, to oczywiście możesz stworzyć

0:49osobne style dla nagłówków, bądź innych tekstów i np.

0:53mieć osobny styl na wyrównania do lewej strony,

0:56wyśrodkowania, bądź wyrównania do prawej.

0:58Zastosuj takie podejście, jakie sprawi Ci

1:01po prostu mniej kłopotu i z którego będzie Ci się lepiej korzystać.

1:04Moje nazewnictwo stylów

1:06czasami prowadzi do utworzenia takich dosyć długich nazw, np.

1:09w tym przypadku jak widzisz mam tu styl _group-white-rounded-shadow.

1:14Natomiast takie podejście sprawia, że

1:16doskonale wiem jak będzie wyglądał ten element.

1:19Czyli jeżeli nadam taki styl dla mojej grupy to

1:21będzie ona w kolorze białym, okrągła i będzie posiadała odpowiedni cień.

1:26Skoro to już jest jasne, to możemy wrócić do naszego projektu wzorcowego i tym razem

1:31naszym zadaniem będzie odtworzenie tej sekcji, czyli tutaj sekcji z firmami,

1:36z którymi współpracujemy w ramach naszego projektu.

1:41A ponieważ ta sekcja jest w dużej mierze

1:42powieleniem sekcji about as, to tym razem praca przebiegnie nam wyjątkowo szybko.

1:46Wracamy do edytora.

1:50Zaznaczamy grupę about, kopiujemy i wklejamy.

1:54Musimy teraz zadbać o to, aby pojawiła się

1:56ona na samym dole, czyli wybieramy opcję make last.

2:02To, co chcę zrobić w pierwszej kolejności, to tutaj zastosować odpowiednią ikonkę.

2:07Przechodzimy więc do strony z ikonami.

2:14Namierzamy odpowiedni pack, odpowiednią ikonkę.

2:21W moim przypadku jest to ta ikona.

2:30Następnie oczywiście.

2:33Kopiujemy teksty.

2:43I jeszcze ten tekst pod spodem.

2:56No i teksty mamy już z głowy.

2:57Możemy się pozbyć tej grupy.

3:00Jest ona nam tutaj nie potrzebna i przystąpmy do stworzenia tego układu.

3:07Jeżeli zastanawiasz się, w jaki sposób go

3:08osiągnąłem, to jest to po prostu zastosowanie naszej standardowej techniki.

3:13Czyli mamy tutaj 4 grupy o minimalnej szerokości 320 pixeli,

3:18a cały kontener ma oczywiście 1280 pixeli maksymalnej szerokości.

3:25Dodajemy więc grupę, nadajmy jej odpowiedni layout.

3:31W tym przypadku jest to oczywiście row, odznaczamy

3:36tutaj nie chcemy minimalnej szerokości, chcemy natomiast maksymalną.

3:42I oczywiście jeszcze zadbajmy o to, żeby ta grupa była wycentrowana.

3:52Nazwijmy ją może przy okazji od razu.

3:59Ok. Dodajemy w środku kolejną grupę.

4:05Nazwijmy ją tym razem,

4:09oczywiście bez literówek.

4:20Tutaj znów chcę zastosować row.

4:24Chwilowo nadam tej grupie stałą szerokość 320 pixeli, aby lepiej mi się

4:29po prostu z tym pracowało. Mogę teraz wrócić do elementu rodzica.

4:35Mamy jakiś problem z zapisem,

4:37czekajmy.

4:39Pojawił nam się tutaj napis time out.

4:42Jak już wspominałem, gdy coś takiego się dzieje, wystarczy tylko odświeżyć stronę.

4:48Niestety nasze zmiany prawdopodobnie nie zostaną zapisane.

4:51Ale to nic.

4:53Zaraz zobaczymy, na którym elemencie nasz edytor się zatrzymał.

4:58Strona z edytorem załadowała nam się ponownie.

5:00Sprawdźmy więc, w którym miejscu nasz

5:06edytor przestał zapisywać zmiany. Tutaj,

5:09aha, już widzę, że

5:11znów przywrócona jest ta minimalna wysokość, a więc oczywiście musimy ją wyzerować.

5:16Dodatkowo widzę też jeszcze jeden problem w nazewnictwie.

5:21Ta grupa będzie nosiła nazwę companies-row.

5:27Oczywiście tutaj dla całego tego kontenera głównego nadamy nazwę companies.

5:35Ok, skoro to już jest tutaj gotowe to mamy odpowiednią nazwę.

5:40Grupa jest wycentrowana, posiada odpowiednie layout.

5:44Mamy w środku grupę companies-inner.

5:47Mamy tutaj szerokość 320 pixeli, czyli tak jak trzeba.

5:53Dodajmy więc do środka kolejną grupę.

5:59W tym przypadku będzie to grupa o layout'cie align to parent i nazwie

6:08company.

6:11Odznaczamy tą wartość.

6:14Nie chcemy tutaj

6:15minimalnej szerokości, natomiast chcę, aby ta grupa miała stałą wysokość równą 65

6:23pixeli oraz marginesy z lewej i z prawej strony równe 20 pixeli.

6:32A więc możemy wrócić do jej rodzica, czyli

6:35companies-inner i teraz usunąć tutaj minimalną wysokość.

6:40Ten layout powoli zaczyna przypominać ten, którego potrzebujemy.

6:44Musimy teraz dla tej grupy company nadać odpowiednie style.

6:50Usuwam te istniejące.

6:53Wybieram tutaj jednolity kolor biały.

6:58Dodatkowo zwróć proszę uwagę na jedną bardzo ważną rzecz.

7:01Jeżeli teraz tutaj kliknę to okienko

7:02wyboru kolorów, to te kolory na chwilę obecną są inne niż u Ciebie.

7:07Ja zmieniłem je na takie, z których najczęściej korzystam w moim projekcie.

7:12Już Ci pokazuję gdzie można to ustawić.

7:14Wystarczy, że przejdziemy do zakładki settings.

7:17Tutaj z kolei wybieramy zakładkę general.

7:20Kolejno musimy zjechać tutaj na sam dół i w sekcji color palette

7:26możemy zdefiniować te kolory, z których będziemy korzystać najczęściej.

7:30Jeśli chcesz mieć takie same kolory u siebie jakie ja stosuję, to zapauzuj

7:34video w tym momencie i pouzupełniaj te wartość.

7:42Mam nadzieję, że już to zrobiłaś, że Twoja paleta kolorów zgadza się z mają,

7:46tak więc możemy wrócić do zakładki design i kontynuować naszą pracę.

7:51To co chcę zrobić teraz to zaznaczyć tą grupę company, skopiować i wkleić.

7:57I teraz ten układ zaczyna już przypominać ten znany nam z projektu wzorcowego.

8:02Następnie wstawiamy tutaj obrazek.

8:08Ja tutaj wykorzystam

8:13logotyp trello.

8:15To, co chcę jeszcze zrobić, to nadać temu obrazowi stałą

8:21szerokość w tym przypadku będzie to 80 pixeli.

8:25Min height może pozostać taki, jaki jest tutaj

8:28nie ma to żadnego znaczenia.

8:30Teraz mogę skopiować taki obrazek.

8:33Wkleić go tutaj.

8:35I oczywiście

8:37podmienić.

8:39W tym przypadku będzie to Microsoft.

8:49I jedna sekcja jest już tutaj gotowa.

8:52Dodatkowo dla całej tej grupy companies-inner

8:54chcę nadać margines na dole równe 30 pixeli, a dla

9:00całego kontenera, czyli companies-row margin bottom to 50 pixeli.

9:09To co mogę zrobić teraz, to wrócić do

9:11companies-inner, skopiować i wkleić tu jeszcze 3 razy.

9:23Kolejno dla każdej takiej grupy musimy

9:25odznaczyć fixed-width i wtedy zostawiamy minimalną szerokość 320 pixeli.

9:30Maksymalnej nie musimy tutaj definiować.

9:33Zróbmy to samo

9:34tutaj dla każdej tej grupy.

9:43Pozostaje nam tylko teraz tutaj powgrywać odpowiednie logotypy.

9:48Ja to zrobię w międzyczasie, ponieważ nie chcę marnować Twojego czasu.

9:51I widzimy się już za chwilę, w kolejnej lekcji.