---
title: MaterializeCSS Framework as an Alternative to Bootstrap
localeTitle: MaterializeCSS Framework como uma alternativa para o Bootstrap
---
[MaterializeCSS](http://materializecss.com/) é uma estrutura de front-end responsiva moderna baseada nos [princípios de design de material](https://www.google.com/design/spec/material-design/introduction.html) do Google.

## O que é design de material?

Material Design (codinome Quantum Paper) é um sistema de design desenvolvido pelo Google. Expandindo os motivos de "cards" que foram lançados no Google Now, o Material Design faz uso mais liberal de layouts baseados em grade, animações responsivas e transições, preenchimento e efeitos de profundidade, como iluminação e sombras.

Este [vídeo](https://www.youtube.com/watch?v=Q8TXgCzxEnw) dá uma ideia sobre o design do material:

## Confira esses sites que usam Materialize e veja a diferença do que você está acostumado!

Teste-os no seu telefone também para uma melhor sensação.

*   [Os 100](https://www.100xp.io/)
    
*   [Temas Admin](http://demo.geekslabs.com/materialize/v2.1/)
    
*   [StrapHq](http://www.straphq.com/)
    

Mais exemplos [aqui](http://materializecss.com/showcase.html)

## Uma alternativa do Bootstrap, realmente?

Chill, nada pode bater Bootstrap, na minha opinião. No entanto, materializar CSS oferece apenas isso, Materialização - A sensação de interagir com a interface como se fosse um material físico, como papel. Eu acabei de chegar com isso.

Mas realmente…

Eu gosto de materializar por causa de sua simplicidade, por exemplo:

No Bootstrap você faria isso para criar um botão
```
<button class="btn btn-primary btn-lg"> 
 My Button 
 </button> 
```

Basicamente, cada nome de classe repetidamente tem o btn anexado a ele. E isso é principalmente o caso de muitos outros componentes de bootstrap, especialmente quando você quer adicionar classes simples como cor.

Com Materialize você pode adicionar todas as classes simplesmente assim:
```
<button class="btn waves-effect waves-light green">My Button</a> 
```

Como você pode ver, o uso do btn foi reduzido. A classe `green` pode ser reutilizada com qualquer outro elemento HTML que não seja o `button` mostrado neste caso.

Há uma outra versão mais leve do material Design Framework, mas não é tão elegante ou simples como o framework materializeCSS Além desta simplicidade, aqui estão mais razões pelas quais eu amo materializeCSS:

*   É simples! - Apenas enfatizando
*   É open-source, você pode git aqui
*   Uma comunidade também está crescendo em torno disso
*   [Alguém](http://fezvrasta.github.io/bootstrap-material-design/) está procurando produzir uma mistura de Bootstrap + Materialize. Sweeet!

## Algo mais?

Experimente e talvez você vai adorar. Na verdade, já que até mesmo a interface do Android já está pronta, isso pode ser uma boa maneira de melhorar o design do material para aplicativos da Web voltados para dispositivos móveis, como [aplicativos da Web progressivos](https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/#what-will-you-learn)

### Talvez você não deva usá-lo ... ainda

Está passando por mudanças sendo no estágio alfa. Então você pode pulá-lo e não usá-lo em projetos cruciais até que ele amadureça.