Completar la maquetación de un sitio web implica dominar detalles que van desde el sistema de grid responsive hasta la correcta aplicación de sombras y la sobreescritura de estilos de un framework. Aquí se recorre paso a paso cómo finalizar el archivo index.html usando Materialize CSS, aplicando clases de sombra, ajustando el input de búsqueda y construyendo un footer personalizado.
¿Cómo funciona el sistema de grid responsive en Materialize?
El sistema de grid de doce columnas es la base para lograr un diseño adaptable a distintos tamaños de pantalla. Cada card del blog recibe tres clases diferentes según el breakpoint [0:38]:
- En pantallas large: cada card ocupa tres columnas, mostrándose cuatro elementos por fila.
- En pantallas medianas: cada card ocupa seis columnas, quedando dos por fila.
- En pantallas chicas: cada card ocupa doce columnas, apilándose de forma vertical.
Este comportamiento se define directamente en el HTML con clases como col l3 m6 s12. De esta manera, sin escribir media queries manuales, el contenido se redistribuye automáticamente y el resultado visual es mucho más atractivo en cualquier dispositivo.
¿Cómo aplicar sombras con las clases z-depth de Materialize?
Materialize ofrece clases predefinidas para agregar sombras a los elementos, conocidas como z-depth [2:22]. Funcionan con una escala numérica que va de cero (sin sombra) hasta cinco (sombra muy pronunciada), simulando diferentes niveles de elevación.
Para el proyecto se utilizó la clase z-depth-2 tanto en la imagen principal como en el logo:
html
<img class="z-depth-2" src="img/logo.png" alt="Logo">
El efecto es sutil pero marca una diferencia importante: el logo pasa de verse plano a tener profundidad, lo que mejora notablemente la apariencia del diseño [2:55].
¿Cómo sobreescribir estilos de Materialize con CSS propio?
Uno de los retos más comunes al trabajar con frameworks CSS es lograr que los estilos personalizados tengan mayor especificidad que los del framework. Materialize asigna estilos por defecto a clases como .input-field, y si simplemente se crea una clase propia separada, los estilos no se aplican [4:05].
La solución consiste en encadenar selectores pegando la clase de Materialize junto con la clase personalizada:
css
.input-field.input-container {
height: 100px;
float: none;
display: flex;
margin: 0 auto;
}
Este patrón aprovecha el principio de cascada (cascade) de CSS: al combinar ambas clases sin espacio, se aumenta la especificidad y se logra que los estilos propios prevalezcan sobre los del framework [4:30].
¿Cómo centrar y ajustar el input de búsqueda?
Para posicionar correctamente el ícono y el campo de texto se usó el sistema de herencia de CSS con un selector que apunta del padre al hijo mediante su ID [5:10]:
css
.input-field > #search {
margin-top: 25px;
}
.input-container i {
margin-top: 45px;
margin-right: 15px;
}
El operador > indica una relación directa padre-hijo, lo que resulta muy preciso para aplicar estilos sin afectar otros elementos.
¿Cómo construir un footer básico con estilos personalizados?
El footer se genera con la etiqueta semántica <footer> y una clase propia llamada page-footer [6:25]. Al igual que con el input, los estilos se encadenan para sobreescribir los valores por defecto de Materialize:
css
footer.page-footer {
height: 80px;
background: grey;
bottom: 0;
}
Con apenas tres propiedades se obtiene un pie de página funcional que cierra visualmente la estructura del index.html.
Con el index terminado y las imágenes actualizadas en cada card, el siguiente paso es construir el archivo post.html para mostrar el detalle completo de cada entrada del blog. Si te quedó alguna duda sobre la especificidad en CSS o el uso de z-depth, compártela en los comentarios.
