Webflow: Praca z CSS

Webflow 2020+

0:00Witaj w kolejnej lekcji.

0:01Na chwilę zatrzymałem się jeszcze przy

0:02warstwie teoretycznej ponieważ uważam że zrozumienie tego w jaki sposób działają

0:07klasy oraz ich nadpisywanie w webflow jest po prostu fundamentalne i kluczowe.

0:11Jeżeli tego nie zrozumiesz to będziesz

0:13pracował też w miarę szybko i fajnie ale później okaże się że w klasach które

0:18wygenerowałeś panuje straszny chaos trzeba ciągle dopisywać nowe klasy.

0:22W zasadzie nie da się już niczym połapać webflow.

0:24To nie jest edytor który dla ciebie generuje jakieś śmieciowy kod

0:28wygeneruje taki kod na jaki ciebie stać jako web dewelopera.

0:32No i czasem oczywiście operowanie na

0:34milionach różnych uporządkowanych klas i zagnieżdżeniach tych klas czy combo klasy

0:38które wyjaśnię jest tak naprawdę niepotrzebny gdy

0:42zwyczajnie tworzymy jakiś prosty landing page ale w dużej mierze w większości

0:46projektów które chcemy utrzymywać i które mają być skalowane.

0:49Warto pamiętać o pewnych podstawowych zasadach więc zróbmy taką lekcję trochę

0:54bardziej teoretyczną ale chciałbym na nasz layout dodać przykładowo paragraf który

0:59teraz formatujemy przerzuca tutaj paragraf i jak widzisz jest on sformowany tym

1:04domyślnym krojem pisma które ustaliliśmy już wiesz że pomarańczowe

1:09dziedziczone z body all pages.

1:09Ale teraz przejdźmy nie do Body, a do samego znacznika paragraf.

1:14Dla niego nie mamy w tym momencie żadnego selektora.

1:16Czy rzeczywiście tak jest.

1:18Jeśli klikniemy teraz na selektor okaże się że jednak coś pod spodem

1:23jest ustawiony ten globalny tag dla wszystkich akapitów czyli tag all

1:28paragraf dla wszystkich znaczników p jest jakiś tag który coś definiuje.

1:33Co to takiego.

1:34Na przykład zobacz że mamy tutaj żółte tło i jeśli klikniemy na to.

1:37Okazuje się że to tło jest dziedziczone z tego znacznik all paragraf.

1:41Te właściwości które nie były tam

1:43zdefiniowane po prostu nie są oznaczone w żaden sposób.

1:47Jeśli klikniemy na font okazuje się że jest on dziedziczony body all pages jest

1:50to dobrze bo właśnie tak go zdefiniowaliśmy go wcześniej ale tutaj

1:54mamy dziedziczenie z jakiegoś innego znacznika zgodnie z zachowaniem stylów

1:58m.in. kaskadowością będziemy mogli mieć wiele już teraz klasy

2:04CSS które oddziaływują na taki akapit, a nawet nie będziemy go widzieć w sektorze

2:09m.in. oddziałuje ta klasa body i oddziałuje ta klasa all

2:14paragraf czyli już mamy jak gdyby dwie klasy zagnieżdżone

2:17ale teraz my możemy dalej je nadpisywać zgodnie z kaskadowością czyli możemy

2:21przykładowo nawet nie zrobić tutaj nic ale dodać jakiś konkretny padding np.

2:26od góry dziesięć pikseli. Co się stanie.

2:29Webflow stworzy dla nas kolejną własną klasę.

2:32Czyli już teraz mamy dziedziczenie z dwóch

2:35różnych klas i trzecią paragraf która została stworzona.

2:38Ta klasa paragraf może być przez nas

2:41dowolnie nazwana w ten sposób możemy jej używać też na innych elementach.

2:46A to co zostało w niej zrobione jest oznaczone na niebiesko na pomarańczowo

2:49jest to co dziedziczy z różnych klas, a na niebiesko jest to co zostało w niej

2:52zrobione naturalnie zgodnie z kaskadowością stylów CSS ta klasa ma

2:57większą ważność niż wszystkie te poprzednie więc gdybyśmy dziesięć pikseli

3:01teraz wartością dwadzieścia ona zmieni swój kolor niebieski dlatego że jest

3:06bezpośrednio modyfikowana przez para która znajduje się w sektorze.

3:10Gdybyśmy teraz umieścili kolejny akapit

3:13kolejny paragraf pod spodem to zobacz że nie ma on tej klasy mypara w

3:18związku z tym tak jak ten domyślny zachowuje się dziedzicząc np.

