Guida allo stile

Indice dei contenuti

  1. Tipografia
  2. Elementi di base dell'interfaccia utente
  3. Blocchi atomici
  4. Blocchi riutilizzabili
  5. Galleria
  6. Campi personalizzati
  7. Modelli di pagina e post

Tipografia


Elementi di base dell'interfaccia utente


Blocchi atomici

Immagine a tutta larghezza con scheda

Implementare aggiungendo un blocco Immagine con specifiche dell'immagine a 1300 x 550. Seguire con un blocco Group e aggiungere "card transform-up" nel campo Additional Classes.

Cerimonia di premiazione

5 maggio 2022

Media + Testo

Da implementare aggiungendo il blocco Media & Text di Gutenberg. Non sono necessarie classi aggiuntive.

Cosa rende una birra degna di un premio d'oro, d'argento o di bronzo?

"La valutazione della birra avviene a molti livelli. A livello professionale, la valutazione della birra è una forma di revisione tra pari. I risultati sono pubblici, così i consumatori possono sapere quali birre soddisfano un alto livello di qualità e quali birre esemplificano determinati stili secondo l'interpretazione dei giudici. Quando i professionisti del settore riconoscono l'eccellenza dei prodotti provenienti da tutto il mercato, il consumatore può essere sicuro che quei prodotti sono i migliori disponibili".

- Chris Swersey, responsabile del concorso

Contatto

Implementare aggiungendo il blocco Columns Gutenberg e aggiungendo "contact-row" al campo Additional Classes.

Bob Pease

Presidente e CEO

Nancy Johnson

Vicepresidente senior di Riunioni ed eventi

Problemi di conformità e utilizzo del logo

Invia un'e-mail a Nancy

Chris Swersey

Responsabile della competizione

Richieste di giudizio

Invia un'e-mail a Chris

Scheda Estratto

Attualmente non è un blocco Gutenberg perché è costruito in archive.php.

Estratto Fila

Attualmente non è un blocco Gutenberg, perché è costruito nello Snippet Notizie recenti di Woody. La classe "with-stripe-background" è quella che aggiunge la striscia gialla di sfondo.

Paragrafo iniziale + riquadro informativo

Inserendo il paragrafo principale e una casella informativa in colonne, possiamo controllare l'ordine in cui appaiono impilati su mobile. Aggiungere lead-info-box ai campi CSS aggiuntivi del blocco colonne

Le iscrizioni al concorso devono pervenire all'indirizzo di spedizione tra lunedì 9 marzo e venerdì 13 marzo 2020. Informazioni dettagliate sulla spedizione saranno inviate ai birrifici partecipanti una volta completata la procedura di registrazione. Si prega di leggere attentamente quanto segue per pianificare adeguatamente e garantire che le iscrizioni al concorso arrivino in tempo. Le birre presentate in ritardo non saranno giudicate.


Blocchi riutilizzabili

Informazioni sul blocco riutilizzabile BA attualmente utilizzato per i comunicati stampa

Informazioni sull'Associazione dei produttori di birra

La Brewers Association (BA) è l'associazione commerciale no-profit dedicata ai piccoli birrifici americani indipendenti, alle loro birre e alla comunità degli appassionati di birra. La BA rappresenta oltre 4.000 birrifici statunitensi. Il sigillo di birra artigianale indipendente del BA è un simbolo ampiamente adottato che differenzia le birre di produttori artigianali piccoli e indipendenti. Il BA organizza eventi come la World Beer Cup®, il Great American Beer Festival®, la Craft Brewers Conference® e il BrewExpo America®, SAVOR™: An American Craft Beer & Food Experience, National Homebrew Competition e American Craft Beer Week®. Il BA pubblica la rivista The New Brewer® e Brewers Publications™ è il principale editore di letteratura sulla birra negli Stati Uniti. Gli amanti della birra sono invitati a saperne di più sul dinamico mondo della birra artigianale su CraftBeer.com® e sull'homebrewing attraverso l'American Homebrewers Association® del BA e l'applicazione mobile gratuita Brew Guru®. Seguiteci su Facebook, Twitter e Instagram.

La Brewers Association è un datore di lavoro che offre pari opportunità e non discrimina in base a razza, colore, origine nazionale, sesso, religione, età, disabilità, convinzioni politiche, orientamento sessuale o stato civile/familiare. La BA rispetta le disposizioni dell'Ordine Esecutivo 11246 e le norme, i regolamenti e gli ordini pertinenti del Segretario del Lavoro.

Solo in inglese Blurb

utilizzato nelle pagine in cui non è disponibile un menu a tendina per la traduzione, ad esempio Contatti.

La modifica di questo blocco ha effetto su tutte le sue istanze, tranne che su Birrifici partecipanti e Vincitori di premi. Uno sviluppatore dovrà aggiornare la lingua per queste pagine.


Si implementa aggiungendo la Galleria standard dai blocchi di Gutenberg e selezionando "Media File" dal menu a tendina Link to. Un plugin di terze parti chiamato Featherlight visualizza ogni immagine in un lightbox quando si fa clic.


Campi personalizzati

Banner del sito

Questo campo personalizzato viene visualizzato solo nella parte posteriore della home page, ma controlla il banner che viene visualizzato in ogni pagina del sito.

Quando il campo è vuoto, non viene visualizzato alcun banner:

Aggiungendo del testo in questo campo si visualizza il banner. Nell'esempio si noti che per aggiungere un collegamento ipertestuale al banner è necessario utilizzare il markup HTML:

Il banner viene fornito con un colore di sfondo predefinito, ma è possibile modificarlo aggiungendo un valore esadecimale nel campo Site Banner Color. È meglio consultarsi con Sarah Baldwin prima di cambiare il colore, altrimenti può succedere che si verifichi questo problema 🙂

Immagine fluttuante a destra

Disponibile su tutte le pagine e i post. Se l'immagine in primo piano ha una larghezza minima di 1100px, è possibile scegliere tra un'immagine a tutta larghezza e un'immagine quadrata di piccole dimensioni flottante a destra. Attivare questo campo personalizzato se si desidera un'immagine piccola, quadrata e flottante a destra.


Inventario dei modelli di pagina e post

Modelli di pagina

  • Predefinito
    • Pagina standard: può avere un'immagine in evidenza, ad esempio Cerimonia di premiazione, o nessuna immagine in evidenza, ad esempio Informazioni sul concorso.
    • Per impostazione predefinita, l'immagine in primo piano sarà a tutta larghezza come su Cerimonie di premiazione, ma è possibile utilizzare il campo personalizzato - Float Image Right - per visualizzare un'immagine più piccola, quadrata e flottante come su Trova un hotel.
  • Notizie
    • Archivio personalizzato che raccoglie i post con tag "news" e "comunicato stampa".
  • Schizzo
    • Può essere utilizzato dopo l'evento

Modelli postali

  • Predefinito
    • I post si aspettano un'immagine in evidenza
    • Se l'immagine in primo piano è larga almeno 1100px, il layout predefinito sarà a tutta larghezza, ma è possibile convertirla in un'immagine più piccola e quadrata utilizzando il campo personalizzato, Float Image Right.
    • Se l'immagine in primo piano ha una larghezza inferiore a 1100px, l'immagine sarà automaticamente di forma quadrata e più piccola.
    • Il blocco riutilizzabile About the BA è disponibile per l'utilizzo sui pali