https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Les layouts sont des blocs de codes qui contrôlent la structure HTML d'une partie particulière du rendu du template. Par défaut, Gaantry est livré avec plusieurs fichiers de layouts intégrés, ceux sont tous situés dans le dossier libraries/gantry/html/layouts/ :

  • body_debugmainbody.php - une mise en page utilisée pour des configurations de mise en page principale en mode débugage.
  • body_iphonemainbody.php - une mise en page utilisée pour les configurations de mise en page mainbody iphone - Obsolète -
  • body_mainbody.php - la mise en page par défaut de mainbody. Il s'agit de la mise en page qui contrôle le mainbody vis à vis des barres latérales
  • doc_body.php - une mise en page pour restituer la balise body, utilisée dans displayBodyTag()
  • doc_tag.php - une mise en page utilisée dans le rendu générique d'une balise produite par la méthode  displayClassesByTag()
  • feature_basic.php - une mise en page utilisée pour les rendus génériques des contenus des fonctionnalités (features)
  • mod_basic.php - une structure de base pour les modules
  • mod_sidebar.php - la mise en page des sidebars
  • mod_standard.php - la disposition standard des modules
  • orderedbody_mainbody.php - restitue mainbody et sidebars pour une utilisation avec des tables CSS

Etape 1: Objectif

Les mises en page par défaut qui sont fournis avec le Framework Gantry sont conçus pour être assez flexibles pour répondre aux besoins de 99 % de toutes les implémentations possibles. Cependant il y a des occasions où la structure HTML par défaut ne contient pas tous les éléments des blocs ou les noms de classe requis pour réaliser un design particulier. Dans ces rares cas, vous pouvez utiliser toute la puissance du framework Gantry pour remplacer la mise en page par défaut avec votre propre layout du template. Aussi, certaines mises en pages telles que les dispositions de module sont assez flexibles pour supporter vos propres layouts personnalisés et vous pouvez les appeler de la même façon on appelle les layouts par défaut.

Etape 2: Créer/Copier de nouveaux fichier de Layouts

La façon la plus simple de faire est de copier un layout existant. Dans cet exemple, nous allons copier le layout body_mainbody.php, et le modifier par la suite. Les fichiers sont situés dans:

[VOTRE_SITE]/libraries/gantry/html/layouts/

Cependant, vous ne voulez pas modifier les fichiers de base de Gantry. à la place, copiez le nouveau fichier de layout dans :

[VOTRE_SITE]/templates/VOTRE_TEMPLATE/html/layouts/

Vous devrez créer ce dossier layouts/ s'il n'existe pas déjà

Dans ce cas, copiez body_mainbody.php depuis l'emplacement de vos layouts de base vers l'emplacement des layouts du template.

Etape 3: Structure du Fichier

Après avoir copié le fichier body_mainbody.php, vous pouvez l'ouvrir et le modifier en fonction de vos besoins. Par défaut, il ressemble à ceci:

<?php
/**
* @version $Id: body_mainbody.php 2381 2012-08-15 04:14:26Z btowles $
* @author RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - ${copyright_year} RocketTheme, LLC
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*
* Gantry uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
*
*/
defined('GANTRY_VERSION') or die();
     
gantry_import('core.gantrylayout');
     
/**
*
* @package gantry
* @subpackage html.layouts
*/
class GantryLayoutBody_MainBody extends GantryLayout {
    var $render_params = array(
       'schema' => null,
       'pushPull' => null,
       'classKey' => null,
       'sidebars' => '',
       'contentTop' => null,
       'contentBottom' => null
    );
    function render($params = array()){
    /** @var $gantry Gantry */
       global $gantry;
     
       $fparams = $this->_getParams($params);
     
// logic to determine if the component should be displayed
    $display_component = !($gantry->get("component-enabled",true) == false && JRequest::getVar('view') == 'featured');
    ob_start();
    // XHTML LAYOUT
    ?> <div id="rt-main" class="<?php echo $fparams->classKey; ?>">
          <div class="rt-container">
             <div class="rt-grid-<?php echo $fparams->schema['mb']; ?> <?php echo $fparams->pushPull[0]; ?>">
             <?php if (isset($fparams->contentTop)) : ?>
                <div id="rt-content-top">
                   <?php echo $fparams->contentTop; ?>
                </div>
             <?php endif; ?>
             <?php if ($display_component) : ?>
                <div class="rt-block">
                    <div id="rt-mainbody">
                        <div class="component-content">
                            <jdoc:include type="component" />
                        </div>
                    </div>
                </div>
              <?php endif; ?>
              <?php if (isset($fparams->contentBottom)) : ?>
                <div id="rt-content-bottom">
                  <?php echo $fparams->contentBottom; ?>
                </div>
              <?php endif; ?>
            </div>
            <?php echo $fparams->sidebars; ?>
            <div class="clear"></div>
          </div>
        </div>
    <?php
    return ob_get_clean();
    }
    }
N'hésitez pas à modifier ce fichier en fonction de vos besoins.

Dans le framework Gantry nous utilisons le terme Feature pour signifier un morceau spécifique de fonctionnalité. Les Features sont suffisamment souples pour qu'ils puissent être utilisés pour exécuter presque n'importe quel type de fonctionnement logique dont vous auriez besoin. La classe d'origine GantryFeature contient des méthodes qui peuvent être implémentées pour contrôler comment votre fonctionnalité se comporte.

Le framework Gantry est livré avec un système AJAX intégré qui agit comme une passerelle entre le client et le framework Gantry.

Chaque appel Ajax est dirigé vers un "modèle Ajax" qui reçoit des paramètres Ajax et après ses opérations est capable de retourner une réponse avec ce que la demande d'appel d'origine Ajax attend. Ci-dessous vous pouvez voir un résumé schématique du processus.

Ss Ajax Systemajax system chart

La puissance réelle du système ajax intégré dans le framework gantry réside dans les modèles. Chaque développeur peut créer ses propres modèles personnalisés Ajax et utiliser les appels Ajax côté client afin de récupérer des types de données spécifiques.

There are 2 Ajax systems in the Gantry framework that actually work exactly the same with one exception: restrictions. In fact the first can be used for everything regarding the template while the second can only be used admin side. The restriction makes it so that even by error you cannot use the admin Ajax System on the frontend.

Il y a 2 systèmes Ajax dans le framework Gantry qui fonctionnent exactement pareil à une exception près : les restrictions. En fait le premier peut être utilisé pour tout ce qui concerne le template tandis que le second ne peut être utilisé que côté admin. La restriction fait en sorte que même par erreur, vous ne pouvez pas utiliser l'admin système Ajax sur le frontend.

l'URL Ajax

Pour commencer avec un appel Ajax côté client, vous devez appeler l'URL correcte afin de déclencher le mécanisme du modèle Ajax de gantry.

L'URL est le même pour le Frontend et Backend avec, bien sûr, l'ajout du chemin /administrator/  lorsque nous traitons dans le Backend et il ressemble à /index.php?option=com_gantry&task=ajax&format=raw&template=[nom_de_votre_template]

Si nous décomposons la requète, vous remarquerez que cela ressemble à un appel de composant Joomla!, et c'est effectivement ce que c'est :

  • option → com_gantry
  • task → ajax
  • format → raw
  • template → [nom_de_votre_template]

Tous ces morceaux sont fondamentaux pour que le mécanisme Ajax de Gantry puisse travailler.

nom_de_votre_template fait réference au nom du template frontend que vous utilisez actuellement. Par exemple si nous étions en train d'utiliser le template par défaut Gantry, ce serait template=gantry

Gantry est livré avec une méthode qui rend plus facile la construction et le rendu de l'URL Ajax. En PHP, vous pouvez exécuter $gantry->getAjaxUrl() et la même chaîne d'URL que ci-dessus sera retournée.

Ceci est particulièrement utile si vous souhaitez copier l'URL dans une variable globale de JavaScript que vous pourrez ensuite référencer dans votre propre script.

Par exemple, dans le index.php de votre template, vous pourriez produire une déclaration de script inline similaire à :

 

    <?php
    // location: /templates/gantry/index.php
    ...
    $gantry->addInlineScript("var GantryAjaxURL = '".$gantry->getAjaxUrl()."';");
    // GantryAjaxURL => '/index.php?option=com_gantry&task=ajax&format=raw&template=gantry'

De cette façon, vous pouvez accéder à la variable GantryAjaxURL à partir de vos propres scripts.

 

Les modèles Ajax

Les modèles sont des fonctions Ajax PHP efficace où participe toute la logique d'un modèle spécifique.

Un modèle peut avoir n'importe quel genre de but. Par exemple, dans l'Admin du portique, nous utilisons des modèles Ajax pour

  • Vider le cache
  • Supprimmer des fichiers compilés LESS
  • Sauvegarde Ajax
  • Créer des presets
  • ...

Comme vous pouvez le voir, un modèle peut être quelque chose que vous pouvez penser et dont le mécanisme fonctionne dans les coulisses, en fait un moyen très puissant pour contrôler quoi que ce soit via Ajax si vous le souhaitez.

