Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

22PARTAGES

5  0 
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

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de singman
Membre actif https://www.developpez.com
Le 11/07/2015 à 10:53
C'est dur de lire n'importe quoi.
Les framework pour les débutants ou les plagistes ? Vous vous prenez pour des cadors de dev Web, les meilleurs du monde ? Les framework sont là pour donner une base technique solide et commune aux devs, qui n'ont pas a réinventer la roue à chaque projet et peuvent se concentrer sur l'important, répondre aux besoins du client dans le délai impartit. Et donc gagner de l'argent.
Un framework uniformise l'aspect visuel des sites Web ? Non, il fourni la base technique. Un designer un poil inventif peut faire des choses totalement différentes avec le même framework, justement en s'appuyant sur cette base. Après, beaucoup ne font que recopier les examples ou les démos, ça limite forcement la diversité.

D'une manière générale, j'en vois un ou deux ici qui devrait se faire dégonfler un peu les chevilles et être plus modestes.
5  0 
Avatar de 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.
4  0 
Avatar de 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.
4  0 
Avatar de 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é
3  0 
Avatar de 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.
1  0 
Avatar de danyclassique
Membre du Club https://www.developpez.com
Le 11/07/2015 à 9:07
Je suis absoluement de l'avis de sodium quand il dit : les frameworks ca ne permet pas d'apprendre le css
mais ca ne supprime pas completement le fait que c'est bien de les connaitre car, quand on tombe sur une equipe qui est anti puriste et qu'elle ne connait pas l'importance de savoir faire du css,ou autre ,on se trouve forcement oblige de faire du framework.
Un autre exemple qui n'est pas totalement dans le context mais...
Quand j'utilise system.IO.FIle du framework dot.net ,on va dire que cela m'arrange beaucoup, car je me vois mal aller utiliser de l'interopatibilite pour lire ou ecrire un fichier en c++ ou assembly ou plus bas ,dans un programme de test qui ne devrait prendre que 2 lignes de code en 1.35 m de temps.
Alors en conclusion apprendre c'est bien voir oblige mais merci aux framework ,Quand meme
1  0 
Avatar de 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.
1  1 
Avatar de 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
1  1 
Avatar de stailer
Membre chevronné https://www.developpez.com
Le 11/07/2015 à 10:02
Je pense que dans le cadre du CSS, les 2 arguments sont bons :

- Je veux utiliser un framework pour pas faire (ou peu) de css.
- Je veux pas de framework car il est important de bien connaitre le css.

La raison est simple : CSS n'est pas un langage. Il n'y a pas d'algo en CSS ni de structure, ni d'objet. C'est du déclaratif et il s'agit de juste connaitre ses principes de base pour l'utiliser "comme tout le monde".

Bref dans mon cas : moins j'en fais, mieux je me porte. Le code métier et technologique va être pour moi javascript et .net (ou php) . C'est pour cela que je m'orientai sur 960gs auparavant et que je suis passé sur bootstrap.
Mais j'entends bien et je comprends ceux qui veulent le maitriser à 100% et ne pas utiliser de framework.
0  0 
Avatar de EpiTouille
Membre éprouvé https://www.developpez.com
Le 13/07/2015 à 16:55
Bonjour,
je ne vois pas la différence entre Material Design Light et Angular Material (https://material.angularjs.org/latest/#/).
Quelqu'un la connait-elle ?
0  0