Premiers pas avec materializecss
Installer
Une fois que vous avez téléchargé les fichiers, extrayez-les dans votre répertoire désigné.
Vous remarquerez qu’il existe deux ensembles de fichiers. Le min signifie que le fichier est “compressé” pour réduire les temps de chargement. Ces fichiers minifiés sont généralement utilisés en production alors qu’il est préférable d’utiliser les fichiers non minifiés lors du développement.
Après l’extraction, la structure de fichiers de votre répertoire devrait ressembler à :
MyWebsite/
|--css/
| |--materialize.css
|
|--fonts/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.html
Exemple de page HTML MaterializeCSS :
<!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>
Télécharger
Il existe deux façons d’utiliser MaterialiseCSS, soit vous pouvez télécharger les fichiers sur votre système, soit utiliser les fichiers de CDN (Content Delivery Network).
Telecharger des fichiers
- Téléchargez le [Package Matérialiser][1].
- Téléchargez le [Materialize SASS Package][2].
- Installer via NPM :
npm install materialize-css - Installer via Bower :
bower install materialize
Inclure à partir de CDN
-
Inclure le CSS minifed dans la section head :
<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> -
Inclure le fichier Javascript dans la section Body, juste avant la balise body de fermeture.
<!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
[1] : http://materializecss.com/bin/materialize-v0.97.7.zip [2] : http://materializecss.com/bin/materialize-src-v0.97.7.zip
Modèles
Ce sont les pages de démarrage les plus simples avec un en-tête, un appel à l’action et des fonctionnalités d’icône.
| Modèle de démarrage | Modèle de parallaxe |
|---|---|
| [![Modèle de démarrage][5]][5] | [![Modèle de parallaxe][6]][6] |
| [Démo][1] ou [Télécharger][2] | [Démo][3] ou [Télécharger][4] |
[1] : http://materializecss.com/templates/starter-template/preview.html [2] : http://materializecss.com/templates/starter-template.zip [3] : http://materializecss.com/templates/parallax-template/preview.html [4] : http://materializecss.com/templates/parallax-template.zip [5] : http://i.stack.imgur.com/JnOsX.gif [6] : http://i.stack.imgur.com/UcrKc.jpg
Page Web utilisant Materialisecss
Voici un exemple de page de base utilisant le framework CSS Materialise qui intègre le système de grille et materialboxed.
<!DOCTYPE html>
<html>
<head>
<title>Materializecss Example webpage</title>
<!--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="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/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>
<div class="container">
<div class="row">
<div class="col s12"><h3>MATERIALIZECSS EXAMPLE</h3><h4>A simple website just to show how an element is used.</h4></div>
<div class="col s12 m6 l3">
<img class="materialboxed" width="100%" height="220" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Katun_nature_reserve.jpg">
<h4>Katun Nature Reserve</h4>
<p><i>Lovely Place</i></p>
</div>
<div class="col s12 m6 l3">
<img class="materialboxed" width="100%" height="220" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Computer_art_4.png">
<h4>Art</h4>
<p><i>Simple & Attractive</i></p>
</div>
<div class="col s12 m6 l3">
<img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/9/8715/16947318656_4c6cbc3091_b.jpg">
<h4>Food</h4>
<p><i>For any occasion</i></p>
</div>
<div class="col s12 m6 l3">
<img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/7/6179/6217102314_350be5e843.jpg">
<h4>Steve Jobs</h4>
<p><i>Inspiration</i></p>
</div>
<div class="col s12"><h5>Comment your suggestion</h5></div>
</div>
</div>
<!--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="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
</body>