Les modèles Ajax sont situés dans le dossier Library de Gantry sous [votre_site]/library/gantry/. Les modèles frontend sont à la racine ajax-models/ tandis que les modèles de backend sont dans le dossier admin admin/ajax-models/

En raison de la capacité du Framework gantry d'overrider, vous n'aurez jamais besoin de jamais aller éditer les modèles contenus dans les endroits mentionnés ci-dessus. En fait, il vous suffit de travailler au niveau du dossier template, en gardant la même structure.

Ainsi, vos modèles personnalisés de tempalte Ajax doivent être stockés dans le dossier [votre_site]/templates/[votre_template]/ajax-models/ tandis que vos modèles personnalisés administrateur Ajax doivent être stockés dans le dossier [votre_site]/templates/[votre_template]/admin/ajax-models/.

Ci-dessous un exemple de modèle qui retournera toutes les requêtes POST en retour à l'Ajax :

 

    <?php
    // location: /templates/gantry/ajax-models/example.php
    defined('JPATH_BASE') or die();
    global $gantry;
    print_r(JRequest::get('post'));
     
    ?>

Il est important de noter que le nom de fichier du modèle Ajax est ce qui identifie le modèle lui-même.Le nom, dans ce cas, example est ce que nous allons utiliser dans l'appel Ajax côté client, pour récupérer les données dont nous avons besoin pour ce modèle particulier.

 

La syntaxe d'appel Ajax

Maintenant que nous avons un modèle, nous sommes prêts à créer l'appel JavaScript Ajax. Gantry est basé sur MooTools 1.4, donc les exemples suivants sont écrits dans la syntaxe de MooTools. Cela ne signifie pas que vous ne pouvez pas utiliser JavaScript natif ou tout autre framework pour effectuer la même opération.

Supposons que notre index.php du template charge un fichier js nommé ajax-call.js, fournissant ainsi une variable GantryAjaxURL comme décrit dans la section L'URL Ajax.

 

<?php
// location: /templates/gantry/index.php
    ...
    $gantry->addInlineScript("var GantryAjaxURL = '".$gantry->getAjaxUrl()."';");
    $gantry->addScript('ajax-call.js'); // /templates/gantry/js/ajax-call.js
 ...

Le template est maintenant configuré pour charger votre script personnalisé d'appel ajax, nous pouurons également nous appuyer sur lavariable JavaScript GantryAjaxURL qui contient l'url ajax en tant que chaîne.

 

Maintenant la partie amusante, le JavaScript :

 

((function(){
 
window.addEvent('domready', function(){
// Request Object
var request = new Request({
url: GantryAjaxURL, // <r;- remember, this is the ajax url, explained in The Ajax URL section.
onSuccess: function(response){
console.log(response);
}
});
// Request post
request.post({
model: 'example', // <r;- the model must always be passed in
animal: 'Cat',
name: 'Pixel'
});
});
 
})());

 

C'est très simple. Comme vous pouvez le voir, nous créons un objet de requête que nous utilisons ensuite pour demander un POST. Il est obligatoire que le modèle (model: 'example') soit toujours présent lors d'une requète, c'est ce qui identifie quel modèle le système Ajax Gantry doit charger et exécuter.

Voila ce qui est produit par l'exemple ci-dessus

    Array
    (
    [model] => example
    [animal] => Cat
    [name] => Pixel
    )

 

Le modèle que nous avons utilisée est un exemple très basique et simple, mais c'est un bon point de départ. Vous pouvez voir des modèles beaucoup plus sophistiqués si vous explorez le référentiel de bibliothèque de Gantry.

Le Framework Gantry est capable de charger différents fichiers CSS selon le navigateur et le système d'exploitation qui est en train de visionner le template. Cela permet un contrôle complet sur la façon dont un site est affiché même au plus pointilleux des navigateurs !

Au cours du développement du framework Gantry, nous avons constaté que nous devions organiser des ensembles de paramètres dans des groupes personnalisés de paramètrages associés. Vous pouvez créer vos propres éléments dans  templateDetails.xml pour permettre le réglage des paramètres spécifiques que vous pourrez utiliser plus tard dans vos propres fonctionnalités, mises en page, etc. Un bon exemple de ceci est la chaîne inactive qui contrôle quel élément de menu doit s'afficher lorsque le menu est inactif. Le code XML en question ressemble à ceci:

<param name="inactive" type="chain" label="INACTIVE"  description="INACTIVE_DESC">
    <param name="enabled" type="toggle" default="1" label="ENABLED"  setinmenuitem="false" />
    <param name="menuitem" type="menuitem" label="SELECT_MENU_ITEM" setinmenuitem="false" />
</param>

Ce bloc de paramètre se compose d'un élément chaîne parent. Cet élément a un nom appelé 'inactive'. Au sein de la chaîne, sont deux éléments, dont l'un est un interrupteur appelé 'enabled' et l'autre est un élément menuitem nommé 'menuitem'.

Maintenant, vous pouvez obtenir les valeurs de ces paramètres en utilisant simplement l'appel:

global $gantry;
echo $gantry->get('inactive-enabled');
echo $gantry->get('inactive-menuitem');

Toutefois, dans Gantry, nous avons une fonction pour gérer l'état «inactif» ​​, et nous avons donc une caractéristique essentielle appelé GantryFeatureInactive qui ressemble à:

class GantryFeatureInactive extends GantryFeature {
    var $_feature_name = 'inactive';
    function init() {
        global $gantry, $Itemid;
        $enabled = $this->get('enabled');
        if($enabled) {
            $menus = &JSite::getMenu();
            $menu  = $menus->getActive();
            if (null == $menu){
                $menuitem = $this->get('menuitem');
                $menus->setActive($menuitem);
                $Itemid = $menuitem;
            }
        }
    }
}

Les fonctionnalités par défaut sont à la recherche d'un ensemble de paramètres enchaînés, donc en réglant $_feature_name sur inactive, et à l'aide de la fonctionnalité construit par la méthode get() ,nous n'avons pas besoin d'utiliser le nom complet de la chaine inactive-menuitem, comme la méthode de la fonctionnalité génère automatiquement le préfixe du nom de la fonction pour obtenir le paramètre correct.

Le framework Gantry a plusieurs façons pour définir la valeur d'un paramètre de configuration. C'est l'une des choses qui fait que Gantry soit si flexible. Vous pouvez avoir les réglages des paramètres qui sont par éléments de menuet même de surcharger cela avec les paramètres user des sessions de l'utilisateur et les cookies.

Il y a des moyens statiques et dynamiques de définir la valeur d'un paramètre. Les manières statiques de définir les valeurs sont par défaut et par les éléments de menus configurés dans l'administration template. Les manières dynamiques de paramètrer la valeur sont l'utilisation des sessions utilisateurs, les cookies du navigateur des utilisateurs, et la chaîne de requête URL.

 

Priorité de valeur de paramètre

Tous les paramètres débutent avec une valeur par défaut qui est définie dans  template-options.xml. Mais ces valeurs peuvent être modifiées de plusieurs manières différentes, chacunese substituant à l'autre si elle a une valeur. L'ordre de priorité pour définir ces valeurs est montré ici:

URL Query String -> Cookie -> Session -> Per Menu Item -> Default Settings

 

La méthode la plus élevée de définition de la valeur l'emportera toujours. Par exemple, si un backgroundlevel est réglé sur highpar un élément de menu particulier, mais qu'il est mis sur low par un lien URL en passant sur une chaîne de requête, alors il sera mis à low lorsque la page est affichée, car la chaîne de requête URL a une priorité plus élevée que le réglage par l'élément de menu.

Permettre des valeurs de paramètre dynamique

Par défaut, tous les réglages d'une valeur de paramètre par une méthode dynamique sont désactivés. Afin de permettre le réglage d'une valeur dynamique, vous devez l'activer pour chaque paramètre que vous souhaitez et selon les modalités que le paramètre est autorisé à utiliser. Ceci est fait dans template-options.xml. Un paramètre peut avoir la syntaxe suivante avec des setby  et des setin. Voici un exemple de comment c'est fait:

<param name="backgroundlevel" default="med" type="slider" class="graphic-level" label="BG_LEVEL" description="BG_LEVEL_DESC" setbyurl="true" setinsession="true" setbysession="true" setincookie="true" setbycookie="true" isbodyclass="true">
    <option>low</option>
    <option>med</option>
    <option>high</option>
</param>

Dans l'exemple ci-dessus, le backgroundlevel peut être réglé par la chaîne de requête de l'URL, un cookie de navigateur et par la session des utilisateurs, c'est défini par les attributs setbyurl, setbycookie,et setbysession. Si une valeur est définie par l'un de ces moyens, il est stocké dans le cookie et la session tel que défini par les attributs setincookie et setinsession

