Una app de escritorio en HTML y Sass
Reproducir una interfaz conocida, con tres columnas y un reproductor fijo, sin JavaScript ni librerías.
Volver a proyectos
N.º 004 · Maquetación
Spotify
Maqueto interfaces complejas con CSS Grid y Sass modular: esta réplica de Spotify se adapta a cualquier pantalla sin una línea de JavaScript.
- Año
- 2026
- Tipo
- Práctica de maquetación
- Rol
- Desarrollo front-end
- Stack
- HTML5 · Sass · CSS Grid
Reto, solución y resultado
Una grilla con áreas nombradas
Toda la app se organiza con grid-template-areas; los estilos se dividen en abstracts, base, components y layout.
Fiel al original, en cualquier pantalla
La vista del sencillo «Terminal 2F» pasa de tres columnas a una sin perder el reproductor.
Lo destacado
Cómo está construida
Cuatro componentes, una grilla
Barra lateral con la biblioteca, vista principal con portada, pistas y discografía, panel de reproducción y reproductor fijo. Cada uno vive en su propio parcial de Sass.
Sass ordenado
Variables documentadas por grupo, mixins como rem(), truncar-texto() o circulo(), y placeholders como %panel para no repetir estilos.
Fiel a los colores
Fondos #121212 y #181818, el verde #1db954 y el gris #b3b3b3 del texto secundario, tomados de la interfaz original.
Una decisión técnica
Una grilla para toda la app
Las áreas con nombre describen el layout como un mapa: barra izquierda, principal, barra derecha y, abajo, el reproductor de lado a lado.
Para tablet y móvil basta con redibujar ese mapa en cada media query; ningún componente cambia de lugar en el HTML.
.spotify__app {
display: grid;
height: 100dvh;
grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr) minmax(220px, 1fr);
grid-template-rows: minmax(0, 1fr) 72px;
grid-template-areas:
"lateral-izquierda principal lateral-derecha"
"reproductor reproductor reproductor";
}
// Tablet: el panel derecho se oculta y quedan dos columnas.
@media (max-width: 1024px) {
.spotify__app {
grid-template-areas:
"lateral-izquierda principal"
"reproductor reproductor";
}
}
Una grilla, tres layouts
De tres columnas a una, sin perder el reproductor
