Various

En esta sección le presentamos una variedad de clases con las que puede estilizar su aplicación web.

Container

El contenedor es la caja con un espacio de 1em a cada lado.

Example

Open in new tab
Container example

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

CSS class names.

Class Description
"nkn-container" Nos permite tener padding de 1em a cada lado de la caja.

Clear floating elements

El framework Unkuna CSS cuenta con la clase "nkn-clear" para solucionar el problema que se genera al flotar elementos.

Example

Open in new tab

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

CSS class names.

Class Description
"nkn-clear" Utiliza este clase en el elemento padre del elemento flotado.
"nkn-left" Para flotar a la izquierda.
"nkn-right" Para flotar a la derecha.

Hide - Show

Usando una de las clases "nkn-hide", "nkn-hide-s", "nkn-hide-m", "nkn-hide-l" podemos esconder elementos HTML en diferentes tamaños de dispositivos, como tambien mostrar un elemento HTML usando la clase "nkn-show".

Example

Open in new tab

To hide the element on a device of any size.

This item is hidden on devices smaller than or equal to 768px.

This item is hidden on devices that are between 769 px at 1024px

This item is hidden on devices larger than 1024px

To show the element on a device of any size.

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

CSS class names.

Class Description
"nkn-hide" Para esconder el elemento en cualquier tamaño de dispositivo.
"nkn-show" Para mostrar el elemento en cualquier tamaño de dispositivo.
"nkn-hide-s" Para esconder el elemento HTML en dispositivos menores e igual a 768px.
"nkn-hide-m" Para esconder el elemento HTML en dispositivos que esten entre 769px y 992px de tamaño.
"nkn-hide-l" Para esconder el elemento HTML en dispositivos mayores o iguales a 993px.

Pointer

Con esta clase hacemos que el cursos cambie para invitar al usuario hacer click.

Example

Open in new tab

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

CSS class names.

Class Description
"nkn-pointer" Para que el cursor en un elemento HTML dado tenga cursor tipo pointer.

Alignment

Tenemos las clases "nkn-center", "nkn-text-justify", "nkn-text-left", "nkn-text-right" para dar alineación a los textos y tambien se puede utilizar en otros elementos para tener las alineaciones mencionadas.

Example

Open in new tab

Justified text using "nkn-text-justify"

Text to the left using the class "nkn-text-left"

Center text using the class "nkn-text-center"

Text to the right using the class "nkn-text-right"

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

CSS class names.

Class Description
"nkn-center" Esta clase centra el texto.
"nkn-text-justify" Esta clase justifica el texto.
"nkn-text-left" Esta clase alinea el texto a la izquierda.
"nkn-text-right" Esta clase alinea el texto a la derecha.

Padding

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consectetur cumque doloremque excepturi fugit ipsam, iste, maxime modi nemo non officiis quidem repudiandae voluptate? Architecto est libero magnam numquam sed.

Example

Open in new tab

0.5rem padding for the 4 sides of the box

0.5rem top padding

0.5rem right padding

0.5rem bottom padding

0.5rem left padding

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

CSS class names.

Class Description
"nkn-padding" Relleno en los 4 lados de la caja.
"nkn-padding-right" Relleno a la derecha de la caja.
"nkn-padding-left" Relleno a la izquierda de la caja.
"nkn-padding-top" Relleno arriba de la caja.
"nkn-padding-bottom" Relleno debajo de la caja.

Marging

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consectetur cumque doloremque excepturi fugit ipsam, iste, maxime modi nemo non officiis quidem repudiandae voluptate? Architecto est libero magnam numquam sed.

Example

Open in new tab

0.5rem margin for the 4 sides of the box

0.5rem top margin

0.5rem right margin

0.5rem bottom margin

0.5rem left margin

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

CSS class names.

Class Description
"nkn-margin" Margen en los 4 lados de la caja.
"nkn-margin-right" Margen a la derecha de la caja.
"nkn-margin-left" Margen a la izquierda de la caja.
"nkn-margin-top" Margen arriba de la caja.
"nkn-margin-bottom" Margen debajo de la caja.

Border

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consectetur cumque doloremque excepturi fugit ipsam, iste, maxime modi nemo non officiis quidem repudiandae voluptate? Architecto est libero magnam numquam sed.

Example

Open in new tab

Border example

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

CSS class names.

Class Description
"nkn-border" Agrega un borde solido al elemento

Center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consectetur cumque doloremque excepturi fugit ipsam, iste, maxime modi nemo non officiis quidem repudiandae voluptate? Architecto est libero magnam numquam sed.

Example

Open in new tab
Box centered horizontally.

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

CSS class names.

Class Description
"nkn-center" Centra el contenido