Les attributs autorisés sont:

  • setbyurl - permet de transmettre un paramètre via l'url de chaîne de requête (default = false)
  • setbycookie - vous permets de stocker la valeur qui a été transmise dans un cookie pendant une certaine période de temps (au-delà d'une session unique de php) (default = false)
  • setincookie - vous permet de récupérer la valeur param d'un cookie (default = false)
  • setbysession - vous permet de stocker cette valeur passée pour la durée de la session (default = false)
  • setinsession - vous permet de récupérer la valeur de param de la session (default = false)
  • setinoverride - permets au param d'être surchargé dans les styles de substitution (default = true)
  • isbodyclass - vous permets de définir la valeur du paramètre comme classe sur la balise body pour du ciblage css (default = false)

Remarques sur les Presets

Les types prédéfinis peuvent utiliser les mêmes mécanismes de valeurs dynamiques pour définir les valeurs des paramètres. Si un type prédéfini est utilisé pour définir une valeur dynamique alors tous les paramètres définis dans la présélection ont leurs valeurs réglées à ce qui est dans la présélection. Mais si un paramètre individuel est défini dans le même temps alors la valeur de chaque paramètre se substitue à celle de la présélection.

Par exemple, si vous avez des presets définis comme suit :

$gantry_presets = array(
    'presets' => array(
        'preset1' => array(
            'name' => 'Preset 1',
            'linkcolor' => '#00c',
            'backgroundlevel' => 'low',
        ),
        'preset2' => array(
            'name' => 'Preset 2',
            'linkcolor' => '#ff0000',
            'backgroundlevel' => 'med',
        )
      )
    )
);

Et que les paramètres sont définis comme suit :

<param name="presets" type="preset" mode="scroller" default="preset1" label="STYLE_PRESETS" description="STYLE_PRESETS_DESC" setbyurl="true" setinsession="true" setbysession="true" setbycookie="true" setinmenuitem="false" />
<param name="backgroundlevel" default="med" type="slider" class="graphic-level" label="BG_LEVEL" description="BG_LEVEL_DESC" setbyurl="true" setinsession="true" setbysession="true" setincookie="true" setbycookie="true" isbodyclass="true">
    <option>low</option>
    <option>med</option>
    <option>high</option>
</param>

Un appel d'URL avec la chaîne de requête:

?presets=preset2&backgroundlevel=high

Donnerait les valeurs suivantes :

linkcolor=#ff0000
backgroundlevel=high

RTL est le raccourci utilisé pour “right-to-left” (droite à gauche) et c'est un élément clé quand on doit livrer un site web dans une langue RTL comme l'hébreu, l'arabe, l'ourdou, etc. Gantry a incorporé une prise en charge RTL qui "basculera" automatiquement les mises en page du contenu et certaines commandes pour que cela soit compatible RTL. Gantry fournit également un override dans la section avancée des détails du template, donc vous pouvez désactiver ou activer ce comportement par defaut si vous le désirez. Toutefois, par défaut, si le fichier de langue le permet, RTL sera activé.

La commande pour dire à Joomla qu'une langue doit être affiché au format RTL se trouve dans le fichier XML du langage. Dans le cas de la valeur par défaut fr-FR langue, il y a un fichier de configuration situé ici :

VOTRE_SITE/languages/fr-FR/fr-FR.xml

Ce fichier ressemble à ceci:

<?xml version="1.0" encoding="utf-8"?>
<metafile version="2.5" client="site">
    <tag>fr-FR</tag>
	<name>French (fr-FR)</name>
    <description>French site language for Joomla 3.0</description>
	<version>2.5.9.1</version>
	<creationDate>4 feb 2013</creationDate>
	<author>French translation team : joomla.fr</author>
	<authorEmail></authorEmail>
	<authorUrl>www.joomla.fr</authorUrl>
	<copyright>Copyright (C) 2005 - 2013 Open Source Matters &amp; joomla.fr. All rights reserved.</copyright>
	<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
	<metadata>
		<name>French (fr-FR)</name>
		<tag>fr-FR</tag>
		<rtl>0</rtl>
		<locale>fr_FR.utf8, fr_FR.UTF-8, fr_FR.UTF-8@euro, fr_FR, fre_FR, fr, france</locale>
		<firstDay>1</firstDay>
	</metadata>
	<params />
</metafile>

L'élément important est la balise <rtl /> qui est actuellement réglée sur 0. En passant cette valeur à 1, vous basculerez sur RTL pour ce language.

Un exemple visuel de la façon dont ça a l'air / fonctionne peut être vu ci-dessous. La première image est par défaut en anglais dans le format LTR traditionnel, tandis que le second est la même valeur par défaut anglais, mais avec le RTL activé dans le fichier de langue en-gb.xml.

rtl-ltr
rtl-rtl

