Google dévoile le framework Material Design Lite
Pour la conception de sites avec des spécifications Material Design

Le , par Stéphane le calme, Chroniqueur Actualités
Google Developers, l’équipe de Google qui conçoit des outils ainsi que la documentation nécessaire aux développeurs pour pouvoir en profiter, a publié un framework web front-end pour concevoir des sites avec des spécifications Material Design. « En 2014, Google a publié la spécification Material Design avec pour objectif de fournir des directives pour une bonne conception et une belle interface utilisateurs sur les dispositifs de diverses formes. Aujourd’hui, nous manifestons cet effort de l’apporter aux sites web en utilisant vanilla CSS, HTML et JavaScript. Nous l’appelons Material Design Lite (MDL) », ont-ils expliqué dans une note d’introduction à MDL.

Ce nouveau framework est présenté comme une implémentation complémentaire des éléments Paper (Md) dans le framework web Polymer qui constituent des éléments Material Design. Pour rappel, Md compte 26 éléments parmi lesquels paper-checkbox, un ensemble de case à cocher en Material Design ou paper-fab, un bouton d’action flottant en Material Design. Il n’est donc pas étonnant de le voir inclure des composantes Material Design comme des boutons, des cases à cocher, des champs de saisie, ou alors une grille responsive et des champs d’arrêt qui respectent les lignes directrices de la conception d’interface utilisateur adaptative en Material Design. Il faut rappeler que Google a donné des directives sur la façon dont une application ou un site web utilise Material Design et diffuse du contenu à différentes tailles d'écran.

Notons également que l’équipe affirme que MDL est optimisé pour des sites lourds en termes de contenu comme des pages marketing ou des blogs. D’ailleurs, de nombreux modèles responsifs à l’instar de l’exemple d’une page de blog ci-dessous ont été conçus pour montrer aux développeurs la gamme de sites qui peut être créée en se servant de MDL.


Pour ceux d’entre vous qui avez déjà utilisé d’autres framework web comme Bootstrap, vous ne serez pas vraiment dépaysés avec MDL. Pour rappel, Bootstrap est également un framework front-end créé par des développeurs de Twitter et proposé sous licence Apache (c’est-à-dire libre d’utilisation, que ce soit commercial ou non) qui a su devenir une référence.

Si Google a déjà un ensemble de composants Material Design disponibles pour les développeurs dans son framework Polymer, MDL va venir se focaliser sur le design. Tandis que les éléments de Polymer peuvent être utilisés individuellement ou ensemble pour créer un site Material Design, MDL n’est en fait qu’un ensemble de typographies spécifiques, d’animations et etc. pour créer des sites répondants aux normes Material Design. Polymer est un framework plus large et, ceux qui n’ont pas besoin de ses fonctionnalités supplémentaires et veulent uniquement créer des sites web Material Design, pourront sans aucun doute être satisfaits avec MDL. D’ailleurs, dans l’annonce relative à MDL, l’équipe explique que le ‘Lite’ dans MDL est issu de plusieurs objectifs clés : « MDL a peu de dépendances, le rendant facile à installer. Il s’agit d’un framework-agnostic, ce qui signifie que MDL peut être utilisé avec n’importe lequel des outils de l’écosystème à évolution rapide que représente les chaînes d’outils front-end. MDL a une faible surcharge en termes de taille de code (~27KB zippés) ». Pour ceux qui sont en manque d’inspiration, une page où sont proposées des modèles avec MDL est fournie. L’expérience MDL est compatible avec les navigateurs Chrome, Firefox, Opera, Microsoft Edge et Safari.

télécharger le Kit

Source : Google Developpers


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Sodium Sodium - Membre éprouvé https://www.developpez.com
le 08/07/2015 à 14:17
Je trouve cette initiative désolante, n'y a t-il pas déjà suffisamment d'uniformité dans le web actuel ?
Avatar de stailer stailer - Membre chevronné https://www.developpez.com
le 08/07/2015 à 14:56
Pour le côté techno, le fait que ça parte sur du polymer est intéressant, positif même. Mais côté fonctionnel et visuel on est quand même loin de bootstrap ou foundation.
Pour une appli je partirai plus facilement sur ces derniers qui ont notamment davantage de ressources, plugins etc..

Prometteur... wait and see.
Avatar de Kearz Kearz - Membre expert https://www.developpez.com
le 08/07/2015 à 15:18
Je trouve cette initiative désolante, n'y a t-il pas déjà suffisamment d'uniformité dans le web actuel ?
Justement.
Avant il y avait que bootstrap pour avoir un site responsive et avec un minimum CSS d'avance. Donc tu avais du bootstrap à toutes les sauces.
Après t'as eu d'autres framework (ex, materialize) et maintenant tu auras en plus celui de Google.

