Aiuto:Manuale di stile/Avanzato

Gli strumenti di Wikicode, HTML e CSS descritti in questa pagina sono necessari solo per la creazione di template o di elementi grafici complessi, come i layout responsive. Si consiglia la lettura di questa pagina solo ad utenti esperti che vogliano cimentarsi in attività di questo tipo.

Prerequisiti

Dato che questo manuale si rivolge ad utenti esperti, vengono date per scontate le nozioni contenute nel Manuale di stile, nel Manuale di stile/Intermedio e nella pagina di aiuto dei Template. In particolare si suppone che il lettore:

  • sappia la sintassi wikicode delle tabelle (non nel dettaglio, ma almeno un'idea);
  • sappia cos'è un template e come si utilizza nelle pagine, in particolare sappia cos'è un parametro.
  • abbia voglia di mettersi ad imparare.

Anche se non è strettamente necessario, aiuta molto utilizzare un editor di testo che abbini le parentesi, in modo da individuare subito quelle corrispondenti ed eventualmente capire quali non sono state chiuse correttamente. Due esempi sono Notepad++ e Visual Studio Code (da non confondere con Visual Studio), ma ne esistono tantissimi altri.

Come usare questa pagina

Il modo consigliato per imparare quello che c'è in questa pagina è sicuramente di provare. Varie esperienze passate (tra cui la mia e quelle di almeno altri 3 amministratori) hanno confermato che la pratica è il modo migliore di imparare ad usare per bene gli strumenti spiegati qui. Se ad un prima lettura non si riescono ad afferrare i contenuti della pagina è normale. La soluzione è di mettere un po' le mani su questa roba, sbatterci la testa e capire cosa sta succedendo. Dopo aver fatto questo, chiedere a qualcuno più esperto che sa già come far funzionare queste cose. O anche chiedergli un aiuto teorico prima, provare e poi chiedere una mano sull'esempio pratico che si sta realizzando.

Per aiutare a provare, le sezioni sulle parser functions e sulle basi di HTML e CSS spiegano anche qualche trucco per debuggare. In particolare gli strumenti di debug del browser sono fondamentali per capire cosa sta succedendo quando si lavora con HTML e CSS.

In più questa pagina dovrebbe anche essere un comodo strumento di consultazione per chi sa già come fare le cose ma non si ricorda qualche dettaglio.

Parser functions (e altre info utili)

Articolo principale: Parser functions help page di Mediawiki

Questa sezione è l'unica slegata dalle altre. Mentre tutte le successive parlano bene o male di HTML e CSS, questa riguarda solo il wikicode, e può essere letta separatamente dalle altre. Le parser functions sono strumenti offerti da Mediawiki (il software su cui gira Pokémon Central Wiki) che permettono di introdurre un controllo maggiore sull'output di una certa stringa di wikicode in funzione di alcuni parametri. Qui vengono spiegate solo le parser functions usate più comunemente e senza coprire tutti i possibili casi d'uso. Per i dettagli completi su tutte le parser functions esistenti si rimanda alla guida di MediaWiki.

Parametri dei template

Anche se i parametri non sono parser function in questo paragrafo viene spiegato come inserirli in un template. L'utilizzo di parametri è fondamentale in quasi tutti i template, ed è di solito alla base di tutti gli usi delle parser functions.

Per inserire un parametro nel wikicode del template la scrittura è del tipo {{{nomeparametro}}}, ossia con le triple parentesi graffe.

È possibile indicare un valore di default se il parametro non è presente: in tal caso la sintassi è {{{nomeparametro|valoredefault}}}. I parametri si possono anche annidare, per esempio {{{parametro2|{{{parametro1}}}}}} fa sì che parametro2 sia considerato uguale a parametro1 se omesso.

È comodo usare la scrittura {{{parametro|}}}, che significa "se parametro è presente usa il suo valore, altrimenti consideralo assente". Si può infatti notare che {{{parametro}}} nel caso in cui parametro non sia indicato mostra semplicemente il testo {{{parametro}}}. Tutto ciò servirà anche per l'utilizzo di alcuni strumenti elencati di seguito.

I parametri senza nome sono identificati dal loro numero, quindi il primo parametro senza nome passato è {{{1}}}, il secondo è {{{2}}}, etc. La numerazione dei parametri senza nome ignora quelli con nome: la chiamta {{template|param1|nome1=valore1|param2}} ha il parametro {{{2}}} che vale param2 e il parametro {{{3}}} senza valore.

noinclude e includeonly

In alcuni casi è necessario includere una parte di codice nel template ma non nelle pagine che lo includono, o viceversa. Un caso frequente sono le categorie: per esempio il template ItemInfobox appartiene solo alla categoria Template infobox, mentre tutte le pagine che lo utilizzano vengono aggiunte a Strumenti ed altre categorie ma non quella precedentemente citata.

Per il contenuto che deve essere incluso nel template ed escluso dalle altre pagine è sufficiente racchiuderlo tra <noinclude> e </noinclude>; invece ciò che deve essere incluso nelle pagine ma non nel template va racchiuso fra <includeonly> e </includeonly>.

noinclude è anche utilizzato in vari template per scrivere le istruzioni di utilizzo, che ovviamente non devono essere incluse nelle pagine che utilizzano tali template.

#if

#if serve per valutare la presenza o meno di un determinato parametro e agire di conseguenza. La sintassi è {{#if: {{{parametro|}}} | [1] | [2] }}: se il parametro indicato è presente verrà preso in considerazione il codice contenuto al posto di [1], altrimenti quello al posto di [2]. Sia [1] che [2] sono facoltativi: scrivere {{#if: {{{parametro|}}} | [1] }} significa che se il parametro è assente non bisogna fare nulla, mentre {{#if: {{{parametro|}}} | | [2] }} agisce solo se il parametro è assente.

Più precisamente, la funzione if controlla se la stringa passata è vuota o meno. È quindi possibile utilizzarla per controllare contemporaneamente la presenza di più parametri: viene utilizzato [2] solo se la stringa risultante dalla concatenazione dei parametri è vuota, ovvero se nessuno dei parametri è stato passato (è un OR dei parametri). Per esempio il codice {{#if: {{{a|}}}{{{b|}}} | [1] | [2] }} restituisce i seguenti output:

a b Risultato
Presente Presente [1]
Presente Assente [1]
Assente Presente [1]
Assente Assente [2]

Per ottenere invece come risultato [1] solo quando entrambi i parametri sono presenti (l'AND) bisogna annidare due #if oppure combinare più parser functions.

#ifeq

Il funzionamento di #ifeq è molto simile a #if, con una differenza: non controlla se la stringa passata è vuota, ma la confronta con qualcosa. La sintassi è {{#ifeq: {{{parametro}}} | valore | [1] | [2] }}: se il parametro è uguale a valore esegue [1], altrimenti [2]. Come prima, sia [1] che [2] possono essere omessi.

Con la scrittura precedente, se il parametro non è indicato l'#ifeq sceglie [2]. Volendo si può anche usare una scrittura del tipo {{#ifeq: {{{parametro|valore}}} | valore | [1] | [2] }}, se si vuole che la scelta di default sia [1] anziché [2].

#switch

#switch è simile a #ifeq con la differenza che permette di confrontare la stringa con più valori stabiliti. La sintassi è {{#switch: {{{parametro}}} | valore1=[1] | valore2=[2] | valore3=[3] | ... | #default=[0] }}: se il parametro assume valore1 esegue [1], con valore2 esegue [2], e così via, mentre se non assume nessuno dei valori elencati esegue [0]. Sono possibili anche i "raggruppamenti": per esempio {{#switch: {{{parametro}}} | valore1.1|valore1.2|valore1.3|valore1.4=[1] | valore2=[2] | valore3=[3] | ... | #default=[0] }} fa sì che il comportamento sia lo stesso per i quattro valori indicati senza dover riscrivere il medesimo codice 4 volte. Si può omettere la scritta #default per indicare il default, a patto che il valore [0] non contenga dei simboli = e sia messo per ultimo (per esempio {{#switch: {{{parametro}}} | valore1=[1] | valore2=[2] | valore3=[3] | [0] }}), ma è consigliabile inserirla comunque per una migliore leggiblità del codice. Se si vuole che lo switch non restituisca niente in caso la stringa non assuma nessuno dei valori passati, si può semplicemente non mettere il #default=[0] in fondo.

#expr

#expr permette di scrivere un'espressione matematica facendo in modo che la pagina ne mostri il risultato. Anche i parametri possono essere usati come termini dell'espressione, ma in tal caso è bene assicurarsi che siano effettivamente dei numeri, per evitare spiacevoli conseguenze di questo tipo (l'espressione seguente è volutamente errata per mostrarne le possibili conseguenze):

Errore nell'espressione: carattere di punteggiatura "{" non riconosciuto.

Può essere utile sapere che {{PAGESINCATEGORY:nomecategoria|pages}} restituisce il numero di pagine che appartengono alla categoria indicata. Un esempio di utilizzo è

{{#expr: {{PAGESINCATEGORY:Pokémon di prima generazione|pages}} + {{PAGESINCATEGORY:Pokémon di seconda generazione|pages}} + {{PAGESINCATEGORY:Pokémon di terza generazione|pages}} + {{PAGESINCATEGORY:Pokémon di quarta generazione|pages}} + {{PAGESINCATEGORY:Pokémon di quinta generazione|pages}}

che mostra il numero totale di specie di Pokémon appartenenti alle prime cinque generazioni, ossia 649.

#ifexpr

#ifexpr è un misto di if ed expr: valuta un'espressione e restituisce un valore a seconda del risultato. La sintassi è {{#ifexpr: espressione | [1] | [2] }}: se l'espressione è "vera" esegue [1], altrimenti [2]. Come prima, sia [1] che [2] possono essere omessi.

L'espressione passata può essere sia un valore di verità che un numero. A seconda del tipo del risultato dell'espressione questo viene valutato "vero" in modo diverso:

  • se l'espressione è già un valore di verità viene usato quel valore. Per esempio, se {{{parametro}}} è un numero {{{parametro}}} > 0 è vero se il valore passato è positivo, falso altrimenti.
  • se l'espressione ha come risultato un numero, il valore 0 è falso, tutti gli altri sono veri. Quindi nel caso di prima {{{parametro}}} è vero se il valore passato è diverso da 0, falso altrimenti.

#replace

Serve per sostituire una determinata stringa con un'altra, la sintassi è {{#replace:testo|stringa da cercare|stringa da sostituire}}: per esempio {{#replace:abcdbc|bc|bh}} diventa abhdbh. Un utilizzo frequente è nei template che contengono il modulo css, dato che in quest'ultimo i nomi dei colori devono essere inseriti senza spazi quando si usa la sintassi type. Se per esempio i due parametri che definiscono i colori sono color e color2, si scriverà una cosa del tipo {{#invoke: css | horizGrad | type = {{#replace:{{{color|pcwiki}}}| |}} | type2 = {{#replace:{{{color2|{{{color|pcwiki}}}}}}| |}} }}.

{{!}}

Dato che all'interno del codice di una parser function il carattere | serve a separare due argomenti, non si può utilizzare questo carattere per altri scopi, come per esempio le celle di una tabella. Per far fronte a questo problema è stato introdotto il template:!. Questo template viene sostituito da un semplice |, permettendo quindi di scrivere questo carattere all'interno di una parser function.

Per esempio, se voglio mostrare una riga di una tabella solo se un certo parametro è presente devo scrivere un codice del tipo:

{| class="text-center white-rows roundy-corners" style="{{#invoke: css | horizGrad | type = pcwiki}}"
|-
! Tipo
! Valore
{{#if: {{{parametro|}}} |
{{!}}-
{{!}} Informazione 1
{{!}} {{{parametro}}}
}}
|-
| Informazione 2
| Valore 2
|}

ed i risultati, rispettivamente in presenza e assenza del parametro, saranno i seguenti:

Tipo Valore
Informazione 1 {{{parametro}}}
Informazione 2 Valore 2


Tipo Valore
Informazione 2 Valore 2

Questo template può essere usato anche all'interno di un parametro passato ad un altro template per sostituire il carattere |, che verrebbe altrimenti interpretato come separatore tra due parametri.

HTML e CSS

Esistono milioni di guide in internet su HTML e CSS. Quello che voglio fare io in questo paragrafo però è parlare in breve solo delle cose che servono su Pokémon Central Wiki (o in generale su un sito che monta Mediawiki), visto che il parser (la parte del programma di Mediawiki che prende il wikicode di una pagina e genera l'HTML che viene poi mandato al browser) impedisce di usare alcune cose e ne inserisce in automatico delle altre. Chi ha già una conoscenza base di HTML e CSS può saltare la prossima sezione.

Nozioni di base sull'HTML

L'HTML è il linguaggio che i browser capiscono e sanno far vedere. Ha una struttura a tag, ovvero degli elementi che possono avere un contenuto, inseriti in una gerarchia: ogni tag ha un padre, che è il tag che lo contiene (l'unico tag senza padre, il tag html, viene inserito dal parser molto al di fuori della parte che si può modificare normalmente in una pagina), e dei figli, che sono i tag che lui contiene. Per realizzare un tag si utilizza un'apertura, ottenuto scrivendo il nome del tag tra <> (per esempio <div>), e una chiusura, ottenuta come l'apertura ma aggiungendo una / prima del nome del tag (esempio: </div>).

Per esempio, il codice

 <div A>
     <div B>
         testo di B che non è in C
         <div C>testo di C</div>
     </div>
     <div D>testo di D</div>
 </div>

crea un albero HTML con quattro tag (o elementi, sono sinonimi): il div A, che nell'esempio è il padre di tutti gli elementi che ci interessano, che ha due figli, i div B e D. D contiene solo del testo, mentre B contiene sia del testo che un altro figlio, ovvero C, che ha sua volta contiene del testo. Naturalmente non esistono solo i tag div e la struttura può essere complessa a piacere, ma questo esempio dovrebbe chiarire un po' le idee. Come si può vedere dall'esempio l'HTML non ha problemi se si aggiungono degli spazi o degli a capo all'interno di un elemento: il contenuto termina solo con il tag di chiusura. In HTML gli spazi e gli a capo nel codice vengono ignorati. Il parser di Mediawiki però non lo fa, discuteremo in seguito gli effetti di queste cose sulla pagina. È molto importante ricordarsi di chiudere sempre i tag aperti: il mio consiglio è di scrivere il tag di chiusura insieme a quello di apertura e poi scriverci all'interno.

Ogni tag HTML può avere degli attributi, che servono a specificare un po' meglio al browser cosa fare per mostrare quel tag. Gli attributi vanno messi all'interno dei < e > del tag di apertura, con la sintassi nome="valore", separando i vari attributi con spazi. Per esempio

<div class="text-center" style="color: #123456;">

crea un div con due attributi, class che vale text-center e style che vale color: #123456;. Anche se esistono molti attributi, su Pokémon Central Wiki si usano quasi esclusivamente i due dell'esempio, class e style, vedremo tra poco a cosa servono.

L'HTML puro permette qualche modifica all'aspetto degli elementi, ma con i siti moderni le possibilità che offre non sono sufficienti. Per questo esiste un altro linguaggio, il CSS, che permette di applicare degli stili agli elementi HTML. Gli stili sono suddivisi in regole, ognuna delle quali modifica un preciso aspetto dell'elemento (colore di sfondo, colore del testo, allineamento del testo, ...). Le regole sono scritte nella forma proprietà: valore;, dove proprietà è il nome di una proprietà CSS mentre valore è il valore che le si vuole assegnare. Per aggiungere degli stili agli elementi HTML si usano 2 modi su PCW:

  • Aggiungerli inline, ovvero mettere l'attributo style e dargli come valore le regole CSS volute, separate da un punto e virgola.
  • Aggiungere una classe, ovvero mettere l'attributo class e dargli come valore i nomi delle classi volute, separate da uno spazio.

Quindi l'esempio di prima crea un div con la classe "text-center" e una sola regole inline, ovvero "color: #123456;".

I tag HTML più comuni su Pokémon Central Wiki sono sicuramente i div. I div di default sono larghi quanto il padre e quindi se nel wikicode della pagina vengono inseriti senza un padre occupano tutta la riga, andando a capo dopo il contenuto precedente e mandando a capo il contenuto successivo (più avanti si vedrà come modificare questo comportamento). Altri elementi comuni sono gli span, che di default sono larghi quanto il loro contenuto, quindi si possono inserire anche a metà di una riga senza mandare a capo niente. Anche se l'HTML mette a disposizione moltissimi altri tag, alcuni di questi vengono bloccati dal parser di Mediawiki (per esempio non si possono inserire link o immagini in HTML, bisogna ricorrere alla sintassi Wikicode), mentre altri hanno un funzionamento "anomalo" (per esempio p ha del margine non voluto aggiunto da MediaWiki), quindi di fatto si usano solo div e span.

em & co

Esistono alcune unità di misura di lunghezza utilizzate in HTML/CSS. Tipicamente si usa em, che corrisponde alla dimensione del font utilizzato: dunque non si tratta di una dimensione assoluta, ma relativa. Una dimensione assoluta è px, che come suggerisce il nome corrisponde a un pixel. Per esempio il primo rettangolo è lungo 1em e alto 0.5em, mentre il secondo misura 10px per lato:

Di norma è raccomandato l'utilizzo di em, dato che la dimensione dello schermo varia da dispositivo a dispositivo e ciò può avere effetti indesiderati se si utilizzano misure assolute. Per ulteriori informazioni su queste unità di misura si può consultare la pagina di W3Schools.

Stili CSS comuni

Anche se il CSS mette a disposizione centinaia di proprietà, su Pokémon Central Wiki di solito se ne usano solo poche. Molte di queste proprietà inoltre vengono modificate solo dalle classi, quindi quelle che capita veramente di scrivere sono pochissime.

Lo stile di Pokémon Central Wiki prevede l'uso di gradienti (altrimenti detti sfumature). I gradienti orizzontali tra i colori di due tipi si applicano con classi CSS del tipo horiz-grad-elettro-acciaio; quelli dalla variante light (più chiara) alla variante normale di uno stesso colore con classi come horiz-grad-acqua. Per gradienti tra colori che non sono tipi, bisogna inserire in style una chiamata al modulo Css. Il primo caso ha un corrispondente in un pezzo di Wikicode di questo tipo: {{#invoke: css | horizGrad | type = colore1 | type2 = colore2}} (gli spazi sono opzionali ma migliorano la leggibilità del codice); verrà automaticamente colorata con una sfumatura che va da colore1 a colore2. Il secondo caso invece si ottiene così: {{#invoke: css | horizGrad | type = colore1}}; il gradiente va da colore1.light a colore1, ossia parte da una versione più chiara di colore1 e termina in colore1. Per maggiori informazioni sui gradienti, si rimanda alla sezione apposita.

Al posto di colore1 e colore2 vanno inseriti i nomi di due colori; ce n'è uno per ogni tipo, per ogni regione, per la maggior parte dei giochi, per alcuni personaggi importanti e per molto altro. Per una spiegazione completa sui colori e come usarli, si rimanda alla pagina apposita.

Ecco un esempio:

<div style="{{#invoke: css | horizGrad | type = unima}}">Testo a caso</div>

Testo a caso

Altre proprietà di CSS utilizzate di solito sono elencati di seguito. La sintassi è, come già detto, proprietà: valore; (sempre con il ; dopo, anche per l'ultima regola):

  • padding: indica lo spazio tra il bordo del div ed il suo contenuto. Il padding può avere valori diversi nelle quattro direzioni, questa pagina contiene i dettagli. Generalmente l'unità di misura da utilizzare sono gli em descritti poco sopra.
  • margin: indica lo spazio fra il div e ciò che lo circonda. Anche il margin può avere valori diversi nelle quattro dimensioni, con la stessa sintassi del padding.
  • background: permette di ottenere uno sfondo a tinta unita anziché un gradiente: si può specificare un colore esistente (qua le istruzioni), oppure l'esadecimale corrispondente al colore voluto. In entrambi i casi il valore deve essere preceduto da #. Se si vuole uno sfondo bianco usare la classe white-bg (descritta nel prossimo paragrafo).
  • color: permette di cambiare il colore del testo, vale quanto già detto per background. Se il testo deve essere nero o bianco usare la classe black-text o white-text (descritte nel prossimo paragrafo).
  • height: in teoria permette di impostare l'altezza dell'elemento. In pratica viene usata solo con valore "height: 100%;" per forzare un elemento ad avere l'altezza del padre, anche se non funziona nel modo semplice che ci si aspetta. Vedere la sezione su tricks e workarounds per più dettagli.

Ecco un esempio di elemento con un po' di stili:

<div style="background: #{{#invoke: colore | fuoco | dark}}; color: #eaeaea; margin: 4em; padding: 0.5em;">Testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso</div>

Testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso testo a caso

Per capire esattamente cos'è successo a questo elemento, consiglio di usare l'inspector del browser.

Inspector

L'inspector è un utilissimo strumento integrato nel browser che permette non solo di visualizzare il sorgente della pagina, ma anche di modificarlo per poter vedere i cambiamenti in tempo reale senza bisogno di modificare effettivamente la pagina.

Esistono due metodi per aprire l'inspector:

  • Premere il tasto F12 funziona su Firefox, Chrome, Internet Explorer e Edge, mentre in Opera bisogna premere Ctrl + Shift + C. In Safari la combinazione è alt + cmd + i, potrebbe essere necessario spuntare Sviluppo -> mostra inspector web.
  • Fare click destro in un punto della pagina e selezionare la voce Analizza elemento (o simile).

A questo punto, dovrebbe esserci in alto a sinistra un simbolo tipo rettangolo con sopra una freccina del mouse; premendolo e muovendo il mouse sul codice della pagina dovrebbero iniziare a venire evidenziati gli elementi corrispondenti nella pagina stessa. In questo modo ci si può fare un'idea di quali elementi hanno la forma che volevamo, quali no, quanto sono grossi margin e padding, se un elemento non si comporta come vorremmo, etc. Come già detto, è anche possibile modificarli dall'inspector e vedere immediatamente il risultato nella pagina senza modificare quest'ultima.

L'unico modo per imparare ad usare l'inspector per debuggare è con la pratica, il consiglio è di esercitarsi un po' perché è davvero comodo quando si creano template complessi per capire esattamente cosa non va (basta guardare i vari elementi e trovare quello che non ha le dimensioni/la posizione che ci si aspetta per capire almeno che il problema è tra lui e i suoi antenati più vicini).

sidebar

Pokémon Central Wiki mostra una barra sul lato sinistro, chiamata sidebar; essa è presente solo nella versione desktop del sito mentre è nascosta in quella mobile. Per questo quando si modifica una pagina da PC e si vuole provare la visualizzazione da mobile non basta restringere lo schermo, bisogna anche rimuovere la sidebar per vedere il comportamento effettivo su schermi stretti: per farlo basta aprire l'inspector e seguire i seguenti passaggi.

  1. Uno dei primissimi tag visibili è il body, che contiene un figlio chiamato <div id="mw-navigation">...</div>: rimuovere quest'ultimo (basta farci click destro e cliccare sulla voce apposita).
  2. All'elemento <div id="content"... aggiungere style="margin-left: 0; position: relative; z-index: 100000;" (dove z-index è un numero grande a piacimento).

In questo modo si potrà avere un'idea migliore di come si presenta la pagina senza bisogno di aprire l'editor dalla versione mobile del sito.

Classi "base"

Questo è un elenco delle classi "base" disponibili su Pokémon Central Wiki:

  • roundy: arrotonda gli angoli. Esistono un sacco di varianti, tipo roundytl, roundytr, roundybl, roundybr che arrotondano ciascuna un solo angolo (rispettivamente top left, top right, bottom left, bottom right); roundytop, roundyleft o simili che arrotondano i due angoli dal lato indicato. Queste classi possono essere combinate in modo da arrotondare gli angoli voluti. È anche possibile far seguire ad ognuna di queste classi un numero tra 5, 10, 15, o 20 per cambiare il raggio dell'arrotondamento (se non si scrive niente il default è 10): per esempio un elemento con class="roundy-bl-5 roundy-right-15" avrà l'angolo in basso a sinistra arrotondato poco mentre i due a destra arrotondati molto.
  • roundy-header, roundy-footer, roundy-corners: servono sulle tabelle, arrotondano rispettivamente gli angoli superiori, gli angoli inferiori e tutti gli angoli sia della tabella che delle celle nelle posizioni d'angolo. Non funzionano in caso di rowspan o colspan che interessano una delle celle modificate da questa classe.
  • inline-block, same-line: queste due classi sono sinonimi e servono a cambiare il comportamento dell'elemento per farlo diventare largo come il contenuto (per esempio cambiando il comportamento di default dei div). Possono essere comode in alcuni layout responsive semplici, per lasciare al browser la scelta di quando mandare a capo due elementi affiancati che non ci stanno su schermi piccoli. Un div con questa classe non può essere allineato al centro o a destra con pull-center o pull-right: per fare ciò bisogna racchiuderlo in un parent che abbia la classe text-center o text-right rispettivamente.
  • pull-center, pull-left, pull-right: l'elemento viene allineato al centro, a sinistra o a destra rispettivamente. Allinearlo a destra o a sinistra con queste classi può causare problemi di sovrapposizione, vedi tricks e workarounds per una possibile soluzione.
  • text-left, text-center, text-right: per impostare l'allineamento del testo.
  • text-small, text-big, text-triple-big: per cambiare la dimensione del testo.
  • clear-left, clear-right, clear-both: evitano che ci sia del contenuto rispettivamente a sinistra, a destra o da entrambe le parti mandando a capo.
  • align-middle, vert-middle: align-middle allinea verticalmente tutti i fratelli con questa classe in modo che i centri siano alla stessa altezza; vert-middle dovrebbe allineare verticalmente al centro tutti i figli dell'elemento. Vedere i tricks e workarounds per come usare queste classi e vedere quando non funzionano.
  • no-border-spacing: da mettere ad una tabella, toglie il bordo tra le celle.
  • overflow-auto: mette "overflow: auto;" all'elemento. Non è chiarissimo come funzioni davvero, ma risolve alcuni problemi di posizionamento sbagliato.
  • white-bg: rende lo sfondo di colore bianco.
  • black-text o white-text: rende il testo di colore nero o bianco rispettivamente, compresi eventuali link.
    • Attenzione però: se un elemento ha la classe white-text ed un suo figlio ha black-text, eventuali link contenuti in quest'ultimo diventano comunque bianchi anziché neri, contrariamente a quanto ci si aspetta. Il testo normale invece diventa nero.
  • height-100: rende un elemento alto come il parent. Funziona solo in determinati contesti.

Tricks e workaround scoperti sul campo

  • height-100 non funziona a meno che uno degli antenati abbia una height calcolabile senza sapere il contenuto: per esempio, una cella di una tabella, un elemento di un flex, o una height fissa in em, px etc.
  • Se metti a tutti i figli di un certo elemento la class align-middle e questo elemento ha la stessa altezza del suo figlio più alto, l'effetto è quello di avere tutti i figli centrati verticalmente. Se per caso questo figlio non esistesse, si può provare ad aggiungere un elemento con "height: 100%;" e niente width e dargli align-middle. In teoria vert-middle fa entrambe queste cose, ovvero aggiunge l'elemento con "height: 100%;" e mette a tutti i figli align-middle. Il problema di entrambe queste classi è che spesso "height: 100%;" non funziona.
  • Se si vuole escludere una qualsiasi riga di un tabella dall'effetto del white-rows basta usare ! invece della normale |. In questo modo la prima riga diventa l'header della tabella, una riga in mezzo rappresenta un divisorio e l'ultima il footer, che non vengono influenzati dalla classe.
  • MediaWiki aggiunge del margin ai p di default. Questo non sarebbe un problema dato che nei template raramente si inserisce un p, ma il parser ha anche questa simpatica prerogativa di interpretare una riga di testo come appunto testo e quindi wrapparla automaticamente in un p. Questo può avvenire anche nei template perché una riga di testo può apparire molto facilmente: per esempio, in un infobox con troppi a capo quasi sicuramente le etichette e i valori associati diventano righe di testo. Di solito questo causa l'apparizione di spazio tra gli elementi apparentemente inspiegabile; in questi casi bisogna controllare sempre dall'inspector che non sia apparso questo magico p con il suo maledetto margin. Per farlo sparire evitando di spostare tutta la zona incriminata su una riga (con conseguente perdita di leggibilità) esistono alcuni workaround:
    • Se si usa #if/#ifeq/#switch è sufficiente inserirne la prima parte nella riga stessa e mandare a capo i |.
    • In alcuni casi si può wrappare il testo incriminato in uno span, in modo che non venga interpretato come un p.
    • Quando i metodi precedenti non sono applicabili, è possibile inserire <!-- alla fine di una riga e --> all'inizio della successiva, in modo che il parser ignori questo a capo.
  • Nei CSS delle tabelle, border-collapse: collapse; e border-spacing: 0; hanno apparentemente lo stesso effetto. In realtà c'è una differenza: il primo si mangia anche un eventuale padding della table. Morale della favola? Non usare mai border-collapse: collapse. Per l'altro c'è pure una simpatica classe CSS, no-border-spacing.

Gradienti

I gradienti sono uno dei pilastri dello stile grafico di Pokémon Central Wiki, e sono solo un nome un po' altisonante per una sfumatura tra colori. Per esempio, il rettangolo qui sotto ha uno sfondo con un gradiente:

Sfondo con gradiente

Nel caso più comune, i gradienti sono sfumature tra due colori, in direzione orizzontale, da sinistra a destra. Si specificano come gradiente acciaio-erba (quello qui sopra) per indicare un gradiente orizzontale, che parte da sinistra con il colore acciaio, variante normale e termina a destra con il colore erba, anch'esso variante normale. Nel caso si dica gradiente acqua si intende un gradiente di nuovo orizzontale, ancora da sinistra a destra, dal colore acqua variante light al colore acqua variante normale. In generale, i colori dei gradienti sono menzionati o entrambi esplicitamente, o uno viene omesso, intendendo che il colore di partenza è la variante light del colore di arrivo. Per una spiegazione completa sui colori e come usarli, si rimanda alla pagina apposita.

Lo schema di cui sopra per i colori dei gradienti è talmente pervasivo su Pokémon Central Wiki da avere una sintassi apposita, sia negli attributi style via il modulo Css, sia negli attributi class via classi apposite negli stili custom del sito.

Gradienti nei tag style (modulo Css)

Nonostante sia possibile inserire manualmente gradienti via le apposite dichiarazioni CSS, questo è fortemente sconsigliato, tant'è vero che non viene nemmeno spiegato in questo manuale ;P Le ragioni principali di ciò sono: l'impossibilità di usare i colori via nome, in quanto sono necessari i valori esadecimali; la mancanza di inserimento automatico dei vendor prefixes per i gradienti; la scomodità di non avere il supporto dello schema descritto nella sezione precedente.

Il modulo Css è il mezzo universale per l'inserimento dei gradienti. Supporta gradienti orizzontali, verticali, obliqui e radiali, tramite le funzioni horizGrad, vertGrad, slantedGrad e radialGrad rispettivamente. La chiamata va inserita nell'attributo style. Per esempio, il seguente codice:

<div style="{{#invoke: Css | horizGrad | elettro | acqua }}">Chinchou e Lanturn</div>

produce questo gradiente:

Chinchou e Lanturn

I colori vengono specificati allo stesso modo per tutti i tipi di gradienti, principalmente con queste due sintassi:

  • type = <tipo>, type1 = <tipo1> | type2 = <tipo2>: questa è la sintassi specifica per lo schema indicato all'inizio della sezione sui gradienti. La chiamata intera risulta, per esempio, così: {{#invoke: css | horizGrad | type1 = veleno | type2 = terra}} (gli spazi sono opzionali ma migliorano la leggibilità del codice). Quando vengono specificati due tipi diversi, il gradiente va dal <type1> al <type2>; se è passato un solo tipo, o quando i due tipi sono uguali, si ricade nel secondo caso, ovvero il gradiente dalla variante light di <type> a quella normale di <type>.
  • <colore1> | <variante> | <colore2> | <variante>...: questa sintassi permette di specificare i colori manualmente via nome, con relativa variante, per esempio {{#invoke: Css | vertGrad | fuoco | normale | elettro | dark}}. Si possono passare più di due colori. Le varianti sono opzionali, con default a normale. Le varianti possono essere anche passate nello stesso parametro del colore, separate da spazi, esempio: {{#invoke: Css | vertGrad | buio light | fuoco dark }};.

In realtà esistono molti altri modi per richiamare il modulo Css, per cui si rimanda al modulo stesso.

Gradienti nei tag class (classi CSS)

Per questioni di efficienza alcuni gradienti possono essere aggiunti tramite classi CSS:

Per esempio, il seguente spezzone di codice:

<div class="horiz-grad-acciaio-erba">Sfondo con gradiente</div>

produce questo risultato:

Sfondo con gradiente

Le classi CSS hanno tutte nomi nei seguenti due formati. La logica è volutamente la stessa delle sintassi type = <tipo> e type1 = <tipo1> | type2 = <tipo2> del modulo Css.

  • horiz-grad-<type1>-<type2>: questo formato produce un gradiente dalla variante normale di <type1> alla variante normale di <type2> se i due tipi sono diversi (esempio: horiz-grad-buio-psico). Quando invece <type1> e <type2> sono uguali, il gradiente va dalla variante light del tipo alla variante normale (esempio: horiz-grad-fuoco-fuoco).
  • horiz-grad-<type>: questo formato crea un gradiente dalla variante light alla variante normale di <type> (esempio horiz-grad-fuoco). Il risultato è volutamente esattamente lo stesso del formato horiz-grad-<type>-<type>, con lo stesso tipo ripetuto due volte.

Le classi CSS per i gradienti sono soggette alle seguenti limitazioni, con annesse spiegazioni:

  • I colori disponibili sono solo tipi e categorie danno: Non ci saranno mai gradienti per tutti i colori nel CSS. Solo i colori più utilizzati nelle pagine più visualizzate possono essere aggiunti. Lo staff si riserva il diritto di valutare caso per caso quali colori aggiungere.
    Motivazioni: Il CSS non è un linguaggio computazionale: i file CSS sono essenzialmente una lista di stili. Aggiungere stili significa aggiungere elementi alla lista, senza la possibilità di produrre stili a runtime. La conseguenza è che i gradienti per i vari colori vanno aggiunti uno per uno, aumentando notevolmente il peso del file CSS stesso. Facendolo per i gradienti più usati però si ha comunque un peso complessivo delle pagine del Wiki minore, visto che il codice dei gradienti è presente una sola volta nel CSS e poi soltanto richiamato nel Wikicode. Quanto alle performance, i browser moderni sono più veloci nell'applicare stili dal CSS che da tag style inline.
  • I gradienti sono solo orizzontali: Non ci saranno mai classi CSS per gradienti non orizzontali.
    Motivazioni: Per gli stessi motivi di cui sopra, includere tipi di gradienti non massicciamente utilizzati in Pokémon Central Wiki è deleterio per le performances.
  • I nomi dei tipi non hanno alias di sorta e sono solo in minuscolo: Non esistono, e mai esisteranno, classi come horiz-grad-??? e horiz-grad-Acqua-Fuoco (la prima lettera dei tipi è maiuscola). Per ovviare al secondo problema, usare la funzione lc di MediaWiki nei template (esempio: class="horiz-grad-{{lc: {{{type1}}} }}-{{lc: {{{type2}}} }}".
    Motivazioni: Di nuovo, CSS non è un linguaggio computazionale. Il che significa che evantuali alias dei nomi dei tipi non possono essere ricondotti ad un unico nome. Si dovrebbero quindi aggiungere tali alias ai sorgenti CSS stessi, aumentando a dismisura il peso in KB dei sorgenti stessi.

Integrazioni con il modulo PokémonData

La funzione gradTypes del modulo PokémonData ritorna i tipi di un Pokémon nel formato adatto per essere usati nelle classi CSS per i gradenti (ovverosia in minuscolo e separati da trattini). Per esempio, il seguente frammento di codice:

 <div class="horiz-grad-{{#invoke: PokémonData | gradTypes | 528 }}">Who's that Pokémon?</div>

produce il seguente codice

Who's that Pokémon?

Per ulteriori informazioni su come chiamare la funzione gradTypes, consultare il modulo PokémonData.

Responsività

L'idea delle classi responsive è molto semplice: hanno un comportamento diverso a seconda della larghezza dello schermo. Le classi responsive usate qui su Pokémon Central Wiki sono quasi tutte del tipo "se lo schermo è abbastanza stretto fai qualcosa, altrimenti non fare nulla". Le dimensioni disponibili sono xl, lg, md, sm, xs: indicativamente xl rappresenta i PC, lg i tablet di medie dimensioni, md i tablet più piccoli ed i telefoni in landscape, sm o xs i telefoni in portrait. Le larghezze di schermo in cui si cambia tra due sigle (es tra xs e sm) si chiamano breakpoint.

Se una sigla viene omessa viene omessa si prende in considerazione la precedente. Per esempio class="width-xl-50 width-sm-100" è equivalente a class="width-xl-50 width-lg-50 width-md-50 width-sm-100 width-xs-100".

Width responsive

Un esempio di utilizzo di questi strumenti è impostare impostare una larghezza variabile in base alla dimensione dello schermo. Per farlo si utilizza una scrittura del tipo width-__-__. In prima posizione si indica la sigla della larghezza (una delle 5 descritte nel paragrafo precedente), in seconda la percentuale. Quest'ultima si imposta semplicemente scrivendo il numero (senza il simbolo %), che però deve essere un multiplo di 5 oppure 33 o 66.

Ecco un esempio pratico:

<div class="width-xl-20 width-lg-40 width-md-66 width-sm-80 width-xs-100" style="background: #bbb;">elemento</div>

lg:xs:

elemento

Stringendo progressivamente lo schermo si può notare che la larghezza dell'elemento è pari al 20% negli schermi xl, 40% negli lg, e così via fino al 100% negli xs.

È importante notare che questa percentuale non è riferita all'intera larghezza dello schermo, ma alla larghezza del contenitore; nell'esempio seguente lo stesso elemento con larghezza variabile è contenuto in un padre con larghezza fissa al 60% dello schermo. Ovviamente valgono le stesse considerazioni se il padre ha a sua volta una larghezza variabile.

<div class="width-xl-60" style="background: #999; padding: 0.2em;">padre
<div class="width-xl-20 width-lg-40 width-md-66 width-sm-80 width-xs-100" style="background: #bbb;">elemento</div></div>

lg:xs:

padre
elemento

Buona parte dei layout responsive presenti qui su Pokémon Central Wiki è realizzata semplicemente sfruttando le width responsive abbinate ai flex, che permettono di allineare per bene i vari pezzi.

flex

L'idea dei flex è quella di posizionare gli elementi all'interno del contenitore in modo da ottimizzare gli spazi sia su schermi piccoli che su schermi grandi. Ecco le classi da utilizzare più o meno sempre:

  • flex: definisce un contenitore flex.
  • flex-row, flex-row-reverse, flex-column, flex-column-reverse: indica in quale direzione si dispongono gli elementi. La prima è quella utilizzata praticamente ovunque.
  • flex-wrap: fa sì che il contenuto vada a capo se la larghezza è insufficiente. Di default infatti il contenitore mette tutto su una sola riga anche se il contenuto poi sfora.

Queste classi vanno applicate solo al contenitore, non ai contenuti (a meno che essi non siano a loro volta contenitori di elementi da gestire con i flex). Esempio:

<div class="flex flex-row flex-wrap" style="{{#invoke: css | horizGrad | type = johto}}">
<div style="margin: 1em;">[[File:Torre Sprout HGSS pomeriggio.png|200px]]</div>
<div style="margin: 1em;">[[File:Rovine d'Alfa HGSS pomeriggio.png|200px]]</div>
<div style="margin: 1em;">[[File:Bosco di Lecci HGSS pomeriggio.png|200px]]</div>
<div style="margin: 1em;">[[File:HGSS Tohjo Falls-Evening.png|200px]]</div>
<div style="margin: 1em;">[[File:HGSS Via Vittoria-Giorno.png|200px]]</div>
<div style="margin: 1em;">[[File:HGSS IsoleSpumarine-Giorno-Sera.png|200px]]</div>
</div>

Si può notare che i div non vanno più a capo automaticamente, ma piuttosto si affiancano finché c'è spazio a sufficienza e vanno a capo solo quando necessario.

Altre classi di comune utilizzo sono flex-main-_ e flex-items-_:

  • flex-main-start, flex-main-center, flex-main-end: quando la larghezza complessiva degli elementi di una riga è inferiore al 100%, queste classi permettono di gestire il loro allineamento (rispettivamente a sinistra, al centro e a destra).
  • flex-main-space-around: gli elementi vengono distribuiti uniformemente sulla riga, senza variare la propria larghezza.
  • flex-main-stretch: gli elementi vengono allargati uniformemente in modo da occupare l'intera riga.
  • flex-items-center: gli elementi vengono centrati in altezza.
  • flex-items-stretch: gli elementi vengono allungati uniformemente in modo da essere alti come quelli nella stessa riga.

Moltissimi template (tra cui per esempio gli infobox) sfruttano questi strumenti per costruire il proprio layout. Ecco un esempio pratico:

<div class="flex flex-row flex-wrap flex-items-center flex-main-space-around width-xl-50 width-lg-80 width-sm-100 roundy text-center" style="{{#invoke: css | horizGrad | type = unima}} padding: 0.2em;">
<div class="width-xl-100 big-text text-center">'''Titolo/sottotitolo'''</div>
<div class="width-xl-20 text-right text-center-sm" style="padding: 0.2em;">'''Voce 1'''</div>
<div class="width-xl-80 width-sm-100 roundy white-bg" style="padding: 0.1em;">Qui ci va un po' di testo</div>
<div class="width-xl-20 text-right text-center-sm" style="padding: 0.2em;">'''Voce 2'''</div>
<div class="width-xl-80 width-sm-100 roundy white-bg" style="padding: 0.1em;">Qui c'è un altro po' di testo messo a caso per riempire il box e rendere bene l'idea</div>
<div class="width-xl-20 text-right text-center-sm" style="padding: 0.2em;">'''Voce 3'''</div>
<div class="width-xl-80 width-sm-100 roundy white-bg" style="padding: 0.1em;">Ancora testo</div>
</div>

Titolo/sottotitolo
Voce 1
Qui ci va un po' di testo
Voce 2
Qui c'è un altro po' di testo messo a caso per riempire il box e rendere bene l'idea
Voce 3
Ancora testo

Il primo elemento occupa sempre una larghezza del 100%, in modo da far andare a capo ciò che viene dopo anche se il contenitore è un flex. Le coppie successive su schermi grandi occupano rispettivamente 20% e 80% di larghezza, che risulta in un 20% + 80% = 100% per coppia (il che manda a capo l'elemento successivo come sopra), mentre su schermi piccoli il secondo elemento va a 100% e quindi deve andare a capo perché non ci sta nello spazio rimanente (20% + 100% > 100%).

Esistono anche alcune "scorciatoie":

  • flex-row-stretch-around è equivalente a flex flex-row flex-items-stretch flex-main-space-around.
  • flex-row-center-around è equivalente a flex flex-row flex-items-center flex-main-space-around.
  • flex-row-center-stretch è equivalente a flex flex-row flex-nowrap flex-items-center flex-main-stretch.

Per una guida completa a tutti gli strumenti relativi ai flex, si rimanda a questa pagina.

Note importanti

  • Alcuni browser possono dare problemi quando si utilizzano flex annidati, ossia elementi flex il cui padre è a sua volta un flex, mentre non sembrano esserci problemi quando il flex è un antenato più vecchio del padre. Nello specifico si sono rivelati potenzialmente problematici Safari ed i browser basati su Chromium (tra i quali rientrano Chrome, Opera, Vivaldi, Edge), mentre Firefox dovrebbe esserne "immune". Per questo motivo quando si utilizzano flex annidati è sempre meglio controllare che non ci siano problemi, eventualmente chiedendo a qualcuno che utilizzi questi browser se la pagina si vede bene.
  • Quando si fissa la larghezza di un elemento (per esempio tramite le classi width-__-__ descritte in precedenza), è importante notare che tale larghezza non comprende eventuale margine, e ciò può produrre effetti indesiderati. Se per esempio si ha un padre flex contenente due elementi con width-xl-50 e un po' di margin, intuitivamente questi dovrebbero essere affiancati ed occupare metà larghezza ciascuno, ma in pratica questo margin fa sì che la larghezza effettiva diventi superiore a 50%, e quindi manda a capo. Un possibile workaround consiste nello "sdoppiamento" dell'elemento: si utilizza un <div> che abbia la larghezza voluta e padding pari al margine voluto, ed al suo interno si mette l'elemento senza impostarne la larghezza, che è già stabilita dal padre.
    • In alcuni casi può essere necessario assegnare ad uno o più di questi due elementi le classi height-100 vert-middle per ottenere il layout voluto.
<div class="flex flex-row flex-wrap" style="background: #000; padding: 0.2em;">
<div class="width-xl-50" style="margin: 0.2em; background: #ff0;">Elemento 1</div>
<div class="width-xl-50" style="margin: 0.2em; background: #0f0;">Elemento 2</div>
</div>
{{-}}
<div class="flex flex-row flex-wrap" style="background: #000; padding: 0.2em;">
<div class="width-xl-50" style="padding: 0.2em;"><div style="background: #ff0;">Elemento 1</div></div>
<div class="width-xl-50" style="padding: 0.2em;"><div style="background: #0f0;">Elemento 2</div></div>
</div>

Elemento 1
Elemento 2


Elemento 1
Elemento 2

Tabelle responsive

L'idea delle tabelle responsive è di trasformare ogni riga in un layout responsive solo quando lo schermo è troppo stretto; si usa la nomenclatura card layout. Per trasformare una riga in una card basta assegnarle la classe flex al di sotto di una certa larghezza: per esempio, se si vuole responsivizzare la riga da sm in giù si aggiunge class="flex-sm ..." subito dopo il simbolo |- che la delimita. Di seguito si userà sm come esempio per brevità, ovviamente basta sostituirlo con il breakpoint opportuno se si vuole usarne uno diverso.

Una volta inserita questa classe, si possono aggiungere le altre flex-... già descritte in precedenza: funziona perché il CSS le ignora se l'elemento non è flex, e ciò accade solo sotto il breakpoint specificato. flex-wrap è presente di default ma non fa male aggiungerlo. Dato che il margin viene automaticamente ignorato, aggiungerci style="margin-top: 0.3em;" sistema la visualizzazione separando le caselle.

La roundyness si aggiunge con un banalissimo roundy, altre cose vanno testate. Se ci sono più righe "collegate" da un rowspan, si può applicare roundy-header alla prima riga, roundy-footer all'ultima e togliere la roundyness alle altre, in modo che su schermi stretti si abbia una casella unica con i bordi arrotondati correttamente.

Bisogna poi sistemare le larghezze per far andare a capo le cose. Si possono usare le solite width-__-__, ma esistono anche le min-width che spingono a capo i flex-items se questi diventano troppo piccoli, e funzionano bene se accompagnate da flex-main-stretch.

Ultima cosa da tenere a mente sta nel fatto che le intestazioni andranno nascoste, dato che il layout non combacia se la riga diventa una card (basta un banale class="hidden-sm"). Di conseguenza, le informazioni non ovvie dovranno essere specificate in ogni singola riga: è sufficiente utilizzare uno span con la classe class="visible-sm".

Eventuali caselle vuote possono essere nascoste su schermi stretti semplicemente assegnando loro la classe hidden-sm.

Ecco un esempio pratico:

{| class="std-table sortable" style="{{#invoke: css | horizGrad | type = alola}} padding: 0.3em;"
|- class="hidden-sm black-text"
! Alleato !! Luogo !! [[Pioggia battente|Pioggia]] !! [[Grandine (condizione atmosferica)|Grandine]] !! [[Tempesta di sabbia|Sabbia]]
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 061}} [[Poliwhirl]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 062}} [[Poliwrath]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 1%{{tempo|G}}<span class="visible-sm small-text"> ([[Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 186}} [[Politoed]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 1%{{tempo|N}}<span class="visible-sm small-text"> ([[Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy-header" style="margin-top: 0.3em;"
| rowspan="4" class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 351}} [[Castform]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Grandine (condizione atmosferica)|grandine]], [[Tempesta di sabbia|sabbia]])</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center"
| style="padding: 0.5em;" | {{rt|17|Alola}}, [[Giungla Ombrosa]], [[Isola Exeggutor]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ([[Pioggia battente|pioggia]])</span><span class="visible-sm">, </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Grandine (condizione atmosferica)|grandine]], [[Tempesta di sabbia|sabbia]])</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center"
| style="padding: 0.5em;" | [[Villaggio Tapu]], [[Monte Lanakila]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Pioggia battente|pioggia]], [[Tempesta di sabbia|sabbia]])</span><span class="visible-sm">, </span>
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ([[Grandine (condizione atmosferica)|grandine]])</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy-footer"
| style="padding: 0.5em;" | [[Deserto Haina]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Pioggia battente|pioggia]], [[Grandine (condizione atmosferica)|grandine]])</span><span class="visible-sm">, </span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ([[Tempesta di sabbia|sabbia]])</span>
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 444}} [[Gabite]]
| style="padding: 0.5em;" | [[Deserto Haina]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Tempesta di sabbia|sabbia]])</span>
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 582}} [[Vanillite]]
| style="padding: 0.5em;" | [[Villaggio Tapu]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Grandine (condizione atmosferica)|grandine]])</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 583}} [[Vanillish]]
| style="padding: 0.5em;" | [[Monte Lanakila]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Grandine (condizione atmosferica)|grandine]])</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 584}} [[Vanilluxe]]{{#invoke: sup | USUL}}
| style="padding: 0.5em;" | [[Monte Lanakila]] (tranne la base)<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ([[Grandine (condizione atmosferica)|grandine]])</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 704}} [[Goomy]]
| style="padding: 0.5em;" | [[Giungla Ombrosa]], {{rt|17|Alola}}<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 705}} [[Sliggoo]]
| style="padding: 0.5em;" | [[Isola Exeggutor]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|}

  Poliwhirl Giardino di Malie: 10% (pioggia)
  Poliwrath Giardino di Malie: 1%Giorno (pioggia)
  Politoed Giardino di Malie: 1%Notte (pioggia)
  Castform Giardino di Malie: 10% (grandine, sabbia)
Percorso 17, Giungla Ombrosa, Isola Exeggutor: 1% (pioggia), 10% (grandine, sabbia)
Villaggio Tapu, Monte Lanakila: 10% (pioggia, sabbia), 1% (grandine)
  Gabite Deserto Haina: 10% (sabbia)
  Vanillite Villaggio Tapu: 10% (grandine)
  Vanillish Monte Lanakila: 10% (grandine)
  VanilluxeUsUl Monte Lanakila (tranne la base): 1% (grandine)
  Goomy Giungla Ombrosa, Percorso 17: 10% (pioggia)
  Sliggoo Isola Exeggutor: 10% (pioggia)

In alcuni casi può essere preferibile rendere queste etichette sempre visibili, per esempio quando la tabella ha tante colonne, oppure quando ci sono righe con colspan diverso da 1 che non sono ben identificabili. In tal caso si può usare, al posto dello span, <div class="inline-block-md">. Ecco un esempio:

{| class="std-table" style="{{#invoke: css | horizGrad | type = grazia}} padding: 0.3em;"
|- class="hidden-sm"
! Evento !! colspan="3" | Variazione in base all'affetto corrente
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | Aumento di [[livello]]
| style="padding: 0.5em;" | <div class="inline-block-sm">'''0-99''': </div>+5
| style="padding: 0.5em;" | <div class="inline-block-sm">'''100-199''': </div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''': </div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | Uso di [[pozioni]] o [[strumenti per curare problemi di stato]]
| style="padding: 0.5em;" | <div class="inline-block-sm">'''0-99''': </div>+5
| style="padding: 0.5em;" | <div class="inline-block-sm">'''100-199''': </div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''': </div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | Lotta contro un [[Capopalestra]], un [[Superquattro]] o il [[Campione]]
| style="padding: 0.5em;" colspan="2" | <div class="inline-block-sm">'''0-199''': </div>+3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''': </div>+2
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | Uso di [[MT]] o [[MN]]
| style="padding: 0.5em;" colspan="2" | <div class="inline-block-sm">'''0-199''': </div>+1
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''': </div>—
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | [[K.O.]]
| style="padding: 0.5em;" colspan="3" | <div class="inline-block-sm">'''0-255''': </div>-1
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | Deposito nel [[Sistema Memoria Pokémon|PC]]
| style="padding: 0.5em;" colspan="2" | <div class="inline-block-sm">'''0-199''': </div>-3
| style="padding: 0.5em;" | <div class="inline-block-sm">'''200-255''': </div>-5
|- class="flex-sm flex-row flex-wrap flex-main-space-around roundy" style="margin-top: 0.3em;"
| class="width-sm-100" style="padding: 0.5em;" | [[Scambio]]
| style="padding: 0.5em;" colspan="3" | <div class="inline-block-sm">'''0-255''': </div>Reset a 90
|}

