Template:Materialize colors

Da Wikipedia, l'enciclopedia libera.
Vai alla navigazione Vai alla ricerca
Wikibozza
Questo template non ha ancora ricevuto il consenso della comunità.
È quindi da considerarsi soltanto una bozza in fase di elaborazione e discussione. Si prega pertanto di non inserirlo nelle voci.
Info Istruzioni per l'uso
Le istruzioni che seguono sono contenute nella sottopagina Template:Materialize colors/man (modifica · cronologia)
Sandbox: Template:Materialize colors/Sandbox (modifica · cronologia) · TemplateStyles: Template:Materialize colors/styles.css (modifica · cronologia) · Tutte le sottopagine: lista

Il template sperimentale {{Materialize colors}} mette a disposizione una tavolozza di colori (quella di Materialize CSS).

Preambolo

Questo template ti permette di scrivere wikitesto più comprensibile (da te che lo scrivi), più mantenibile (da chi cerca di migliorarlo dopo di te) e più leggero (particolarmente vero per la tabella delle revisioni di MediaWiki che deve salvare ogni singola versione del wikitesto, mantenendola per sempre).

Nello specifico, il template offre una tavolozza di colori un minimo più limitata e un minimo più standardizzata, per evitare di abusare dello stile CSS in linea nel wikitesto (ad esempio per evitare di dover scrivere dozzine e dozzine di righe con cose del genere: 

<div style="background-color: #e91e63;">Testo</div>

Proponendo questo metodo più semantico: 

<div class="pink">Testo</div>

Prosegui con gli esempi o leggi le #Domande frequenti.

Colorare il contenitore

Segue un esempio di colorazione del contenitore.

Risultato

Esempio teal

Esempio teal darken-1

Esempio teal darken-2

Esempio teal darken-3

Esempio green

Esempio green lighten-1

Esempio green lighten-2

Esempio green lighten-3

Codice wikitesto

{{Materialize colors}}
<div class="teal">
Esempio teal
</div>

<div class="teal darken-1">
Esempio teal darken-1
</div>

<div class="teal darken-2">
Esempio teal darken-2
</div>

<div class="teal darken-3">
Esempio teal darken-3
</div>

<div class="green">
Esempio green
</div>

<div class="green lighten-1">
Esempio green lighten-1
</div>

<div class="green lighten-2">
Esempio green lighten-2
</div>

<div class="green lighten-3">
Esempio green lighten-3
</div>

Colorare il testo

Segue un esempio di colorazione del testo.

Risultato

Esempio teal-text

Esempio teal-text text-darken-1

Esempio teal-text text-darken-2

Esempio teal-text text-darken-3

Esempio green-text

Esempio green-text text-lighten-1

Esempio green-text text-lighten-2

Esempio green-text text-lighten-3

Codice wikitesto

{{Materialize colors}}
<span class="teal-text">Esempio teal-text</span>

<span class="teal-text text-darken-1">Esempio teal-text text-darken-1</span>

<span class="teal-text text-darken-2">Esempio teal-text text-darken-2</span>

<span class="teal-text text-darken-3">Esempio teal-text text-darken-3</span>

<span class="green-text">Esempio green-text</span>

<span class="green-text text-lighten-1">Esempio green-text text-lighten-1</span>

<span class="green-text text-lighten-2">Esempio green-text text-lighten-2</span>

<span class="green-text text-lighten-3">Esempio green-text text-lighten-3</span>

Colorare una tabella

I colori sono facilmente applicabili anche alle tabelle. Esempio:

Risultato

Esempio teal Esempio red
Esempio pink lighten-4 Esempio yellow
Esempio purple-text Esempio blue-text

Codice wikitesto

{| class="wikitable"
! class="teal" | Esempio teal
! class="red"  | Esempio red
|-
| class="pink lighten-4" | Esempio pink lighten-4
| class="yellow"         | Esempio yellow
|-
| class="purple-text"    | Esempio purple-text
| class="blue-text"      | Esempio blue-text
|}

Tavolozza completa

Segue un elenco di tutti i codici dei colori a disposizione per colorare un contenitore:

red lighten-5
red lighten-4
red lighten-3
red lighten-2
red
red darken-1
red darken-2
red darken-3
red darken-4
red accent-1
red accent-2
red accent-3
red accent-4
pink lighten-5
pink lighten-4
pink lighten-3
pink lighten-2
pink
pink darken-1
pink darken-2
pink darken-3
pink darken-4
pink accent-1
pink accent-2
pink accent-3
pink accent-4
purple lighten-5
purple lighten-4
purple lighten-3
purple lighten-2
purple
purple darken-1
purple darken-2
purple darken-3
purple darken-4
purple accent-1
purple accent-2
purple accent-3
purple accent-4
deep-purple lighten-5
deep-purple lighten-4
deep-purple lighten-3
deep-purple lighten-2
deep-purple
deep-purple darken-1
deep-purple darken-2
deep-purple darken-3
deep-purple darken-4
deep-purple accent-1
deep-purple accent-2
deep-purple accent-3
deep-purple accent-4
indigo lighten-5
indigo lighten-4
indigo lighten-3
indigo lighten-2
indigo
indigo darken-1
indigo darken-2
indigo darken-3
indigo darken-4
indigo accent-1
indigo accent-2
indigo accent-3
indigo accent-4
blue lighten-5
blue lighten-4
blue lighten-3
blue lighten-2
blue
blue darken-1
blue darken-2
blue darken-3
blue darken-4
blue accent-1
blue accent-2
blue accent-3
blue accent-4
light-blue lighten-5
light-blue lighten-4
light-blue lighten-3
light-blue lighten-2
light-blue
light-blue darken-1
light-blue darken-2
light-blue darken-3
light-blue darken-4
light-blue accent-1
light-blue accent-2
light-blue accent-3
light-blue accent-4
cyan lighten-5
cyan lighten-4
cyan lighten-3
cyan lighten-2
cyan
cyan darken-1
cyan darken-2
cyan darken-3
cyan darken-4
cyan accent-1
cyan accent-2
cyan accent-3
cyan accent-4
teal lighten-5
teal lighten-4
teal lighten-3
teal lighten-2
teal
teal darken-1
teal darken-2
teal darken-3
teal darken-4
teal accent-1
teal accent-2
teal accent-3
teal accent-4
green lighten-5
green lighten-4
green lighten-3
green lighten-2
green
green darken-1
green darken-2
green darken-3
green darken-4
green accent-1
green accent-2
green accent-3
green accent-4
light-green lighten-5
light-green lighten-4
light-green lighten-3
light-green lighten-2
light-green
light-green darken-1
light-green darken-2
light-green darken-3
light-green darken-4
light-green accent-1
light-green accent-2
light-green accent-3
light-green accent-4
lime lighten-5
lime lighten-4
lime lighten-3
lime lighten-2
lime
lime darken-1
lime darken-2
lime darken-3
lime darken-4
lime accent-1
lime accent-2
lime accent-3
lime accent-4
yellow lighten-5
yellow lighten-4
yellow lighten-3
yellow lighten-2
yellow
yellow darken-1
yellow darken-2
yellow darken-3
yellow darken-4
yellow accent-1
yellow accent-2
yellow accent-3
yellow accent-4
amber lighten-5
amber lighten-4
amber lighten-3
amber lighten-2
amber
amber darken-1
amber darken-2
amber darken-3
amber darken-4
amber accent-1
amber accent-2
amber accent-3
amber accent-4
orange lighten-5
orange lighten-4
orange lighten-3
orange lighten-2
orange
orange darken-1
orange darken-2
orange darken-3
orange darken-4
orange accent-1
orange accent-2
orange accent-3
orange accent-4
deep-orange lighten-5
deep-orange lighten-4
deep-orange lighten-3
deep-orange lighten-2
deep-orange
deep-orange darken-1
deep-orange darken-2
deep-orange darken-3
deep-orange darken-4
deep-orange accent-1
deep-orange accent-2
deep-orange accent-3
deep-orange accent-4
brown lighten-5
brown lighten-4
brown lighten-3
brown lighten-2
brown
brown darken-1
brown darken-2
brown darken-3
brown darken-4
grey lighten-5
grey lighten-4
grey lighten-3
grey lighten-2
grey
grey darken-1
grey darken-2
grey darken-3
grey darken-4
blue-grey lighten-5
blue-grey lighten-4
blue-grey lighten-3
blue-grey lighten-2
blue-grey
blue-grey darken-1
blue-grey darken-2
blue-grey darken-3
blue-grey darken-4
white
black

Tavolozza completa per il testo

Segue una tavolozza completa di tutti i codici a disposizione per colorare un testo:

red-text text-lighten-5
red-text text-lighten-4
red-text text-lighten-3
red-text text-lighten-2
red-text
red-text text-darken-1
red-text text-darken-2
red-text text-darken-3
red-text text-darken-4
red-text text-accent-1
red-text text-accent-2
red-text text-accent-3
red-text text-accent-4
pink-text text-lighten-5
pink-text text-lighten-4
pink-text text-lighten-3
pink-text text-lighten-2
pink-text
pink-text text-darken-1
pink-text text-darken-2
pink-text text-darken-3
pink-text text-darken-4
pink-text text-accent-1
pink-text text-accent-2
pink-text text-accent-3
pink-text text-accent-4
purple-text text-lighten-5
purple-text text-lighten-4
purple-text text-lighten-3
purple-text text-lighten-2
purple-text
purple-text text-darken-1
purple-text text-darken-2
purple-text text-darken-3
purple-text text-darken-4
purple-text text-accent-1
purple-text text-accent-2
purple-text text-accent-3
purple-text text-accent-4
deep-purple-text text-lighten-5
deep-purple-text text-lighten-4
deep-purple-text text-lighten-3
deep-purple-text text-lighten-2
deep-purple-text
deep-purple-text text-darken-1
deep-purple-text text-darken-2
deep-purple-text text-darken-3
deep-purple-text text-darken-4
deep-purple-text text-accent-1
deep-purple-text text-accent-2
deep-purple-text text-accent-3
deep-purple-text text-accent-4
indigo-text text-lighten-5
indigo-text text-lighten-4
indigo-text text-lighten-3
indigo-text text-lighten-2
indigo-text
indigo-text text-darken-1
indigo-text text-darken-2
indigo-text text-darken-3
indigo-text text-darken-4
indigo-text text-accent-1
indigo-text text-accent-2
indigo-text text-accent-3
indigo-text text-accent-4
blue-text text-lighten-5
blue-text text-lighten-4
blue-text text-lighten-3
blue-text text-lighten-2
blue-text
blue-text text-darken-1
blue-text text-darken-2
blue-text text-darken-3
blue-text text-darken-4
blue-text text-accent-1
blue-text text-accent-2
blue-text text-accent-3
blue-text text-accent-4
light-blue-text text-lighten-5
light-blue-text text-lighten-4
light-blue-text text-lighten-3
light-blue-text text-lighten-2
light-blue-text
light-blue-text text-darken-1
light-blue-text text-darken-2
light-blue-text text-darken-3
light-blue-text text-darken-4
light-blue-text text-accent-1
light-blue-text text-accent-2
light-blue-text text-accent-3
light-blue-text text-accent-4
cyan-text text-lighten-5
cyan-text text-lighten-4
cyan-text text-lighten-3
cyan-text text-lighten-2
cyan-text
cyan-text text-darken-1
cyan-text text-darken-2
cyan-text text-darken-3
cyan-text text-darken-4
cyan-text text-accent-1
cyan-text text-accent-2
cyan-text text-accent-3
cyan-text text-accent-4
teal-text text-lighten-5
teal-text text-lighten-4
teal-text text-lighten-3
teal-text text-lighten-2
teal-text
teal-text text-darken-1
teal-text text-darken-2
teal-text text-darken-3
teal-text text-darken-4
teal-text text-accent-1
teal-text text-accent-2
teal-text text-accent-3
teal-text text-accent-4
green-text text-lighten-5
green-text text-lighten-4
green-text text-lighten-3
green-text text-lighten-2
green-text
green-text text-darken-1
green-text text-darken-2
green-text text-darken-3
green-text text-darken-4
green-text text-accent-1
green-text text-accent-2
green-text text-accent-3
green-text text-accent-4
light-green-text text-lighten-5
light-green-text text-lighten-4
light-green-text text-lighten-3
light-green-text text-lighten-2
light-green-text
light-green-text text-darken-1
light-green-text text-darken-2
light-green-text text-darken-3
light-green-text text-darken-4
light-green-text text-accent-1
light-green-text text-accent-2
light-green-text text-accent-3
light-green-text text-accent-4
lime-text text-lighten-5
lime-text text-lighten-4
lime-text text-lighten-3
lime-text text-lighten-2
lime-text
lime-text text-darken-1
lime-text text-darken-2
lime-text text-darken-3
lime-text text-darken-4
lime-text text-accent-1
lime-text text-accent-2
lime-text text-accent-3
lime-text text-accent-4
yellow-text text-lighten-5
yellow-text text-lighten-4
yellow-text text-lighten-3
yellow-text text-lighten-2
yellow-text
yellow-text text-darken-1
yellow-text text-darken-2
yellow-text text-darken-3
yellow-text text-darken-4
yellow-text text-accent-1
yellow-text text-accent-2
yellow-text text-accent-3
yellow-text text-accent-4
amber-text text-lighten-5
amber-text text-lighten-4
amber-text text-lighten-3
amber-text text-lighten-2
amber-text
amber-text text-darken-1
amber-text text-darken-2
amber-text text-darken-3
amber-text text-darken-4
amber-text text-accent-1
amber-text text-accent-2
amber-text text-accent-3
amber-text text-accent-4
orange-text text-lighten-5
orange-text text-lighten-4
orange-text text-lighten-3
orange-text text-lighten-2
orange-text
orange-text text-darken-1
orange-text text-darken-2
orange-text text-darken-3
orange-text text-darken-4
orange-text text-accent-1
orange-text text-accent-2
orange-text text-accent-3
orange-text text-accent-4
deep-orange-text text-lighten-5
deep-orange-text text-lighten-4
deep-orange-text text-lighten-3
deep-orange-text text-lighten-2
deep-orange-text
deep-orange-text text-darken-1
deep-orange-text text-darken-2
deep-orange-text text-darken-3
deep-orange-text text-darken-4
deep-orange-text text-accent-1
deep-orange-text text-accent-2
deep-orange-text text-accent-3
deep-orange-text text-accent-4
brown-text text-lighten-5
brown-text text-lighten-4
brown-text text-lighten-3
brown-text text-lighten-2
brown-text
brown-text text-darken-1
brown-text text-darken-2
brown-text text-darken-3
brown-text text-darken-4
grey-text text-lighten-5
grey-text text-lighten-4
grey-text text-lighten-3
grey-text text-lighten-2
grey-text
grey-text text-darken-1
grey-text text-darken-2
grey-text text-darken-3
grey-text text-darken-4
blue-grey-text text-lighten-5
blue-grey-text text-lighten-4
blue-grey-text text-lighten-3
blue-grey-text text-lighten-2
blue-grey-text
blue-grey-text text-darken-1
blue-grey-text text-darken-2
blue-grey-text text-darken-3
blue-grey-text text-darken-4
white-text
black-text

Domande frequenti

Quando devo utilizzare questi colori?
Nessuna persona ti costringerà ad usare questi colori sotto tortura. Semplicemente, se avevi già una pagina che già richiedeva diversi colori, questo template potrebbe aiutarti a semplificarla.
Quando dovrei evitare di utilizzare questi colori?
Non bisogna colorare a caso parti di una voce dell'enciclopedia. La formattazione generale delle voci dell'enciclopedia segue le linee guida approfondibili nella pagina Aiuto:Manuale di stile. In ogni caso, ricorda che certe persone trovano poco accessibile la lettura di un testo se non c'è sufficiente distinzione fra il colore del testo e il colore dello sfondo, fra cui ipovedenti ma non solo.
E se mi serve un solo colore?
Questo template mette facilmente a disposizione molti colori e può essere molto utile quando ti serve avere a disposizione diversi colori. Nel caso in cui invece serva un solo colore o quasi, considera se non sia meglio usare il metodo tradizionale (ad esempio aggiungendo quel singolo colore nel foglio di stile del template già esistente, ecc.) invece che importare tutti i colori nella pagina.

Documentazione interna

Il template non fa altro che includere nella pagina questo foglio di stile CSS:

Gli esempi con la #Tavolozza completa sono generati da questo modulo Lua:

Pagine correlate

Collegamenti esterni

Estratto da "https://it.wikipedia.org/w/index.php?title=Template:Materialize_colors&oldid=139037204"