Et ils gardent tous un principe un peu similaire. Grille de 12 small/medium/large donc switcher est pas trop compliqué.

Plus il y aura de framework comme ceux là, mieux ça sera.

Framework dispo * palette de couleur = nombre de possibilité.
Et après tu surcharge avec ton style pour éviter une aseptisation total et tu as un site/responsive rapidement.

Tu voudrais quoi? Qu'on revienne à l'époque du "fait ton css de A à Z"?
L'originalité c'est bien mais c'est pas toujours l'objectif.
Avatar de Sodium Sodium - Membre éprouvé https://www.developpez.com
le 08/07/2015 à 15:25
Tu voudrais quoi? Qu'on revienne à l'époque du "fait ton css de A à Z"?
L'originalité c'est bien mais c'est pas toujours l'objectif.
C'est ce que je fais et c'est de cette manière que j'ai acquis l'expertise me permettant d'aller beaucoup plus vite que l'intégrateur moyen utilisant bootstrap.
Mon code est conçu dès le début dans une optique responsive et est plus clair puisque je ne multiplie pas les conteneurs destinés uniquement à de la mise en page.
L'ennui avec les framework CSS, c'est qu'on apprend à utiliser le framework, pas à faire du CSS.
Avatar de Kikuts Kikuts - Membre éclairé https://www.developpez.com
le 08/07/2015 à 17:56
Du même avis que Sodium

J'ai fais entièrement le css de mon site perso pour qu'il soit responsive. Faut arrêter de croire que c'est si chronophage ou compliqué.

Ça réduit les conteneurs inutiles et le CSS non utilisé fournit avec le framework. Je suis beaucoup plus à l'aise en CSS depuis que je me passe de framework.
Avatar de Nicam Nicam - Membre confirmé https://www.developpez.com
le 09/07/2015 à 12:35
Sodium : l'avantage aussi des framework est que si toi tu sais faire du CSS, tu es capable de maintenir ta solution.
Mais, en entreprise, on nous demande souvent de faire du code maintenable, et maintenable par les autres.
La différence est là. In finé, on se moque de savoir si tu sais faire du CSS, on veut plutôt que tu fasses du CSS que les autres pourront reprendre.
Afin que, quelque soit leur niveau, tes successeurs ne crament pas les délais pour faire des mises à jours/évolutions.

Donc, pour un site perso, c'est sympa de se prendre la tête avec le CSS (encore beaucoup n'aiment pas ca), mais pour le monde de l'entreprise, c'est généralement très très recommandé
Avatar de Sodium Sodium - Membre éprouvé https://www.developpez.com
le 09/07/2015 à 16:02
Je n'aime pas cette idée de nivellement par le bas. En entreprise, le minimum me semble justement que tous les intervenants sur un site aient une bonne maîtrise de ce qui constitue la base des langages web, on peut difficilement se prétendre professionnel autrement.

D'autant plus qu'un mauvais intégrateur fera du mauvais boulot aussi bien avec ou sans Framework comme j'ai pu l'expérimenter à de nombreuses reprises. Quand je vois un sac de nœud de divs inutiles, pour afficher une image et trois paragraphes, je prends un quart d'heure pour dégager tout et réécrire ça proprement.

D'autant plus qu'on perd là l'objectif principal de CSS : Séparer la présentation du contenu.
Avatar de Kearz Kearz - Membre expert https://www.developpez.com
le 09/07/2015 à 16:45
Je n'aime pas cette idée de nivellement par le bas. En entreprise, le minimum me semble justement que tous les intervenants sur un site aient une bonne maîtrise de ce qui constitue la base des langages web, on peut difficilement se prétendre professionnel autrement.

D'autant plus qu'un mauvais intégrateur fera du mauvais boulot aussi bien avec ou sans Framework comme j'ai pu l'expérimenter à de nombreuses reprises. Quand je vois un sac de nœud de divs inutiles, pour afficher une image et trois paragraphes, je prends un quart d'heure pour dégager tout et réécrire ça proprement.
C'est bien imbu de ta personne comme réflexion..

Je vois pas en quoi l'utilisation d'un framework représente un nivellement par le bas. Il est là pour uniformiser, utiliser du code optimisé/valide et faire abstraction de certains éléments technique généraliste pour s'attaquer au éléments technique spécifique.