Restrictions du RTL

Gantry fournit un grand nombre de fonctionnalités clés en main pour appliquer RTL directement. Cependant, RTL est compliqué et votre mise en page spécifique aura besoin d'intégrer plus profondément RTL dans vos dossiers de CSS pour manipuler correctement les besoins de votre design quand vous serez en mode RTL. Par exemple si vous avez un en-tête de module qui est formé comme un ruban qui entre sur le côté gauche du module dans le mode LTR régulier, alors vous devez créer une version spéciale de ce ruban qui entre du côté droit pour le mode RTL. Aussi, vous devrez fournir les modifications spécifiques à la mise en page dans votre fichier CSS pour vous assurer que cette image soit rendue correctement.

Pour vous aider dans ce processus, Gantry (Rocketheme) a créé une fonction spéciale qui détecte le mode RTL, et insère donc une classe appelée rtl dans la balise body. De cette façon vous pouvez ajouter des règles spécifiques comme:

body.rtl .module .ribbon {float:right;}

pour seulement cibler la classe .ribbon en mode RTL.

D'autres limitations sont entièrement basées sur les navigateurs. Certains navigateurs prennent en charge le mode RTL très bien. Sans surprise ce sont les navigateurs Mozilla et WebKit base: Firefox, Safari, Chrome, etc. Internet Explorer, même la dernière version 9.0 release fait un très mauvais travail de rendu en mode RTL, et vous aurez surement à passer du temps supplémentaire à faire des CSS qui fonctionnent pour ces navigateurs. C'est bien au-delà de la portée de ce que Gantry peut faire pour vous.

Le Framework Gantry est au départ basé sur le système 960 Grid  qui propose une  structure en 12 colonne basée sur un affichage fixe d'une largeur de 960px. A partir de la version 4.x, le système de grille responsive Twitter's Bootstrap est désormais utilisé.

Consultez la vidéo d'introduction de gantry pour voir les capacités responsives des templates propulsés par gantry 4. Caractéristiques puissantes, préréglages, configuration de disposition, responsive design, et beaucoup, beaucoup plus.


L'affichage dynamique ou mise en page responsive s'adapte à l'appareil de visualisation, comme un smartphone, une tablette ou un ordinateur de bureau, en se basant sur la résolution de l'écran. Il existe cinq formats de largeurs différents, et chacun utilise la structure de grille d'une manière différente, il faut donc les proposer. Ceci est réalisé par @media queries qui peut détecter la largeur de la fenêtre du navigateur, et permet différents CSS en conséquence. Il s'agit de la fonction de base qui rend possibles les designs responsives. En réalité, un site simple s'adaptera automatiquement au dispositif de vision, sans avoir besoin de mises en page distinctes, comme pour le mobile.

Notez-le, une mise en page responsive ne détecte pas un périphérique spécifique, il ne détecte que la largeur de l'environnement de visualisation, donc tous les noms comme smartphone ou tablette sont seulement des raccourcis pratiques.

Info sur la Grille Responsive

Le système de grille responsive est conçu pour les systèmes de bureau, tablette et smartphone, chacun avec des modifications mineures pour assurer la compatibilité en fonction du mode. Le tableau ci-dessous indique la répartition des résolutions d'écran et des périphériques associés, et quels types de mise en page sont ensuite appliqués à chacun.

responsive1

Les Classes d'assistance Responsive

Une autre fonctionnalité utile disponible, à travers Bootstrap, est la collection de classes utilitaires responsive qui peut être utilisée pour aider à modifier les mises en page en fournissant une méthode simple pour afficher ou cacher les modules. Insérez les classes ci-dessous dans vos vos réglages de module pour montrer/cachez un module pour un mode particulier, ou ajoutez la à un élément spécifique dans votre contenu.

responsive2

Media Queries

Les media queries CSS actuelles ressemblent à ceci:

    /* Smartphones */
    @media (max-width: 480px) { ... }
     
    /* Smartphones to Tablets */
    @media (min-width: 481px) and (max-width: 767px) { ... }
     
    /* Tablets */
    @media (min-width: 768px) and (max-width: 959px) { ... }
     
    /* Desktop */
    @media (min-width: 960px) and (max-width: 1199px) { ... }
     
    /* Large Display */
    @media (min-width: 1200px) { ... }

Navigation

Le système de menu pour un appareil smartphone sera celle d'un select-champ. Un champ de sélection est une excellente solution pour cela parce que la plupart des téléphones ont nativement de beaux éléments de sélections dans l'interface utilisateurs. Suivre cette méthode est nécessaire pour rendre le menu accessible sur les périphériques mobiles, parce que Fusion, et nos autres types de menu, sont tout simplement trop complexe pour apparaitre efficacement sur ces appareils. Un nouveau système de menus sera créé et sera responsive, mais fera toujours partie de Gantry

