Los margenes en esta libreria estan divididos en dos tipos margin general y margin especifico. Cada uno con un prefijo como m-1, mar-1 etc. Donde la m representa el tipo de margen, o los tipos de margen, ejemplo si coloca m-1, se esta diciendo que quiere un margen a los 4 lados o lo que se conoce como un margen general, y el -1 (Guion y un numero, que este va desde 1 hasta el 5) representa el tamaño en pixeles que desea siendo 1, el mas pequeño, igual a 13px, hasta 5 siendo este de 16px el mas grande.
Los margenes generales se declaran en las clases de la siguiente manera:
m-1: Donde se genera un margin general (top, buttom, left y right) de tamaño 3px
m-2: Donde se genera un margin general (top, buttom, left y right) de tamaño 7px
m-3: Donde se genera un margin general (top, buttom, left y right) de tamaño 10px
m-4: Donde se genera un margin general (top, buttom, left y right) de tamaño 13px
m-5: Donde se genera un margin general (top, buttom, left y right) de tamaño 16px
Los margenes especificos cuentan con el mismo tamaño que los bordes generales, con la unica variacion que se debe especificar el sufijo mar, mde, mab y miz que significan:
mar: Donde se genera un margin top
mde: Donde se genera un margin right
mab: Donde se genera un margin buttom
miz: Donde se genera un margin left
Un ejemplo de aplicacion seria mar-5 donde le digo que tenga un margen arriba del tipo 5 (16 pixeles)
Los paddings en esta libreria al igual que los margenes se dividen en: padding general y padding especifico. Los cuales se identifican con la letra p (para el padding general) acompañado de un guion y un numero (p-1, como ejemplo) que va desde 1 hasta el 5 que representa el tamaño.
Los paddings generales se declaran en las clases de la siguiente manera:
p-1: Donde se genera un padding general (top, buttom, left y right) de tamaño 3px
p-2: Donde se genera un padding general (top, buttom, left y right) de tamaño 7px
p-3: Donde se genera un padding general (top, buttom, left y right) de tamaño 10px
p-4: Donde se genera un padding general (top, buttom, left y right) de tamaño 13px
p-5: Donde se genera un padding general (top, buttom, left y right) de tamaño 16px
Los padding especificos cuentan con el mismo tamaño que los generales, solo se debe especificar el sufijo par, pde, pab y piz que significan:
par: Donde se genera un padding top
pde: Donde se genera un padding right
pab: Donde se genera un padding buttom
piz: Donde se genera un padding left
Los bordes en esta libreria cuentan con tres propiedades tipo de borde-color-tamaño. Los bordes tienen al igual que los padding uno general, especificando solo b y otro especifico, como por ejemplo un borde arriba o top seria bar, seguido de un valor del 1-5 como se ha especificado anteriormente.
Los bordes de color solido se declaran en las clases de la siguiente manera:
b-primary-1: Donde se genera un borde de color primario de tamaño 3px
b-secundario-1: Donde se genera un borde de color secundario de tamaño 3px
b-oscuro-1: Donde se genera un borde de color oscuro de tamaño 3px
Los bordes de color solido cuentan con el mismo tamaño que los colores solidos generales, solo se debe especificar el sufijo bar, bde, bab y biz que significan:
bar: Donde se genera un borde top
bde: Donde se genera un borde right
bab: Donde se genera un borde buttom
biz: Donde se genera un borde left
Los bordes de color RGB se declaran en las clases de la siguiente manera:
b-r1-1: Donde se genera un borde de color RGB de tipo 1, de tamaño 3px
b-r2-1: Donde se genera un borde de color RGB de tipo 2, de tamaño 3px
Nota: Existen 5 tipos de colores RGB y todos se declaro con r de RGB y guion numero, que va del 1 al 5
Los bordes de color RGB cuentan con el mismo tamaño que los colores solidos generales, solo se debe especificar el sufijo bar, bde, bab y biz ejemplo:
bar-r1-1: Donde se genera un borde top de color RGB de tamaño 1 (3px)
