Aulas
Disciplinas

Cursos / Informática para Internet / Plataformas de aplicações Web / Aula

arrow_back Aula 03 - Bibliotecas de componentes UI - Parte 2

Materialize

Website: https://materializecss.com/

O Materialize é um framework CSS baseado no guia de estilo visual Material Design do Google.

Também é baseado em um sistema de grid de 12 colunas com classes CSS que determinam como seu layout será aplicado.

O Materialize tem um visual baseado nos aplicativos para dispositivos móveis, com ampla área de entrada de texto, botões, listas, etc. Ele faz grande uso de Javascript também para obter os efeitos visuais desejados.

Descrição imagemPágina web do Materialize. Fonte: https://materializecss.com/

O Materialize emprega a filosofia de design moderno de acordo com os guias desenvolvidos pelo Google no seu Material Design e disponível em https://material.io/design em uma biblioteca com HTML, CSS (escrito em SASS) e javascripts que combinam as melhores práticas no para o design, portabilidade entre navegadores e responsividade. É bastante leve e vem com recursos avançados por padrão como flow texts (textos responsivos), efeitos parallax, itens com efeito de hover (quando se passa o mouse por cima), dentre outros.

O Materialize pode ser instalado de diversas formas, incluindo através de CDN. Abaixo um documento HTML com o mínimo necessário para se usar o Materialize:

<!DOCTYPE html>
 <html>
   <head>
     <!--Import Google Icon Font-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--Import materialize.css-->
     <!-- Compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

   <!-- Compiled and minified JavaScript -->
   <script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

     <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>

   <body>

   </body>
 </html>

Versão 5.3 - Todos os Direitos reservados