We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
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 ------------------------------------/ /
Best regards, Tobias
The text was updated successfully, but these errors were encountered:
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) ); } } }
Sorry, something went wrong.
No branches or pull requests
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
------------------------------------/
/
*/
@mixin device-type($namespace:""){
{$class-type}#{$namespace}hidden {display:none;}
Best regards,
Tobias
The text was updated successfully, but these errors were encountered: