Styleguide
La styleguide è inserita all'interno di un .giunti-custom-container che mette il padding orizzontale.
Per quanto riguarda il padding verticale, c'è da capire se si riesce a dare all'intera pagina (Main), o in caso darlo alle varie sections.
Per gli sliders, invece, usare la classe .giunti-slider-container, che mette il padding solo a sinistra.
NB: subito sotto al div con la classe .giunti-custom-container, ci deve essere un div che wrappa tutto il contenuto della sezione, al quale
deve essere data la classe .__boxed
Se questo div non c'è, bisogna crearne uno (quelli che ho creato fino ad ora si chiamano tutti come il div padre + suffisso di __content-wrapper).
Es: historical-archive historical-archive__content-wrapper.
Questo discorso del suffisso NON vale per gli sliders, ad esempio. Lì c'è solo un div con classe __boxed direttamente inline.
1. COLORI
1. Black #161615
Tailwind class: giunti-black
2. Grigio #828DA2
Tailwind class: giunti-gray
3. Grigio medio #E6E8EC
Tailwind class: giunti-gray_10
4. Grigio chiaro #F4F6F8
Tailwind class: giunti-gray_20
5. Grigio chiaro #E5E8EC
Tailwind class: giunti-gray_30 (Colore sfondo footer parte newsletter)
6. Verde #3CB371
Tailwind class: giunti-green
7. Verde Chiaro #BECE64
Tailwind class: giunti-green_10
8. Arancione #E44218
Tailwind class: giunti-orange
9. Celeste #569FCC
Tailwind class: giunti-pale_blue
10. Rosa Salmone #E7766E
Tailwind class: giunti-salmon_pink
2. TIPOGRAFIA
Sono state create classi per ogni elemento (h1, h2, p, ecc). Alcune classi utilizzano una funzionalità Sass % ed estendendo una classe base originaria (che ha nella maggior parte dei casi il suffisso -base). Nelle classi sono solo specificati font-size, line-height e letter-spacing per i vari breakpoints. Qualora dovesse essere poco chiaro quale classe usare, in alcuni casi specifici ho lasciato un commento sopra alla classe nel file typography.scss con alcuni casi di utilizzo.
Le classi non sono identiche a Giunti o a Giunti Edu. Ho fatto del mio meglio cercando di creare una classe per ogni elemento (alcuni mancanti nella styleguide.) Vi chiedo cortesemente di fare un double check tra grafica e classi e di utilizzare la classe che si avvicina di più.
H1 Roboto Slab - 40px (Titolo libro pagina prodotto)
H1 Inter - 28px
- Titoli sezioni (Non mi è chiaro di quali sezioni si parli)
- Tipo di slide slideshow (es: Novità)
- Sottotitolo slide slideshow / Sottotitolo sezione "In evidenza" (homepage)
H2 Inter - 40px
Prossime uscite (text)
Prossime uscite (link)H3 Inter - 26px
H4 Articles title - 26px (Titolo carte Blog, Offerte, Agenda)
H4 Listing books title - 22px (Titolo carte prodotto)
H5 Roboto Slab - 15px (Nome autore carta prodotto)
H5 Inter - 15px (Copiata da EDU, utilizzata nelle label inputs registrazione ecc)
H6 Inter Section title - 14px (Sezione, titoli th tabelle dashboard)
H6 Giunti breadcrumbs - 14px (Breadcrumbs)
Giunti Paragraph - 19px
CTA Text - 20px (Cta, bottoni) Prezzo Prezzo precedente3. BARRE ANNUNCI
4. ESEMPIO BOZZA SLIDE
Novità
Novità ragazzi Marzo 2023
Le novità dal nostro catalogo ragazzi del mese di marzo 2023
Scopri l'offerta6. LINK e PULSANTI
Tutte le classi che sono state create per i link e i pulsanti si trovano nel file buttons.scss.
Ai link con freccetta e al pulsante con sfondo rosso vanno date sia la classe .button-link che .button__text o .button__pill.
La responsiveness del pulsante è già gestita dalla classe .quick-add-to-cart__button, basta solo aggiungere un'eventuale posizione absolute. In mobile si vede solo l'icona, il testo dovrà essere dentro ad un tag span, al quale vengono date le classi hidden lg:inline.
Aggiungi6. INPUTS
6.1 Inputs generici
Da utilizzare ad esempio per registrazione, login, recupero password, dashboard indirizzi, ecc.
Alla form di registrazione login andranno dati dimensioni, padding, border-radius.
Le classi .giunti-input e .giunti-checkbox hanno lo stile per font, colori, padding e width. NON hanno margine top e bottom.
Le icone negli input le ho pensate come absolute e centrarte verticalmente.
Per gli input generici con icone (es: password) non ho previsto una classe apposita da usare come wrapper a cui dare position: relative.
Valutare se crearne una all'occorrenza.
6.2 Input per la ricerca
Per la ricerca, invece, c'è una classe .giunti-search-input__wrapper che ha position: relative. All'icona ho passato le classi tailwind tramite il prop classes, valutare se creare una classe unica che le racchiuda tutte.
6.3 Input della newsletter
7. ACCORDIONS
Lo stile è dato dalla classe .giunti-accordion, nel file accordion.scss.
Dettagli
Dettagli
Lorem Ipsum
8. BADGES
9. CARTE PRODOTTO (FONTS PRINCIPALI)
Questa è solo una bozza, non responsive. Giusto per censire i font e le icone da utilizzare.
10. CARTE ARTICOLO ed EVENTO (FONTS PRINCIPALI)
10.1 Listing blog
Categoria 1, Categoria 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
9 Feb 202310.2 Listing evento
18 Marzo
Roma
Libreria Ubik Spazio Sette
18:30