Vous êtes sur la page 1sur 5

MATERIALIZE.

CSS
Auteurs : Johanna Bouzige, Hakim El
Baza, Samir Ben sadi, Mickaël Gable,
Nabil Ghedjati
CARTE D’IDENTITÉ :
Nom de famille : Google
Prénom : Materialize
Poids : 2,8 mo (beau bébé)
Responsive/flexboxer

Exemple de nom de classe :


• nav-wrapper
• waves-effect waves-light btn-large
• grey-text text-lighten-4
Framework :
Un framework est un ensemble d'outils et de composants logiciels organisés conformément à un
plan d'architecture et des patterns, l'ensemble formant ou promouvant un « squelette » de
programme. Il est souvent fourni sous la forme d'une bibliothèque logicielle, et accompagné du plan
de l'architecture cible du framework2.

Material Design
Créé et conçu par Google, le Material Design est un langage de conception qui combine les
principes classiques d'un design réussi ainsi que l'innovation et la technologie. Le but de Google et
de développer une technique de conception pour une expérience utilisateur unifiée au travers de
leurs produits sur n'importe quelle plateforme.

Material est la métaphore


La métaphore du Material Design définie la relation entre l'espace et le mouvement. L'idée est que
la technologie est inspirée du papier et de l'encre et est utilisée afin de faciliter la création et
l'innovation. Surfaces et bords fournissent des repères visuels familiers qui permettent aux
utilisateurs de comprendre rapidement la technologie au-delà du monde physique.

Franc, animé, voulu


Les éléments et les composants tels que grilles, typographie, couleurs et médias ne sont pas
seulement plaisants à voir, il créent aussi un sens de la hiérarchie, du sens et de l'attention.

Le mouvement donne du sens


Le mouvement permet à l'utilisateur de faire la parallèle entre ce qu'il voit à l'écran et la vie réelle.
En fournissant à la fois un retour et de la familiarité, ceci permet à l'utilisateur de s’immerger
aisément dans une technologie nouvelle. Le mouvement est cohérent et continu en plus de donner à
l'utilisateur des informations supplémentaires sur les éléments et transformations.

Guide d’installation
Télécharger
Matérialiser vient sous deux formes différentes. Vous pouvez sélectionner la version que vous
souhaitez en fonction de vos préférences et de l'expertise. Pour commencer à utiliser Materialize,
tout ce que vous avez à faire est de télécharger l'une des options ci-dessous.
Se concrétiser
Ceci est la version standard qui vient à la fois avec le fichiers JavaScript et CSS minified et
unminified. Cette option nécessite peu ou pas d'installation. Utilisez cette option si vous n'êtes pas
familier avec Sass.
Sass
Cette version contient les fichiers sources au format SCSS. Cette option vous permet plus de
contrôle sur les composants à inclure. Cette option requerra l'utilisation d'un compilateur Sass.

Configuration

Après téléchargement, décompressez les fichiers dans le répertoire ou se situe votre site internet.
Voici à quoi ressemblera donc votre répertoire.
Vous remarquerez qu'il ya deux ensembles de fichiers. Le min signifie que le fichier est "comprimé"
pour réduire les temps de chargement. Ces fichiers minified sont généralement utilisés dans la
production alors qu'il est préférable d'utiliser les fichiers unminified au cours du développement.

Configuration HTML
Vous devez maintenant vous assurer de bien lier les fichiers à votre page internet. Il est
généralement judicieux d'importer les fichiers javascript à la fin de votre body afin de réduire les
temps de chargement. Suivez l'exemple ci-dessous afin d'importer Materialize dans votre page
internet.
Dernière chose à noter : assurez-vous d'importer jQuery avant materialize.js !

<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"
media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-
2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

Configuration CSS :
Il est très simple de travailler avec un framework css, il suffit, pour faire simple, de créer une
nouvelle page css et de la link normalement avec votre html.
Les éléments apporter avec le framework seront appliqué, mais les éléments donnée grâce a votre
page custom css, s’appliqueront par dessus.

Avantages et inconvénient :
L’accessibilité de Materialize lui donne une prise en mains quasi immédiate, et il est facile
d’utilisation pour peu que l’on maîtrise la technique ancestral du copier coller, ou, que l’on
connaisse le nom des classes qui sont facilement identifiable et « lisible»(parce que Samir y tiens
mais Johanna s’en tape un peu).

En revanche, il est difficile de sortir du design css préfabriqué par google.

Modèles :
Nous avons créés quelques modèles de base afin de vous permettre de concevoir vos sites
rapidement. Jetez donc un coup d’œil à notre collection et téléchargez le plus adapté à votre projet !

Mickaël : https://htmlpreview.github.io/?https://github.com/MickaelGable/Exo-
framework/blob/master/index.html

Samir : https://github.com/samirbensadi/maquette-framework

Conclusion :
Materialize est un outils complet, simple d’utilisation, et léger. Responsive et, supporte relativement
bien flexbox. On y retrouve le design google, qui en soit est assez séduisant.