Tous les autres tailles vont utiliser le système de menu normal s'appuyant sur RokNavMenu, comme Fusion Menu ou SplitMenu.

responsive3

LESS CSS

LESS est un langage dynamique de feuilles de style qui améliore le CSS avec des comportements dynamiques tels que des variables, des mixins, des opérations et des fonctions. LESS permet que votre code soit plus propre, optimisé tout en réduisant également la durée globale pour créer et maintenir votre base de code.

Gantry prend en charge LESS, en implantant le compilateur et les processus de base dans le Framework lui-même. En outre, les templates administration et frontend sont construits avec des fichiers LESS qui sont alors envoyés comme des fichiers CSS vers le navigateur. Gantry gère tout le traitement complexe, de sorte que vous puissiez vous concentrer uniquement sur le style.

Remarque, lors des modifications, n'oubliez pas de:

  1. Modifier toujours le fichier .less et non pas les fichiers compiled .css qui sont rendus dans le dossier /css-compiled/
  2. Vous assurer que les dossiers du template /less/, /css/, et /css-compiled/ sont inscriptibles
  3. Nettoyer les caches de Less, Gantry et du navigateur

LESS: l'essentiel

LESS est conçu pour améliorer le CSS, ainsi vous débutez selon les principes de base et les attributs qui sont associés au CSS, IDs, classes et tous les autres. Par conséquent, le format vous semblera familier. En termes d'exemples, les fichiers /LESS seront présentés d'abord, suivis par les fichiers Compiled CSS qui sont les fichiers de sortie qui apparaissent dans le répertoire /css-compiled/ .

Variables

Ce sont des valeurs standards qui peuvent être répétés tout au long de vos feuilles de style, et ainsi, un changement de ligne va générer un changement global, plutôt que d'avoir à changer manuellement chaque instance. Un exemple à partir du template Gantry est ci-dessous:

    //LESS
    @bodytitle: #303030;
    ...
    a:hover {
    color: @bodytitle;
    }
    h1, h2, h3, h4, h5, h6 {
    color: @bodytitle;
    }
    /* Compiled CSS */
    a:hover {
    color: #303030;
    }
    h1, h2, h3, h4, h5, h6 {
    color: #303030;
    }

Comme vous pouvez le voir dans l'exemple ci-dessus, n'importe où @bodytitle est utilisé dans les fichiers LESS, il sera remplacé par #303030 dans le compilateur.

Mixins

Mixins combine des Variables avec des Fonctions en vous permettant d'inclure toutes les propriétés associées à une classe dans une autre. Ces injections de classe peuvent inclure des fonctions, comme le montre l'exemple issu de LessCSS.org ci-dessous:

    //LESS
    .rounded.corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    }
    #header {
    .rounded.corners;
    }
    #footer {
    .rounded.corners(10px);
    }
    /* Compiled CSS */
    #header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    }
    #footer {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    }

Règles imbriquées

Les Règles imbriquées servent à l'héritage, ce qui permet à vos feuilles de style d'être plus propres et plus courtes en plaçant des groupes de sélection les unes dans les autres, plutôt que de spécifier chaque instanciation à chaque fois. Voir un exemple de template Gantry ci-dessous:

    //LESS
    ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    ul {
    list-style: none;
    }
    li {
    margin-bottom: 8px;
    a, .item, .separator {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    }
    }
    }
    /* Compiled CSS */
    ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    ul.menu ul {
    list-style: none;
    }
    ul.menu li {
    margin-bottom: 8px;
    }
    ul.menu li a, ul.menu li .item, ul.menu li .separator {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    }

Fonctions & Opérations

Les Fonctions & Operations vous permettent d'effectuer des opérations mathématiques sur les valeurs de CSS aussi bien que de manipuler ces valeurs par des fonctions, comme c'est possible avec JavaScript. Voyez l'exemple ci dessous tiré de LessCSS.org:

    //LESS
    @the-border: 1px;
    @base-color: #111;
    @red: #842210;
    #header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
    }
    #footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
    }
    /* Compiled CSS */
    #header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
    }
    #footer {
    color: #114411;
    border-color: #7d2717;
    }

Le schéma ci-dessus est là pour vous présenter les notions de bases de LESS. Pour une présentation plus détaillée du fonctionnement des variables, mixins, fonctions et opérations, veuillez visiter :LessCSS.org.

