skellyCSS

skellyCSS

Un marco CSS liviano para implementar rápidamente esqueletos en sus proyectos.

Tabla de contenido

• skellyCSS
  • Instalación
    • npm
    • CSS
    • javascript
  • Uso rápido
  • Uso
    • Encabezados
    • Párrafos
    • Ancho de línea
    • Alineación
    • Imágenes
      • Tallas
      • formas
    • Animación
  • Utilidad JavaScript
    • Atributos de datos de JavaScript
      • Todos los atributos de datos

Instalación

npm

Para instalar a través del administrador de paquetes de nodos:

npm install @ritterim/skellycss

CSS

Incluye el archivo css de Skelly dondequiera que agregues tu CSS:

 < link rel =" stylesheet " href =" ..@ritterim/skellycss/dist/style.css " >

javascript

Incluya el archivo skelly.js dondequiera que agregue su JavaScript:

 < script src =" ..@ritterim/skellycss/dist/skelly.js " > </ script > 

Uso rápido

Puedes comenzar a usar skellyCSS rápidamente usando la utilidad JavaScript, así:

 < h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 4 " data-animation =" true " > </ p >

Consulte los documentos completos de la utilidad JavaScript a continuación

Uso

Los esqueletos se pueden agregar rápidamente a cualquier proyecto con unas simples líneas de código.

Encabezados

Aplique la clase skeleton a cualquier tipo de encabezado y se ajustará automáticamente al tamaño de fuente de los estilos del encabezado:

 < h1 class =" skeleton " > </ h1 >
< h2 class =" skeleton " > </ h2 >
< h3 class =" skeleton " > </ h3 >
< h4 class =" skeleton " > </ h4 >
< h5 class =" skeleton " > </ h5 >
< h6 class =" skeleton " > </ h6 >

Párrafos

Puede crear esqueletos de párrafo aplicando la clase skeleton a la etiqueta de párrafo y luego incluyendo tantas etiquetas de extensión como desee con la clase skeleton__line dentro del párrafo. Para que el esqueleto del párrafo se parezca más a un párrafo, la última línea se establece en un ancho del 50%.

 < div >
  < p class =" skeleton " >
    < span class =" skeleton__line " > </ span >
    < span class =" skeleton__line " > </ span >
    < span class =" skeleton__line " > </ span >
    < span class =" skeleton__line " > </ span >
  </ p >
</ div >

Ancho de línea

Puede ajustar el ancho de la línea aplicando una clase modificadora de tamaño:

Ancho	Clase modificadora
Pequeño, 25%	.skeleton--sm
Medio, 50%	.skeleton--md
Grande, 75%	.skeleton--lg
Completo, 100%	.skeleton--full

 < h1 class =" skeleton skeleton--sm " > </ h1 >
< h1 class =" skeleton skeleton--md " > </ h1 >
< h1 class =" skeleton skeleton--lg " > </ h1 >
< h1 class =" skeleton skeleton--full " > </ h1 >

Alineación

Puede alinear el esqueleto mediante texto usando clases modificadoras de alineación:

Alineación	Clase modificadora
Izquierda	.skeleton--left
Centro	.skeleton--center
Bien	.skeleton--right

 <!-- Left Align -->
< p class =" skeleton skeleton--left " >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
</ p >

<!-- Center Align -->
< p class =" skeleton skeleton--center " >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
</ p >

<!-- Right Align -->
< p class =" skeleton skeleton--right " >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
</ p >

Imágenes

Puede crear un esqueleto de imagen utilizando la clase .skeleton-image . De forma predeterminada, esto aplicará el esqueleto de la imagen al 100% de la altura y el ancho del contenedor principal.

Tallas

A continuación se muestran algunos tamaños predeterminados que hemos incluido para imágenes de esqueletos:

Tamaño	Clase modificadora
Pequeño, 50x50	.skeleton-image--sm
Mediano, 100x100	.skeleton-image--md
Grande, 200x200	.skeleton-image--lg
XL, 400x400	.skeleton-image--xl
Completo, 100% x 100%	.skeleton-image--full

 < img class =" skeleton-image skeleton-image--md " />
< img class =" skeleton-image skeleton-image--sm " />
< img class =" skeleton-image skeleton-image--lg " />
< img class =" skeleton-image skeleton-image--xl " />

formas

También puedes crear diferentes formas de imagen usando clases de modificador de forma:

Forma	Descripción	Clase modificadora
Cuadrado	Establece la relación de aspecto de la imagen en 1/1 (predeterminado)	.skeleton-image--square
Círculo	Establece el radio del borde al 50%	.skeleton-image--circle
Rectángulo del paisaje	Establece la relación de aspecto de la imagen en 4/3	.skeleton-image--landscape
Rectángulo vertical	Establece la relación de aspecto de la imagen en 3/4	.skeleton-image--portrait
Rectángulo ancho	Establece la relación de aspecto de la imagen en 16/9	.skeleton-image--wide
Rectángulo alto	Establece la relación de aspecto de la imagen en 9/16	.skeleton-image--tall

 < div class =" skeleton-image skeleton-image--lg skeleton-image--square " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--circle " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--landscape " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--portrait " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--wide " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--tall " > </ div >

Animación

Para agregar animación, agregue span.skeleton--animation dentro de los elementos .skeleton__line en encabezados o párrafos.

 < div >
  < p class =" skeleton " >
    < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
        < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
    < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
    < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
  </ p >
</ div > 

Utilidad JavaScript

La forma más fácil y preferida de agregar esqueletos es mediante las utilidades de JavaScript incluidas.

Ya sea en una etiqueta de encabezado o de párrafo, agregue la clase skeleton y un atributo data-lines con la cantidad de líneas que desea que tenga el esqueleto:

 < h2 class =" skeleton skeleton--md " data-lines =" 2 " > </ h2 >
< p class =" skeleton " data-lines =" 7 " > </ p >

También puedes darle animación al esqueleto agregando el atributo data-animation y configurándolo en true :

 < h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 7 " data-animation =" true " > </ p >

Atributos de datos de JavaScript

Puedes alterar la apariencia del esqueleto utilizando también otros atributos de datos, incluidos la opacidad y el color:

 <!-- Opacity -->
< h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 7 " data-opacity =" 0.3 " > </ p >

<!-- Color -->
< h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 7 " data-color =" tomato " > </ p > 

Todos los atributos de datos

Atributo	Descripción	Tipo
data-lines	Determina cuántas líneas generar	Entero
data-animation	Agrega animación a las líneas del esqueleto.	Booleano
data-opacity	Establece la opacidad de las líneas del esqueleto (establece la opacidad entre 0 y 1)	Flotar
data-color	Establece el color de las líneas del esqueleto.	Color