63 lines
3.3 KiB
Markdown
63 lines
3.3 KiB
Markdown
|
---
|
||
|
|
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.
|