CSS: Czym jest Atomic Design

0:00W tej lekcji opowiem o Atomic nizinie i tutaj od razu wskaże na

0:05darmowego Buka Brada Prosta który generalnie jest takim trochę ojcem atom

0:11glinu i najlepiej zrozumieć Atom ich wierzeń.

0:15Na pewno Czytając tą książkę Ja jestem

0:17wielkim zwolennikiem atomu i leasingu korzystam z niego w bardzo wielu

0:21moich projektach i generalnie jak działa atom jak diesel.

0:27Atomic design odnosi się bezpośrednio do

0:29chemii i te analogie próbujemy przenieść na strony internetowe.

0:35Aby tworzyć skale owalne architektury takim najbardziej nie podzielonym.

0:42Blokiem z którego możemy budować rzeczy w naturze są atomy.

0:47Oczywiście dalej te struktury rosną i z

0:51atomów powstają mole kukły a z leków już pojedyncze organizmy.

0:57I ta analogia jest przeniesiona do kodu czyli np.

1:00atomy to mogą być najbardziej nie podzielone bloki kodu takie jak np.

1:05import negatywny HTML owy impuls który tam

1:08ma jakieś style może być atomem ponieważ nie da się go jakby bardziej podzielić tak

1:14samo baton mógłby być teoretycznie betonem.

1:17Tak samo baton mógłby być teoretycznie

1:20atomem pomimo tego że zawiera w sobie tekst to jest na tyle małą częścią

1:27całej układanki jaką jest nasza strona internetowa no to mógłby wpaść w tę opcję.

1:33Natomiast mogłaby być nasza wizytówka którą tworzyliśmy w poprzednich

1:38lekcjach ponieważ składała się ona z kilku małych części jak na przykład.

1:44Blok tekstu i jakieś logo czyli konkurs.

1:50W związku z czym mole kukły mogą zawierać w sobie atomy ale generalnie np.

1:55nie powinny zawierać w sobie organizmów.

1:58Organizmy natomiast mogą zawierać w sobie zarówno mole kły jak i atomy w zależności

2:03od potrzeb i przykładowo organizmem mógłby zostać jakiś heros Section albo menu

2:10nawigacyjne w którym mamy dużo tonów dużo pojedynczych komponentów jak np.

2:15panel logowania dla klienta i tym podobne.

2:19I w ten sposób możemy

2:21podzielić strukturę naszych katalogów czyli stworzyć sobie komponenty wewnątrz

2:26tego katalog Atom wewnątrz tego katalog molekularne wewnątrz tego katalog organizm

2:33no i oczywiście idąc dalej tutaj brat robi odniesienia do chemii i

2:40to jest ta podstawowa część zgodna z naturą Atomic designu.

2:46Dalej przechodzą bardziej abstrakcyjne

2:48koncepcje takie jak placki oraz Page i te klatki to generalnie szablon.

2:54Dla pojedynczych stron które składają się z różnych organizmów leków i atomów

2:59czyli można by powiedzieć że te planety to szablony dla stron a strony to są

3:05faktycznie strony z których korzystamy na co dzień czyli np.

3:08strona główna byłaby już komponenty typu

3:11Page i ona mogłaby implementację Pojedynczą klatkę np.

3:16.

3:18Landing page. Jeżeli jest taka plotka zdefiniowana.

3:22Jeżeli tworzyli byśmy np.

3:24kroki koszyka no to moglibyśmy stworzyć sobie tę plotkę

3:28kart jak koszyk po angielsku i kilka stron kilka kroków koszyka.

3:33Mogłoby tą placówkę komplementował.

3:36Wyglądać mniej więcej tak samo.

3:39Ale z mniejszymi różnicami.

3:43I generalnie tutaj brat.

3:46Omawia dokładnie co jest atomem co jest mole kółkiem.

3:50Tutaj mamy przykład mleku czyli jakaś wyszukiwarka przykład organizmu czyli

3:55faktycznie sekcja zmieni nawigacyjnych i pojedyncze strony.

3:59Jest to naprawdę dobry Bóg i polecam go

4:01przeczytać jeżeli nie macie problemu z angielskim.

4:04Natomiast podsumowując to jest klub Atom

4:08i tutaj warto też nadmienić że Atom nigdy tak samo jak zresztą

4:13nie wyklucza żadnych innych metodologii ani konwencji ratowniczych więc nie ma

4:17problemu korzystania z atomu glinu oraz Bema.

4:20Czy zatem IS Maxa czy Object orientację a te technologie dopełniają się nawzajem.

4:28I nie są sobie przeciwstawne.

4:30Oczywiście niektórych podejść możemy nie lubić.

4:32My jako deweloperzy

4:34ale to jest mocno indywidualna kwestia bądź kwestia która podlega

4:39w danym projekcie którzy wybierają architekturę danego sita.

4:44Więc to co chciałbym żebyś zapamiętał w kontekście Atomic designu jest to że atomy

4:50są to najbardziej nie podzielone części naszego interfejsu czyli np.

4:54in płoty batony fragmenty tekstu i tym podobne.

4:59Czyli to jest przykładowy atom.

5:02Dalej kukły to są komponenty które komponuje sobie

5:07kilka różnych atomów ale nie mają dostępu ani do organizmów ani do klatek ani do

5:14organizmy.

5:15To coś co łączy w sobie zarówno Sekuły atomy

5:21w dowolnej liczbie i w dowolnej konfiguracji i w klatkach i w parach.

5:27Po prostu używamy.

5:30Tych gotowych organizmów leków i atomów

5:33już bez żadnego problemu nie ma problemu np.

5:36żeby w klatce użyć bezpośrednio Atomu nie

5:38musimy tworzyć całego organizmu na ten atom często nie ma to sensu.

5:43I tak właśnie wygląda Atomic design.

5:45Polecam go osobiście ponieważ całkiem nieźle otworzyła mi się strony przy jego

5:50pomocy ale oczywiście ostateczną decyzję zostawiam tobie.