Foglio di stile per progetti Web Palma

Questa guida contiene tutti gli stili di testo di base utilizzati nel sito web per garantire uniformità e una struttura efficace. Prima di iniziare con questa guida, è necessario aggiungere la tavolozza dei colori del progetto e i font da utilizzare. Prima di iniziare a utilizzarli, è necessario configurare la modalità reattiva.

Regole di utilizzo

  1. Tutti i testi devono iniziare con una delle classi presenti nel foglio di stile.
  2. Non dovrebbe esserci alcuna combinazione di classe di dimensione, posizione o margine. Se ne ho bisogno, devo inserire un DivBlock all'interno.
  3. Ogni titolo/sottotitolo deve avere la categoria H# a cui appartiene.
  4. Possono esserci diverse alternative della stessa H, purché siano in questo foglio di stile.

Regole di utilizzo

(Classe H#) (Allineamento) (Colore)
(PW H#) (Colore)

Definisci la tavolozza dei colori

Questa tavolozza di colori deve essere aggiunta direttamente al pannello, questa sezione è puramente un esempio.

Classi di intestazione

H1

L'H2

L'altezza 3

L4

L'altezza 5
H6

Esempio

H1 (Centro)(Colore)

H5 (Centro)

Classi di paragrafo

Paragrafo: Sospendi varie cose nell'elemento triste dell'eros. Dio, desidero vivere e adornarmi, ma il dolore cessa di essere nullo e la vita è diventata libera e confortevole.

Paragrafo (centro) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sospendi varie cose nell'elemento della tristezza. Dio, desidero vivere e adornarmi, ma il dolore cessa di essere nullo e la vita è diventata libera e confortevole.

Paragrafo (a destra) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sospendi varie cose nell'elemento della tristezza. Dio, desidero vivere e adornarmi, ma il dolore cessa di essere nullo e la vita è diventata libera e confortevole.

Raccomandazioni: Se puoi modificare la classe standard/primaria del paragrafo o il corpo, per evitare alcune cose che sai che non cambieranno, è meglio creare la classe. Lascio degli screenshot. Infatti, se ci fai caso, nella classe "Paragrafo" non modificare nulla.

Molte delle dimensioni dipendono dai caratteri: alcune sono più grandi, altre più piccole.

Immagini

Raccomandazioni: Esisteranno solo due classi di immagini (una delle quali con sottoclassi), a meno che non si desideri uno sfondo con un effetto fisso. OCCHIO, qui guardiamo la classe dell'immagine ma non il contenitore di questa

immagine_contiene

immagine_copertina

image_cover(In alto)

immagine_copertina(Bot)

immagine_copertina

image_cover(sinistra)

image_cover(destra)

Icone

Tecnicamente vengono utilizzate le stesse classi di immagini, ma la dimensione è determinata dal frame/div contenitore.

Icona < image_contain

Icona (piccola)< image_contain

Pulsanti

Qui puoi includere i tuoi pulsanti, non c'è molto da dire, di solito personalizziamo i pulsanti per ogni progetto, da animazioni a qualcosa di più classico.

Dobbiamo avere almeno 2 pulsanti e vi do un'idea delle sottoclassi che uso di solito

Avere un pulsante per sfondi chiari

Testo del pulsante

Altri per sfondi scuri

Testo del pulsante

pulsante(spazio)

Pulsante con margine superiore più grande

Testo del pulsante

Sezioni

Qui ho creato delle sezioni colorate (dovrai eliminare queste sottoclassi una volta copiate) in modo che tu possa distinguere le differenze. L'uso di queste 3 è obbligatorio, è possibile aggiungere sottoclassi specifiche. Ecco alcuni esempi:

Sezione (Ingresso): Una sezione che ha più spazio nella parte superiore perché il menu occupa spazio o potrebbe essere più piccola 50vh -70vh

Sezione (Home): Potrebbe avere un allineamento diverso, più imbottitura nella parte superiore e un'altezza specifica di 70 vh _120 vh ecc.

Chiarimenti:

1. Queste sezioni hanno un allineamento verticale, se si desidera aggiungere elementi centrati in avanti/paralleli è necessario utilizzare un contenitore orizzontale che si trova proprio qui

2. Sono in relazione con un valore di z-index di "1" nel caso in cui si desideri includere elementi e non farli esplodere

3. Tutte le sezioni hanno un'imbottitura superiore e inferiore di 10 vh e un'imbottitura di 5vw a sinistra e a destra

4. Non dargli mai una larghezza di 100vw, questo fa sì che venga visualizzata la barra di scorrimento inferiore

Sezione_100

Questa sezione allinea gli elementi verticalmente centrati e ha un'altezza di 100vh. Forse in responsive dovresti lasciare l'altezza in automatico, questo dipenderà dalla quantità di contenuto

Sezione_100 (Auto)

Questa sezione allinea anche gli elementi verticalmente centrati e mantiene una misurazione minimo di 100 vh, ma ciò che questa sottoclasse consente è che nel caso in cui il contenuto occupi più spazio, non trabocca e continua a "crescere"

Sezione_auto

Questa sezione è completamente automatica nel caso in cui il contenuto non richieda uno spazio maggiore di 100 vh, in quel caso utilizzeremo la sottoclasse superiore

Extra

Cerca di sfruttare il più possibile le classi pulite e modificate; in questo caso non ho avuto bisogno di creare classi per "List" e "List Item", ma ho dovuto modificare la classe padre/principale.