De plus, tu juges le code des autres et tu supposes que ton code est suffisant bon et limpide pour être compris du premier coup.

1/ Il y a de grande chance que tes normes de nommage ne soit pas celle des autres.
2/ Il y a pas qu'une manière de coder, de ce fait ton code peut être bon mais difficilement lisible pour un autre qui pourtant est capable de faire la même chose que toi tout aussi bien.
3/ Tu as peut-être beaucoup de temps mais en entreprise j'ai rarement eu le droit de réécrire du code. S'il marche et n'affecte pas les performances, on ne change pas. (surtout que si tu changes HTML, tu dois refaire le CSS et le JS. Et donc re-tester toute la page/application.)

Je sais pas ce que tu fais comme métier mais j'ai l'impression que tu ne travail pas en équipe et/ou que t'as autant de temps que tu veux pour faire tes développements.
Avatar de Sodium Sodium - Membre éprouvé https://www.developpez.com
le 09/07/2015 à 19:35
Je vois pas en quoi l'utilisation d'un framework représente un nivellement par le bas. Il est là pour uniformiser, utiliser du code optimisé/valide et faire abstraction de certains éléments technique généraliste pour s'attaquer au éléments technique spécifique.
À partir du moment ou un framework est là pour uniformiser l'aspect visuel de tous les sites et n'est pas là pour permettre de faire les choses mieux et plus efficacement mais uniquement pour aider des débutants à pondre de la structure de mauvaise qualité en série, c'est du nivellement par le bas. Les vrais framework de développement tels que Symfony sont eux une chose positive car ils ne sont là que pour fournir des outils et organiser le code de gens compétents, ils ne sont pas là pour permettre à des amateurs d'ignorer la matière première de ce qu'ils fabriquent.

De plus, tu juges le code des autres et tu supposes que ton code est suffisant bon et limpide pour être compris du premier coup.

1/ Il y a de grande chance que tes normes de nommage ne soit pas celle des autres.
2/ Il y a pas qu'une manière de coder, de ce fait ton code peut être bon mais difficilement lisible pour un autre qui pourtant est capable de faire la même chose que toi tout aussi bien.
Je ne fais pas les choses au hasard. J'ai lu pas mal de bouquins à la fois pour acquérir une vraie maîtrise du CSS et apprendre des manières de travailler efficaces, rapides et maintenables et régulièrement, le type avec qui je "bosse" et qui est fan des bequilles pour débutants telles que Bootstrap me sort du "ouah, comment tu sais tu sais ça ?". Eh bien j'ai appris mon métier, tout simplement, car intégrateur web est un métier comme un autre. Est-ce qu'un engagerait un comptable à peine capable de faire une multiplication ?

Tu as peut-être beaucoup de temps mais en entreprise j'ai rarement eu le droit de réécrire du code. S'il marche et n'affecte pas les performances, on ne change pas. (surtout que si tu changes HTML, tu dois refaire le CSS et le JS. Et donc re-tester toute la page/application.)
Un code sale qui marche aujourd'hui est un code qui posera fortement problème un jour ou l'autre. Je l'ai appris à mes dépens quand j'étais débutant d'ailleurs. Je maudis mon moi passé à chaque fois que je dois faire des mises à jour sur du code que j'ai pondu lors de ma première année.

Je sais pas ce que tu fais comme métier mais j'ai l'impression que tu ne travail pas en équipe et/ou que t'as autant de temps que tu veux pour faire tes développements.
J'ai travaillé longtemps seul, aujourd'hui je travaille en binôme, ce qui a plus ou moins quadruplé le temps de production :
X2 pour que mon amateur de collègue ponde quelque chose qui marche à moitié
X1 pour récupérer le truc, nettoyer le code, supprimer tout ce qui est inutilisable
X1 pour refaire le boulot en repartant sur une base saine.
Avatar de artemia artemia - Futur Membre du Club https://www.developpez.com
le 10/07/2015 à 17:21
Pour revenir sur la discussion entre kearz et sodium, avec cette quote, il a raison :

"L'ennui avec les framework CSS, c'est qu'on apprend à utiliser le framework, pas à faire du CSS."
Le "framework" css c'est un peu le wordpress du "développeur"; il est évident que ton temps libre va se réduire si tu fais l'effort de coder correctement pour que ça soit également lisible par d'autres.
Je ne sais pas quel métier tu fais pour que celà ne te semble pas important voire nécessaire

Bref, les "frameworks" sont pour les débutant, ou les plagistes
Contacter le responsable de la rubrique Accueil