La tendenza attuale è quella di non resettare le caratteristiche di default dei tag, il famoso reset CSS, ma di normalizzare solo le differenze con fogli di stile come normalize.css.
jQuery Mobile segue questa tendenza aggiungendo solamente una leggera spaziatura attorno al contenuto in modo da distanziarlo dai bordi dello schermo. Per il resto le uniche modifiche riguardano colori e font (legati al tema scelto).
In questa pagina di esempio è possibile visionare gli stili di default per gli elementi di testo più usati quali titoli, liste e tabelle.
Contenuto multi-colonna
Sebbene in ambito mobile non sia generalmente una buona idea usare più colonne per il contenuto (data la larghezza ridotta degli schermi), ci sono casi in cui è necessario affiancare due o più elementi sulla stessa riga.
Per rispondere a questa esigenza, abbiamo a disposizione un sistema di griglie con le quali è possibile suddividere la larghezza della pagina fra 2 e 5 colonne. La struttura semantica da mantenere prevede un contenitore (la griglia o grid) con classe "ui-grid-*" e due o più blocchi (block) di contenuto con classe "ui-block-*". Infine, per definire il numero di blocchi allineabili in una griglia e la posizione di ogni blocco al suo interno, viene utilizzata una lettera dell'alfabeto compresa fra 'a' ed 'e':
<!-- due colonne -->
<div class="ui-grid-a">
<div class="ui-block-a">Primo blocco</div>
<div class="ui-block-b">Secondo blocco</div>
</div>
<!-- cinque colonne -->
<div class="ui-grid-d">
<div class="ui-block-a">Primo blocco</div>
<div class="ui-block-b">Secondo blocco</div>
<div class="ui-block-c">Terzo blocco</div>
<div class="ui-block-d">Quarto blocco</div>
<div class="ui-block-e">Quinto blocco</div>
</div>Una struttura di questo tipo potrebbe essere utilizzata per realizzare una pagina con due diversi percorsi di contatto per informazioni tecniche e commerciali. Ecco l'esempio.
