LocalVan – stawiamy szkielet aplikacji

Postanowiłem zacząć budowę aplikacji od „frontu”, czyli w pierwszym kroku powstanie prototyp strony www, który wygląda ale jeszcze nie funkcjonuje. Strona będzie składała się ze strony startowej (ang. landing page), na której użytkownik powinien zostać poinformowany gdzie się znalazł oraz miec wybór co chce zrobić dalej. W moim przypadku odwiedzający stronę dowie się, że ma do czynienia z usługą wyszukiwania usług transportowych. Pierwsza akcja, jaką może wykonać to sprawdzenie wyceny, czyli ile będzie musiał zapłacić za transport rzeczy z punktu A do punktu B.

Zacznę więc od instalacji omawianego we wcześniejszym poście frameworku BlazeCSS. To na nim opieram wygląd mojego prototypu aplikacji.

> npm install blaze –save

Jak widać na zrzucie ekranu pakiet przybywa w dwóch wydaniach, skompilowanym czystym CSS oraz ze źródłami w SASS. Ta druga opcja jest dla mnie idealna, a o potencjalnych korzyściach opowiem w dalszej częsci wpisu.

W katalogu głównym naszego kodu źródłowego tworzymy plik o dowolnej nazwie, ja przyjąłem stylesheet.scss (scss to rozszerzenie plików SASS).
W nim umieszczamy wszystkie poszczególne pliki źródłowe Blaze’a i modyfikujemy ścieżki tak aby rzeczywiście wskazywały na odpowiednie pliki w katalogu node_modules. Zaleta tego rozwiązania jest możliwość „wykomentowania” nieużywanych komponentów co powinno zmniejszyć rozmiar docelowego arkusza stylów. Jeżeli w dalszych etapach potrzeba nam przykładowo „buttonów” to wystarczy odpowiedni plik „odkomentowac” i wygenerować plik css. No własnie, jak to zrobić? Zacząć należy od doinstalowania paczki tego preprocesora.

> npm install npm-sass –global

Flaga –global na końcu tego polecenia sprawi, że sass będzie widoczny globalnie w systemie, dzięki czemu możemy używać go w każdym katalogu używając po prostu polecenia sass. Poniższy zrzut ekranu obrazuje używanie pakietu npm-sass. Tymczasowo to musi wystarczyć, ale w dalszych etapach skonfiguruję GULPa tak by automatycznie kompilował pliki sass. Należy jeszcze wygenerowany arkusz stylów dołączyć do dokumentu HTML aplikacji i można już używać BlazeCSS do budowy prototypu.

Dołączyłem (wyłączając wspomniane wyżej komentarze) kilka modułów css i użyłem następującego kodu html, używając jedynie klas pochodzących z Blaze:

Składnia Blaze wydaje mi się dość intuicyjna i wyrażana jest w formacie BEM, o którym wspominałem we wcześniejszym wpisie. Dokumentacja BlazeCSS jest również bardzo czytelna, więc polecam zapoznanie się z nią jeżeli kogoś interesują szczegóły powyższego listingu.

…czego efekt jest następujący. Aha, blaze domyślnie nie posiada ani nie sugeruje żadnej czcionki więc posłużyłem się google fonts i zaimportowałem czcionkę o nazwie „Roboto”. Dość neutralna, ale zdecydowanie lepsza niż domyślny Arial. Nie będę się tutaj bawił w design, to ma być akceptowalny prototyp. Na ten moment wygląda to tak:

Czyli podsumowując, udało się stworzyć prototyp strony głównej projektu, który wykorzystuje zewnętrzny framework css. Jedyny własny css to oczywiście użycie zaimportowanej czcionki na elemencie body. W kolejnych częściach omówię sposoby na ułatwianie sobie życia wykorzystując Gulp no i oczywiście dodamy kolejne sekcje do prototypu. Tymczasem opisane wyżej zmiany dostępne są jak zwykle w repozytorium projektu.