Creado con ♥️ por: Bohdan Shila
Versión: 1.0
Para sugerencias de mejora: [email protected]
Usa este framework para separar elementos de tu web con un sistema sencillo, ordenado y responsive.
✅ Compatible con cualquier CMS y constructor visual
✅ Instala y configura en 2 minutos
Si quieres enterarte cuando mejore este framework o publique frameworks nuevos, deja tu correo aquí:
https://acumbamail.com/newform/web/SAD16wUa1u1fwZ53z9sD5J1uTV6WH5sX8VMnH2pS/42235/
Sigue las instrucciones de abajo o mira el tutorial en video para seguirlo paso a paso.
Aviso: los ejemplos puestos en el documento se basan en WordPress pero puedes usar este framework en cualquier otro CMS.
https://www.loom.com/share/95c06963962d49d4ae184656ec09816c?sid=29e5f965-ca9c-49c6-9901-14092ad25cf1
He preparado este código que puedes insertar en cualquier página para que puedas previsualizar la aplicación de paddings y gaps en diferentes tamaños.
<style>
h2 {
margin-bottom: 0.5em
}
.bp-spacing-test-div {
background-color:#eee;
border: 2px solid #777;
line-height:1
}
.gap-test {
display:flex;
width:100%
}
.gap-test .bp-spacing-test-div {
padding:48px;
width:100%
}
</style>
<h2>Paddings</h2>
<div class="bp-spacing-test-div p-1">Este bloque lleva un padding de .p-1</div><br>
<div class="bp-spacing-test-div p-15">Este bloque lleva un padding de .p-15</div><br>
<div class="bp-spacing-test-div p-2">Este bloque lleva un padding de .p-2</div><br>
<div class="bp-spacing-test-div p-25">Este bloque lleva un padding de .p-25</div><br>
<div class="bp-spacing-test-div p-3">Este bloque lleva un padding de .p-3</div><br>
<div class="bp-spacing-test-div p-35">Este bloque lleva un padding de .p-35</div><br>
<div class="bp-spacing-test-div p-4">Este bloque lleva un padding de .p-4</div><br>
<br>
<br>
<h2>Gaps</h2>
<div class="gap-test gap-1">
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-1</div>
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-1</div>
</div><br><hr><br>
<div class="gap-test gap-15">
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-15</div>
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-15</div>
</div><br><hr><br>
<div class="gap-test gap-2">
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-2</div>
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-2</div>
</div><br><hr><br>
<div class="gap-test gap-25">
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-25</div>
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-25</div>
</div><br><hr><br>
<div class="gap-test gap-3">
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-3</div>
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-3</div>
</div><br><hr><br>
<div class="gap-test gap-35">
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-35</div>
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-35</div>
</div><br><hr><br>
<div class="gap-test gap-4">
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-4</div>
<div class="bp-spacing-test-div">Estas columnas tienen un gap de .gap-4</div>
</div><br>
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
:root {
/*Personalizar el framework*/
--unit: 1.6;
--reduction: 0.5;
--screenSpacingMin: 480;
--screenSpacingMax: 1600;
/*No tocar nada a partir de esta línea*/
--fluidSpacingFromCalc: calc(var(--screenSpacingMax) / 10 * 1rem);
--fluidSpacingToCalc: calc(var(--screenSpacingMin) / 10 * 1rem);
/*Paddings*/
/* .p-1 */
--p1-max: calc(var(--unit) * 1);
--p1-min: calc(var(--p1-max) * var(--reduction));
/* .p-15 */
--p15-max: calc(var(--unit) * 1.5);
--p15-min: calc(var(--p15-max) * var(--reduction));
/* .p-2 */
--p2-max: calc(var(--unit) * 2);
--p2-min: calc(var(--p2-max) * var(--reduction));
/* .p-25 */
--p25-max: calc(var(--unit) * 2.5);
--p25-min: calc(var(--p25-max) * var(--reduction));
/* .p-3 */
--p3-max: calc(var(--unit) * 3);
--p3-min: calc(var(--p3-max) * var(--reduction));
/* .p-35 */
--p35-max: calc(var(--unit) * 3.5);
--p35-min: calc(var(--p35-max) * var(--reduction));
/* .p-4 */
--p4-max: calc(var(--unit) * 4);
--p4-min: calc(var(--p4-max) * var(--reduction));
/*Gaps*/
/*.gap-1*/
--gap1-max: calc(var(--unit) * 1);
--gap1-min: calc(var(--gap1-max) * var(--reduction));
/*.gap-15*/
--gap15-max: calc(var(--unit) * 1.5);
--gap15-min: calc(var(--gap15-max) * var(--reduction));
/*.gap-2*/
--gap2-max: calc(var(--unit) * 2);
--gap2-min: calc(var(--gap2-max) * var(--reduction));
/*.gap-25*/
--gap25-max: calc(var(--unit) * 2.5);
--gap25-min: calc(var(--gap25-max) * var(--reduction));
/*.gap-3*/
--gap3-max: calc(var(--unit) * 3);
--gap3-min: calc(var(--gap3-max) * var(--reduction));
/*.gap-35*/
--gap35-max: calc(var(--unit) * 3.5);
--gap35-min: calc(var(--gap35-max) * var(--reduction));
/*.gap-4*/
--gap4-max: calc(var(--unit) * 4);
--gap4-min: calc(var(--gap4-max) * var(--reduction));
/*Free variables*/
--unit-max: calc(var(--unit) * 1);
--unit-min: calc(var(--unit-max) * var(--reduction));
--unitFrom: calc(var(--unit-max) * 1rem);
--unitTo: calc(var(--unit-min) * 1rem);
--fluidUnit: calc(var(--unitTo) + (var(--unit-max) - var(--unit-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
--u1: clamp(var(--unitTo), var(--fluidUnit), var(--unitFrom));
--u05: calc( var(--u1) * 0.5);
--u15: calc( var(--u1) * 1.5);
--u2: calc( var(--u1) * 2);
--u25: calc( var(--u1) * 2.5);
--u3: calc( var(--u1) * 3);
--u35: calc( var(--u1) * 3.5);
--u4: calc( var(--u1) * 4);
--u45: calc( var(--u1) * 4.5);
--u5: calc( var(--u1) * 5);
}
/*Classes*/
/*--Paddings*/
.p-1 {
--p1From: calc(var(--p1-max) * 1rem);
--p1To: calc(var(--p1-min) * 1rem);
--fluidp1: calc(var(--p1To) + (var(--p1-max) - var(--p1-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
padding: clamp(var(--p1To), var(--fluidp1), var(--p1From));
}
.p-15 {
--p15From: calc(var(--p15-max) * 1rem);
--p15To: calc(var(--p15-min) * 1rem);
--fluidp15: calc(var(--p15To) + (var(--p15-max) - var(--p15-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
padding: clamp(var(--p15To), var(--fluidp15), var(--p15From));
}
.p-2 {
--p2From: calc(var(--p2-max) * 1rem);
--p2To: calc(var(--p2-min) * 1rem);
--fluidp2: calc(var(--p2To) + (var(--p2-max) - var(--p2-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
padding: clamp(var(--p2To), var(--fluidp2), var(--p2From));
}
.p-25 {
--p25From: calc(var(--p25-max) * 1rem);
--p25To: calc(var(--p25-min) * 1rem);
--fluidp25: calc(var(--p25To) + (var(--p25-max) - var(--p25-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
padding: clamp(var(--p25To), var(--fluidp25), var(--p25From));
}
.p-3 {
--p3From: calc(var(--p3-max) * 1rem);
--p3To: calc(var(--p3-min) * 1rem);
--fluidp3: calc(var(--p3To) + (var(--p3-max) - var(--p3-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
padding: clamp(var(--p3To), var(--fluidp3), var(--p3From));
}
.p-35 {
--p35From: calc(var(--p35-max) * 1rem);
--p35To: calc(var(--p35-min) * 1rem);
--fluidp35: calc(var(--p35To) + (var(--p35-max) - var(--p35-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
padding: clamp(var(--p35To), var(--fluidp35), var(--p35From));
}
.p-4 {
--p4From: calc(var(--p4-max) * 1rem);
--p4To: calc(var(--p4-min) * 1rem);
--fluidp4: calc(var(--p4To) + (var(--p4-max) - var(--p4-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
padding: clamp(var(--p4To), var(--fluidp4), var(--p4From));
}
/*--Gaps*/
.gap-1 {
--gap1From: calc(var(--gap1-max) * 1rem);
--gap1To: calc(var(--gap1-min) * 1rem);
--fluidgap1: calc(var(--gap1To) + (var(--gap1-max) - var(--gap1-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
gap: clamp(var(--gap1To), var(--fluidgap1), var(--gap1From));
}
.gap-15 {
--unitFrom: calc(var(--gap15-max) * 1rem);
--unitTo: calc(var(--gap15-min) * 1rem);
--fluidgap15: calc(var(--unitTo) + (var(--gap15-max) - var(--gap15-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
gap: clamp(var(--unitTo), var(--fluidgap15), var(--unitFrom));
}
.gap-2 {
--gap2From: calc(var(--gap2-max) * 1rem);
--gap2To: calc(var(--gap2-min) * 1rem);
--fluidgap2: calc(var(--gap2To) + (var(--gap2-max) - var(--gap2-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
gap: clamp(var(--gap2To), var(--fluidgap2), var(--gap2From));
}
.gap-25 {
--unitFrom: calc(var(--gap25-max) * 1rem);
--unitTo: calc(var(--gap25-min) * 1rem);
--fluidgap25: calc(var(--unitTo) + (var(--gap25-max) - var(--gap25-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
gap: clamp(var(--unitTo), var(--fluidgap25), var(--unitFrom));
}
.gap-3 {
--gap3From: calc(var(--gap3-max) * 1rem);
--gap3To: calc(var(--gap3-min) * 1rem);
--fluidgap3: calc(var(--gap3To) + (var(--gap3-max) - var(--gap3-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
gap: clamp(var(--gap3To), var(--fluidgap3), var(--gap3From));
}
.gap-35 {
--unitFrom: calc(var(--gap35-max) * 1rem);
--unitTo: calc(var(--gap35-min) * 1rem);
--fluidgap35: calc(var(--unitTo) + (var(--gap35-max) - var(--gap35-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
gap: clamp(var(--unitTo), var(--fluidgap35), var(--unitFrom));
}
.gap-4 {
--gap4From: calc(var(--gap4-max) * 1rem);
--gap4To: calc(var(--gap4-min) * 1rem);
--fluidgap4: calc(var(--gap4To) + (var(--gap4-max) - var(--gap4-min)) * ((100vw - var(--fluidSpacingToCalc)) / ((var(--screenSpacingMax) / 10) - (var(--screenSpacingMin) / 10))));
gap: clamp(var(--gap4To), var(--fluidgap4), var(--gap4From));
}
Puedes insertar este CSS en el personalizador de WordPress
Puedes insertar el CSS con el plugin Code Snippets
Usa la opción de HTML y envuelve el código en las etiquetas <style></style> para insertar el CSS sin usar la versión de pago del plugin.
Recuerda marcar esta opción al activar el snippet:
