BT

Google apporte la Conception Contexturelle à CSS, HTML et JavaScript

| par Sergio De Simone Suivre 12 Abonnés , traduit par Nicolas Frankel Suivre 7 Abonnés le 13 juil. 2015. Durée de lecture estimée: 2 minutes |

La Conception Contexturelle Légère (Material Design Lite - MDL) de Google a pour objectif d'activer le look and feel conception contexturelle pour les sites web. La conception contexturelle est un langage visuel qui est standard sur Android et que Google propose de manière transversale aux plateformes.

D'après Google, MDL remplit trois exigences qui permettent de la qualifier de "légère" :

  • Elle a peu de dépendances, ce qui la rend simple à installer et d'utilisation.
  • Elle est agnostique par rapport aux frameworks, permettant aux développeurs de l'intégrer dans n'importe quelle chaîne d'outillage côté client disponible.
  • Elle est relativement petite en termes de taille de code.
  • Elle a un périmètre étroit, l'implémentation des orientations de la conception contexturelle, et n'est pas un framework complet.

Voilà comment déclarer un bouton basic relevé avec une ondulation :

 

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> Button </button

 

MDL n'est pas la première implémentation HTML/CSS/JS de conception contexturelle, et des alternatives comme Materialize et Material Bootstrap sont également disponibles. L'avantage principal de MDL par rapport à ces efforts communautaires selon Google, est qu'elle a été développée "en étroite collaboration avec les équipes de Conception Contexturelle et Chrome UX, et qu'elle est l'objet de revues régulières de conformité de spéc".

Avant MDL, Polymer était l'implémentation canonique de la conception contexturelle pour CSS/JS. Comparé à MDL, Polymer dispose d'un plus large périmère qui va au-delà du domaine visuel en incluant des composants de communication de données, de même que des composants qui ne relèvent pas de la conception contexturelle.

Pour le moment, MDL n'est ni optimisé, ni ne supporte l'utiisation de composants individuels, p.e. un bouton. Toutefois, pour les développeurs qui souhaitent uniquement utiliser un nombre réduit de composants MDL, il est possible d'adapter une distribution personnalisée en commentant les composants non désirés de material-design-lite.css et les scripts non souhaités du Gulpfile, puis d'exécuter gulp.

MDL suit la convention BEM pour assurer la consistance, l'isolation et l'expressivité des noms des classes. Google détaille également quelles orientations ils ont suivi dans la mise en application de BEM pour MDL. Côté négatif, BEM peut conduire à une explosion des noms de classe et d'après le retour initial, MDL semble être sujette à celà en nécessitant 17 différents noms de classe pour une simple carte, un concept basic en conception contexturelle.

Google affirme que MDL fonctionne dans tous les navigateurs modernes (Chrome, Firefox, Opera, Microsoft Edge et Safari), en même temps qu'il se dégrade élégamment sur les navigateurs comme IE9, et suggère de référencer leur CDN afin d'intégrer MDL dans un site web, mais il est également possible de le télécharger ou de l'importer via npm ou Bower.

Evaluer cet article

Pertinence
Style

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Donnez-nous votre avis

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet
Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Discuter

Se connecter à InfoQ pour interagir sur ce qui vous importe le plus.


Récupérer votre mot de passe

Follow

Suivre vos sujets et éditeurs favoris

Bref aperçu des points saillants de l'industrie et sur le site.

Like

More signal, less noise

Créez votre propre flux en choisissant les sujets que vous souhaitez lire et les éditeurs dont vous désirez suivre les nouvelles.

Notifications

Restez à jour

Paramétrez vos notifications et ne ratez pas le contenu qui vous importe

BT