https://github.com/benignware/bootstrap-device-utilities
Bootstrap Responsive Utilities based on device resolution
https://github.com/benignware/bootstrap-device-utilities
Last synced: 11 months ago
JSON representation
Bootstrap Responsive Utilities based on device resolution
- Host: GitHub
- URL: https://github.com/benignware/bootstrap-device-utilities
- Owner: benignware
- License: mit
- Created: 2015-05-22T15:35:25.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-07-05T22:34:56.000Z (almost 11 years ago)
- Last Synced: 2023-08-12T18:37:42.201Z (almost 3 years ago)
- Language: CSS
- Size: 7.82 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bootstrap-device-utilities
> Bootstrap Responsive Utilities based on device resolution
This bootstrap css-extension lets you control visibility of elements based on device screen dimensions by adding `visible-device-*` and `hidden-device-*` helpers.
Displaying content dependent on device resolution is especially useful for optimizing large background-images.
While image elements cannot be prevented from loading once they're added to the document, css-background-images wrapped in an hidden element will [not load in most commonly used browsers](http://timkadlec.com/2012/04/media-query-asset-downloading-results/).
Being fully aware of the client's resolution and also because of being pure css, which offers the best possible performance, this technique is preferred over server-side- or javascript-solutions.
Making use of standard viewport-based helpers would force different images to be loaded on window-resize which is not suitable for the purpose of optimization.
For example, with standard bootstrap breakpoints applied at `768px`, `992px` and `1200px`, an ipad of `768x1024` will be `sm` in portrait-, but `md` in landscape-orientation.
In contrast to viewport, device dimensions are fixed at the maximum resolution.
In order to always match the entire screen, bootstrap-device-utilities also take device-height into account. This way, images can be easily delivered at individual, screen-fitting sizes.
The package contains a less and a sass-version as well as a compiled css-distribution.
## Basic Usage
Display content based on device resolution:
```html
Large screen
Medium screen
Small screen
Extra small screen
```
Hide content based on device resolution:
```html
Not a large screen
Not a medium screen
Not a small screen
Not an extra small screen
```
## Advanced Usage
Deliver background-images dependent on device resolution:
```html
```
```css
body, html {
width: 100%;
height: 100%;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.background > div > div {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
```