Perfecto, Bootstrap parece maravilloso, así que es posible que te preguntes porque necesitas aprender otro. En primer lugar, aclaro que no es mi intención comparar los frameworks para decir que uno es mejor o peor que otro, ese es un terreno peligroso y poco útil, considero que es importante agregar nuevas herramientas a nuestro Stack, personalmente me ayuda a tener una perspectiva más amplia y a abordar problemas con enfoques diferentes. Bueno, ahora conozcamos un poco de Materialize, así que te presento las principales razones por las que a mí me gusta este Framework:
- Utiliza elementos y principios de Material Design.
- Enfocado en las experiencia de usuario.
- Amplia paleta de colores.
- La dependencia de JQuery es opcional (En la actual versión de desarrollo).
- Gran variedad de componentes con diseños muy bien trabajados.
La paleta de colores
Como mencioné antes, Materialize cuenta con una amplia paleta de colores que puedes revisar en su web aquí, su uso es bastante sencillo: Colocas el nombre del color como clase del elemento (teal, red, pink, purple, entre otros), opcionalmente puedes colocar una clase como modificador (darken, lighten o accent) unido con un guión a un número del uno al cuatro (al cinco en el caso de lighten). Veamos un ejemplo.
See the Pen materialize-test-colors by Orlando Monteverde (@orlmonteverde) on CodePen.
Solo por mostrar algunos, la misma paleta de colores puede aplicarse a los textos añadiendo -text después del color y text- antes del modificador, por ejemplo: teal-text text-darken-1. No hay mucho más que decir, tiene una amplia variedad de colores, así que a probar y disfrutar de las combinaciones.
Solo por mostrar algunos, la misma paleta de colores puede aplicarse a los textos añadiendo -text después del color y text- antes del modificador, por ejemplo: teal-text text-darken-1. No hay mucho más que decir, tiene una amplia variedad de colores, así que a probar y disfrutar de las combinaciones.
El modelo de Rejillas
Materialize emplea un sistema de doce columnas como la mayoría de los frameworks de este tipo, si ya has usado alguno de estos, te resultará bastante familiar. En primer lugar están los contenedores (container), permiten agrupar secciones dentro de un contenedor centrado de un tamaño aproximado del 70% del ancho del elemento que lo contiene.Luego tenemos las filas (row) y columnas (col), las columnas viven dentro de filas, es decir requieres un elemento con la clase row envolviendo a los elementos con la clase col, el ancho de las columnas se define una letra (s para small, m para medium, l para large y xl para extra-large) junto a un número del uno al doce, por ejemplo: s12 representaría una columna que ocupe todo el ancho de las fila en tamaño pequeño/mobile, este será el ancho definitivo del elemento a no ser que se coloquen clases para algún otro tamaño, en dado caso se ajustará según le indiquemos al llegar alcanzar el tamaño de pantalla establecido.
Layout básico
Como pueden ver realmente es bastante sencillo comenzar a usar Materialize en sus proyectos, lo invito a indagar en la documentación oficial, aunque pronto estaremos publicando más tutoriales sobre este interesante Framework.
Espero que esta publicación les resulte de utilidad, que los motive a meter las manos en el código y realizar pruebas por su cuenta. Un placer tenerlos por aquí, no duden en visitarnos pronto. Hasta la próxima.
