Kodowanie pierwszej strony

Jeśli rozpoznanie designów i parowanie masz już za sobą, czas przystąpić do części właściwej - pisania kodu.

Rozpocznij od samej góry - zazwyczaj będzie to belka nawigacyjna lub innego rodzaju header. W miarę kontynuacji twórz i styluj kolejne komponenty podążając ku dołowi. Korzystaj z trybu kalki i kanw, które stworzyłeś w poprzednim etapie. Dla każdego bloku należy stworzyć dedykowany plik sass, który będzie przechowywał jego style i krótki opis.

Do tworzenia nowych bloków służą dwie komendy:

  1. fronthack component - jeżeli blok jest komponentem. Komenda pyta o machine name komponentu i jego krótki opis.
  2. fronthack layout - jeżeli blok jest elementem layoutowym. Komenda pyta o machine name sekcji.

Co się dzieje pod spodem?

Komenda fronthack component generuje nowy plik sass w katalogu src/sass/components dla wprowadzonego machine name’a, przygotowuje w nim klasę o tej samej nazwie, oraz dodaje import dla nowo utworzonego pliku w src/sass/app.sass. Jeżeli dany machine name znajduje się w repozytorium komponentów Fronthack’a, zaciąga jego style i wyświetla w przeglądarce jego kod HTML - gotowy do przekopiowania do swojego ulubionego code editora. W przeciwnym razie generowany jest pusty, domyślny plik sass z szablonu. Komenda fronthack layout działa prościej - generuje nowy plik sass w katalogu src/sass/layout, dodając do wprowadzonego machine name’a przedrostek layout- i również dodaje import do pliku zbiorczego app.sass.

Stylując komponenty lub sekcje layoutu, trzymaj się konwencji nazewnictwa BEM.


Improve this page