Helpers

Archivo helpers.scss

Los helpers son ayudas al trabajo a través de clases.

Ancho de elementos

Puede usar las mismas clases de los ed-item.

<div class="m-60">
<!--Este elemento mide 60% a partir de 640px-->
</div>
<div class="xl-1-3">
<!-- Este elemento mide 33.33% a partir de 1440px-->
</div>

Alineación de elementos

Se aplica al mismo elemento que se quiere alinear las clases: to-left, to-right, to-center. Para que funcione debe especificar un ancho también.

<div class="to-left s-50"><!-- Se envia a la izquierda 50% de ancho desde small--></div>
<div class="to-right m-80"><!-- Se envia a la derecha 80% de ancho desde medium --></div>
<div class="to-center l-75"><!-- Se envia al centro 75% de ancho desde large--></div>

Alinear contenido

Use las clases left, center, right en el contenedor para que su contenido se centre.

<h2 class="center">
Soy un título centrado
</h2>

Limpiar floats

Versión CSS

<!--Version css-->
<div class="clearfix"><!-- la clase clearfix limpia los floats--></div>

Versión Sass

// Uso con Sass
.selector { @include clearfix }

Forzar ancho total

Hace que un elemento siempre mida el 100% del ancho disponible

Versión CSS

<!-- Version CSS -->
<div class="full"><!-- Este elemento medirá 100% de ancho siempre --></div>

Versión Sass

// Uso con Sass
.selector { @include full }

Hacer un elemento circular

Tenga en cuenta que si el alto y el ancho no son iguales, el elemento no será circular sino oval.

Versión CSS

<!-- Version CSS -->
<div class="circle"><!-- Este elemento será circular --></div>

Versión Sass

// Uso con Sass
.selector { @include circle }

Controlar el padding

Importante: si usa la versión con CSS Grid puede saltarse esta sección.

En EDgrid la separación entre los ed-item se genera a través de padding laterales (la separación entre uno y el siguiente es dos veces el tamaño del padding, por defecto 15px).

Puede ocurrir que en algunos casos complejos para forzar la alineación requiera añadir o quitar los padding por defecto a cualquier elemento (no solo ed-container y ed-item).

Versión CSS

<!-- Version CSS -->
<div class="padding"><!-- Añade un padding si el elemento no lo tenia --></div>
<div class="padding-2"><!-- Añade un padding doble --></div>
<div class="padding-3"><!-- Añade un padding triple --></div>
<div class="ed-container no-padding"><!-- Elimina el padding de todos sus ed-item internos--></div>
<div class="ed-item no-padding"><!-- Elimina el padding de solo este ed-item--></div>

Versión Sass

// Uso con Sass

// el mixin padding() recibe un número como parámetro
// este número puede ser 0 para eliminar el padding
.selector1 { @include padding(3) }

// El mixin noPaddingContainer tiene efecto
// solo aplicado a un .ed-container y elimina
// el padding de sus ed-item hijos
.selector2 { @include noPaddingContainer }