LESS dans le Template Gantry

Tous les fichiers LESS associés au template sont situés dans le répertoire /templates/[TEMPLATE]/less/ . Gantry 4 utilise un puissant compilateur LESS basé sur du PHP produit par lessphp. Gantry 4 délivre les fichiers LESS transformés dans le répertoire /templates/[TEMPLATE]/css-compiled/ .

Tous les fichiers CSS ne sont pas compilés en un seul fichier. Tout fichier CSS qui doit être autonome, pour l'application de paramètres de template (comme le chargement de Fusion Menu à la place de SplitMenu) sera indépendant du fichier principal /templates/[TEMPLATE]/css-compiled/[OUTPUT_CSSFILE].

Comment sont compilés les fichiers LESS?

Quand un changement est repéré, Gantry recompile automagiquement vos fichiers LESS dans des fichiers CSS. Pour ajouter un fichier LESS, vous avez deux options. Vous pouvez insérer la fonction suivante dans votre code PHP:

$gantry->addLess('NAME.less');

Où NAME.less est le nom de votre fichier less dans le répertoire /templates/[TEMPLATE]/less/. La méthode addLess() accepte plusieurs paramètres facultatifs:

public function addLess([INPUT_LESSFILE], [OUTPUT_CSSFILE], [PRIORITY], [ARRAY_OF_VARIABLES]);

Un exemple de ceci tel qu'utilisé dans le Template Gantry par défaut est :

$gantry->addLess('global.less', $gantry->templateName . '-compiled.css', 8, array('headerstyle'=>'"header-'.$gantry->get('headerstyle','dark').'.less"'));

Vous pouvez voir dans cet exemple que global.less est le fichier source LESS, et ce qui sera produit sera gantry-compiled.css. La priorité a été monté dans le code à 8, et le dernier paramètre est un tableau d'un seul élément headerstyle passé par la compilation LESS. La possibilité de passer des variables rend la compilation LESS très puissante et flexible.

Lorsque vous passez des variables par la compilation LESS votre sortie aura comme format [TEMPLATE]-compiled-[MD5_VARIALBLE_NAME_VALUES], par exemple: gantry-compiled-845729384248h3hf4haeioh.css.

Une autre façon d'ajouter des fichiers LESS est tout simplement de créer le fichier puis ajoutez une référence dans le fichier LESS principal /less/global.less. Le fichier global.less importe les autres fichiers LESS via la fonction @import , voyez l'exemple ci-dessous:

    // Core variables and mixins
    @import "variables.less";
    @import "mixins/index.less";
    // Core and Grid
    @import "gantry-core.less";
    @import "joomla-core.less";
    // Template core styling and layout
    @import "template.less";
    @import "style.less";
    @import @headerstyle;
    @import "prettify.less";

En outre, pour les caractéristiques qui exigent un fichier LESS distinct, vous pouvez employer un grand choix de différentes techniques. La plus simple est d'insérer la fonction add LESS dans /features/styledeclaration.php, comme indiqué dans l'exemple du Template Gantry:

if ($gantry->get('typography-enabled')) $gantry->addLess('typography.less');

Cela ajoute une condition, là où le paramètre typography-enabled est actif, le fichier /less/typography.less sera compilé

Options LESS duTemplate

Vous pouvez commander la compression des CSS, le temps d'attente de la compilation et l'entête de débuggage, ainsi que vider manuellement le cache avec le bouton Clear Cache dans Extensions → Template Manager → gantry → Advanced → Less Compiler.

En outre, la compression CSS augmente les performances du site et l'optimisation en consolidant toutes les CSS en un seul fichier, avec peu ou aucun espace vide. Cela réduit la taille du fichier CSS et le rend plus rapide au chargement dans le navigateur.

advanced-less

Fichiers LESS Personnalisés

Souvent, vous aurez besoin d'ajouter un peu de CSS personnalisé pour remplacer un style particulier dans le template. Vous pourriez vouloir ne pas modifier les fichiers LESS et CSS fournis parce que cela pourrait  occasionner des problèmes au moment de  la mise à jour du template. Avec Gantry 4, vous pouvez créer des fichiers LESS personnalisés de la forme : /less/[LESS_FILE_NAME]-custom.less, et ceux-ci seront repris et compilés dans le fichier CSS principal.

Par exemple, dans le template Gantry par défaut, il ya un fichier appelé less/template.less. Si vous créez un nouveau fichier appelé less/template-custom.less, vous pouvez ajouter vos propres éléments LESS personnalisés ici et ils seraient automatiquement ajoutés à votre fichier CSS compilé.