Wersja Internetowego Sklepu z Figma

Ogólne cechy projektu:

- Stylizacja została zrealizowana za pomocą SCSS, co zapewniło elastyczność w opracowywaniu stylów i wsparcie dla modularności.
- Użyto GULP do automatyzacji zadań, takich jak kompilacja SCSS do CSS, minimalizacja plików, optymalizacja obrazów, automatyczne aktualizowanie przeglądarki i budowanie projektu.


Struktura projektu:

- HTML: Semantyczne oznaczenie z wykorzystaniem standardów W3C dla wygody integracji z CMS lub backendem.
- SCSS: Organizacja kodu w formie modułowej. Stworzono oddzielne pliki dla każdej części interfejsu:
-- _variables.scss do przechowywania globalnych zmiennych (paleta kolorów, marginesy, czcionki, zapytania medialne)
-- _mixins.scss dla wielokrotnego użytku stylów (np. przyciski, karty, responsywne siatki).
-- _base.scss dla podstawowych stylów (reset, typografia).
- Oddzielne pliki SCSS dla każdego komponentu (nagłówek, karta produktu, suwak, okna modalne itp.).
- GULP: Skonfigurowano zadania dla:
-- Kompilacji SCSS do CSS.
-- Minimalizacji CSS, HTML i JS.
-- Optymalizacji obrazów i SVG.
-- Automatycznego aktualizowania przez BrowserSync.


Wynik:

Sklep internetowy z nowoczesnym i responsywnym designem, zoptymalizowany pod kątem szybkiego ładowania.
Wygodny interfejs dla użytkowników i łatwość dalszej integracji z systemem zarządzania stroną lub backendem.
Pełna gotowość projektu do użycia i skalowania.