---
title: MaterializeCSS Framework as an Alternative to Bootstrap
localeTitle: MaterializeCSS Framework como una alternativa a Bootstrap
---
[MaterializeCSS](http://materializecss.com/) es un moderno front-end framework basado en los [principios de Diseño de Materiales](https://www.google.com/design/spec/material-design/introduction.html) de Google.

## ¿Qué es el diseño de materiales?

Material Design (nombre en código Quantum Paper) es un sistema de diseño desarrollado por Google. Al expandir los motivos de "tarjeta" que debutaron en Google Now, Material Design hace un uso más liberal de los diseños basados ​​en cuadrícula, animaciones y transiciones sensibles, relleno y efectos de profundidad como la iluminación y las sombras.

Este [video](https://www.youtube.com/watch?v=Q8TXgCzxEnw) le da una idea sobre el diseño de materiales:

## ¡Visite estos sitios web que utilizan Materialise y vea la diferencia con la que está acostumbrado!

Pruébalos en tu teléfono también para una mejor sensación.

*   [Los 100](https://www.100xp.io/)
    
*   [Temas de administrador](http://demo.geekslabs.com/materialize/v2.1/)
    
*   [Correahq](http://www.straphq.com/)
    

Más ejemplos [aquí](http://materializecss.com/showcase.html)

## Una alternativa a Bootstrap, ¿en serio?

Chill, nada puede vencer a Bootstrap, en mi opinión. Sin embargo, materializar CSS ofrece precisamente eso, Materialización: la sensación de interactuar con la interfaz como si fuera un material físico, como el papel. Acabo de llegar a eso.

Pero en serio…

Me gusta materializar por su simplicidad, por ejemplo:

En Bootstrap harías esto para crear un botón.
```
<button class="btn btn-primary btn-lg"> 
 My Button 
 </button> 
```

Básicamente, cada nombre de clase repetidamente tiene el btn adjunto. Y este es principalmente el caso de muchos otros componentes de arranque, especialmente cuando desea agregar clases simples como el color.

Con Materialise puedes agregar todas las clases simplemente así:
```
<button class="btn waves-effect waves-light green">My Button</a> 
```

Como puede ver, el uso de btn se ha reducido. La clase `green` se puede reutilizar con cualquier otro elemento HTML que no sea el `button` muestra en este caso.

Hay otra versión más liviana del material Design Framework, pero no es tan elegante o simple como el marco materializeCSS. Aparte de esta simplicidad, aquí hay más razones por las que me encanta materializeCSS:

*   ¡Es sencillo! - Solo enfatizando
*   Es de código abierto, puedes obtenerlo aquí.
*   Una comunidad también está creciendo a su alrededor.
*   [Alguien](http://fezvrasta.github.io/bootstrap-material-design/) está buscando producir una mezcla de Bootstrap + Materialise. ¡Sweeet!

## ¿Algo más?

Pruébalo y tal vez te encantará. De hecho, desde allí es donde ya se dirige la interfaz de usuario de Android, esta podría ser una buena manera de mejorar en Diseño de materiales para aplicaciones web enfocadas a dispositivos móviles, como [las aplicaciones web progresivas.](https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/#what-will-you-learn)

### Tal vez no deberías usarlo ... todavía

Está experimentando cambios en la etapa alfa. Por lo tanto, puede omitirlo y no usarlo en un proyecto crucial hasta que madure.