Moja mini-seria o metodykach CSS powoli przestaje być “mini”… Mamy dziś już bowiem czwartą jej odsłonę, w której postaram się przybliżyć kolejną metodykę o nazwie Atomic Design! Nie jest to już taki staroć jak omawiane wcześniej OOCSS, BEM czy SMACS - po raz pierwszy usłyszeliśmy o niej w roku 2013 za sprawą Brada Frosta.

P.S. Nie myl proszę, metodyki Atomic Design z frameworkiem Atomic CSS. Dziś przedstawiam założenia metodyki - omówienie frameworka to zupełni inny temat, materiał na osobny wpis…

Co to jest Atomic Design

Metodyka Atomic Design została zaproponowana przez wspomnianego Brada Frosta w artykule jaki ukazał się na jego blogu. Jak można tam przeczytać, jest ona przeznaczona do tworzenia “systemów designu” stron internetowych. Nie jest to już więc czysta metodyka CSS, a raczej propozycja podejścia do tematu projektowania layoutów.

Poniekąd jest ona trochę podobna do opisanej ostatnio metodyki SMACSS, w tym sensie, że definiuje pewien sposób podziału elementów strony internetowej. W odróżnieniu jednak od SMACSS, Atomic Design kategoryzuje elementy od szczegółu do ogółu… czyli, że na odwrót.

Cały zamysł tej metodyki można zawrzeć w poniższym diagramie (źródło obrazka pod wpisem):

Atomic Design - diagram

Jak widzisz, podział ten wzorowany jest na pojęciach fizyczno-chemicznych…. Kategoryzację rozpoczynamy od najmniejszego elementu czyli atomu. Z atomów składają molekuły. Z molekuł z kolei zbudowane są organizmy.

Dalej metodyka ta odchodzi już od skojarzeń naukowych ponieważ mówi ona, że z organizmów składają się “templejty” (czyli po naszemu szablony), a z nich z kolei całe strony. Poniżej podaję więcej szczegółów dotyczących każdej kategorii.

Podejście to przeznaczone jest, jak już wspomniałem, do tworzenia systemów designu. Ma to pozwolić na zbudowanie całego projektu interfejsu od podstaw - najpierw definiujemy design pojedynczych atomów. Kiedy etap ten mamy za sobą, możemy przejść do molekuł, które budujemy ze zdefiniowanych już wcześniej atomów itd.

Atomy

Tak jak w świecie rzeczywistym, wszystko zbudowane jest z atomów, tak w metodyce Atomic Design cały interfejs użytkownika można rozbić na pojedyncze, niepodzielne elementy nazywane właśnie atomami. Pojedynczy atom jest więc najmniejszym możliwym element interfejsu, którego nie można już rozbić na mniejsze podzespoły.

Do atomów należą na przykład, takie elementy HTML jak button, label, input czy h1. Dla każdego z nich możemy zdefiniować style - zarówno ogólne jak i szczegółowe. Dla przykładu, element button mógłby posiadać poniższe style (Sass):

button {
  background: #bcbcbc;
  border: none;
  color: #fff;
  border-radius: 3px;
  padding: 10px 5px;
  margin-bottom: 10px;
  font-size: 14px;

  &.primary {
    background: #2382ff;
  }
}

Założeniem podejścia Atomic Design jest to, że najpierw definiujemy wszystkie style dla elementów atomowych. Jak możesz wywnioskować z powyższego przykładu, chodzi zarówno o style domyślne jak i różne warianty zależne od sytuacji i przeznaczenia.

Molekuły

Molekuły to kolejna po atomach warstwa abstrakcji proponowana przez metodykę Atomic Design. Buduje się je oczywiście z pojedynczych, zdefiniowanych wcześniej atomów.

Każda molekuła to element odpowiadający za pojedyncze zadanie, czyli powinna ona spełniać zasadę pojedynczej odpowiedzialności (“single responsibility principle”). Można powiedzieć, że są to swego rodzaju małe, re-używalne komponenty - wydaje mi się, że metodyka ta idealnie wpasowuje się w znane dziś modele komponentów, znane z React, Angular 2 czy Web Components.

Przykładem molekuły może być na przykład para label + input:

<label for="name">Name:</label>
<input id="name" type="test" />

Innym dobrym przykładem molekuły jest przycisk zawierający ikonę (w przykładzie użyłem ikon Font Awesome):

<button class="primary">
  <i class="fa fa-search"></i>
</button>

Molekuły raczej nie posiadają własnych stylów - bazują one na stylach zdefiniowanych dla poszczególnych atomów, które powinny być wystarczające.

Organizmy

Ogólnie rzecz biorąc organizmy to trochę większe i bardziej skomplikowane komponenty interfejsu, zbudowane zarówno z molekuł ale też pojedynczych atomów, a nawet innych organizmów.

Przykładami organizmów mogą być takie sekcje interfejsu użytkownika jak nagłówek, stopka czy “sidebar”. Poniżej prosty przykład organizmu nagłówka:

<header>
  <h1>Company name</h1> <!-- atom -->

  <!-- menu molecule -->
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

Odróżnienie molekuły od organizmu może sprawić pewien problem. Ogólnie to wydaje mi się, że przede wszystkim istotne jest czy dana struktura spełnia zasadę “pojedynczej odpowiedzialności”. Jeśli nie, to raczej jest to już organizm, a nie molekuła.

Szablony oraz całe strony

W tym miejscu kończymy już z analogią naukową. Po krótce omówię teraz szablony oraz całe strony. Nie bez powodu znalazły się one tutaj razem, są one bowiem ze sobą mocno powiązane.

Template’y (czyli po naszemu szablony) są kolejnym uogólnieniem tego co dotychczas omówiliśmy. Napewno domyślasz się, że są to zebrane “do kupy” organizmy… i faktycznie tak jest. Przedstawiają one ogólny szkielet strony i są swego rodzaju “placeholderem” na dane, które będą ostatecznie wyświetlane jako gotowa strona.

Na tym etapie tworzenia layoutu chodzi o to, aby prawidłowo zdefiniować parametry odpowiedzialne za wyświetlanie dynamicznej zawartości, która może wypełnić wspomniane “placeholdery”.

Z tego też bezpośrednio wynika czym, w metodyce Atomic Design, jest strona. Jest to właśnie szablon, wypełniony danymi, grafiką i tym podobnymi elementami, które razem tworzą wynik całego procesu projektowania - stronę internetową.

Podsumowanie

Jako podsumowanie przedstawiam dobrą ilustrację tego czym są poszczególne elementy tej metodyki oraz jakie są pomiędzy nimi zależności (źródło obrazka na końcu wpisu):

kolejne etapy atomic design

Powyżej dobrze widać, na czym polega projektowanie interfejsu użytkownika w oparciu o metodykę Atomic Design. Na początku projektujemy najmniejsze możliwe elementy czyli atomy. Następnie łączymy je razem tworząc molekuły. Te z kolei grupujemy w organizmy, które to tworzą szablony. W efekcie, w połączeniu z rzeczywistymi danymi uzyskujemy wynikową stronę internetową.

Jeśli zainteresowała Cie ta metodyka, to polecam zapoznać się z dostępną on-line książką Brada Frosta, na ten właśnie temat. Na bazie tej metodyki powstało narzędzie Pattern Lab, ułatwiające projektowanie layoutu zgodnie z tą metodyką!

Źródło zdjęć w tekście: http://bradfrost.com.


Wpis ten jest częścią serii na temat metodyk CSS - poniżej linki do wszystkich części serii: