Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

device dependent hide #53

Open
tobias-redmann opened this issue Jan 7, 2014 · 1 comment
Open

device dependent hide #53

tobias-redmann opened this issue Jan 7, 2014 · 1 comment

Comments

@tobias-redmann
Copy link

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
Copy link

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) );
        }
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants