Guide de style

Table des matières

  1. Typographie
  2. Éléments de base de l'interface utilisateur
  3. Blocs atomiques
  4. Blocs réutilisables
  5. Galerie
  6. Champs personnalisés
  7. Modèles de page et d'article

Typographie


Éléments de base de l'interface utilisateur


Blocs atomiques

Image pleine largeur avec carte

Mettez-le en œuvre en ajoutant un bloc Image avec des spécifications d'image de 1300 x 550. Poursuivez avec un bloc Groupe et ajoutez "card transform-up" dans le champ Additional Classes.

Cérémonie de remise des prix

5 mai 2022

Médias + textes

Mise en œuvre par l'ajout du bloc Media & Text Gutenberg. Aucune classe supplémentaire n'est nécessaire.

Qu'est-ce qui fait qu'une bière mérite un prix d'or, d'argent ou de bronze ?

"L'évaluation de la bière se fait à plusieurs niveaux. Au niveau professionnel, l'évaluation de la bière est une forme d'examen par les pairs. Les résultats sont publics, de sorte que les consommateurs peuvent savoir quelles bières répondent à un niveau de qualité élevé et quelles bières illustrent certains styles tels qu'ils sont interprétés par les juges. Lorsque les professionnels du secteur reconnaissent l'excellence des produits du marché, le consommateur peut être sûr qu'il s'agit des meilleurs produits disponibles.

- Chris Swersey, responsable du concours

Rang de contact

Mise en œuvre en ajoutant le bloc Columns Gutenberg et en ajoutant "contact-row" au champ Additional Classes.

Bob Pease

Président et directeur général

Nancy Johnson

Premier vice-président chargé des réunions et des événements

Questions de conformité et utilisation du logo

Courriel Nancy

Chris Swersey

Responsable du concours

Demandes de renseignements sur les juges

Envoyer un courriel à Chris

Carte d'extrait

Actuellement, ce n'est pas un bloc Gutenberg car il est construit dans archive.php.

Extrait Row

Actuellement, ce n'est pas un bloc Gutenberg parce qu'il est construit dans le Snippet Woody des nouvelles récentes. La classe "with-stripe-background" est ce qui ajoute la bande jaune en arrière-plan.

Paragraphe de tête + boîte d'information

En plaçant le paragraphe d'introduction et une boîte d'information dans des colonnes, nous pouvons contrôler l'ordre dans lequel ils apparaissent empilés sur mobile. Ajouter lead-info-box dans les champs Additional CSS du bloc Columns

Les inscriptions au concours doivent être reçues à l'adresse d'expédition entre le lundi 9 mars et le vendredi 13 mars 2020. Des informations détaillées sur l'expédition seront envoyées aux brasseries participantes une fois le processus d'inscription terminé. Veuillez lire attentivement ce qui suit afin de planifier correctement et de vous assurer que vos bières arrivent à temps. Les bières envoyées en retard ne seront pas jugées.


Blocs réutilisables

A propos du bloc réutilisable BA actuellement utilisé pour les communiqués de presse

À propos de l'association des brasseurs

La Brewers Association (BA) est l'association commerciale à but non lucratif qui se consacre aux petits brasseurs américains indépendants, à leurs bières et à la communauté des amateurs de brassage. Elle représente plus de 4 000 brasseries américaines. Le sceau "independent craft brewer" de la BA est un symbole largement adopté qui permet de différencier les bières des petits brasseurs artisanaux indépendants. La BA organise des événements tels que la World Beer Cup®, le Great American Beer Festival®, la Craft Brewers Conference® & BrewExpo America®, SAVOR™ : An American Craft Beer & Food Experience, la National Homebrew Competition et l'American Craft Beer Week®. La BA publie le magazine The New Brewer®, et Brewers Publications™ est le principal éditeur de littérature brassicole aux États-Unis. Les amateurs de bière sont invités à en apprendre davantage sur le monde dynamique de la bière artisanale sur CraftBeer.com® et sur le brassage à domicile via l'American Homebrewers Association® de la BA et l'application mobile gratuite Brew Guru®. Suivez-nous sur Facebook, Twitter et Instagram.

L'Association des brasseurs est un employeur qui souscrit au principe de l'égalité des chances et ne pratique aucune discrimination fondée sur la race, la couleur, l'origine nationale, le sexe, la religion, l'âge, le handicap, les convictions politiques, l'orientation sexuelle ou le statut marital/familial. La BA se conforme aux dispositions de l'ordre exécutif 11246 et aux règles, réglementations et ordonnances pertinentes du secrétaire au travail.

Anglais seulement Blurb

utilisé sur les pages où le menu déroulant de traduction n'est pas proposé, par exemple Contact Us

La modification de ce bloc affecte toutes ses instances, à l'exception des brasseries participantes et des lauréats. Un développeur devra mettre à jour la langue de ces pages.


La mise en œuvre se fait en ajoutant la galerie standard à partir des blocs Gutenberg et en sélectionnant "Fichier média" dans la liste déroulante Lien vers. Un plugin tiers appelé Featherlight affiche chaque image dans une boîte lumineuse lorsqu'on clique dessus.


Champs personnalisés

Bannière du site

Ce champ personnalisé n'apparaît qu'au dos de la page d'accueil, mais il contrôle la bannière qui s'affiche sur toutes les pages du site.

Lorsque le champ est vide, aucune bannière n'est affichée :

L'ajout de texte dans ce champ permet d'afficher la bannière. Veuillez noter dans l'exemple que pour ajouter un lien hypertexte à la bannière, vous devrez utiliser le balisage HTML :

La bannière est livrée avec une couleur de fond par défaut, mais vous pouvez la modifier en ajoutant une valeur hexagonale dans le champ Couleur de la bannière du site. Il est préférable de consulter Sarah Baldwin avant de modifier la couleur, car cela peut arriver 🙂 .

Image flottante à droite

Disponible sur toutes les pages et tous les articles. Si l'image en vedette fait au moins 1100 px de large, vous avez le choix entre une image pleine largeur ou une petite image carrée flottant à droite. Activez ce champ personnalisé si vous souhaitez que l'image soit petite, carrée et placée à droite.


Inventaire des modèles de pages et d'articles

Modèles de page

  • Défaut
  • Nouvelles
    • Archives personnalisées qui récupèrent les articles étiquetés avec "news" et "press release".
  • Éclaboussures
    • Peut être utilisé après l'événement

Modèles de poste

  • Défaut
    • Les messages attendent une image de présentation
    • Si l'image vedette mesure au moins 1 100 px de large, la mise en page par défaut sera pleine largeur, mais vous pouvez la convertir en une image plus petite et carrée en utilisant le champ personnalisé "Float Image Right" (Image flottante à droite).
    • Si l'image présentée a une largeur inférieure à 1100 px, l'image sera automatiquement présentée en format carré, plus petit.
    • Le bloc réutilisable "About the BA " peut être utilisé sur les postes