Webflow: Style Kolorów

0:00Witaj w kolejnej lekcji, gdzie pracujemy

0:01dalej nad naszym Style Guide'm, a teraz zrobimy sekcję Color.

0:04Będziemy musieli pożenić odpowiedni nav link.

0:07Natomiast przede wszystkim musimy też całe Section Title i ten podtytuł skopiować, więc

0:13kopiuję, wkleję i tak samo zrobię z tym podtytułem. Przerzucę to na sam dół.

0:17I tak samo podtytuł przerzucimy niżej i tytuł naszej sekcji będzie to Color,

0:23a pod spodem zamieścimy jeszcze dodatkowe informacje,

0:27jak używamy kolorów w kontekście naszego Style Guide'a.

0:31Teraz dzielimy to na taką sekcję jak Background

0:33i drugą sekcję, którą będę chciał zrobić, to będzie sekcja Text.

0:37Generalnie możesz przyjąć, że jeżeli zrobisz sobie raz taki Boiler Plate, taki

0:41szablon Style Guide'a, to będziesz mógł kopiować z niego rozmaite elementy

0:45albo skopiować sobie nawet cały Style Guide i

0:47dopasowywać go w każdym kolejnym projekcie.

0:49O to tutaj chodzi.

0:50W zasadzie zawsze się trzymam podobnej struktury.

0:53Czasem rozbudowuje ją o kolejne elementy.

0:55Czasem zostawiam tylko te, które mam zawsze.

0:57No i, jeśli chodzi o same kolory, to proponuję Ci następujący podział.

1:01Po pierwsze zrobimy sobie sekcję Background kolorów, czyli dodam tutaj zwykły div blok.

1:06Kontener, który będzie na całą szerokość, będzie miał

1:10dodatkowe pewne właściwości, czyli mogę zmienić np.

1:13jego nazwę na Color block.

1:16A następnie ustawić dla niego pewne

1:18właściwości i przede wszystkim zrobimy tutaj na nim jakiś padding np.

1:22rzędu 20 pikseli z każdej strony. Ustawiam dla niego Display na Flex i wyrównuję

1:28elementy do lewej i do prawej strony, zaraz pokażę Ci dlaczego. Ustawiam dla niego np.

1:3210 pikseli marginesu na dole.

1:35Dodatkowo będę chciał wstawić Border z

1:38każdej strony, grubości 2 piksele. Możemy wybrać sobie nasz kolor niebieski

1:43i typ Solid, a Border Radius ustawię na 12 pikseli.

1:48I dodatkowo dodam do tego Color Block'a

1:50jeszcze dwa teksty, dwa text bloki, czyli jeden Text Block do środka

1:56i powielę go sobie i dodam drugi. Pierwszy Text Block to będzie nazwa koloru, czyli np.

2:01Brand jeden, a w drugim text bloku znajdzie się wartość szesnastkowa tego koloru.

2:07No i dobrze. Teraz bardzo istotna rzecz.

2:09Przechodzę do tego Color Block'u i będę definiował osobno kolory tła oraz

2:14kontrastujący z nim kolor tekstu, czyli w momencie, gdy zdefiniuję kolor tła, to dla

2:19takiej samej klasy, chciałbym też ustawić dla niej kolor tekstu, który będzie dobrze

2:22wyglądał na tym tle i to będzie sekcja Background, a w drugiej sekcji zrobię same

2:26kolory tekstu. Natomiast bardzo istotne jest to,, że ja teraz będę chciał dodawać

2:30takie uniwersalne klasy, które będę mógł dodać na dowolny inny element.

2:34One będą miały następującą nomenklaturę:

2:36będzie to Brand np. 1, czyli wpisuję sobie Brand 1, ponieważ będzie to

2:42Background, czyli tło, to dopisuję do tego taką końcówkę BG i teraz, gdybym stworzył sobie

2:48taką nową Combo klasę, znów miałbym problem tego typu, że to by była klasa, która jest

2:54dostępna tylko wtedy, kiedy wcześniej stworzę sobie Color block i w jego wnętrzu

2:58byłaby dostępna klasa Brand1BG. Tak więc nie chcę tego robić.

3:01Najpierw usunę tę klasę Color block i teraz dopiero dodam Brand1BG.

3:07W ten sposób stworzę ją uniwersalnie i

3:09będzie dostępna dla każdego elementu, na którym będę chciał to stylować, ponieważ to

3:14jest BG, to formatuję dwie wartości Background i zmieniam background color na kolor niebieski,

3:19jak również Color i zmieniam kolor tekstu na taki, który jest kontrastujący. Może

3:24to być biały, może to być lekko szary, dowolny, który właśnie mamy w

3:28przygotowanym już Style Guidzie, który przenosimy.

3:30I w ten sposób mam taką klasę Brand1BG, którą mogę teraz dołączyć do dowolnego

3:36elementu. Jeśli skopiowałbym to teraz, wklejam, to mogę np.

3:41usunąć sobie klasę Brand1BG,

3:43wrócić do tej klasy Color Block i teraz, jeżeli na taki Color Block

3:47będę chciał wrzucić Brand1BG, mogę to zrobić ponieważ mam Global Combo Classes

3:52i dostępna jest Brand1BG i ta klasa sformatuje mi to dokładnie tak, jak chcę.

3:56No i świetnie. Przenieśmy to sobie powyżej, na górę.

3:59Jeżeli chodzi o kolory tekstu to robimy je podobnie. Przejdę do Text,

4:02następnie wstawię tutaj zwykłego Text Blocka

4:04i będę też chciał wstawić klasę, która będzie się nazywała Brand 1.

4:09Będzie też uniwersalna.

4:10Tylko, że tym razem nazywa się Brand1Text.

4:13I w takiej klasie Brand1Text,

4:15jedyną rzeczą jaką zmieniam jest kolor, czyli Brand

4:18to będą wszystkie moje kolory. Dlatego nazwałem je w ogóle Brand,

4:22że uważam, że jest to dużo bardziej uniwersalne niż nazywanie tych kolorów np.

4:27midnight-blue, ponieważ ten kolor może z

4:28niebieskiego zmienić się na zielony i już w ogóle taki opis nie będzie pasował.

4:32Więc ja dodaję tutaj ten kolor. No i mam nadzieję, że rozumiesz już tę całą

4:36zasadę, na której się to opiera. Mamy generalne klasy, które możemy dopisać do wszystkiego.

4:40Tyle, że te klasy są dwie różne. Jedne

4:42kończą się na bg, drugie kończą się na text. Tekstem stylujemy tylko tekst, a

4:47bg stylujemy Backgroundy i automatycznie wtedy mamy w nich też zawarty kontrastujący kolor

4:52tekstu, który nam odpowiada. Moim zdaniem jest to rozwiązanie bardzo elastyczne i

4:56fajne i stosuje je w wielu swoich projektach.

4:58Teraz, to co musimy zrobić, to dorobić tutaj rozmaite kolory, więc przejść np.

5:03do Brand1BG, usunąć stąd tę klasę. Zanim ja to usunę to skopiuję sobie.

5:08Wybieram polecenie remove class, nadaję nową klasę, tym razem będzie to Brand2BG i tworzę

5:14nową generalną klasę Brand 2. Następnie idę do właściwości Background Color i ustawię

5:19background color na taki, który mam w Style Guidzie, w xd, w narzędziu graficznym.

5:23To jest bardzo jasny niebieski kolor.

5:24Prawie go tutaj nie widać, a w zasadzie go nie widać, bo to

5:27jest dokładnie taki kolor jak mamy tło dla całego Style Guide'u.

5:31No, ale on jest rzeczywiście jasno

5:32niebieski i my teraz musimy tylko zadbać o to, aby kolor tekstu był do niego

