From 20da2c8ea08da9d15b72844f54bb91c9cba8b28e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 21:54:54 -0700 Subject: add the broken out responsive files --- less/responsive-utility-classes.less | 41 ++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 less/responsive-utility-classes.less (limited to 'less/responsive-utility-classes.less') diff --git a/less/responsive-utility-classes.less b/less/responsive-utility-classes.less new file mode 100644 index 000000000..78a06e8f9 --- /dev/null +++ b/less/responsive-utility-classes.less @@ -0,0 +1,41 @@ +// RESPONSIVE CLASSES +// ------------------ + +// Hide from screenreaders and browsers +// Credit: HTML5 Boilerplate +.hidden { + display: none; + visibility: hidden; +} + +// Visibility utilities + +// For desktops +.visible-phone { display: none; } +.visible-tablet { display: none; } +.visible-desktop { display: block; } +.hidden-phone { display: block; } +.hidden-tablet { display: block; } +.hidden-desktop { display: none; } + +// Phones only +@media (max-width: 767px) { + // Show + .visible-phone { display: block; } + // Hide + .hidden-phone { display: none; } + // Hide everything else + .hidden-desktop { display: block; } + .visible-desktop { display: none; } +} + +// Tablets & small desktops only +@media (min-width: 768px) and (max-width: 979px) { + // Show + .visible-tablet { display: block; } + // Hide + .hidden-tablet { display: none; } + // Hide everything else + .hidden-desktop { display: block; } + .visible-desktop { display: none; } +} -- cgit v1.2.3