Para extender el framework kit de gobierno es importante tener en consideración las ideas que hay detrás del diseño, el porqué se hacen las cosas del modo en que se hacen. Por ello deberá leer la sección enfoque de extensión de la documentación de Bootstrap, debido a que este kit se basa en él.

A continuación, un resumen con los puntos importantes:

• Los componentes deben ser responsivos y diseñados con un enfoque "mobile-first".
• Los componentes deberán ser construidos con una clase base y extendidos a través de modificadores de clase.
• Los componentes deberán obedecer a una escala del "z-index" común.
• Siempre que sea posible, prefiera una implementación HTML y CSS por sobre JavaScript.
• Siempre que sea posible, prefiera las utilidades por sobre estilo personalizado.
• Siempre que sea posible, evite forzar requerimientos HTML específicos ("children selectors", por ejemplo).
• Siempre que aplique, para cada componente deberá añadir la contraparte para el modo contraste y aumento de fuente.

La creación de nuevo componente en el framework requiere identificar la categoría a la que pertenece, si es un nuevo elemento, un nuevo layout, etc. Por ejemplo, si se desea desarrollar una nueva card, se deberá crear el archivo scss en el directorio de cards: scss/components/cards/, y luego importarlo en el archivo scss/components/_cards.scss.

Siempre se cree un nuevo componente, deberá añadir su contraparte para la versión contraste del sitio y para los distintos niveles de fuentes.

Para esto, debe crear un archivo con el mismo nombre y bajo la misma estructura jerárquica que en scss/, en la carpeta scss/themes/a11y-contrast si se trata del modo contraste ó scss/themes/a11y-fonts si es el caso del aumento del tamaño de la fuente.

Por ejemplo, para un nuevo componente tipo card scss/components/cards/_roles.scss:

/* Mi nuevo tipo de card */;.card-role {
  background-color: color("white");
  border: $card-role-border-width solid $card-role-border-color;
}

Su contraparte para el modo contraste, sería el archivo /scss/themes/a11y-contrast/components/cards/_roles.scss y dentro puede añadir:

/* Mi nuevo tipo de card modo contraste */;.card-role {
  background-color: invert-color("white");
}

El framework kit de gobierno ofrece funciones y mixins que ayudan a simplificar el desarrollo evitando la duplicación de código y trabajo tedioso.

Funciones #

A continuación se listan los métodos implementados con una breve reseña acerca de su utilidad:

• @function strip-unit($number): Recibe un número con unidad (px, em, vw, ch, etc) y lo retorna sin ella.
• @function unitless-rem($pixels, $context): Recibe un número en píxeles y retorna el equivalente en rem sin unidad de acuerdo a lo definido en $context (por defecto, es lo definido en _variables).
• @function rem($pixels, $context): Recibe un número en px y retorna el equivalente en rem en base a $context.
• @function unitless-px($rems, $context): Recibe un número en rem y retorna el equivalente en px sin unidad de acuerdo a lo definido en $context (por defecto, es lo definido en _variables).
• @function px($rems, $context): Recibe un número en rem y retorna el equivalente en px en base a $context.
• @function get-breakpoint-width($name, $breakpoints): Recibe el nombre y un mapa de breakpoints y retorna su valor en px. Por defecto utiliza el definido en _variables.
• @function spacer($spacer): Recibe un número que por defecto va del 0 al 5 y retorna el valor en rem del espaciado equivalente basado en el valor base de 1 rem. (El mapa de espaciados viene definido por Bootstrap).
• @function font($level, $for): Recibe el nivel de font requerido y el breakpoint de pantalla y retorna el valor en px del tamaño del font definido para esas variables.
• @function line-height($level, $for): Recibe el nivel de font requerido y el breakpoint de pantalla y retorna el valor en px del alto de línea de definido para esas variables.
• @function contrast-color($key): Recibe el nombre de un color definido en _variables y retorna el color que hace contraste con el color $key.
• @function contrast-theme-color($key): Recibe el nombre de un color definido para la paleta principal en _variables y retorna el color que hace contraste con el color $key.
• @function contrast-gray($key): Recibe el nombre de un color definido para los tonos grises en _variables y retorna el color que hace contraste con el color $key.
• @function invert-color($key): Recibe el nombre de un color definido en _variables y retorna su versión invertida.
• @function invert-theme-color($key): Recibe el nombre de un color definido para la paleta principal en _variables y retorna su versión invertida.
• @function invert-gray($key): Recibe el nombre de un color definido para los tonos grises en _variables y retorna su versión invertida.
• @function contrast-invert-color($key): Recibe el nombre de un color definido en _variables y retorna la versión invertida del color que hace contraste con el color $key.
• @function contrast-invert-theme-color($key): Recibe el nombre de un color definido para la paleta principal en _variables y retorna la versión invertida del color que hace contraste con el color $key.
• @function contrast-invert-gray($key): Recibe el nombre de un color definido para los tonos grises en _variables y retorna la versión invertida del color que hace contraste con el color $key.

Mixins #

Los mixins son funciones que permiten generar declaraciones css reutilizables ahorrando tiempo en escribir y reescribir código. A continuación se listan los implementados en este kit:

• @mixin media($from, $until, $and, $media-type, $breakpoints, $responsive, $static-breakpoint) : Generador de media-query.
• @mixin split-background($color-a, $color-b): Añade un background dividido en los colores $color-a, color-b.
• @mixin use-icon($icon-name): Genera el estilo del icono $icon-name.
• @mixin font($level): Genera la declaración de estilo del tamaño y alto de línea de la fuente de nivel $level.
• @mixin only-font($level): Genera la declaración de estilo del tamaño de fuente del nivel $level.
• @mixin only-line-height(): Genera la declaración de estilo del alto de línea del nivel $level.
• @mixin lines($lines, $level): Genera la declaración de estilo para fijar el alto de un elemento en función de cantidad de líneas $lines del nivel $level.
• @mixin make-sub-display-class($base-class): Genera clases que comienzan con un nombre base $base-class y que definen la propiedad display dependiendo de los $breakpoints definidos en _variables.
• @mixin from-colors(): Genera una lista con los colores del kit sobre los cuales se puede iterar.
• @mixin square-text($size): Genera la declaración de estilo para un elemento centrado con alto y ancho fijo de tamaño $size.
• @mixin bs-bg-variant($parent, $color): Genera la declaración de estilo para la clase $parent de color de fondo $color y añade el comportamiento hover para los los anchors y botones que utilicen esta clase.
• @mixin bs-text-emphasis-variant($parent, $color): Genera el estilo para la clase $parent con propiedad color $color y el comportamiento hover y focus para los anchors que utilicen esta clase.
• @mixin from-inverted-colors(): Genera una lista con los colores invertidos sobre la cual se puede iterar.
• @mixin make-a11y-columns(): Genera clases de utilidad para el manejo de las columnas de la grilla Bootstrap cuando se aumenta el tamaño de la fuente.
• @mixin make-a11y-texts(): Genera clases de utilidad para el manejo del comportamiento del texto cuando se aumenta el tamaño de la fuente.
• @mixin make-a11y-spacings(): Genera clases de utilidad para el manejo del espaciado (márgenes y paddings) cuando se aumenta el tamaño de la fuente.
• @mixin make-a11y-flex(): Genera clases de utilidad para el manejo de los elementos en un contenedor flex cuando se aumenta el tamaño de la fuente.