Presentation cod eci

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

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”

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>

<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">

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<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


Demo

Code final

https://github.com/jhouedanou/codecidemo

Presentation cod eci

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (11)

Ähnlich wie Presentation cod eci

Ähnlich wie Presentation cod eci (20)

Presentation cod eci