device dependent hide

[tredmann]

I added this to the grid, to hide things on devices, like palm--hidden .

I think, this is a nice feature, so perhaps you can implement as well.

/------------------------------------
$WIDTHS ------------------------------------/ /

• Create our width classes, prefixed by the specified namespace. */ @mixin device-type($namespace:""){

  {$class-type}#{$namespace}hidden {display:none;}

Best regards, Tobias

[dotnetCarpenter]

I thought about publishing the following as a csswizardry extension, but I'm posting it here first for scrutiny:

@import "csswizardry-grids";

@mixin only-in($names){
    @each $name in $names{
        #{$class-type}#{$name}--only { display:none; }
    }
}
@function filter($filter, $list, $position:1){
    $return: ();
    @each $item in $list{
        $value: nth($item, $position);
        @if( $value != $filter) {
            $return: append($return, $value)
        }
    }
    @return $return;
}
/**
 * Add "--none" after a device name to hide it.
 * Use [device name]--center to center an element.
 * Use [device name]--only to only show it in that device width
 * NOTE: If $use-silent-classes: true; then use @extend. E.g. @extend %palm--only;
 */
@each $breakpoint in $breakpoints{
    $blacklist: "portable"; // hack so that the 'lap' size won't get display:none;
    $name: nth($breakpoint, 1);
    @include grid-media-query( $name ) {
        @if( $name != $blacklist ){
            #{$class-type}#{$name}--only { display:inline-block !important;}
            #{$class-type}#{$name}--none { display:none; }
            #{$class-type}#{$name}--center {
                display: block;
                margin: auto;
            }
            @include only-in( filter($name, $breakpoints) );
        }
    }
}