helpers para bootstrap

_sass/helpers.scss

@@ -1,5 +1,71 @@
+/*
+ * Usar en animaciones, empiezan rápido y desaceleran hacia el final.
+ */
 $bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
+/*
+ * Ocultar la barra de scroll, útil para sliders horizontales.
+ */
+.no-scrollbar {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar { display: none; }
+}
+
+/*
+ * Poder aumentar o disminuir el alto de la tipografía, se usa de la
+ * misma forma que los modificadores de padding y margin.
+ */
+@each $size, $length in $spacers {
+  .f-#{$size} {
+    font-size: $length !important;
+  }
+}
+
+/*
+ * Modificadores de Bootstrap que no tienen versión responsive.
+ */
+@each $grid-breakpoint, $_ in $grid-breakpoints {
+  @include media-breakpoint-up($grid-breakpoint) {
+    // border
+    .border-#{$grid-breakpoint}         { border: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-top     { border-top: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-right   { border-right: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-bottom  { border-bottom: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-left    { border-left: $border-width solid $border-color !important; }
+    .border-#{$grid-breakpoint}-0        { border: 0 !important; }
+    .border-#{$grid-breakpoint}-top-0    { border-top: 0 !important; }
+    .border-#{$grid-breakpoint}-right-0  { border-right: 0 !important; }
+    .border-#{$grid-breakpoint}-bottom-0 { border-bottom: 0 !important; }
+    .border-#{$grid-breakpoint}-left-0   { border-left: 0 !important; }
+
+    // alineación
+    .text-#{$grid-breakpoint}-left   { text-align: left !important; }
+    .text-#{$grid-breakpoint}-right  { text-align: right !important; }
+    .text-#{$grid-breakpoint}-center { text-align: center !important; }
+
+    // posición
+    @each $position in $positions {
+      .position-#{$grid-breakpoint}-#{$position} { position: $position !important; }
+    }
+
+    // anchos y altos
+    @each $prop, $abbrev in (width: w, height: h) {
+      @each $size, $length in $sizes {
+        .#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length !important; }
+      }
+    }
+
+    // versión responsive de f
+    @each $size, $length in $spacers {
+      .f-#{$grid-breakpoint}-#{$size} {
+        font-size: $length !important;
+      }
+    }
+  }
+}
+
 /*
  * Crea una propiedad con prefijos de navegador
  */
@@ -16,10 +82,18 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 @each $color, $_ in $colors {
   .background-#{$color} {
     background-color: var(--#{$color});
+
+    &:focus {
+      background-color: var(--#{$color});
+    }
   }
 
   .#{$color} {
-    color: var(--#{$color});
+    color: var(--#{$color}) !important;
+
+    &:focus {
+      color: var(--#{$color}) !important;
+    }
 
     ::-moz-selection,
     ::selection {

assets/css/styles.scss

@@ -2,12 +2,15 @@
 # Ponemos un frontmatter porque queremos que Jekyll procese este archivo
 ---
 
+/*
+ * Redefinir variables de Boostrap acá.  Se las puede ver en
+ * node_modules/bootstrap/scss/_variables.scss
+ */
+
 /*
  * XXX: Solo importar los archivos necesarios de bootstrap para
  * facilitar la reducción de CSS.  Por ahora pedimos todo para poder
  * empezar a trabajar en el HTML sin pensar en CSS.
- *
- * Los archivos se encuentran en node_modules/bootstrap/scss
  */
 @import "bootstrap/scss/bootstrap";
 @import "fork-awesome/scss/fork-awesome";