Rozpoznanie i designy

Przed rozpoczęciem procesu kodowania warstwy wizualnej należy dokonać szczegółowej analizy projektów graficznych. Zadaniem developera tutaj jest rozbicie designów na małe, reużywalne bloki. Przejrzenie wszystkich grafik dostarczy nam wiedzy, w jaki sposób powinniśmy dokonać tego podziału, aby jak największa ilość kodu była możliwa do użycia w wielu miejscach. Modularne podejście jest kluczem do dobrego frontendu. Każdy z bloków powinien dostać swoją własną, unikatową, opisową nazwę.

Parowanie designu z plikiem html

Fronthack dostarcza proste, acz potężne narzędzie ułatwiające ten proces wyodrębniania i nazywania elementów interfejsu, oraz umożliwiające podłożenie pliku graficznego pod kod, co pozwala tworzyć implementacje identyczne co do pikseli z projektem wizualnym.

Załóżmy, że chcemy zakodować stronę główną projektu, plik index.html. Niezależnie, czy dostaniemy designy w formie pliku Sketch’a wyeksportowanego do Zeplin’a, czy w formie pliku Photoshop’a, wyeksportujmy ekran strony głównej do pliku *.jpg lub *.png. Następnie umieśćmy go w naszym nowo stworzonym projekcie, w katalogu src/designs.

Teraz musimy ten plik graficzny połączyć ze stroną, która nas interesuje. W tym celu służy komenda fronthack design. Za jej pomocą wybierz z listy odpowiedni plik podstrony (w tym przypadku będzie to jedyny na tą chwilę dostępny index.html), a następnie, w kolejnym kroku, wgrany plik z grafiką.

Co się dzieje pod spodem?

Komenda fronthack design tworzy nowy wpis w pliku /src/dev-scripts/dev.css, wyświetlający na danej stronie wybrany plik graficzny jako własność background-image taga body. Ponadto za każdym razem sprawdza szerokość w pikselach wszystkich plików w katalogu src/designs. Jeżeli będą one miały różną szerokość, narzędzie nie zadziała poprawnie i komenda zwróci błąd.

Po użyciu powyższej komendy i odpaleniu lokalnego serwera developerskiego (npm run dev), za pomocą przycisku w prawym dolnym rogu w przeglądarce będziemy mieli możliwość przełączania widoków pomiędzy następującymi trybami:

• tylko kod
• kod i design (tryb kalki)
• tylko design

Narzędzie do wizualnego wydzielania bloków

W trybie “tylko design”, mamy dodatkowo możliwość rysowania na designach, za pomocą myszki bloków, którym nadajemy konkretną nazwę. W ten sposób tworzymy sobie dokumentację referencyjną i wiemy jakie komponenty stworzyć w następnej fazie - fazie kodowania. Aby zapisać stworzone kanwa, klikamy przycisk “Save canvas” w prawym dolnym rogu ekranu. Wygeneruje nam plik, który należy ręcznie wgrać do znajomego już katalogu /src/dev-scripts/. Proces ten pewnie zostanie zautomatyzowany w przyszłych wersjach Fronthack’a.

Na co warto zwrócić szczególną uwagę?

Wydzielając nowe bloki, należy mieć na uwadze następujące rzeczy:

1. Komponent czy Layout

Pamiętajmy, że mamy dwa rodzaje bloków: komponenty (np. logo, listing-item, rating, tabs) oraz elementy layoutowe posiadające własną konwencję nazw (np layout-header, layout-footer, layout-landing.

2. Modyfikatory

Zastanów się, czy dany blok nie może być modyfikatorem innego. Mowa dokładnie o tych modyfikatorach z BEM’a. Kiedy utworzyć tylko nowy modyfikator, zamiast całego nowego komponentu? Gdy można użyć tego samego, albo bardzo zbliżonego markup’a i styli, co istniejący już komponent. Klasa modyfikująca może zawierać nowe dodatkowe style, oraz nadpisywać poprzednie. Przykład komponentu z modyfikatorem to listing-item listing-item--highlighted.

3. Konwencja nazw

Zdarza się, że nazwy wymyślonych komponentów zostają później przyjęte przez development team i np. użyte w bazie danych i dokumentacji. Świetnie trzymać się wszędzie tej samej konwencji nazw. Niech taki blog post wszędzie posiada nazwę blog post, a nie article/post/news etc. Taka unifikacja bardzo ułatwia to komunikację, a jej brak jest potem bardzo odczuwalny.

4. Komponenty Fronthack’a

Jednym z kluczowych elementów Fronthack’a, które zdeterminowały jego powstanie jest repozytorium gotowych komponentów startowych. Aby nie wywarzać otwartych już drzwi, warto zapoznać się z nimi pod adresem styleguide.fronthack.com. Jeżeli potrzebujemy na szybko wyświetlić listę machine name’ów komponentów, możemy użyć polecenia fronthack list.