Styleguide

Abbiamo raggruppato tutti gli elementi html (e di conseguenza grafici) che abbiamo creato per il nostro ops.is e ne è venuta fuori una piccola styleguide.
Liberamente ispirati ai (soliti) Clearleft, abbiamo aggiunto una chicca in style Gridset (la parte più geek di Decarola sta venendo fuori): Abbiamo provato a rispettare un ritmo verticale.

Cosa vuol dire? Vuol dire spaziare gli elementi in modo uniforme, oltre che orizzontalmente, anche verticalmente.

Le righe dei quaderni

Provate a digitare sulla tastiera "ops" oppure ad aggiungere ?ops=show alla fine della URL. Compariranno le righe dei quaderni scolastici :)

Ecco, io e Sandro abbiamo fatto in modo che ogni elemento occupase delle righe intere.


Header

Ci sono due tipi di header, uno per le pagine principali e uno generico. La differenza è una classe .standalone nel body. Il risultato è che quando la pagina è larga abbastanza la versione standalone ha il logo centrato.

Versione standard

Versione standalone


Titoli di pagina

Ogni pagina dovrebbe avere un solo titolo principale.
In base all’importanza della pagina (chiamiamole per comodità pagina standard o pagina principale) possiamo avere il titolo in Alternate Gothic 2 D (fatto da URW++, servito da Typekit):

Alternate Gothic

Disponibile anche nella versione centrata e con più spazio sotto:

Versione centrata

Oppure un bel Proxima nova in linea con il resto dei testi per le pagine standard (esempio: i post del blog).

Titolo in Proxima


Tipografia

Una carrellata su tutti (o quasi) gli elementi tipografici che abbiamo a disposizione. O almeno che ci siamo ricordati di avere a disposizione.

Titolo di primo livello

Il primo paragrafo può essere più grande aggiungendo la classe intro. Può fungere da abstract.

Senza nessuna classe si ha un normale paragrafo di testo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, esse, culpa saepe corrupti repellat inventore sequi ipsum fugit magni quo minus corporis sapiente dolore aperiam cum blanditiis nihil autem. Nam?

Con la classe small il testo è più piccolino, timido e discreto. È utile quando ci sono più colonne di testo.

Titoli di secondo livello

Questo è un titolo di secondo livello. Usato ad esempio per le liste di titoli (come la lista dei post del blog) o per altri titoli in pagina.

Titolo di terzo livello

I titoli di terzo livello posso essere usati più volte nella pagina e dovrebbero essere sotto quelli di secondo livello.

Testi inline

Per mettere del testo in grassetto del testo c’è il tag <strong> così come c’è il tag <b>.
Del testo in enfasi richiede con il tag <em> (oppure il tag <i>).
Infine per sottolinearlo puoi metterlo dentro un tag <u>.

Quando scrivi codice, mettilo dentro un <code>. Se proprio sei un perfezionista puoi mettere dentro un <kbd> l’input da tastiera e dentro <samp> l’output da computer.

I tag <sup> e <sub> servono per visualizzare del testo che deve essere più piccolo e più alto/basso rispetto al resto. Un esempio: H2O e E=mc2

Se vuoi evidenziare del testo, tipo evidenziatore, c’è il tag <mark>. Il risultato è una cosa di questo tipo.

Per avere del testo preformattato c’è il tag <pre>. Utile se ad esempio devi copincollare un ascii art:

 ____  ____  ____ 
||O ||||P ||||S ||
||__||||__||||__||
|/__\||/__\||/__\|
	

Le abbreviazioni (ad esempio gli acronimi come HTML) vanno messi deltro il tag <abbr> e magari con il relativo attributo, ad esempio title="HyperText Markup Language".

Quando bisogna cancellare del testo che deve però rimanere visibile si usa <del> con un attributo datetime che indica quando c’è stato l’aggiornamento e ins che indica il nuovo valore (Esempio: Su Twitter @decarola segue 301 299 persone).

Infine per separare due sezioni di pagina c’è il tag <hr>


Citazioni

Le citazioni vanno dentro un tag <blockquote> mentre le fonti vanno dentro un <cite>, che può essere anche un attributo.

Il diritto di citazione (o diritto di corta citazione) è un diritto dell’individuo che si contrappone al diritto d’autore.

Inoltre devi sapere che esiste anche un tag per le citazioni brevi. E dato che, per esempio, Le parole sono importanti da oggi in poi le citazioni più piccole le mettiamo dentro il tag <q>.


Liste

Una lista di tipi di liste:


Bottoni

Stare dalla parte dei bottoni.
In otto bottoni (palindromo).
Attaccare bottone.

Non cliccare Con testo
su due righe


Tabelle

Sulle tabelle c’è da ricordarsi che c’è da usare sia il thead che (eventualmente) il tfoot.

Device Sistema operativo Proprietario
iPhone 4 iOS 6 Sandro Stefanelli
iPhone 5 iOS 7 Andrea De Carolis
Sony Xperia U Android 2.3.1 Andrea De Carolis

Layout & griglie

Singola colonna

I testi su una sola colonna, per facilitare la lettura, vanno messi dentro un <div class="singleCol"></div>.

Lorem ipsum dolor sit amet, consectetur adip *isicing elit, sed do eiusmod * tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, accusamus, in, ducimus voluptatum reiciendis fugit fugiat hic labore illum earum nesciunt molestias dolorem veritatis incidunt eius dolorum accusantium ipsum cumque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nesciunt libero at laborum repellendus explicabo tenetur dignissimos ex incidunt minus nam repellat sunt commodi eligendi quae aut obcaecati. Quibusdam, tempore!

Due colonne

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tre colonne

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quattro colonne

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Due terzi e un terzo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Tre quarti e un quarto

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim.