Para todos aquellos que quieren trabajar con algo diferente pero no quieren deshacer-se de la grid de bootstrap.
Materialgrid es una modificación de Materialize que sustituye el sistema de grid que materialize incluye por el sistema de grid de Bootstrap.
- Instalar Materializecss, ya sea la versión CSS o la SASS.
- Remplaza la carpeta css o la sccs (SASS) dependiedo de la versión escogida.
- ¡Listo!
El uso de materialgrid es secillo, es el mismo que el materialize original excepto que, en vez de usar sus clases de grid, debes usar las de Bootstrap.
Una pequeña guía de las clases y sus dimensiones (# tiene que ser reemplazado por la cantidad de columnas deseadas, 12 columnas representa el 100% del contenedor del elemento.)
| Clase | Pixeles | Dispositivo |
|---|---|---|
| .col-xs-# | <768px | Moviles |
| .col-sm-# | ≥768px | Tablets |
| .col-md-# | ≥992px | Portátiles |
| .col-lg-# | ≥1200px | Escritorios de sobremesa. |
For all those who want to work with something different but want also to keep the bootstrap grid system.
Materialgrid is a modification of Materialize that implements the Bootstrap grid system into materialize replacing it.
- Install Materializecss, either the CSS or the SASS one.
- Replace css or sccs folders depending on the version you're using.
- Done!
To use materialgrid read the Materialize wiki and use it as it is written there but replace the grid system clases by the ones from Bootstrap.
Here is a basic guide on how does the Bootstrap grid system work: (# has to be replaced with the number of desired columns, 12 columns represents a 100% of the element's width).
| Class | Pixels | Device |
|---|---|---|
| .col-xs-# | <768px | Phone |
| .col-sm-# | ≥768px | Tablet |
| .col-md-# | ≥992px | Laptop |
| .col-lg-# | ≥1200px | Desktop |