EASY LAYOUT

EASY LAYOUT es una herramienta que permite una maquetación y diseño estandar que permite al desarrollador centrarse en los contenidos.

Implementación:

Inserta el siguirente codigo en el "HEAD":


<script type="text/javascript" src="https://developers.disonet.com/core.js"></script>
LOGO
CSS
se aplica la clase "logo" cuando se quiere incluir una imagen de tipo logo dentro de una tarjeta.
JS
Hay que utilizar la función
logo("[url img]","[cover | content]")
para especificar la imagen que queramos y definir como aparecerá en la tarjeta.
EJEMPLO:


CSS
<div class='card card-1 height-19 green logo'></div>
JS
<script>logo('./DEV_TOOLS_Logo.png' , 'content'); </script>
TAMAÑOS LAYOUT
Para definir los tamaños de las tarjetas se usan las clases:
.card-1 -> para hacer una tarjeta que ocupe la totalidad del contenedor.
.card-2 -> para crear una tarjeta que ocupe la mitad del contenedor.
.card-3 -> para crear una tarjeta que ocupe 1/3 del contenedor.
.card-4 -> para crear una tarjeta que ocupe 1/4 del contenedor.

Se pueden anidar unas tarjetas dentro de otras
.card-1
.card-2
.card-2
.card-3
.card-3
.card-3
.card-4
.card-4
.card-4
.card-4
.card-4
.card-2
.card-4
.card-1
.card-2
.card-4
.card-4
Usando .card-full se pueden crear elementos que ocupen la totalidad de la anchura.
.card-1-full
.card-1-full
.card-1
.card-2
.card-2-full
.card-3
.card-3-full
.card-3
.card-2-full
.card-2-full
.card-3-full
.card-3-full
.card-3-full
.card-4-full
.card-4-full
.card-4-full
.card-4-full
COLORES PREDEFINIDOS
Para utilizar los colores predefinidos se usan las clases:
.red
.green
.blue
.pink
.dark
.white
.grey
.purple
.orange
.yellow
ALTURAS PREDEFINIDAS
Para modificar el tamaño de las tarjetas se usan las clases:
Medidas en PX
.height-1 = 10px
.height-2 = 20px
.height-3 = 30px
.height-4 = 40px
.height-5 = 50px
.height-6 = 60px
.height-7 = 70px
.height-8 = 80px
.height-9 = 90px
Medidas en EM
.height-em-1 = 1em
.height-em-2 = 2em
.height-em-3 = 3em
.height-em-4 = 4em
.height-em-5 = 5em
.height-em-6 = 6em
.height-em-7 = 7em
.height-em-8 = 8em
.height-em-9 = 9em
REDONDEO DE BORDES
Para modificar los bordes de las tarjetas se usan las clases:
.border-round-1
.border-round-2
.border-round-3
.border-round-4
INPUT
Para dar estilo a los elementos de tipo input se usan las clases:
.button
Documentación en desarrollo...
Faltan elementos por incluir y documentar