presentation cod eci
TRANSCRIPT
Comment utiliser Materialize CSS
Plan
Qu'est ce que le Material Design ? Qu'est ce que Materialize CSS ? Pourquoi utiliser Materialize CSS ? Configuration & Structure Demo
Qu'est ce que le material design ?
Material Design : Flat Design, amélioré Par Google Android 5.0 Lollipop Les services Google
Interaction avec l'utilisateur Site web/App = feuille de papier Les couleurs et les animations permettent de hiérarchiser les
éléments de l'interface utilisateur Une expérience utilisateur consistante, et ce peu importe
l'appareil utilisé
Qu'est ce que Materialize CSS ?
Framework css/js/html Responsive Reprend les élements marquants du Material Design, soit :
Les codes de couleurs; Roboto (police) Navbar Cards
ainisi les couleurs et les agencements du Material Design Langage design de Google Evolution du Web Design http://www.google.com/design/spec/material-design/introduction.html#
Responsive
Bootstrap : grid de 12 colonnes .col s (petit ecran) .col l (ecran large) .col m (tablette)
<div class=”container”><div class=”row”><div class=”col s12 m6 l3”>
<!---->
</div></div></div>
Astuce : pour un layout fluid, utilisez “.row” seulement
4 raisons pour utiliser Materialize CSS
1) Séparer langage structurant & langage de programmation
2) Se concentrer sur le développement et les algorithmes
3) Ideal pour ceux et celles qui ont des connaissances limitées en CSS
4)Classes plus explicites (vs Material Design Lite)
Configuration et structure
http://materializecss.com/ Téléchargez et décompressez le dossier
materialize-v0.97.0.zip Créez un dossier Créer un fichier index Insérez y le code suivant
<!DOCTYPE html> <html> <head> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!--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> </head> <body> </body> </html>
Demo
<body></body> Non exhaustive Navbar Responsive 3 “cartes” Parallax
