Introdução ao materializecs
Configurar
Depois de baixar os arquivos, extraia-os para o diretório designado.
Você notará que existem dois conjuntos de arquivos. O min significa que o arquivo está “compactado” para reduzir o tempo de carregamento. Esses arquivos minificados geralmente são usados em produção, embora seja melhor usar os arquivos não minificados durante o desenvolvimento.
Após a extração, a estrutura de arquivos do seu diretório deve se parecer com:
MyWebsite/
|--css/
| |--materialize.css
|
|--fonts/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.html
Exemplo de página 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>
Download
Existem duas maneiras de usar o MaterializeCSS, você pode baixar os arquivos em seu sistema ou usar os arquivos da CDN (Content Delivery Network).
Download de arquivos
- Baixe o Pacote Materializar.
- Baixe o Pacote Materialize SASS.
- Instalar via NPM:
npm install materialize-css - Instalar via Bower:
bower install materialize
Incluir do CDN
-
Incluir CSS reduzido na seção head:
<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> -
Inclua o arquivo Javascript na seção Body, logo antes da tag de fechamento do corpo.
<!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
Modelos
Estas são as páginas iniciais mais simples com recursos de cabeçalho, call-to-action e ícone.
| Modelo inicial | Modelo de paralaxe |
|---|---|
 |
 |
| Demo ou Download | Demo ou Download |
Página da Web usando Materializecss
Aqui está um exemplo de uma página básica usando o framework Materialize CSS que incorpora o sistema de grade e o 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>