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 katalogusrc/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
.