Skip to content

B
bootstrap
Commit a7b8e52f authored by Mark Otto's avatar Mark Otto
Browse files
Options

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)
parent d1864b36
Show whitespace changes
Inline Side-by-side
Showing with 65 additions and 29 deletions
docs/assets/css/bootstrap-responsive.css
View file @ a7b8e52f
...@@ -43,49 +43,40 @@ ...@@ -43,49 +43,40 @@
visibility: hidden; visibility: hidden;
} }
.visible-phone { .visible-phone {
display: none; display: none !important;
} }
.visible-tablet { .visible-tablet {
display: none; display: none !important;
}
.visible-desktop {
display: block;
}
.hidden-phone {
display: block;
}
.hidden-tablet {
display: block;
} }
.hidden-desktop { .hidden-desktop {
display: none; display: none !important;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.visible-phone { .visible-phone {
display: block; display: inherit !important;
} }
.hidden-phone { .hidden-phone {
display: none; display: none !important;
} }
.hidden-desktop { .hidden-desktop {
display: block; display: inherit !important;
} }
.visible-desktop { .visible-desktop {
display: none; display: none !important;
} }
} }
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
.visible-tablet { .visible-tablet {
display: block; display: inherit !important;
} }
.hidden-tablet { .hidden-tablet {
display: none; display: none !important;
} }
.hidden-desktop { .hidden-desktop {
display: block; display: inherit !important;
} }
.visible-desktop { .visible-desktop {
display: none; display: none !important ;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
......
docs/download.html
View file @ a7b8e52f
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label> <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label> <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
<h3>Responsive</h3> <h3>Responsive</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utility-classes.less"> Visible/hidden classes</label> <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> Visible/hidden classes</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label> <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label> <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label> <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>
......
docs/scaffolding.html
View file @ a7b8e52f
...@@ -609,12 +609,14 @@ ...@@ -609,12 +609,14 @@
<h3>Test case</h3> <h3>Test case</h3>
<p>Resize your browser or load on different devices to test the above classes.</p> <p>Resize your browser or load on different devices to test the above classes.</p>
<h4>Visible on...</h4> <h4>Visible on...</h4>
<p>Green checkmarks indicate that class is visible in your current viewport.</p>
<ul class="responsive-utilities-test"> <ul class="responsive-utilities-test">
<li>Phone<span class="visible-phone">&#10004; Phone</span></li> <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
<li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li> <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
<li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li> <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
</ul> </ul>
<h4>Hidden on...</h4> <h4>Hidden on...</h4>
<p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
<ul class="responsive-utilities-test hidden-on"> <ul class="responsive-utilities-test hidden-on">
<li>Phone<span class="hidden-phone">&#10004; Phone</span></li> <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
<li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li> <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
......
docs/templates/pages/download.mustache
View file @ a7b8e52f
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
<h3>{{_i}}Responsive{{/i}}</h3> <h3>{{_i}}Responsive{{/i}}</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utility-classes.less"> {{_i}}Visible/hidden classes{{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> {{_i}}Visible/hidden classes{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> {{_i}}Narrow tablets and below (<767px){{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> {{_i}}Narrow tablets and below (<767px){{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> {{_i}}Tablets to desktops (767-979px){{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> {{_i}}Tablets to desktops (767-979px){{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> {{_i}}Large desktops (>1200px){{/i}}</label> <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> {{_i}}Large desktops (>1200px){{/i}}</label>
......
docs/templates/pages/scaffolding.mustache
View file @ a7b8e52f
...@@ -532,16 +532,18 @@ ...@@ -532,16 +532,18 @@
<h3>{{_i}}Test case{{/i}}</h3> <h3>{{_i}}Test case{{/i}}</h3>
<p>{{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}</p> <p>{{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}</p>
<h4>{{_i}}Visible on...{{/i}}</h4> <h4>{{_i}}Visible on...{{/i}}</h4>
<p>{{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}</p>
<ul class="responsive-utilities-test"> <ul class="responsive-utilities-test">
<li>Phone<span class="visible-phone">&#10004; Phone</span></li> <li>{{_i}}Phone{{/i}}<span class="visible-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
<li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li> <li>{{_i}}Tablet{{/i}}<span class="visible-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
<li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li> <li>{{_i}}Desktop{{/i}}<span class="visible-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
</ul> </ul>
<h4>{{_i}}Hidden on...{{/i}}</h4> <h4>{{_i}}Hidden on...{{/i}}</h4>
<p>{{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}</p>
<ul class="responsive-utilities-test hidden-on"> <ul class="responsive-utilities-test hidden-on">
<li>Phone<span class="hidden-phone">&#10004; Phone</span></li> <li>{{_i}}Phone{{/i}}<span class="hidden-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
<li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li> <li>{{_i}}Tablet{{/i}}<span class="hidden-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
<li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li> <li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
</ul> </ul>
</div><!-- /.span --> </div><!-- /.span -->
</div><!-- /.row --> </div><!-- /.row -->
......
less/responsive-utility-classes.less → less/responsive-utilities.less
View file @ a7b8e52f
...@@ -11,31 +11,31 @@ ...@@ -11,31 +11,31 @@
// Visibility utilities // Visibility utilities
// For desktops // For desktops
.visible-phone { display: none; } .visible-phone { display: none !important; }
.visible-tablet { display: none; } .visible-tablet { display: none !important; }
.visible-desktop { display: block; } .visible-desktop { } // Don't set initially
.hidden-phone { display: block; } .hidden-phone { }
.hidden-tablet { display: block; } .hidden-tablet { }
.hidden-desktop { display: none; } .hidden-desktop { display: none !important; }
// Phones only // Phones only
@media (max-width: 767px) { @media (max-width: 767px) {
// Show // Show
.visible-phone { display: block; } .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
// Hide // Hide
.hidden-phone { display: none; } .hidden-phone { display: none !important; }
// Hide everything else // Hide everything else
.hidden-desktop { display: block; } .hidden-desktop { display: inherit !important; }
.visible-desktop { display: none; } .visible-desktop { display: none !important; }
} }
// Tablets & small desktops only // Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
// Show // Show
.visible-tablet { display: block; } .visible-tablet { display: inherit !important; }
// Hide // Hide
.hidden-tablet { display: none; } .hidden-tablet { display: none !important; }
// Hide everything else // Hide everything else
.hidden-desktop { display: block; } .hidden-desktop { display: inherit !important; }
.visible-desktop { display: none; } .visible-desktop { display: none !important ; }
} }
less/responsive.less
View file @ a7b8e52f
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
// RESPONSIVE CLASSES // RESPONSIVE CLASSES
// ------------------ // ------------------
@import "responsive-utility-classes.less"; @import "responsive-utilities.less";
// MEDIA QUERIES // MEDIA QUERIES
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment