[Résolu] KNACSS 6 : Typo and reset ajout Masquage conditionnel ?

https://github.com/alsacreations/KNACSS/blob/master/doc/01-typo-et-reset.md

a écrit :

Masquage

À noter que KNACSS prévoit une classe dédiée aux éléments devant être masqués sur écrans graphiques tout en demeurant accessibles aux assistances techniques. Il s'agit de la classe .visually-hidden, où le choix des hideux mots-clés !important se justifie :

.visually-hidden {
position: absolute !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important;
}

pourquoi ne pas prévoir ?
.hide --------------------------------- Hidden for all Devices
.hide-on-small-only -------------- Hidden for Mobile Only
.hide-on-med-only --------------- Hidden for Tablet Only
.hide-on-med-and-down -------- Hidden for Tablet and Below
.hide-on-med-and-up ------------ Hidden for Tablet and Above
.hide-on-large-only --------------- Hidden for Desktop Only

et comment faire avec sass pour le rajouter ?
par exemple pour
hide-on-small-only
dans https://github.com/alsacreations/KNACSS/blob/master/sass/grids/_grillade.scss#L117-132 ?
comme ça ?

@media (min-width: ($tiny + 1)) and (max-width: $medium) {
.hide-on-small-only { @extend .visually-hidden;}
  @for $i from 1 through 4 {
    [class*="-small-#{$i}"] {
      & > * {
        width: calc(100% / #{$i} - #{$iefix});
      }
      @each $affix, $size in $grid-gutters {
        &.has-gutter#{$affix} > * {
          width: calc(100% / #{$i} - #{$size} - #{$iefix});
        }
      }
    }
  }
}

merci
Modifié par Creativ e Motion (23 Mar 2017 - 12:39)

Raphael a écrit :

Concrètement, tu feras ceci :

.hide-on-small-only {
  @include respond-to("tiny") {
    @extend .visually-hidden;
  }
}

Qu'en penses-tu ?

Comme d'hab c'est bien pensé , c'est DRY et "et Mixins Better for Performance" comme dirait l'autre !
je ne maîtrise pas encore la V6 de KNACSS
j'avais quelques trains de retard concernant la gestion des media queries j'étais restée sur la library include-media de la version changelog v5.0.0 (23 mai 2016)
> https://github.com/alsacreations/KNACSS/blob/master/changelog.md
Modifié par Creativ e Motion (28 Mar 2017 - 20:48)