3.3 KiB
| title | localeTitle |
|---|---|
| MaterializeCSS Framework as an Alternative to Bootstrap | MaterializeCSS Framework como uma alternativa para o Bootstrap |
MaterializeCSS é uma estrutura de front-end responsiva moderna baseada nos princípios de design de material 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 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.
Mais exemplos aqui
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 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
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.