Con 3 ficheros CSS vamos a crear una página responsive design sencilla y escalable. Una forma minimalista de realizar páginas adaptables sin divorciarnos de la metodología Mobile-first. Esta técnica se llama Split media CSS.
En el siguiente ejemplo vamos a diseñar un título (<h1>) que será de color rojo en móvil y naranja en escritorio.
Primero creamos un fichero CSS con el nombre base.css, en su interior los estilos generales que contendrán todos los títulos en todas las páginas.
h1 {
font-family: arial;
text-align: center;
padding: 1rem;
}
Ahora un fichero CSS con el nombre de mobile.css y dentro los estilos que dispondrá únicamente en smartphones.
h1 {
color: red;
}
Después declararemos otro fichero CSS con el nombre de desktop.css con el siguiente contenido.
h1 {
color: orange;
}
Ahora escribimos el HTML que unirá todo.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Ejemplo Split media</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<link href="base.css" rel="stylesheet">
<link href="mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
<link href="desktop.css" rel="stylesheet" media="all and (min-width: 600px)">
</head>
<body>
<h1>Gravida arcu ac tortor.</h1>
</body>
</html>
Al final conseguiremos el siguiente resultado.
Patrón 7-1 lite
Para usar una estructura de carpetas sencilla y bien distribuida del CSS no hay nada como usar SASS con algún patrón de arquitectura.
Nuestro HTML no cambiaría.
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<link href="css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
<link href="css/desktop.css" rel="stylesheet" media="all and (min-width: 600px)">
No obstante sería necesario crear un sistema de carpetas y ficheros que fuera lo suficiente claro para ser autoexplicativo. En este caso una versión reducida del patrón 7-1 (visto en Conviértete en arquitecto CSS) vendrá como anillo al dedo. Puedes decargar una patrón 7-1 Lite usando Split Media.
sass/
|– mobile/
|– _header.sass
|– _footer.sass
|– pages/
|– _home.sass
|– _contact.sass
|– desktop/
|– _header.sass
|– _footer.sass
|– pages/
|– _home.sass
|– _contact.sass
|– _base.sass
|– _mixins.sass
|– _typography.sass
|– _variables.sass
|– vendors/
|– _bootstrap.sass
|– _jquery-ui.sass
...
|– mobile.sass
|– desktop.sass
{{ comments.length }} comentarios