https://github.com/snugug/responsive-indicator
A drop-in heads-up display of some information useful for Responsive Web Design and Progressive Enhancement
https://github.com/snugug/responsive-indicator
Last synced: 11 months ago
JSON representation
A drop-in heads-up display of some information useful for Responsive Web Design and Progressive Enhancement
- Host: GitHub
- URL: https://github.com/snugug/responsive-indicator
- Owner: Snugug
- License: mit
- Created: 2013-08-29T12:20:34.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2014-01-24T18:03:57.000Z (over 12 years ago)
- Last Synced: 2025-02-03T06:02:58.492Z (over 1 year ago)
- Language: JavaScript
- Size: 168 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Responsive-Indicator
====================
A drop-in heads up display of pertinent responsive web design and progressive enhancement information.
The Responsive Indicator can be installed easily through [Bower](http://bower.io/). Simply run the following to install the Responsive Indicator as a development dependency:
```
bower install responsive-indicator --save-dev
```
Using it is simple too. Drop the Responsive Indicator into your website and you'll be given two indicators: a Viewport indicator and an HTML Class indicator ([Modernizr](http://modernizr.com/) style progressive enhancement class injection).
The Viewport Indicator will tell you the current `innerWidth` of your window and will update as that changes. You can toggle the display to be in `px` or `em` by tapping/clicking on it.
The HTML Class Indicator will tell you the current classes on the `` element. Adding classes to the `` element is a common approach to providing progressive enhancement anchors, especially for CSS. This is how [Modernizr](http://modernizr.com/) provides styling anchors for CSS.
On devices that are capable triggering keyboard shortcuts, `alt + v` will toggle the Viewport Indicator on or off, and `alt + m` will do the same for the HTML Class Indicator.