Aumento di livello
0-99
+5
100-199
+3
200-255
+2
Uso di pozioni o strumenti per curare problemi di stato
0-99
+5
100-199
+3
200-255
+2
Lotta contro un Capopalestra, un Superquattro o il Campione
0-199
+3
200-255
+2
Uso di MT o MN
0-199
+1
200-255
K.O.
0-255
-1
Deposito nel PC
0-199
-3
200-255
-5
Scambio
0-255
Reset a 90

Pattern ricorrenti

Mini sprite e nome del Pokémon negli elenchi di Pokémon

Avere il Mini sprite a sinistra del nome di un Pokémon è lo standard degli elenchi di Pokémon, come per esempio Cicli uovo. Notevole eccezione è roba come Elenco Pokémon per peso.

Nonostante a prima vista possa sembrare facile ed intuitivo, la responsivizzazione non lo è. Infatti, laddove su Desktop i Mini Sprite sono incolonnati e i nomi centrati nello spazio rimanente a destra, su Mobile è carino che l'accorpamento dei due sia centrato. Per esempio:

Desktop
Pokémon Poké Tattica Mossa Cerchi
Pokémon
      15
Cerchi
Pokémon
Nessuna 9
Cerchi
Pokémon
Nessuna 4
Cerchi
Pokémon
Nessuna 8
Cerchi
Pokémon
Nessuna 10
Cerchi
Pokémon
    3
Cerchi
Mobile
Pokémon
      15
Cerchi
Pokémon
Nessuna 9
Cerchi
Pokémon
Nessuna 4
Cerchi
Pokémon
Nessuna 8
Cerchi
Pokémon
Nessuna 10
Cerchi
Pokémon
    3
Cerchi

Notare la differenza su Jynx: nella versione desktop il nome è centrato nello spazio colorato in peachpuff, che è largo abbastanza da contenere anche Wobbuffet; nella versione mobile è separato da un po' di spazio vuoto dal mini sprite, e l'agglomerato mini sprite-nome è centrato nel box colorato anche qui in peachpuff.

Come si implementa una cosa del genere? Con i seguenti tre passi:

  1. Spostare mini sprite e nome nella stessa cella. Quindi via eventuali colspan="2" dall'header. Questo è necessario per accorpare mini sprite e nome nel layout mobile.
  2. Wrappare mini sprite e nome in un <div class="flex flex-row flex-nowrap flex-items-center"> (qui è dove concretamente vengono accorpati) e il nome in uno <span class="flex-item-fill">. Così facendo, lo span contenente il nome si allarga ad occupare tutto lo spazio disponibile nella colonna, spingendo il mini sprite all'estrema sinistra: dato che i mini sprite hanno tutti la stessa larghezza, l'effetto visivo è che sembrano incolonnati. Il testo dentro lo span del nome è generalmente centrato dal fatto che l'intera tabella ha il testo centrato, ma in caso non lo fosse, basta aggiungere la classe CSS text-center.
  3. Aggiungere la classe block-xx (laddove xx è il breakpoint a cui la riga della tabella non è più una riga) al wrapper di mini sprite e nome, e style="padding-left: 0.3em;" (0.3em è la larghezza di un &nbsp;) allo span che wrappa il nome. Questo sistema la parte mobile. Ciò che serve è fare in modo che lo span contenente il nome non si allarghi ad occupare tutto lo spazio disponibile. Dato che il meccanismo è basato sui flex, basta fare in modo che il parent non sia più un flex al breakpoint desiderato per disattivare i comportamenti flex dei figli. Il padding laterale serve a separare il nome dal mini sprite, e di nuovo, se il tutto non è già centrato così, aggiungere la classe CSS text-center sistema la situazione.
    NOTA: se il nome va a capo da mobile, è probabilmente perché hai usato un div al posto di uno span. L'uso di un elemento inline o inline-block è fondamentale, poiché in assenza di un parent flex gli elementi block occupano l'intera riga.

