03 83 56 65 20 06 87 42 95 30

blog / tutoriels

Nous proposons à la communauté des tutoriels au gré de nos humeurs, de l'actualité et des besoins.
( n'hésitez pas, par ailleurs à nous en demander)

Gantry 5 comprend un nouveau Sélecteur de polices qui vous donne la possibilité de sélectionner des polices pour une variété de situations, y compris les templates, les particules et plus encore.

Le sélecteur de police facilite le choix rapide des polices dans les particules.Le sélecteur apparaît lorsque vous cliquez sur un champ spécial dans le backend qui vous donne la possibilité de définir une police pour une particule, ou même pour le thème lui-même.

Basé sur Google Fonts, le sélecteur de polices vous donne un accès immédiat à plus de 600 polices libres.

Vous pouvez trouver plus d’informations sur l’ajout d’une police dans le sélecteur de polices (ainsi qu’à votre thème en général) dans notre guide des polices.

Parcourir les polices de caractères

1
  1. champ de texte de test: Entrez le texte que vous souhaitez voir dans différentes polices ici.

  2. recherche: Utilisez ce champ pour rechercher une police par son nom. Le numéro dans le coin en haut à droite du champ indique combien de résultats correspondent à votre chaîne en cours.

  3. Navigateur de polices: Les polices disponibles sont répertoriées dans cette zone du sélecteur de police. Vous pouvez faire défiler vers le bas pour voir toutes les différentes options, chacune affichant votre texte de test dans la police associée. Pour sélectionner une police, cliquez sur la case à cocher située à gauche de la police que vous souhaitez utiliser.

  4. Catégories: Ce paramètre permet de filtrer les polices par catégorie. Il s’agit d’un outil utile pour affiner votre recherche par type de police, plutôt que de faire défiler l’intégralité de votre bibliothèque.

  5. Subsets (sous-ensembles): Ce paramètre vous donne la possibilité de filtrer les résultats par sous-ensemble. Par exemple, vous pourriez rechercher une police précise en caractères latins.

  6. Select: Utilisez le bouton de sélection vert pour valider votre choix de police (énumérés dans le texte directement à gauche). Pour choisir une police, il suffit de sélectionner la case à cocher dans la liste des polices dans le navigateur de la police.

 

Lorsque vous cliquez sur l’icône polices à droite du champ sélecteur de polices, une fenêtre apparaît qui vous permet de taper une phrase et de la voir présentée dans plus de 670 différentes polices de caractères de la librairie Google Font.

2

Pour vous faciliter la vie, vous pouvez filtrer ces résultats par catégorie et sous-ensemble, ainsi que rechercher une police spécifique à l’aide de l’outil de recherche dans le coin supérieur droit du popup.

3

Il s’agit d’une manière très simple et rapide d’obtenir non seulement un aperçu de ce à quoi ressemblerait un bloc de texte avec une police différente, mais aussi d’appliquer cette police sur votre page la choisissant en simplement et en appuyant sur Select.

Sélection des graisses de police et ensemble de caractères

4

Vous avez la possibilité de sélectionner rapidement et facilement des graisses (weight) de police et des jeux de caractères dans le Sélecteur de police. La sélection de ceux-ici va les rendre disponibles dans votre thème.

La graisse de police (thin, light, normal, etc.) détermine la façon dont la police apparaît en frontend. Cela peut être un excellent moyen de différencier les titres et les sous-titres de votre contenu, d'améliorer la typographie générale de votre site, et plus encore.

Les jeux de caractères sont particulièrement utiles pour les sites multi-langues parce qu’ils vous permettent d'utiliser le latin, grec, cyrillique, etc. caractères. Vous pouvez sélectionner un ou

plusieurs jeux de caractères, mais toutes les polices ne prennent pas en charge les jeux de caractères supplémentaires.

Voici les étapes à suivre pour accéder à ces contrôles:

  • Ouvrez le sélecteur de police dans le backend de Gantry.

  • Recherchez une police spécifique que vous souhaitez utiliser dans le champ de recherche. (Par exemple: Roboto)

  • Activez la case à cocher en regard de la graisse (s) de police que vous souhaitez utiliser.

  • Sélectionnez le nombre d’ensembles de caractères sélectionnés en haut de la liste des polices.

  • Sélectionnez l’ensemble de caractère, que vous souhaitez utiliser.

Utilisation de la Graisse de police dans votre site

Maintenant que les graisses de police sont disponibles dans le thème, elles peuvent être ajoutées au CSS du site.

Exemple

La police sélectionnée dans cet exemple est Exo:800

.your-element{   font-weight:800; }

Remplacez .your-element parl’id(#) ou la classe(.) de l'élément Remplacez 800 avec la variation choisie.

Les polices Roboto et Ubuntu sont deux des ensembles de polices les plus complètes dans la librairie Google Font.

 

Toutes les polices dans la Google Font Library n’ont pas obligatoirement des variations.

Ajouter le sélecteur de polices dans votre Site

5

Le sélecteur de polices est un input (saisie) Gantry 5. Si vous souhaitez l(ajouter à votre template ou particule, vous le ferez en assignant la saisie en tant que input.fonts dans le fichier YAML de la particule .

Voici un exemple de la façon dont cela se présente dans le fichier YAML.

 

target:
      type: input.fonts
      label: Font
      description: Select the font you would like to have used for content in the Particle.
      default: family=Inconsolata:700,400&subset=latin,latin-ext

 

 

 

Vous pouvez trouver plus d'informations sur la façon d'utiliser les fichiers YAML dans Gantry 5 dans notre guide.

Gantry 5 inclut un nouveau Sélecteur de couleurs Qui vous donne la possibilité de définir des couleurs pour un élément particulier de votre thème, une particule, etc.

selecteur couleur 1

Le sélecteur de couleur comprend cinq outils intégrés dont teinte, saturation, luminosité, opacité, et une palette de couleurs. Ces paramètres facilitent la configuration rapide de votre sélection de couleurs pour répondre à vos besoins.

Utilisation du sélecteur de couleurs

selecteur couleur 2

Le Sélecteur de couleurs de Gantry 5's comprend quatre onglets principaux , chacun avec son propre outil puissant pour vous aider à trouver et affiner la couleur que vous choisissez. Ces onglets sont :

Onglet

Description

HUE Cet outil vous donne la possibilité de choisir une couleur en fonction de la teinte, à l'aide du curseur arc-en-ciel à droite pour sélectionner une couleur générale et la zone principale d'affiner la sélection.
BRI L'outil de luminosité, vous donnant la possibilité d'affiner votre sélection de couleur en ajustant sa luminosité à l'aide du curseur de couleur sur la droite. La zone principale sert ici à vous permettre de naviguer rapidement entre les couleurs.
SAT L'outil Saturation est un moyen rapide et facile d'ajuster la saturation de la couleur. Déplacez le curseur vers le bas pour enlever la couleur, et vers le haut pour ajouter à son niveau de saturation. Comme l'outil Luminosité, la zone principale est utilisée pour sélectionner rapidement entre les couleurs de l'arc en ciel.
WHEEL Cet outil est une roue des couleurs de base, une méthode préférée de sélection de couleur par beaucoup.

 

En plus de ces outils, vous avez également la possibilité de régler le paramètre d’opacité de la Couleur en utilisant le curseur Transparence située sur la partie droite du sélecteur de couleur. Le bouton Transparent au bas du sélecteur de couleurs vous donne la possibilité de définir instantanément 0% d’opacité tout en conservant la teinte originale si vous choisissez d’y revenir plus tard en faisant glisser le curseur transparence vers le haut.

Ajouter le sélecteur de couleurs à votre Site

Le sélecteur de couleurs est un input (saisie) Gantry 5. Si vous souhaitez l’ajouter à votre template ou particule, vous le ferez en assignant la saisie en tant que input.colorpicker dans le fichier YAML associé.

Voici un exemple de la façon dont cela se présente dans le fichier YAML d'une section d'un thème. Dans cet exemple, feature.yaml est situé dans theme/blueprints/styles/.

name: Feature Colors
description: Feature colors for the Hydrogen theme
type: section

form:
  fields:

    background:
      type: input.colorpicker
      label: Background
      default: "#ffffff"
    text-color:
      type: input.colorpicker
      label: Text
      default: "#666666"

 

Cet exemple accomplit deux choses. Tout d'abord, il crée la section Feature dans le panneau d'administration Gantry Styles , ainsi que les réglages de couleur de Background et Text pour que vous puissiez facilement configurer dans l'administrateur Gantry 5.

Deuxièmement, il fournit des champs auxquels le thème peut se référer, fournissant la variable de couleur utilisée lorsque la page est rendue.

Vous pouvez trouver plus d'informations sur la façon d'utiliser les fichiers YAML dans Gantry 5 dans notre guide.

Les Media queries permettent d'appliquer des CSS uniquement à un type d'écran spécifique. Par exemple, si vous avez un élément sur votre page que vous souhaiteriez apparaître d’une manière différente sur les téléphones qu'il ne le fait sur un ordinateur de bureau.

Avec Gantry5 c’est facile à faire, et ce guide vous emmènera à travers le processus de définition des points d’arrêt, ainsi que l’ajout de media queries dans votre fichier custom.scss.

Définir des points d’arrêt

Comme Gantry 5 vous donne la possibilité de définir facilement les points d'arrêt entre les types de fenêtres, vous pouvez apporter rapidement une expérience utilisateur optimisée pour une large gamme de types d'appareils.

media queries1

Les Templates Gantry 5 comprennent quatre points d'arrêt clés qui sont définis par des unités rem. Vous pouvez définir les points d'arrêt dans le panneau d'administration Styles au sein de l'administrateur Gantry 5. Pour accéder à ce panneau, allez à AdministrationComposants → Gantry 5 Themes → Votre Theme et sélectionnez l'onglet Styles. Comme cet onglet est spécifique à votre Outline, vous pouvez modifier ces paramètres par-outline.

Si vous n'êtes pas familier avec les unités rem. Il y a un excellent explicatif ci-dessous produit par Russ Weakley de SitePoint. De plus, vous pouvez lire un guide détaillé de W3.

 

Utilisation des media queries sur votre site

Vous servir de vos propres requêtes médias peut être fait très facilement au sein de votre fichier custom.scss. Vous pouvez en savoir plus sur la création de ce fichier et comment cela fonctionne dans notre guide détaillé.

Ci-dessous un exemple de code que vous pourriez ajouter à votre fichier custom.scss pour vous permettre de brancher rapidement et facilement les points d'arrêt de Gantry 5.

Une ligne importante à noter est @import "nucleus/mixins/breakpoints"; qui charge le fichier _breakpoints.scss, rendant le point d’arrêt mixin disponible à l’utilisation.

 

// Gantry 5 custom CSS file

// import breakpoints
@import "dependencies";

// Typical values are the default breakpoints set in Gantry 5
// but these values are user definable in style settings
// so that is why the code below uses mixins to get the actual 
// values from Gantry 5 template.

// commonly used media queries

//  typically min 75rem 
@include breakpoint(large-desktop-range) {

}
// typically range 60rem to 74.938rem 
@include breakpoint(desktop-range) {

}

// typically 48rem to 59.938rem
@include breakpoint(tablet-range) {

}
// typically 30rem to 47.938rem
@include breakpoint(large-mobile-range) {

}
// typically max 30rem
@include breakpoint(small-mobile-range) {

}

// Less commonly used media queries

// typically min 60rem
@include breakpoint(desktop-only) {

}
// typically min 48rem
@include breakpoint(no-mobile) {

}
// typically max 47.938 rem
@include breakpoint(mobile-only) {

}
// typically max 59.938rem
@include breakpoint(no-desktop) {

}

// Mobile Menu Breakpoint
@media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { ... your css in here ... }

@import "nucleus/mixins/breakpoints"

 

 

Tous les CSS que vous souhaitez appliquer à un point d'arrêt spécifique peut être ajouté à l'intérieur de la media querie appropriée ci-dessus.

Qu'est-ce qui se passe derrière la scène?

Ci-dessous, vous pouvez voir un exemple d'une version non-mixin du style breakpoints que nous avons listé ci-dessus. Cela devrait montrer ce qui se passe dans les coulisses, les mixins étant des raccourcis fondamentalement qui permettent d’éviter les fastidieux et interminables scripts.

Nous recommandons fortement l’utilisation de mixins pour leur simplicité, mais l’exemple suivant fonctionne dans le cas où vous ne souhaitez pas les utiliser. L'exemple ci-dessous n'est pas exhaustif et pourrait casser les fonctionnalités existantes si un thème utilise les requêtes médias que nous avons renvoyées ci-dessous et qui ne sont pas incluses dans cet exemple.

 

@import "dependencies";
// For small phones
@media all and (max-width: $breakpoints-large-mobile-container) {
}
// For big phones
@media all and (max-width: $breakpoints-tablet-container) and (min-width: $breakpoints-large-mobile-container) {
}
// For tablets
@media all and (max-width: $breakpoints-desktop-container) and (min-width: $breakpoints-tablet-container) {
}
// For medium size computer screens
@media all and (max-width: $breakpoints-large-desktop-container) and (min-width: $breakpoints-desktop-container) {
}
// For large computer screens
@media all and (min-width: $breakpoints-large-desktop-container) {

 

 

 

Utilisation des paramètres de bloc

Un des grands avantages de Gantry 5 est d'avoir la possibilité d'accéder facilement à tout et d’ajuster les paramètres à plusieurs niveaux. Vous pouvez faire des choses comme ajouter une classe CSS à une section entière, un seul bloc, ou dans une particule spécifique, ou dans une position - le tout dans l'administrateur Gantry.

Dans ce guide, nous allons nous concentrer sur les paramètres de blocs, qui sont les paramètres applicables au niveau du bloc. Nous avons abordé ce sujet dans le guide du gestionnaire de mise en page lorsque nous avons discuté des différences entre les sections, les blocs et les grilles. Nous allons maintenant plonger un peu plus profondément dans les Paramètres du bloc qui sont accessibles au sein de chaque élément dans le gestionnaire de mise en page, ainsi que dans les modules et les particules injectées qui apparaissent dans l'éditeur de menu.

Pour accéder aux paramètres des blocs

block settings 1

block settings 3

 

L’Accès aux Paramètres de bloc Pour un bloc donné est assez simple. Il vous suffit de sélectionner l'icône représentant une roue crantée des Paramètres pour le bloc dont vous souhaitez ajuster les paramètres.

block settings 2

Une fenêtre contextuelle s'affiche avec deux onglets, Particle et Block. Pour régler les paramètres au niveau du bloc, vous voulez sélectionner l'onglet Block.Il y a peut-être des paramètres similaires à l'onglet Particle, par exemple un champ pour les classes CSS,et en ajustant les paramètres, cela appliquera une classe CSS à la div de la particule, ou un segment prédéfini de la particule.Lorsque vous effectuez des modifications dans l'onglet Block, elles sont appliquées au niveau du bloc et affecte la totalité du contenu à l’intérieur du bloc.

Champs de paramètres de bloc

Voici une présentation des différents paramètres disponibles pour chaque bloc.

CSS id

Le champ CSS id sera probablement rarement utilisé dans les particules. Il vous permet d'assigner un sélecteur id CSS ici pour le bloc afin qu'il affecte tout à l'intérieur. Pour en savoir plus sur les sélecteurs CSS id cliquez ICI.

CSS Classes

Si vous souhaitez appliquer une classe CSS au niveau du bloc, c'est ici que vous le ferez. Toute classe CSS assignée ici affectera entièrement la particule, instance de module, ou contenu de la position.

Variations

block settings 4

Les variations sont des variables axées sur le thème qui peuvent être réglées rapidement en sélectionnant le champ, puis en cliquant sur l’option souhaitée. Ces variations peuvent inclure des effets, variations de boîte qui fixe le schéma de couleur du bloc dans son ensemble, et des options utilitaires telles que Align Right et Full Width.

Pour les utilisateurs de Joomla, vous pouvez toujours utiliser le champ Suffixe de classe Module pour un module donné, mais nous ne recommandons pas le faire si vous utilisez également des variations au niveau du bloc. Cela peut donner des résultats indésirables.

Attributs de balises (Tag Attributes)

block settings 5

Le champ Tag Attributes vous donne la possibilité d'appliquer rapidement des attributs de balise HTML au bloc. Cela peut inclure une variété de choses d’un attribut de style (photo ci-dessus) à un marqueur utilisé pour appliquer des effets JavaScript au bloc.

Taille de bloc (Block Size)

Le champ Block Size est l'endroit où vous pouvez saisir manuellement la largeur que vous aimeriez que le bloc prenne dans la grille horizontale.Si c'est le seul bloc que vous avez dans la ligne précise, ce serait probablement fixé à 100. Toute modification effectuée en faisant glisser la barre de séparation entre les éléments dans le gestionnaire de layout serait répercutée dans ce champ.

Il y a des moments où vous voulez juste avoir des ressources CSS ou JavaScript qui se chargent sans les voir apparaître dans la base de la page.
Les particules ont intégré la prise en charge pour les feuilles de style et JavaScript, même si la particule n’est pas un atome. Vous pourriez avoir essentiellement une seule particule qui inclut le contenu de particules standard en plus d'accéder au CSS et aux éléments JavaScript.

C'est un moyen très utile pour apporter du JavaScript et des feuilles de style blocs dans une partie très précise de votre page.

Vous cherchez plus d’informations sur l’utilisation de blocs dans Twig? Voila une tonne d'informations utiles sur la façon dont les blocs fonctionnent dans Twig.

Les ressources chargées dans une particule ne le sont qu'une seule fois. Si vous appelez un fichier JavaScript spécifique dans une particule, le faire dans une autre particule n’aura aucun effet supplémentaire sur la page. Il sera chargé uniquement une fois.

Template de particules

Dans ce guide, nous allons passer en revue les différents types de blocs qui apparaissent dans une particule, et comment vous pouvez les utiliser pour ajouter des éléments particule/atome à votre page au lieu d'avoir à les charger dans le template de la page.

Voici un exemple de fichier twig démontrant les différents blocs que vous pouvez utiliser dans une particule.

{% extends '@nucleus/partials/particle.html.twig' %} {% block stylesheets %}     {{ parent() }}     {# any stylesheet you would like to render in <head> #} {% endblock %} {% block javascript %}     {{ parent() }}     {# any javascript you would like to render in <head> #} {% endblock %} {% block javascript_footer %}     {{ parent() }}     {# any javascript you would like to render before </body> #} {% endblock %} {% block particle %}     {# particle output goes here #} {% endblock %}

Ajout d'un bloc JavaScript

L’ajout d'un bloc JavaScript à vos particules est assez facile. Dans votre fichier twig du particule, vous devez juste créer un bloc JavaScript et inclure l'information nécessaire pour charger votre ressource JavaScript spécifique. Voici un exemple de bloc JavaScript utilisée dans une particule standard :

{% block javascript %}     {{ parent() }}     <script src="/{{ url('gantry-theme://js/filename.js') }}"></script> {% endblock %}

Vous pouvez placer le bloc en dehors de la feuille de style ou bloc de particules, ou le disposer autour de ces autres éléments (ou des parties d'entre eux) afin de leur appliquer cette propriété JavaScript. Si vous voulez qu’une ressource JavaScript soit chargée juste avant la balise </body> de la page, vous devriez échanger block javascript avec block javascript_footer.

Voici un exemple de bloc JavaScript appliqué au monde réel. Dans ce cas, il s'agit du fichier analytics.html.twig utilisé pour créer l'atome Google Analytics Gantry.

{% extends '@nucleus/partials/particle.html.twig' %} {% block javascript %}     {{ parent() }}     {% if particle.ua.code  %}         <script>             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)             }){% if particle.ua.debug %}(window,document,'script','//www.google-analytics.com/analytics_debug.js','ga');{% else %}(window,document,'script','//www.google-analytics.com/analytics.js','ga');{% endif %}             ga('create', '{{ particle.ua.code }}', 'auto');         {% if particle.ua.anonym  %}             ga('set', 'anonymizeIp', true);         {% endif %}         {% if particle.ua.ssl  %}             ga('set', 'forceSSL', true);         {% endif %}             ga('send', 'pageview');         </script>     {% endif %} {% endblock %}

Ajout d'un bloc feuille de style

L’ajout d'un bloc de feuille de style fonctionne de manière très identique à un bloc JavaScript ou bloc de particules. Voici un exemple:

{% block stylesheets %}     <link rel="stylesheet" href="/{{ somelocation }}" type="text/css"/> {% endblock %}

La combinaison d'un bloc de feuille de style avec un bloc JavaScript est assez simple à faire. En fait, nous utilisons cette approche pour charger les ressources JavaScript et CSS grâce à une seule particule. Voici un aperçu de son application au monde réel trouvé dans le fichier assets.html.twig ce qui crée l'atome Custom CSS / JS.

{% extends '@nucleus/partials/particle.html.twig' %} {% block stylesheets %}     {% for css in particle.css %}         {% set attr_extra = '' %}         {% if css.extra %}             {% for attributes in css.extra %}                 {% for key, value in attributes %}                     {% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}                 {% endfor %}             {% endfor %}         {% endif %}         <link rel="stylesheet" href="/{{ url(css.location) }}" type="text/css"{{ attr_extra|raw }} />     {% endfor %} {% endblock %} {% block javascript %}     {% for script in particle.javascript %}         {% set attr_extra = '' %}         {% if script.extra %}             {% for attributes in script.extra %}                 {% for key, value in attributes %}                     {% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}                 {% endfor %}             {% endfor %}         {% endif %}         <script src="/{{ url(script.location) }}" type="text/javascript"{{ attr_extra|raw }}></script>     {% endfor %} {% endblock %}

Bloc particule

Le bloc de particule est le nutriment d'une particule. C’est le contenu, les informations que gantry utilise pour créer la particule en frontal. Nous utilisons le bloc particule abondamment dans notre guide pour créer de nouvelles particules.

Pour donner un exemple en mode réel: Jetez un œil sur le fichier branding.html.twig qui fabrique la particule Branding.

{% extends '@nucleus/partials/particle.html.twig' %} {% block particle %} <div class="g-branding {{ particle.css.class }}">     {{ particle.content|raw }} </div> {% endblock %}

 

Sous-catégories

Quelques articles sur l'actualité de Web54 et de ce qu'il se passe au niveau internet en Lorraine

Tutoriels sur Gantry, Vertex, Helix ... etc ...

(documentation personnelle ou traduction de la documentation originale)

La création de site internet, necessite des logiciels.
En lorraine, certains créateurs de sites utilisent des logiciels libres et en font la promotion.

Serge Billon en fait partie, et vous fait partager ici, en tant que webmaster reconnu sur Nancy et sa région, sa passion pour les logiciels libres.

Référencer un site n'est souvent pas une partie de plaisir, ni une formalité.

C'est pourquoi nous proposons des prestations en référencement, sur forfait ou sur devis personnalisé.

Toutefois, nous tenons à proposer une méthodologie aux clients qui voudraient tenter l'aventure et procéder eux-même à leur référencement.

Suivez les étapes pas à pas, et faites progresser votre site dans les méandres des moteurs de recherche.

Tutoriels en français des composants RS

Contact
Parlons social
Recevoir des nouvelles du site
Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels