From a7b8e52f8e08cc821d7324153885c085fad25c1a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 01:12:51 -0700 Subject: [PATCH] Overhaul the responsive utility classes: 1. Rename file from responsive-utility-classes.less to responsive-utilities.less 2. Add additional help text around the documentation for the classes in Scaffolding 3. Remove unnecessary display values on initial classes 4. Drop block values for inherit for better support on inline and table elements 5. Make use of \!important on every class to avoid classes with more specific selectors (e.g., .span* classes for the grid) --- docs/assets/bootstrap.zip | Bin 56321 -> 56340 bytes docs/assets/css/bootstrap-responsive.css | 31 ++++++---------- docs/download.html | 2 +- docs/scaffolding.html | 2 ++ docs/templates/pages/download.mustache | 2 +- docs/templates/pages/scaffolding.mustache | 14 ++++---- less/responsive-utilities.less | 41 ++++++++++++++++++++++ less/responsive-utility-classes.less | 41 ---------------------- less/responsive.less | 2 +- 9 files changed, 65 insertions(+), 70 deletions(-) create mode 100644 less/responsive-utilities.less delete mode 100644 less/responsive-utility-classes.less diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index eed5be2e0365c20c936ec1336e7e6c9804b4e1a7..604ba03d39534ddc0a24c7a32baa27a6c6fa2396 100644 GIT binary patch delta 5293 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 y+<$j<_5QQz?-&1FS9=afFavj<3+QfAL diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 78ce60d7fc..1ad16d6fd9 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -43,49 +43,40 @@ visibility: hidden; } .visible-phone { - display: none; + display: none !important; } .visible-tablet { - display: none; -} -.visible-desktop { - display: block; -} -.hidden-phone { - display: block; -} -.hidden-tablet { - display: block; + display: none !important; } .hidden-desktop { - display: none; + display: none !important; } @media (max-width: 767px) { .visible-phone { - display: block; + display: inherit !important; } .hidden-phone { - display: none; + display: none !important; } .hidden-desktop { - display: block; + display: inherit !important; } .visible-desktop { - display: none; + display: none !important; } } @media (min-width: 768px) and (max-width: 979px) { .visible-tablet { - display: block; + display: inherit !important; } .hidden-tablet { - display: none; + display: none !important; } .hidden-desktop { - display: block; + display: inherit !important; } .visible-desktop { - display: none; + display: none !important ; } } @media (max-width: 480px) { diff --git a/docs/download.html b/docs/download.html index 44299b927f..e4097ea4e5 100644 --- a/docs/download.html +++ b/docs/download.html @@ -143,7 +143,7 @@

Responsive

- + diff --git a/docs/scaffolding.html b/docs/scaffolding.html index dd26412379..017fd493ea 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -609,12 +609,14 @@

Test case

Resize your browser or load on different devices to test the above classes.

Visible on...

+

Green checkmarks indicate that class is visible in your current viewport.

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Hidden on...

+

Here, green checkmarks indicate that class is hidden in your current viewport.

  • Phone✔ Phone
  • Tablet✔ Tablet
    • diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index 0512911485..0e73c44a44 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -66,7 +66,7 @@

    {{_i}}Responsive{{/i}}

    - + diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index b64c63af3c..6d99965b37 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -532,16 +532,18 @@

    {{_i}}Test case{{/i}}

    {{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}

    {{_i}}Visible on...{{/i}}

    +

    {{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}

      -
    • Phone✔ Phone
      • -
    • Tablet✔ Tablet
      • -
    • Desktop✔ Desktop
      • +
    • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
      • +
    • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
      • +
    • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}

    {{_i}}Hidden on...{{/i}}

    +

    {{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}

      -
    • Phone✔ Phone
      • -
    • Tablet✔ Tablet
      • -
    • Desktop✔ Desktop
      • +
    • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
      • +
    • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
      • +
    • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
    diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less new file mode 100644 index 0000000000..572846c0fa --- /dev/null +++ b/less/responsive-utilities.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 !important; } +.visible-tablet { display: none !important; } +.visible-desktop { } // Don't set initially +.hidden-phone { } +.hidden-tablet { } +.hidden-desktop { display: none !important; } + +// Phones only +@media (max-width: 767px) { + // Show + .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior + // Hide + .hidden-phone { display: none !important; } + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important; } +} + +// Tablets & small desktops only +@media (min-width: 768px) and (max-width: 979px) { + // Show + .visible-tablet { display: inherit !important; } + // Hide + .hidden-tablet { display: none !important; } + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important ; } +} diff --git a/less/responsive-utility-classes.less b/less/responsive-utility-classes.less deleted file mode 100644 index 78a06e8f94..0000000000 --- a/less/responsive-utility-classes.less +++ /dev/null @@ -1,41 +0,0 @@ -// 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; } -} diff --git a/less/responsive.less b/less/responsive.less index d35948ddc0..5434f3a08f 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -24,7 +24,7 @@ // RESPONSIVE CLASSES // ------------------ -@import "responsive-utility-classes.less"; +@import "responsive-utilities.less"; // MEDIA QUERIES