+33 03 83 56 65 20 +33 06 87 42 95 30

Tutoriels détaillés Gantry5

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) {

 

 

 

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 %}

 

Contact
Parlons social
Recevoir des nouvelles du site