Na ten tydzień zaplanowałam sobie zmontowanie widoku aplikacji - w wersji minimum. Taki podstawowy UX w oparciu o Bootstrapa plus stworzenie zaślepek stron.
Jako że moja aplikacja aspiruje do miana małej i skromnej :), wybrałam absolutnie podstawowy szablon Bootstrapa, mianowicie ten tutaj. Poleceniem npm install --save bootstrap zainstalowałam Bootstrapa w swoim projekcie. Używam Visual Studio Code - tak wygląda folder node_modules po dodaniu Bootstrapa:
Następnie (to już ręcznie) dodałam odpowiednie tagi w index.html:
W kolejnym kroku dostosowałam wygląd szablonu Bootstrapa do potrzeb mojej aplikacji (kolory i menu). Czyli coś takiego:
zamieniłam w coś takiego:
Jak wiadomo, Buka (ta z Muminków oczywiście; powiedzmy to sobie otwarcie: inspiracja i muza tej aplikacji1 ;)) jest fioletowa, stąd fioletowy jako kolor wiodący. Taka mała dygresja. :) Wracając do meritum:
Po kliknięciu w "My library" pojawia się dropdown z różnymi opcjami wyświetlania listy książek:
Teraz pozostaje tchnąć w tę stronkę trochę życia, żeby to działało. Hm...
1 Proces koncepcyjny dot. nazwy był ekstremalnie krótki: "Hm, książki... books, book, [buk], BUKA!" :)
Brak komentarzy:
Prześlij komentarz