Skip to content

Instantly share code, notes, and snippets.

@kurotori

kurotori/Notas.md

Last active May 28, 2025 21:37
Show Gist options
  • Save kurotori/cace45574e8e021cd39bef96d8b75a50 to your computer and use it in GitHub Desktop.
Save kurotori/cace45574e8e021cd39bef96d8b75a50 to your computer and use it in GitHub Desktop.
Download ZIP
Ejemplo de Diseño Adaptable Básico
Raw
estilo.css
body,html{
width: 100%;
height: 100%;
margin: 0px;
}
/* Clases base para filas y columnas */
.fila{
width: 100%;
position: relative;
}
.columna{
height: 100%;
position: relative;
float: left;
}
/* Clases utilitarias: Permiten agregar propiedades concretas al elemento*/
/* Ejemplo Dimensiones en porcentaje */
/* Clases para altura */
.altura-010 { height: 10%; }
.altura-020 { height: 20%; }
.altura-025 { height: 25%; } /* 1/4 */
.altura-030 { height: 30%; }
.altura-033 { height: 33.333333%; } /* 1/3 */
.altura-040 { height: 40%; }
.altura-050 { height: 50%; }
.altura-060 { height: 60%; }
.altura-066 { height: calc(100% * 2 / 3); }
.altura-070 { height: 70%; }
.altura-075 { height: 75%; } /* 3/4 */
.altura-080 { height: 80%; }
.altura-090 { height: 90%; }
.altura-100 { height: 100%; }
/* Clases para ancho */
.ancho-010 { width: 10%; }
.ancho-020 { width: 20%; }
.ancho-025 { width: 25%; } /* 1/4 */
.ancho-030 { width: 30%; }
.ancho-033 { width: 33.333333%; } /* 1/3 */
.ancho-040 { width: 40%; }
.ancho-050 { width: 50%; }
.ancho-060 { width: 60%; }
.ancho-070 { width: 70%; }
.ancho-075 { width: 75%; } /* 3/4 */
.ancho-080 { width: 80%; }
.ancho-090 { width: 90%; }
.ancho-100 { width: 100%; }
/* Clases para altura (basado en una cuadrícula de 12) */
.altura-1-12 { height: calc(100% / 12); }
.altura-2-12 { height: calc(100% * 2 / 12); }
.altura-3-12 { height: calc(100% * 3 / 12); }
.altura-4-12 { height: calc(100% * 4 / 12); }
.altura-5-12 { height: calc(100% * 5 / 12); }
.altura-6-12 { height: calc(100% * 6 / 12); }
.altura-7-12 { height: calc(100% * 7 / 12); }
.altura-8-12 { height: calc(100% * 8 / 12); }
.altura-9-12 { height: calc(100% * 9 / 12); }
.altura-10-12 { height: calc(100% * 10 / 12); }
.altura-11-12 { height: calc(100% * 11 / 12); }
.altura-12-12 { height: calc(100% * 12 / 12); }
/* Clases para ancho (basado en una cuadrícula de 12) */
.ancho-1-12 { width: calc(100% / 12); }
.ancho-2-12 { width: calc(100% * 2 / 12); }
.ancho-3-12 { width: calc(100% * 3 / 12); }
.ancho-4-12 { width: calc(100% * 4 / 12); }
.ancho-5-12 { width: calc(100% * 5 / 12); }
.ancho-6-12 { width: calc(100% * 6 / 12); }
.ancho-7-12 { width: calc(100% * 7 / 12); }
.ancho-8-12 { width: calc(100% * 8 / 12); }
.ancho-9-12 { width: calc(100% * 9 / 12); }
.ancho-10-12 { width: calc(100% * 10 / 12); }
.ancho-11-12 { width: calc(100% * 11 / 12); }
.ancho-12-12 { width: calc(100% * 12 / 12); }
/* Bordes */
.borde-negro-1p{
border: 1px solid black;
top: -1px;
left: -1px;
}
/* Relaciones de aspecto de tamaño */
.esCuadrado{
aspect-ratio: 1 / 1;
}
.esCirculo{
border-radius: 50%;
}
/* Posicionamiento */
.aLaIzquierda{
position: absolute;
left: 0px;
right: auto;
}
.aLaDerecha{
position: absolute;
left: auto;
right: 0px;
}
.centrarContenido{
display: flex;
justify-content: center;
}
/* */
.post-contenedor{
margin-top: 5%;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div class="fila altura-3-12 borde-negro-1p" id="encabezado">
<div class="columna ancho-4-12" id="uno">
<div class="fila altura-075 borde-negro-1p">
<div class="columna borde-negro-1p esCuadrado" id="logo" ></div>
</div>
</div>
<div class="columna ancho-5-12" id="dos"></div>
<div class="columna ancho-3-12" id="tres">
<div class="fila altura-066"></div>
<div class="fila altura-033 borde-negro-1p">
<div class="columna"></div>
<div class="columna esCuadrado aLaDerecha borde-negro-1p esCirculo"></div>
</div>
</div>
</div>
<div class="fila altura-1-12 borde-negro-1p" id="navegacion">
<div class="fila altura-050 borde-negro-1p" id="navegacion1"></div>
<div class="fila altura-050" id="navegacion2"></div>
</div>
<div class="fila altura-8-12 borde-negro-1p" id="principal">
<div class="columna ancho-2-12 borde-negro-1p" id="menu">
<div class="columna ancho-090 aLaDerecha" id="">
<div class="fila altura-010 borde-negro-1p">
<div class="columna esCuadrado borde-negro-1p"></div>
</div>
<div class="fila altura-010 borde-negro-1p">
<div class="columna esCuadrado borde-negro-1p"></div>
</div>
<div class="fila altura-010 borde-negro-1p">
<div class="columna esCuadrado borde-negro-1p"></div>
</div>
<div class="fila altura-010 borde-negro-1p">
<div class="columna esCuadrado borde-negro-1p"></div>
</div>
</div>
</div>
<div class="columna ancho-9-12 borde-negro-1p" id="contenido">
<div class="fila altura-040 centrarContenido post-contenedor" id="post-contenedor">
<div class="columna ancho-080 borde-negro-1p">
<div class="fila altura-020 borde-negro-1p"></div>
<div class="fila altura-090"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
Notas.md

Boceto del Diseño

Se puede ver el resultado en CodePen diseño03

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment