kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity
twbs--bootstrap/less/responsive-utilities.less

42 lines
1.1 KiB
Plaintext
Raw Normal View History

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)
2012-03-25 08:12:51 +00:00
// 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; }
reorder media queries
2012-06-25 23:25:50 +00:00
// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
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)
2012-03-25 08:12:51 +00:00
// Show
reorder media queries
2012-06-25 23:25:50 +00:00
.visible-tablet { display: inherit !important; }
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)
2012-03-25 08:12:51 +00:00
// Hide
reorder media queries
2012-06-25 23:25:50 +00:00
.hidden-tablet { display: none !important; }
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)
2012-03-25 08:12:51 +00:00
// Hide everything else
.hidden-desktop { display: inherit !important; }
reorder media queries
2012-06-25 23:25:50 +00:00
.visible-desktop { display: none !important ; }
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)
2012-03-25 08:12:51 +00:00
}
reorder media queries
2012-06-25 23:25:50 +00:00
// Phones only
@media (max-width: 767px) {
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)
2012-03-25 08:12:51 +00:00
// Show
reorder media queries
2012-06-25 23:25:50 +00:00
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
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)
2012-03-25 08:12:51 +00:00
// Hide
reorder media queries
2012-06-25 23:25:50 +00:00
.hidden-phone { display: none !important; }
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)
2012-03-25 08:12:51 +00:00
// Hide everything else
.hidden-desktop { display: inherit !important; }
reorder media queries
2012-06-25 23:25:50 +00:00
.visible-desktop { display: none !important; }
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)
2012-03-25 08:12:51 +00:00
}