3:23all paragrafs. Gdybyśmy chcieli zmodyfikować wszystkie

3:26paragrafy w związku z tym postępowali byśmy tak jak z Body czyli z adresowali

3:30all paragrafs i teraz pracowali na tych właściwościach.

3:33Są one na niebiesko natomiast gdybyśmy chcieli ten akapit

3:37formać dokładnie tak jak ten to możemy wyszukać sobie naszą klasę.

3:40Mypara z której już wcześniej skorzystaliśmy i ją narzucić i ona wtedy

3:44będzie zdeterminowana te dwie wielkości które nadpisują poprzednie.

3:48Myślę że jeżeli rozumiesz CSS to jest

3:50jasne ale ważne jest żebyś zrozumiał rzeczywiście jak działa to pole selektor

3:55że są te klasy tagów dodane czy sektory tagów dodane wcześniej które są na różowo

4:01i także jakie są kolory czy niebieskie i pomarańczowe.

4:04Co to oznacza w edytorze.

4:07Myślę że teraz jest to już dużo bardziej

4:09klarowne i my jednocześnie stworzyliśmy coś takiego jak tzw.

4:13combo Class bo ta klasa jest trzecią w

4:16kolejności która wpływa w jakiś sposób na paragraf na akapit

4:20i tych combo klas możemy tworzyć bardzo dużo i w nieskończoność przykładowo możemy

4:25tutaj kliknąć i stworzyć jeszcze jedną klasę more class np.

4:29I ta klasa one more.

4:30To jest w tym momencie to co będziemy edytować czyli jeśli teraz dodamy jeszcze

4:34dodatkowo jakoś jakiś margines typu d ziesięć pikseli od góry i z modyfikuje

4:38padding na piętnaście to zgodnie z kaskadowością.

4:41Zobacz że teraz ta klasa one more dopiero determinuje te dwie wielkości i w ten

4:46sposób możemy sobie tworzyć bardzo dużo combo klas.

4:49Będziemy to stosowali w praktyce pokażę ci jak najlepiej wykorzystać te systematyke

4:53combo klas ale na razie chciałem żebyś właśnie to wiedział.

4:57Teraz możemy usunąć tę klasę jeżeli.

5:00To oczywiście jak widzisz wracamy do tego

5:03pierwotnego trybu i mypara też możemy usunąć ale jeśli usuwamy je stąd to one

5:08tak czy inaczej zostaną w tym naszym globalnym arkuszu stylów.

5:11Jeśli przeniesiemy się do stylów CSS

5:13stylów menadżera to okaże się że mamy szereg jakichś różnych rzeczy.

5:17No i teraz możemy je szczegółowo omówić

5:19więc mamy na różowo zaznaczone te domyślne zapisane klasy dotyczące tagów.

5:26W momencie gdy użyjemy np.

5:27kolejnego elementu.

5:29Gdybyśmy webflow przykładowo wybrali sobie teraz jakąś listę czy weźmy stąd

5:34listę i wrzucamy ją na canvas to okaże się że lista po przejściu do

5:39Style ma też jakieś bazowe ma też bazowe style padding czterdzieści.

5:44I okazuje się że jest to dziedziczone all unordered list.

5:47Dopóki w żaden sposób tego nie modyfikuje to nie będzie nam się pojawiać w stylach.

5:51Ale gdybyśmy to zmodyfikowali czyli all unordered list zmienili mu padding np.

5:56na dwadzieścia.

5:57To w tym momencie już pojawi się nam to all unordered list style menadżerze możemy

6:03tu zobaczyć dwie rzeczy przede wszystkim mamy kolorystyczne rozróżnienie klasy

6:06tagów które zostały wcześniej zdefiniowane i tych tagów nie da się edytować jeśli

6:10chodzi o ich nazwę natomiast nasze własne klasy które stworzyliśmy możemy stąd

6:15edytować ich nazwy możemy również zobaczyć poziomy zagnieżdżenia.

6:19Stworzyliśmy klasę mypara, a później jako

6:21combo klasę daliśmy do niej klasę one more.

6:24I to jest widoczne z pomocą tego małego plusa i to zagnieżdżenie gdybyśmy robili

6:29więcej combo klas będzie tutaj też widoczne.

6:31Czy to znaczy że one more dziedziczy tylko z mypara.

6:34Nie ponieważ para dziedziczyło dodatkowo styles all paragraf.

6:38Może też dziedziczyć z body all pages i też mogliśmy to zaobserwować.

6:42Ale jeśli stworzymy taką combo klasę

6:44bezpośrednio jako selektor no to wtedy będzie to widoczne.

