07
JUIL

Material Design Lite - Le kit CSS / HTML Material par Google

Publié le 07/07/15 à 08h23 par DJo

Après la sortie des recommandations Google Material sous forme de guidelines, Google propose enfin un toolkit concret permettant de mettre en place facilement ces best practices sur votre site.

Material Design Lite

Material Design Lite se compose, comme de nombreux framework CSS, de deux éléments: Un fichier CSS et un fichier JS.

L'objectif de ce toolkit est d'ajouter la couche Material à votre site tout en optimisant la compatibilité du rendu sur les navigateurs modernes et en mode dégradé sur les plus anciens.

Material Design Lite - Composants

On retrouve un ensemble de composants Material prêts à emploi:

  • Badges
  • Boutons
  • Cards
  • Layout
  • Loading
  • Menus
  • SLides
  • Toggles
  • Tables
  • Input Text
  • Tooltips

A chaque fois, une démonstration vous permet de constater l'effet recommandé, et le code HTML associé.

Material Design Lite - Templates

En plus des composants, plusieurs templates d'exemple sont proposés sur le site de la ressource.

On retrouve par exemple un dashboard d'admin Material Design, un template de blog Material, ...

Il est possible de télécharger les sources de chaque templates utilisant le framework Material Design Lite.

Material Design Lite - CSS Theme Builder

Un theme builder vous permettra de définir les couleurs complémentaires du framework, avec une preview live du rendu.

Côté Styles, le toolkit propose la fameuse font Roboto, les icones Material Google et les couleurs vives.

Un moyen concret de mettre en place le material design sur ses pages web sans avoir à chercher un framework CSS tiers imitant qu'à moitié les recommandations.

 

Site Officiel

Baraguiné par tobalsan le 07/07/15 à 09h34
tobalsan sur La Ferme du Web
Sympa pour faire un ptit site demo, ou un truc perso. Après niveau "personnalité", à moins de vouloir faire croire qu'on s'est fait racheté par Google... :P
Baraguiné par yannchoquet le 20/09/16 à 23h37
yannchoquet sur La Ferme du Web
Sympa mais reste assez éloigné d'un framework comme bootstrap.

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web