Layout

Layout del Kit Digital USS

El Kit Digital USS importa el sistema de grid de Bootstrap, el cual se compone de 12 columnas, las cuales se pueden utilizar para definir el ancho de los elementos en la página. Para utilizar el sistema de grid de Bootstrap, se debe aplicar la clase container para definir el ancho máximo del contenido, y la clase row para definir una fila, y dentro de esta fila se pueden definir las columnas con las clases col-1 hasta col-12 (con variantes como col-auto), las cuales definen el ancho de la columna en relación al ancho total de la fila.

Adicionalmente, se pueden utilizar las clases offset-1 hasta offset-11 para definir un offset de la columna, es decir, un espacio vacío antes de la columna. Ver más.

1<div class="col-2 offset-2">
2  <div>...</div>
3</div>

1Cargando...

1Cargando...

El kit tambien incorpora las clases ms- me-

El Kit Digital USS define los siguientes breakpoints para así manipular los estilos dependiedo del ancho del dispositivo donde se este visualizando la página:

1. sm : Dispositivos pequeños (teléfonos, de más de 576px)

2. md : Dispotivos medianos (tablets, de más de 1024px)

3. lg : Dispositivos grandes (desktops, de más de 1200px)

4. xl : Dispositivos extra grandes (desktops grandes, de más de 1360px)

5. xxl : Dispositivos extra extra grandes (desktops grandes, de más de 1628px)

1Cargando...

El kit digital define sus propios valores para los espaciados de los elementos, los cuales se pueden utilizar para definir el margen y el padding de los elementos. Para utilizar los espaciados, se debe utilizar la clase m- o p- , seguido del valor dentro del rango de valores definidos por el kit digital: auto, 0, 4, 8, 12, 16, 20, 24, 32, 36, 40, 48, 56, 64, 80, 128 o 160

1<span class="p-24">padding</span>
2<span class="p-0">padding</span>
3
4<span class="m-160">margin</span>
5<span class="m-56">margin</span>
6
7<span class="p-24 m-16">padding + margin</span>
8<span class="m-4 p-auto">margin + padding</span>

Tabien se pueden utilizar las varantes m o p , seguido de t- (top) , r- (right) , b- (bottom) o l- (left) , para definir el margen o el padding de un elemento en una dirección específica. o y- (top & bottom) , o x- (left & right) seguido del valor, para definir el margen o el padding de un elemento en ambas direcciones a la vez.

1<span class="pl-24">padding left</span>
2<span class="px-20">padding left + right</span>
3
4<span class="mb-auto">margin bottom</span>
5<span class="my-56">margin top + bottom</span>
6
7<span class="pt-80 mb-160">padding + margin</span>
8<span class="my-56 px-20">margin + padding</span>

El Kit Digital USS define las siguientes clases para definir el display de los elementos:

none, block, flex, inline, table, grid, inline-block, inline-flex, inline-table, inline-grid, flow-root, contents & list-item

El Kit Digital USS define las siguientes clases para manipular el display de los elementos según criterios mas especificos:

1. hide-on-mobile: Oculta el elemento en dispositivos pequeños (menores a xl)

2. show-on-mobile: Muestra el elemento en dispositivos pequeños (menores a xl)

3. hide-on-light: Oculta el elemento en dispositivos con modo claro

4. hide-on-dark: Oculta el elemento en dispositivos con modo oscuro

Tambien existen clases para alinear los elementos definidos con display flex:

• flex (direction): -row , -row-reverse , -column , -column-reverse. Ver más

1<div class="flex flex-row">...</div>
2<div class="flex flex-column">...</div>
3<div class="flex flex-row-reverse">...</div>
4<div class="flex flex-column-reverse">...</div>

• flex (wrap): -wrap , -nowrap , -wrap-reverse, -{breakpoint}-{value}, Ver más

1<div class="flex flex-wrap">...</div>
2<div class="flex flex-nowrap">...</div>
3<div class="flex flex-wrap-reverse">...</div>
4
5<div class="flex flex-md-wrap">...</div>
6<div class="flex flex-sm-nowrap">...</div>
7<div class="flex flex-xxl-wrap-reverse">...</div>

• justify-content: -srtart , -end , -center , -between , -around , -evenly, -{breakpoint}-{value}. Ver más

1<div class="flex justify-content-end">...</div>
2<div class="flex justify-content-center">...</div>
3<div class="flex justify-content-around">...</div>
4<div class="flex justify-content-evenly">...</div>
5
6<div class="flex justify-sm-content-between">...</div>
7<div class="flex justify-md-content-start">...</div>

• align-items: -start , -end , -center , -baseline , -stretch, -{breakpoint}-{value}. Ver más

1<div class="flex align-items-start">...</div>
2<div class="flex align-items-end">...</div>
3<div class="flex align-items-baseline">...</div>
4
5<div class="flex align-items-lg-center">...</div>
6<div class="flex align-item-xl-stretch">...</div>

• align-self: -start , -end , -center , -between , -around , -stretch, -{breakpoint}-{value}. Ver más

1<div class="flex align-self-start">...</div>
2<div class="flex align-self-end">...</div>
3<div class="flex align-self-center">...</div>
4
5<div class="flex align-self-sm-baseline">...</div>
6<div class="flex align-self-lg-stretch">...</div>

• order: -1, -2, -3, -4, -5,-6, -7, -8, -9, -10, -11, -12, -{breakpoint}-{value}. Ver más

1<div class="flex order-11">...</div>
2<div class="flex order-6">...</div>
3<div class="flex order-9">...</div>
4<div class="flex order-1">...</div>
5<div class="flex order-2">...</div>
6
7<div class="flex order-md-3">...</div>
8<div class="flex order-sm-4">...</div>
9<div class="flex order-lg-12">...</div>