Wersja makiety z Figma

Ogólne cechy projektu:

- Makieta została stworzona z wykorzystaniem podejścia responsywnego, co zapewnia poprawne wyświetlanie na urządzeniach o różnych rozdzielczościach.
- Do strukturyzacji i uproszczenia rozwoju wykorzystano framework Bootstrap.
- GULP jest używany jako menedżer zadań do automatyzacji zadań, w tym kompilacji SCSS, minimalizacji plików, optymalizacji obrazów i uruchamiania lokalnego serwera.
- Główny styl opisano za pomocą SCSS, co pozwoliło efektywnie zorganizować kod, wykorzystując zmienne, mixiny i zagnieżdżenie.

Struktura projektu:

- Pliki HTML są zorganizowane z semantycznymi znacznikami (header, main, section, footer itp.), aby poprawić czytelność i SEO.
- Struktura plików jest zorganizowana według zasady BEM (Block Element Modifier), co ułatwia wsparcie i skalowalność projektu.
- Podłączenie i dostosowanie Bootstrap odbywa się przez SCSS, co pozwala na wykorzystanie zmiennych Bootstrap do dostosowywania stylów.

Cechy układu:

- Siatka: Użyto standardowej 12-kolumnowej siatki Bootstrap do układu treści. System siatki jest dostosowany do makiety.
- Typografia: Czcionki są podłączone przez Google Fonts lub inne usługi, stylizację elementów tekstowych skonfigurowano przez SCSS (używając zmiennych i mixinów).
- Style modułowe: Każdy komponent (np. przyciski, karty, formularze) ma osobny plik SCSS. Wszystkie style są importowane do wspólnego pliku main.scss, który jest kompilowany do CSS.
- Zmienne: Utworzono plik _variables.scss do zarządzania paletą kolorów, czcionkami i innymi globalnymi parametrami.

Funkcjonalność GULP:

- Zautomatyzowane:
- - Kompilacja SCSS do CSS.
- - Minimalizacja CSS, HTML i JS.
- - Optymalizacja obrazów (kompresja bez utraty jakości).
- - Aktualizacja przeglądarki w czasie rzeczywistym przez BrowserSync.
- Skrypt watch został skonfigurowany do monitorowania zmian w plikach i automatycznego przebudowywania projektu.

Cechy responsywności:

- Używane są media queries w SCSS do dostosowywania stylów do różnych rozdzielczości ekranów. Główne punkty przerwania opierają się na Breakpoints Bootstrap.