Bootstrap 4 vs. Foundation 6 for sites – Habiller des formulaires

  VS  

Depuis quelques semaines (et deux projets en cours de production), je décortique avec grand intérêt le framework front-end responsive Foundation 6 for sites créé et maintenu par Zurb. J'utilise Bootstrap 3 depuis sa première release stable (et Bootstrap 2 avant ça). Mais Bootstrap 4 étant encore en version Alpha j'ai décidé, pour voir, de me tourner vers une solution que je considère comme étant son principal challenger (la première version stable de Foundation 6 ayant vu le jour il y a plus d'un an).

Créer des catégories avec jQuery

Comment créer à l'aide de jQuery des catégories et utiliser leurs scopes pour trier des éléments présents dans le DOM ?

jquery

Problème:

Mon code m'affiche une liste de boutiques d'une même enseigne sur l'ensemble des villes françaises. Cette liste ne fait l'objet d'aucun tri. J'ai besoin de créer 3 groupes bien distincts de boutiques:

  • Les boutiques sur Paris
  • Les boutiques en région parisienne
  • Les boutiques en province

Un mixin SASS pour automatiser la création de boîtes de type info-bulle

blog-mixin-info_bulle

Etant développeur front-end, environ 75% des maquettes graphiques que je dois intégrer comportent actuellement des composants à l'affichage similaire à une info-bulle.

Il y a encore quelques années je me contentais d'un générateur en ligne qui, moyennant quelques paramètres à renseigner dans un formulaire, me fournissait un code CSS à peu près prêt à l'emploi (il fallait souvent le réajuster un peu). Aujourd'hui j'utilise un mixin SASS que j'ai écrit, d'abord en m'inspirant du générateur en ligne dont j'ai fourni le lien ci-dessus (avec quelques soucis de crénelage au niveau des triangles), puis en repensant la quasi-totalité du code en exploitant les possibilités de transformation offertes par CSS3.

Au secours ! J’essaye de créer une police d’icônes à l’aide d’Icomoon et les pictogrammes importés ne sont que partiellement, voire pas du tout, visibles.

icomoon

Ayant un profil d'intégrateur HTML (ou de développeur front-end pour les intimes), je ne suis pas forcément très à l'aise lorsqu'il s'agit de manipuler des sources graphiques vectorielles, notamment issues d'Adobe Illustrator.
Je suis pourtant de plus en plus amené à le faire, notamment pour créer des polices d'icônes à partir de pictogrammes qu'on me fournit au format svg.

Pour se faire, j'utilise Icomoon : une application web qui permet, entre autres choses, la génération sous forme d'une police de caractères d'un pack d'icônes prêt à l'intégration.

Cependant petit problème, il arrive qu'après l'import, l'icône ne soit que partiellement, voire pas du tout visible dans IcoMoon. Je vais donc vous présenter dans cet article la solution pour palier à ce problème.

Le mode de rendu CSS inline et l’apparition d’espaces indésirables entre les éléments HTML

HTML-CSS

Tout développeur web se trouve un jour confronté à ce curieux comportement qui semble encore toucher, version après version, l'ensemble des navigateurs les plus utilisés . Des éléments faisant partie d'une série (un menu horizontal par exemple), indentés de façon irréprochable dans notre code HTML et auxquels nous avons affecté une déclaration display: inline; ou display: inline-block; via CSS s'affichent côte à côte avec une agaçante marge de séparation de plus ou moins 4 pixels.