Nauka Vue #4 – podstawowe style

Konfigurację mamy już za sobą więc przyszedł czas aby zabrać się za to co najciekawsze czyli kodowanie. Nie będzie tutaj jeszcze może za dużo samego Vue ani JavaScriptu ponieważ planuję w tym wpisie stworzyć sztywny wygląd aplikacji wykorzystując podstawowe style CSS.

Podstawowe style

Jako, że wykorzystujemy Sass to w moim projekcie pojawiło się kilka nowych plików każdy z nich opiszę krótko w tym akapicie.

reset.scss

Początkujący frontendowcy często zapominają o tym, że przeglądarka posiada własne style dla różnych elementów, przez co mają problem z dostarczeniem projektu, który wygląda tak samo nie zależnie od przeglądarki. Z pomocą przychodzi tutaj plik reset. Posiada on deklaracje wszystkich najczęściej używanych tagów i ustawia im podstawowe wartości takie jak marginesy czy pozycje. Mój plik resetu zapożyczyłem z tego miejsca. Polecam się przyglądnąć co tam jest i jak to wszystko wygląda.

Plik reset.scss
reset.scss

variables.scss

Kolejnym plik  jest zbiorem zmiennych w Sass. Mam w nim zadeklarowane kolory i fonty. Takie przetrzymywanie tych zmiennych w osobnym pliku jest wygodne ponieważ w każdej chwili mogę po prostu podstawić nowy plik z takimi samymi nazwami zmiennych ale z innymi wartościami. Pozwala to w dosyć łatwy sposób zmieniać kolorystykę strony nie ruszając tak na prawdę niczego innego. Bardzo przydatna rzecz, której nauczyłem się podczas pracy nad sporym portalem internetowym.

Plik variables.scss
variables.scss

grid.scss

Ostatni plik nad którym chciałbym się pochylić to plik z gridem. Na pozór wygląda dosyć ubogo ale według mnie spełnia swoje zadanie. Pozwala w łatwy sposób tworzyć kolumny i wiersze. Wykorzystuję tutaj flexa. Można też zobaczyć, że nie mam żadnych media-queries a to dlatego, że założyłem brak wsparcia dla urządzeń mobilnych. Dla nich powstanie aplikacja dedykowana ale to odległe plany. Skupmy się na teraźniejszości.

Plik grid.scss
grid.scss

Główny plik

Skoro podstawowe style mamy omówione to czas przejść do głównego pliku main.scss. Na samej górze mamy wczytywanie pozostałych plików. Można zauważyć jeszcze jeden plik, którego nie wymieniłem a mianowicie mixins.scss. Pominąłem go z prostego powodu – jest pusty. Utworzyłem go bardziej z przyzwyczajenia niż z potrzeby. Powinien on zawierać wszystkie mixiny i funkcje, które byłyby wykorzystywane w projekcie. Kiedy takowe się pojawią to je wam pokażę.

podstawowe style
main.scss -importy

Reszty pliku nie będę pokazywał bo jest on dostępny w repozytorium. Ponadto nie ma tam nic na tyle ciekawego aby warto było to przedstawić. 

Jeszcze HTML

Na sam koniec zostawiłem plik html. Póki co cała struktura jest stworzona na sztywno w pliku index.html ale w następnym wpisie będę dzielił tą strukturę na komponenty i kodował to z wykorzystaniem Vue. 

Plik index.html
index.html

Tutaj chciałbym dodać jeszcze, że w projekcie będę wykorzystywał ikony z google materials dlatego też w sekcji head pojawiło się linkowanie do tych ikon. 

Podgląd

Teraz chciałbym wam pokazać jak będzie wyglądała strona domowa zalogowanego użytkownika systemu. Podstawowe style zostały zadeklarowane więc mam nadzieję, że będzie się wam podobało. 

podstawowe style
Zakodowany wygląd systemu

Nie jestem może mistrzem designu ale myślę, że całość wygląda nawet nieźle. 

Podsumowanie

W tym wpisie stworzyłem podstawowe style dla aplikacji. Nie ma tego dużo ale po zadeklarowaniu tego na początku łatwiej będzie aplikację podzielić na komponenty i zakodować z użyciem Vue. W następnym wpisie mam nadzieję już pokazać wam tworzenie pierwszych komponentów. Będzie ciekawie.

Uwaga!

Nie jestem żadnym specjalistą jeżeli chodzi o Vue. W tej serii wpisów chcę pokazać tylko drogę jaką ja będę musiał przebyć aby poznać choćby podstawy tego frameworka. Rozwiązań i konwencji stosowanych podczas tworzenia mojej aplikacji nie należy brać za bezbłędne ani nawet poprawne.

Wpis jest częścią serii Nauka Vue

Widzisz błędy?

A może masz pomysł jak poprawić ten wygląd aplikacji? O czymś zapomniałem? Czegoś nie rozumiesz? Pisz w komentarzu. Bardzo chętnie coś poprawię lub wytłumaczę. Pozdrawiam!