Un esempio del codice, prima e dopo la trasformazione (la resa grafica è quella che vedete più sopra):

Prima
{| class="std-table white-rows black-text" style="padding: 0.5ex; {{#invoke: Css | horiz-grad | type = ranger }};"
|- class="hidden-xs"
! colspan="2" | [[Pokémon]]
! [[Poké Tattica]]
! [[Mossa (Ranger)|Mossa]]
! Cerchi
|- class="roundy flex-xs flex-row flex-wrap flex-main-stretch flex-items-center" style="margin: 0.5ex 0; padding: 0.3ex;"
| class="min-width-xs-15" style="padding: 0.3ex;" | {{#invoke: MiniSprite | static | 124 }}
| class="min-width-xs-35" style="padding: 0.3ex;" | [[Jynx]]<div class="text-small visible-xs">Pokémon</div>
| class="min-width-xs-50" style="padding: 0.3ex 0.7ex;" | {{#invoke: Box | box | Psico | Poké Tattica#Psico | Psico | thick }}<div class="text-small black-text visible-xs">[[Poké Tattica]]</div>
| class="min-width-xs-50" style="padding: 0.3ex;" | Nessuna<div class="text-small black-text visible-xs">[[Mossa (Ranger)|Mossa]]</div>
| class="min-width-xs-50" style="padding: 0.3ex;" | 9<div class="text-small visible-xs">Cerchi</div>
|}
Dopo
{| class="std-table white-rows black-text" style="padding: 0.5ex; {{#invoke: Css | horiz-grad | type = ranger }};"
|- class="hidden-xs"
! [[Pokémon]]
! [[Poké Tattica]]
! [[Mossa (Ranger)|Mossa]]
! Cerchi
|- class="roundy flex-xs flex-row flex-wrap flex-main-stretch flex-items-center" style="margin: 0.5ex 0; padding: 0.3ex;"
| class="min-width-xs-50" style="padding: 0.3ex;" | <div class="flex flex-row flex-nowrap flex-items-center block-xs">{{#invoke: MiniSprite | static | 124 }}<span class="roundy flex-item-fill" style="padding-left: 0.3em;">[[Jynx]]</span></div><div class="text-small visible-xs">Pokémon</div>
| class="min-width-xs-50" style="padding: 0.3ex 0.7ex;" | {{#invoke: Box | box | Psico | Poké Tattica#Psico | Psico | thick }}<div class="text-small black-text visible-xs">[[Poké Tattica]]</div>
| class="min-width-xs-50" style="padding: 0.3ex;" | Nessuna<div class="text-small black-text visible-xs">[[Mossa (Ranger)|Mossa]]</div>
| class="min-width-xs-50" style="padding: 0.3ex;" | 9<div class="text-small visible-xs">Cerchi</div>
|}