rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Overhaul the responsive utility classes:

Browse Source 
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)
This commit is contained in:
Mark Otto 2012-03-25 01:12:51 -07:00
parent d1864b3608
commit a7b8e52f8e
9 changed files with 65 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

31
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -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) {

2
docs/download.html
View File

@ -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>

2
docs/scaffolding.html
View File

@ -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>

2
docs/templates/pages/download.mustache vendored
View File

@ -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>

14
docs/templates/pages/scaffolding.mustache vendored
View File

@ -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 -->

41
less/responsive-utilities.less Normal file
View File

@ -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 ; }
}

41
less/responsive-utility-classes.less
View File

@ -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; }
}

2
less/responsive.less
View File

@ -24,7 +24,7 @@
// RESPONSIVE CLASSES // RESPONSIVE CLASSES
// ------------------ // ------------------
@import "responsive-utility-classes.less"; @import "responsive-utilities.less";
// MEDIA QUERIES // MEDIA QUERIES