1// 2// Responsive: Utility classes 3// -------------------------------------------------- 4 5 6// IE10 Metro responsive 7// Required for Windows 8 Metro split-screen snapping with IE10 8// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ 9@-ms-viewport{ 10 width: device-width; 11} 12 13// Hide from screenreaders and browsers 14// Credit: HTML5 Boilerplate 15.hidden { 16 display: none; 17 visibility: hidden; 18} 19 20// Visibility utilities 21 22// For desktops 23.visible-phone { display: none !important; } 24.visible-tablet { display: none !important; } 25.hidden-phone { } 26.hidden-tablet { } 27.hidden-desktop { display: none !important; } 28.visible-desktop { display: inherit !important; } 29 30// Tablets & small desktops only 31@media (min-width: 768px) and (max-width: 979px) { 32 // Hide everything else 33 .hidden-desktop { display: inherit !important; } 34 .visible-desktop { display: none !important ; } 35 // Show 36 .visible-tablet { display: inherit !important; } 37 // Hide 38 .hidden-tablet { display: none !important; } 39} 40 41// Phones only 42@media (max-width: 767px) { 43 // Hide everything else 44 .hidden-desktop { display: inherit !important; } 45 .visible-desktop { display: none !important; } 46 // Show 47 .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior 48 // Hide 49 .hidden-phone { display: none !important; } 50} 51 52// Print utilities 53.visible-print { display: none !important; } 54.hidden-print { } 55 56@media print { 57 .visible-print { display: inherit !important; } 58 .hidden-print { display: none !important; } 59} 60