skel-css

Esta es una biblioteca minimalista de Sass/CSS para crear RWD.

Usage no npm install needed!

<script type="module">
  import skelCss from 'https://cdn.skypack.dev/skel-css';
</script>

README

Skel

Esta es una biblioteca minimalista de Sass/CSS para crear RWD.

Comenzando 🚀

Estas instrucciones te permitirán obtener el proyecto en funcionamiento en tu máquina local para propósitos de desarrollo y pruebas.

Instalación 🔧

  • Instale los archivos fuente Sass a través de npm
    npm install --save-dev skel-css
    • Luego de haberlo instalado importe en su archivo de sass @import "~skel-css/skel"
  • Cuando solo necesite incluir CSS compilado en su última versión, puede usar el CDN
    <link href="https://unpkg.com/skel-css/src/css/skel.min.css" rel="stylesheet">
    • Para tener una versión específica reemplace @1.0.8 por la versión que desee
      <link href="https://unpkg.com/skel-css@1.0.8/src/css/skel.min.css" rel="stylesheet">

Uso 🔥

Puedes usar las siguientes variables, clases, funciones y mixins.

  1. Variables
    1. Sass
      • $breakpoints Breakpoints, valor por default: (s: 0, m: 640px, lg: 1024px, xl: 1440px)
      • $dev Estilos para el debug, valor por default: false
      • $dev-hover Estilos para el debug al hacer hover, valor por default: false
      • $max-width Ancho máximo de los contenedores, valor por default: 1200px
      • $l-unit Unidad básica para el layout, valor por default: .5rem
      • $gap Separación entre columnas, valor por default: $l-unit * 4
      • $fractions Fracciones para crear columnas, valor por default: 3 6
      • $container Clase para el contenedor flexbox, valor por default: skel-container
      • $item Clase para los items flexbox, valor por default: skel-item
      • $grid-container Clase para el contenedor grid, valor por default: skel-grid
      • $max-grid-columns Máximo número de columnas grid, valor por default: 12
    2. Css
      • --vertical-block-space valor por default: #{$l-unit * 2}
      • --vertical-content-space valor por default: #{$l-unit * 2}
      • --gap valor por default: #{$l-unit * 2}
      • --max-width valor por default: #{$max-width}
  2. Mixins
    • skel-container
    • skel-item($s,$m,$lg,$xl) Los parámetros definen el ancho den cada breakpoint, puede usar fracciones como parámetros
    • showFrom($bp) Muestra el elemento solo por encima del breakpoint especificado en el parámetro
    • showTo($bp) Muestra el elemento solo por debajo del breakpoint especificado en el parámetro
    • hideFrom($bp) Oculta el elemento por encima del breakpoint especificado en el parámetro
    • hideTo($bp) Oculta el elemento por debajo del breakpoint especificado en el parámetro
    • from($bp) Para tamaños mayores al breakpoint (parámetro)
    • to($bp) Para tamaños menores al breakpoint (parámetro)
    • fromTo($from, $to) Para tamaños comprendidos entre los dos parámetros
    • breakpoints Genera una clase para cada breakpoint anidado con el @content
    • prototype($names, $property, $value, $concat) Se usa para convetir cualquier clase en la nomenclatura de la biblioteca breakpoint-name
  3. Funciones
    • em($px) Esta función convierte un número en px a em
    • rem($px) Esta función convierte un número en px a rem
    • toPx($em|$rem) Esta función convierte un valor en rem o em a px
    • isCoreBreakpoint($bp) Devuelve true si el breakpoint es parte del core
    • isValidBreakpoint($bp) Devuelve true si el breakpoint es válido (em, rem, px)
    • getBp($bp) Obtiene un breakpoint del core
  4. Clases
    • skel-container Debe tener al menos un skel-item como hijo directo
      • full Use esta clase si desea un skel-container que mida siempre el 100% de la pantalla
    • skel-item Siempre debe ser hijo de un skel-container
      • [breakpoint]-[numero] Usar cualquier número multiplo de 5 entre 0 y 100
      • [breakpoint]-[numerador]-[denominador] Usa esta clase cuando quieras dividir el ancho entre 3 o 6
      • [breakpoint]-order-[numero] Define el orden del item donde número va de 1 hasta la variable $max-grid-columns
      • skel-container Usa esta clase para anidar contenedores e items
    • skel-grid
      • [breakpoint]-grid-[numero] Define las columnas que tendrá el contenedor
      • rows-gap Agrega una separación entre filas
      • [breakpoint]-gap-[numero] El número va de 0 a 4 con separaciones de .5rem, también puede usar el numero 05 para separaciones de .25rem
    • Estas clases pueden ser aplicadas a los hijos de skel-grid
      • [breakpoint]-cols-[numero] Define la cantidad de columnas que ocupa un item
      • [breakpoint]-x-[numero] Define en que columna inica un item
      • [breakpoint]-rows-[numero] Define la cantidad de filas que ocupa un item
      • [breakpoint]-y-[numero] Define en que fila inica un item
      • [breakpoint]-order-[numero] Define el orden del item donde número va de 1 hasta la variable $max-grid-columns
    • dev Activa el modo dev al poner esta clase en el body
    • dev-hover Activa el modo dev con hover al poner esta clase en el body
    • flex Convertirá en caja flexible al elemento
    • [breakpoint]-[numero] Usar cualquier número multiplo de 5 entre 0 y 100
    • [breakpoint]-m[r|b|l|t]-[numero] Aplica márgenes, el número va de 0 a 10 con separaciones de .5rem, también puede usar el numero 05 para separaciones de .25rem
    • [breakpoint]-p[t|r|b|l|x|y|xy]-[numero] Aplica paddings, el número va de 0 a 10 con separaciones de .5rem, también puede usar el numero 05 para separaciones de .25rem
    • [breakpoint]-main-[start|center|end|justify|distribute] Alinea horizontalmente a los elementos hijos
    • [breakpoint]-cross-[start|center|end|baseline] Alinea verticalmente a los elementos hijos
    • [breakpoint]-row Define la orientación de izquierda a derecha (predeterminado)
    • [breakpoint]-column Define la orientación de arriba hacia abajo
    • [breakpoint]-row-reverse Define la orientación de derecha a izquierda
    • [breakpoint]-column-reverse Define la orientación de abajo hacia arriba
    • [breakpoint]-[left|center|right] Alineación de contenido
    • [breakpoint]-to-[left|center|right] Alineación de bloques
    • [breakpoint]-block-[left|center|right] Alinear elementos inline
    • l-block Bloques pequeños como widgets, cards, separadores
    • l-section Sección grande de contenido
    • l-big-section Igual que el anterior pero cuando se quiere dar una separación mayor
    • cancel-l-block Cancela margin-bottom de hermano anterior l-block
    • cancel-l-section Cancela margin-bottom de hermano anterior l-section
    • cancel-l-big-section Cancela margin-bottom de hermano anterior l-big-section
    • from-[breakpoint] Hará al elemento visible a partir del breakpoint
    • to-[breakpoint] Hará al elemento visible por debajo del breakpoint

Despliegue 📦

  1. In process...

Licencia 📄

Este proyecto está bajo la Licencia (GPL-2.0) - mira el archivo LICENSE para detalles.