5:37kontrastowy i w związku z tym najlepiej zmienić to na ten nasz główny kolor np.

5:42midnight blue.

5:44I teraz znowu w tej nowo stworzonej klasie

5:46Brand 2, mamy właściwość kolor na tekście i mamy właściwość kolor background i to jest

5:50dokładnie to, co potrzebujemy. To jest schemat do tworzenia wszystkich kolorów.

5:54Czyli to co byśmy teraz zrobili to możemy sobie powielić, możemy następnie zmienić tę

5:59klasę w taki sposób, że to na chwilę skopiuję, usunę tę klasę.

6:03Skorzystamy z klasy Color Block, a następnie dodamy do tego kolejną Combo klasę

6:09Brand2BG i mamy kolejny kafelek sformatowany odpowiednio. No i trzeci, który

6:15czeka na stworzenie, czyli na zmianę z tego Brand2BG, tę klasę usuwam i tworzę klasę Brand3BG,

6:22która będzie miała znowu kolejny kolor.

6:26Teraz jak będziemy dodawać te kolory, czyli

6:28zmieniamy kolor Typography, ale najpierw zmieniamy kolor tła

6:31i załóżmy, że naszym Brand kolorem 3 będzie taki kolor, bardzo jaskrawy zielony.

6:38No i to co potrzebujemy jeszcze zrobić to

6:40dodać ten kolor tutaj do naszych swatch'y.

6:43Teraz mamy dwa kolory już dodane te poprzednie, które miałem. Tego jeszcze nie

6:46mamy, więc jeżeli takiego koloru nie mamy, a jest on naszym kolorem brandowym, zawsze

6:51dodajemy go też tutaj i odpowiednio go nazywamy to będzie kolor Brand 3.

6:55Wybieram polecenie, może z wielkiej litery go zapiszemy,

6:59wybieram polecenie Create i tak samo musimy zmienić nazwę tych

7:03kolorów, czyli midnight blue, chciałbym zmienić jego nazwę na Brand 1.

7:09A ten kolor Light Blue, chcę zmienić jego nazwę na Brand 2.

7:14I teraz jeszcze raz wybierzemy ten trzeci. Mamy Brand 1, Brand 2, Brand 3.

7:183. To co teraz zrobiliśmy jest bardzo ważne,

7:20bo po pierwsze taki zabieg da nam bardzo łatwy dostęp do tego koloru Brand 3.

7:25W momencie, gdybyśmy to Brand 1 i teraz zrobimy styl dla kolejnego tekstu, wkleję go tutaj

7:33i teraz chcielibyśmy go pokolorować jako Brand 3,

7:36natomiast musimy najpierw wyrzucić tę

7:39istniejącą klasę, remove class, tworzymy sobie nową.

7:42Będzie to Brand3Text.

7:44Teraz chcemy zmienić dla tego kolor tekstu na nasz kolor zielony i Brand 3

7:49wystarczy wybrać go stąd i został

7:51zastosowany. W ten sposób, zmieniając kolory,

7:53oczywiście trzeba by było je tutaj odpowiednio

7:55nazwać, ale zmieniając kolory będziemy mogli zmienić to tylko i wyłącznie w

8:00naszym Style Guidzie, osobno dla background i osobno dla tekstu, w momencie , gdy np.

8:04zmienia się jakiś nasz Brand Book i zmieniają się kolory i wtedy zmiany

8:08zostaną zastosowane na całej stronie, ponieważ wszystkie elementy dziedziczące

8:12te kolory zakładam, że będą miały przypisane jako combo klasę np.

8:16Brand3bg albo Brand3Text.

8:18Teraz to co trzeba zrobić to powielić

8:21sobie te kafelki i pozmieniać nazwy, a także wklecić tutaj wartości szesnastkowe,

8:26czyli przykładowo, jeśli mamy taką wartość szesnastkową, to chciałbym, żeby ona była też

