Monthjuillet 2017

[CSS] Un background off-container

Pas totalement valide car ajoute un léger scroll horizontal

Source: Full Width Containers in Limited Width Parents et le CodePen. Attention à la compatibilité.

Un *tain d’exemple qui marche:

Regardez bien la structure HTML. L’ajout d’une DIV .full-width joue un rôle important ici.

Une alternative intéressante

Notamment si l’élément doit se retrouver en sticky à un moment donné.

[CSS] Des cercles responsive dont les dimensions s’adaptent de manière homothétique

Source : https://codepen.io/CrocoDillon/pen/trFam.

A noter: par rapport au Codepen où .circle à les propriétés width: 10%; et padding: 5% 0;, mettre width: 100%; et padding: 50% 0; (comme dans le code ci-dessous) rend les cercles parfaitement fluides. Ils s’adaptent au container.

[CSS] Des bordures en dégradé

Source : CSS Tricks – Gradient borders.

border-image and linear-gradient

Pseudo Element Edges

Pseudo Element Block Knockout

Multiple (Sized) Gradient Backgrounds

[Foundation 6] Un menu Foundation en vue Mobile et un menu full-custom en vue Desktop

Foundation 6 permet de switcher facilement d’un type de menu à un autre par le biais de son composant Responsive Navigation. L’intérêt de se composant réside notamment dans le fait qu’on utilise le même code pour afficher son menu sur les supports Mobile/Desktop (il arrive souvent qu’un menu soit doublé pour ce type de besoin).

Cependant, Foundation 6 ne couvre pas l’ensemble des menus existants et il peut arriver qu’on ait besoin d’utiliser un menu Foundation pour une vue donnée, et qu’on soit obligé de développer un menu full-custom (un mega-menu dans notre cas) pour une autre vue.

Dans notre exemple, nous aurons un Drilldown en vue Mobile et un mega-menu en vue Desktop. Nous n’allons pas utiliser le composant Responsive Navigation, mais uniquement le Drilldown (voir lien plus haut) et exploiter les possibilités offertes par l’util Media Queries de Foundation 6.

L’astuce consiste à:

  • Désactiver les inclusions de « foundation-menu » et « foundation-drilldown-menu » dans le mixin « foundation-everything ». On ne va pas inclure ces mixins de manière globale, mais seulement lorsqu’on en a besoin.

  • Englober le markup HTML de notre menu dans une <div class="menu-corporate"></div> et lancer les inclusions de « foundation-menu » et « foundation-drilldown-menu » depuis cette classe…

  • …et ce en fonction d’un breakpoint (ce qui nous permettra de dire: « je veux mon menu Drilldown pour mon .menu-corporate et le breakpoint medium down uniquement.

    ATTENTION: j’en ai chié avec ça, mais il faut s’assurer que la méthode _destroy ne soit déclenchée que si le markup du menu Drilldown est actif. Déclencher le destroy une première fois en vue Desktop va bien supprimer le markup du Drilldown, mais le déclencher une seconde fois va supprimer le markup nécessaire au off-canvas (<div class="off-canvas in-canvas-for-large position-left" id="headerMainNav" data-off-canvas>) !!!

Notez que c’est la fonctionnalité nested-off-canvas qui nous offre la possibilité d’utiliser le même code pour afficher son menu sur les supports Mobile/Desktop.

Markup HTML

Code SASS

Code jQuery

[jQuery] Stocker plusieurs données dans une variable sous forme de tableau et interroger la variable pour savoir si elle contient une donnée ou pas

Source: https://stackoverflow.com/questions/13509669/find-out-if-a-variable-is-in-an-array

[Foundation 6] Un off-canvas qui prend 50% de la largeur de la fenêtre

Sources JS et SASS maintenues à jour ici : https://github.com/franklang/foundation-sites-plugins.

Dans notre example, le off-canvas de droite prend prend 50% de la largeur de la fenêtre pour les écrans medium et supérieurs.

Les plugins Foundation offcanvas, box (util), mediaquery (util) sont obligatoires.

HTML

http://foundation.zurb.com/sites/docs/off-canvas.html

SASS

jQuery

[Foundation 6] Une fonction pour récupérer les valeurs des breakpoints Current, From, To

Code source maintenu ici : https://github.com/franklang/foundation-sites-js-utils/tree/master.

Cette fonction permet de récupérer, au chargement de la page :

  • la valeur (Current) du breakpoint en cours.

Puis chaque fois que la largeur de la fenêtre est modifiée (redimensionnement, passage portrait/paysage, autre…) :

  • la valeur (From) du breakpoint précédent,
  • la valeur (to) du nouveau breakpoint en cours.

[Foundation 6 for sites] L’erreur « Uncaught TypeError: t.getBoundingClientRect is not a function » à l’utilisation de Box (Javascript utilities)

Solution:

[Drupal 7] Monter en version de jQuery avec le plugin jQuery Multi

Nativement, Drupal 7 est livré avec la version 1.4.4 de jQuery. Cette version est nécessaire pour faire fonctionner correctement la partie administration et quelques widgets et modules populaires du front.

Il existe un plugin jQuery Update, mais il ne permet de monter que jusqu’à la version 2.1.x.

Le plugin jQuery Multi permet quant à lui d’utiliser une version plus récente (au choix du développeur).

Avant toute installation, créer un dossier <racine_de_mon_projet>/sites/all/libraries/jquery/ qui contient la version de jQuery qu’on souhaite utiliser. Le libellé du fichier doit être sous la forme suivante: jquery-<version>.js. Exemple: jquery-3.0.0.min.js.

Installer ensuite le module. On peu le faire avec Drush et la commande suivante (qui permet d’installer et d’activer le module immédiatement) :

Chaque plugin jQuery que vous souhaiterez utiliser sous couvert de la version déclarée par le plugin jqmulti devra:

  • être copié dans <racine_de_mon_projet>/sites/all/libraries/ (à chaque librairie son dossier)
  • être déclaré via le BO. Sous Configuration > Systeme > jQuery Multi Settings

Pour finir, n’oubliez pas que le code devant être exécuté avec jQuery 3.0.0 devra être encapsulé de la sorte avec un alias jq300 (pour « jQuery-3.0.0 ») :

[Drupal 7] Les différentes techniques pour ajouter/supprimer des ressources CSS/JS

Ressources généralistes sur le sujet :

Supprimer les CSS Core :

Peut se faire par le biais du hook_css_alter via le fichier template.php du thème.

Attention: dans le cas ou certaines CSS sont déclarées comme étant des dépendances du module contrib, il ne faut pas déclarer le module contrib mais ce qui semblent être des sous-modules… (en commentaires dans l’exemple ci-dessous, les déclarations qui ne fonctionnent pas) :

…ce qui nous donne au propre :

Charger/Ne pas charger certaines ressources CSS/JS si l’utilisateur est anonyme/connecté:

Avec les hooks user_is_anonymous et user_is_logged_in:

Remplacer la version de jQuery par défaut (via CDN)

Peut se faire par le biais du hook_js_alter via le fichier template.php du thème :

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