6:48Teraz okazuje się że w zasadzie nic nie

6:51korzysta z tych klas mypara i on more, a mimo wszystko są w style menadżerze.

6:54Możemy więc wybrać opcję clean up i zobacz że możemy teraz potem posprzątać czyli

6:59wywalić te klasy z których nic nie korzysta m.in..

7:03Są to też takie klasy

7:04utility page wrap i utility page content które były na stronie 404.

7:08Ja teraz wybieram remove i pozbyłem się wszystkich niepotrzebnych rzeczy,

7:12a jeżeli coś korzysta z jakiejś klasy to nie będę mógł tego usunąć.

7:16Przykładowo na stronie 404 żeby usunąć te klasy które były nam niepotrzebne

7:22musieliśmy wcześniej przejść do form i w zakładce stylów była tutaj klasa trzeba

7:28było ją stąd skasować no i dopiero wtedy możemy ją usunąć.

7:32Czyli jeżeli dopiero klasy są nieużywane.

7:35Możemy się ich pozbyć i posprzątać style menadżerze.

7:37Jeśli przykładowo wyrzucił bym całą listę teraz to zobacz że obok

7:43all unordered list nie pojawia się ta mała ikonka która pozwala podejrzeć co

7:48gdzie jest ale też opcja clean up nie pozwala mi tego usunąć.

7:53Dlaczego tak jest w momencie gdy ja rzuciłem listę na canvas do webflow wtedy

7:58został stworzony sektor tagu i sektor dla list i ja go zmodyfikowałem.

8:03Stąd on tam siedzi dalej zmodyfikowany i akurat tych sektorów w tym momencie nie

8:07mogę usunąć ale zupełnie mi to nie przeszkadza.

8:09Będę zresztą później korzystał z list.

8:11No i jeszcze jedna rzecz którą można zasygnalizować gdybyśmy korzystali z

8:16przykładowo linków to linki mają takie ustawienia.

8:19One oczywiście mają też jakąś bazowy

8:22HTML tag czyli all links z którego korzystają.

8:24Możemy go zmieniać

8:26ale dodatkowo to co możemy zrobić jeszcze teraz klikając na tę małą strzałke

8:30modyfikując all link to mamy coś takiego jak stany .

8:34Ostatnim elementem który warto omówić np.

8:37są pseudo klasy hoover i zobacz że jest znowu zaznaczony innym kolorem.

8:42My możemy wprowadzić kolejne modyfikacje

8:44wszystkie te rzeczy są skądś dziedziczone w tym przypadku albo np. z body all pages.

8:48Gdy wprowadzimy modyfikacje to teraz będzie to modyfikacja która dotyczy tylko

8:52wszystkich linków ale tylko i wyłącznie w stanie Hoover czyli w momencie gdy

8:56użytkownik jedzie nad myszą i myślę że te wszystkie rzeczy które

9:00warto tutaj wiedzieć należy pamiętać o tym żeby patrzeć.

9:04W te znaczniki te sektory bo jak widziałeś webflow gdybyśmy nie stworzyli żadnego

9:09sektora sami tam po prostu zrobi go dla nas dla modyfikacji które tworzymy na

9:13elemencie więc zawsze jak klikamy w jakiś element warto się zastanowić czy my chcemy

9:19zmodyfikować coś i tym samym stworzy nam się automatycznie nowe selektor w ten

9:22sposób może powstać dużo zbędnych klas czy raczej chcemy od czegoś zacząć i dopiero

9:27to modyfikować albo po tych modyfikacjach pamiętać żeby zmienić na przykład nazwę

9:32tej klasy na bardziej intuicyjne tak żebyśmy mogli z niej później skorzystać.

9:36Ja teraz usuną te elementy.

9:37Wróciłem tym samym do stanu początkowego i

9:39co prawda że mam teraz trzy niepotrzebne tagi ale te i tak naprawdę będą potrzebne

9:43bo z wszystkich tych elementów będę później korzystał projektując stronę.

9:47To wszystko w tej lekcji mam nadzieję że

9:48teraz zdecydowanie lepiej rozumiesz to jak pod spodem działała webflow.

9:51Jeśli chodzi o style CSS.

9:53Jak dużo możliwości mamy w kontekście modyfikacji istniejących sektorów, a także

9:57tworzenia swoich własnych i dodawania klas.

9:59Nie ma żadnej magii tak naprawdę mamy nad tym bardzo dużą kontrolę dokładnie taką

10:03jakbyśmy sami kodowali stronę to wszystko na teraz.

10:06Do usłyszenia.