8:30widoczna w naszym Style Guidzie, po to, żeby po przejściu do tej strony Style Guide'u dało

8:35się zwyczajnie łatwo to skopiować i na przykład wykorzystać jeszcze gdzie

8:39indziej. Ponieważ nie ma sensu, żebym tłumaczył Ci to jak klikam, bo będzie to po

8:42prostu powtarzanie operacji, które zrobiłem przed chwilą.

8:44Zaraz do ciebie wrócę i wytłumaczę Ci jak wyglądają te gotowe kolory.

8:48Ok, jestem z powrotem, a wygląda to tak. Mamy dodane siedem brand kolorów i jeszcze trzy

8:52takie specyficzne kolory, które zaraz Ci wytłumaczę.

8:55Każdy z nich jest dodany zarówno do tekstu, czyli ma wersję Text oraz ma tę wersję BG,

9:01ma oznaczony numer i każdy z nich także jest dodany do swatch'y, czyli tutaj

9:06również są informacja o tych kolorach. Są odpowiednio one nazwane Brand 1 do Brand 7

9:11i dodatkowe trzy kolory, które stworzyłem to error, warning oraz accept. Dokładnie

9:16tak nazwałem te kolory i mamy odpowiadające im klasy, czyli klasę Color

9:20error BG, później Color warning BG i Color accept BG.

9:23I tak samo mamy klasy tekstowe Color

9:25accept Text, Color warning Text i Color error Text. Zrobiłem te trzy kolory po to,

9:31aby można było stosować je w komunikatach dla użytkownika, często w jakichś modalach,

9:35na guzikach potrzebujemy wyświetlić informację, że coś się powiodło lub też nie

9:39powiodło albo powiodło się z błędem i dlatego te trzy kolory są potrzebne.

9:44Natomiast do mojego Style Guide'a nie dodaję kolorów np.

9:47dziesięciu odcieni koloru szarego, niemniej

9:49jednak dodaję sobie takie kolory do swatch'y. Może powielę na chwilę ten

9:53kolor error text po to, żebym mógł go zaraz usunąć, a teraz wejdę

9:56w dowolną sekcję, gdzie jest Color Picker i to co na ogół jeszcze robię to po prostu

10:00dodaję sobie kolor biały do swatch'y, jako, stworzyć go jako white.

10:05Następnie dodaję kolor czarny, czyli można

10:07go dodać jako kolor Black i dodaję często ze trzy kolory pośrednie, czyli dodaję

10:12kolor jasno szary i zostawiam tak jego nazwę. Później trochę

10:16ciemniejszy i na ogół dodaję jeszcze bardzo ciemnoszary albo jeszcze

10:22jaśniejszy jeżeli będziesz go potem potrzebował np.

10:24do kolorowania jakiejś sekcji, teł, tekstu,

10:27więc na ogół wygląda to właśnie tak, że w swatch'ach mam jeszcze dodatkowe kolory poza

10:32tymi, które są tutaj. To mogę już usunąć, a teraz może zresetuję ten kolor, bo został

10:38on od razu przypisany do klasy Color Error Text, teraz jest w porządku. Więc generalnie mamy

10:42tak że są tutaj wszystkie Brand kolory, teraz dodatkowo kolory accept, warning i error.

10:47I dodatkowo z reguły 5 kolorów, czyli biały

10:50czarny, nie muszą być idealnie biały, idealny czarny,

10:53jeżeli korzystam z innych wariantów tych

10:55kolorów, więc mamy kolor biały, czarny, a następnie trzy kolory, trzy odcienie

10:59szarości, które możemy stosować spójnie na rozmaitych elementach na stronie i one już

11:03występują tylko w swatch'ach, a nie występują w Style Guidzie.

11:07To wszystko na temat kolorów. Mamy naprawdę teraz dość uniwersalny setup,

11:10który pozwoli nam zarówno kolorować tekst,

11:11jak i elementy tła. Do usłyszenia w kolejnej lekcji.