Mois : décembre 2015

[CSS] Ajouter des diviseurs verticaux de même hauteur

Source : Add vertical dividers with CSS | Simulation JSFiddle

Petite subtilité avec la grille Bootstrap

Les classes .col-* ont déjà la propriété position avec la valeur relative. Il faudra la surcharger avec la valeur initial.

Autre technique en utilisant une image et les backgrounds multiples de CSS3

Pour, par exemple, 3 colonnes :

[CSS] Un menu déroulant avec les sélecteurs adjacents, les propriétes opacity, visibility et transition

[jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.

Attention : dans le code donné en exemple, vous trouverez dans certains cas des mentions à des variables de type ${repeat/entry/index}. Ce type de variables est utilisé dans le CMS RBS Change (versions 3.x). A moins que vous ne souhaitiez mettre à profit ce code au sein d’un menu Change, il ne faudra pas tenir compte de ces variables et, le cas échéant, les supprimer ou les remplacer par des variables qui fonctionnent dans le CMS que vous utilisez.

Problème : une navigation en vue Desktop, même sous forme de menu déroulant ou géant, laisse parfois la possibilité d’accéder à des pages en cliquant sur les entrées de premier niveau. Typiquement, lorsque cette même navigation est affichée en vue Mobile, l’activation de ces mêmes entrées de premier niveau doit ouvrir un second niveau et pas rediriger vers des pages (sinon la navigation Mobile ne permettra jamais d’atteindre les sous-niveaux).

Solution (avec le composant Collapse de Bootstrap 3 et enquire.js) :

Nous allons tout d’abord nous assurer que les différents classes, IDs et data-attributs nécessaires au fonctionnement du composant Collapse sont en place sur les éléments impliqués.

Sur le lien qui active la partie masquée à afficher :

  • class= »link collapsed »
  • role= »button »
  • data-toggle= »collapse »
  • href= »${descendantUrl} »
  • aria-expanded= »false »
  • aria-controls= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Attention : en plus des attributs requis nativement par le composant Collapse, nous allons rajouter deux attributs data-mobile-target et data-desktop-target dont les valeurs correspondent respectivement à l’ID de l’élément masqué à activer et à l’URL de la page sur laquelle l’utilisateur sera redirigé à l’activation du lien.

  • data-mobile-target= »collapseShelfSubMenuLevel2${repeat/entry/index} »
  • data-desktop-target= »${descendantUrl} »

Exemple finalisé :

Sur l’élément à afficher/masquer :

  • class= »level${parent/getChildrenLevel} collapse »
  • id= »collapseShelfSubMenuLevel2${repeat/entry/index} »

Exemple finalisé :

La partie jQuery (en utilisant enquire.js pour simuler des media-queries en JS – très pratique) :

La méthode enquire.register définit que le code qui se trouvera dans match sera exécuté dans le cadre du breakpoint énoncé. Hors breakpoint, c’est le code qui se trouve dans unmatch qui est exécuté.

Les deux attributs data-mobile-target et data-desktop-target ajoutés plus haut dans notre template vont nous servir à switcher les valeurs des attributs href des liens des entrées de premier niveau.

Lorsque le viewport utilisé est dans le scope des 767px minimum (vue Mobile), au clic sur une entrée de premier niveau la redirection vers la page ne s’effectue pas. On affiche les entrées de second niveau à la place.

Lorsque le viewport utilisé est hors scope (768px ou plus, vue Desktop), au clic sur une entrée de premier niveau la redirection vers la page s’effectue. Les entrées de second niveau (sous-menu déroulant ou géant) doivent s’afficher au survol (à vous de gérer ça).

Exemple finalisé de notre code jQuery :

Pour finir – Markup purement HTML (rendu dans le navigateur) :

Vue Mobile, second niveau fermé :

Vue Desktop, second niveau fermé :

On note l’action de notre petit script jQuery par la différence de la valeur affichée par l’attribut href de notre élément <a class="link collapsed"></a>. En vue Mobile, c’est la valeur du data-attribut data-mobile-target="collapseShelfSubMenuLevel20" qui est active. En vue Desktop, celle de data-desktop-target="http://mon-site.fr/fr/bijoux/par-famille".

[RBS Change 3.x] Dans un template de menu, ajouter une classe avec valeur incrémentée sur un élément contenu dans une boucle.

Admettons qu’on souhaite ajouter, dans une boucle, une classe de type color-x (où x correspond à une valeur qui doit s’incrémenter) sur un élément <li> qui se répète en fonction du nombre d’entrées disponibles dans notre menu. Exemple du résultat attendu :

Commencer par repérer la boucle dans laquelle se trouve l’élément qui se répète sur lequel nous souhaitons agir. Dans un menu Change, les boucles sont mises en place à l’aide de la condition tal:repeat. Exemple :

Dans note exemple, il est important de repérer ce qu’on souhaite répéter. Ici, il s’agit de la première information déclarée en arguments dans le tal:repeat à savoir entry.

Ensuite, repérer l’élément sur lequel on souhaite ajouter notre classe de type color-x et ajouter la valeur à incrémenter comme suit :

Note : on retrouve notre information entry au sein de la chaîne de caractère : ${repeat/entry/index}.

[Photoshop] Exporter ses icônes en SVG

Pompé intégralement sur : Exporter ses icônes en SVG depuis Photoshop

Voici la procédure pour exporter très rapidement l’ensemble des icônes d’un PSD au format vectoriel SVG.

Prérequis pour pouvoir exporter vos icônes au fomat SVG :

  1. Installer le script : save-ps-to-svg.jsx dans le dossier C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts
  2. Démarrer Photoshop et avoir Illustrator installé sur sa machine.

Les screenshots ci-dessous sont fait sur Photoshop CS6, mais le script d’export des icônes au format SVG devrait fonctionner également sur CS5.
Source : http://hackingui.com/design/export-photoshop-layer-to-svg/

Procédure d’export svg :

  1. Renommer les calques à exporter en terminant par .svg
    renommer-calque-en-point-svg
     
  2. Sélectionner la forme, appuyer sur A (outil de sélection de tracé) et cliquer sur fusionner les composants de forme.
    fusionner-les-composants-de-forme
     
  3. Lancer le script via Fichier / Script, Illustrator va se lancer automatiquement et exporter un à un les calques .svg à l’endroit où vous avez sauvegardé votre PSD.

Le script :

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

Source : Custom Style All Your Form Elements with Pure CSS and No JavaScript

Styler l’élément HTML Select avec CSS

(Works in IE8+, FF, Webkit)

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

sexy-select_variante_bootstrap-caret