Comment utiliser Materialize CSS
Plan

Qu'est ce que le Material Design ?

Qu'est ce que Materialize CSS ?

Pourquoi utiliser Materialize CSS ?

Config...
Qu'est ce que le material design ?

Material Design : Flat Design, amélioré
− Par Google
− Android 5.0 Lollipop
− Les ser...
Qu'est ce que Materialize CSS ?

Framework css/js/html

Responsive

Reprend les élements marquants du Material
Design, ...
Responsive

Bootstrap : grid de 12 colonnes
− .col s (petit ecran) .col l (ecran large) .col m (tablette)

<div class=”c...
4 raisons pour utiliser Materialize CSS
1) Séparer langage structurant & langage de
programmation
2) Se concentrer sur le ...
Configuration et structure

http://materializecss.com/

Téléchargez et décompressez le dossier
materialize-v0.97.0.zip
...
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.m...
Demo

<body></body>

Non exhaustive

Navbar Responsive

3 “cartes”

Parallax

Demo

Code final

https://github.com/jhouedanou/codecidemo
Presentation cod eci
Presentation cod eci
Presentation cod eci
Presentation cod eci
Prochain SlideShare
Chargement dans…5
×

Presentation cod eci

229 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
229
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Presentation cod eci

  1. 1. Comment utiliser Materialize CSS
  2. 2. Plan  Qu'est ce que le Material Design ?  Qu'est ce que Materialize CSS ?  Pourquoi utiliser Materialize CSS ?  Configuration & Structure  Demo
  3. 3. 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é
  4. 4. 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
  5. 5. 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”
  6. 6. 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)
  7. 7. 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
  8. 8. <!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>
  9. 9. Demo  <body></body>  Non exhaustive  Navbar Responsive  3 “cartes”  Parallax
  10. 10.  Demo  Code final  https://github.com/jhouedanou/codecidemo

×