GitHub - una/caniuse-component: Slides with live caniuse data so you can always have up-to-date info for presentations · GitHub

master

Go to file

Code

NameName

Last commit message

Last commit date

Latest commit History 31 Commits
src		src
.babelrc		.babelrc
.eslintrc		.eslintrc
.gitignore		.gitignore
README.md		README.md
package.json		package.json
scripts.js		scripts.js
styles.css		styles.css
View all files

Repository files navigation

README

Caniuse Component

Instant, up-to-date, and theme-able browser statistics for your presentations (so you don't have to update your slides the night before!)

Here is a Demo 😄

customizable style based on a variable system
adaptive text color based on background source
automatic browser logos & caniuse data
not compatible with IE 6/7

Usage

Node Implementation

Install via NPM: npm install caniuse-component -- include the js and css source.

Reveal.js Implementation

To use this with Reveal.js, npm install, then apply this source as a plugin:

Reveal.initialize({ // setup things here: // ... // plugins here: dependencies: [ { src: '../node_modules/caniuse-component/scripts.js', async: true }, { src: '../node_modules/caniuse-component/styles.css' } ] });

Then, include this element on your page:

name function usage options

id	Applies styles to list	id="caniuse--result-list"	You only get one option unless you make your own
propName	CSS Property Name	data-propName="css-filters"	See Caniuse API and options
browsers	Browsers to check support from	data-browsers="firefox chrome safari"	edge, chrome, safari, ie, firefox, opera

Development & Contribution

NPM scripts are used as the build system, so to develop, run: npm run dev. Consumable files are distributed in the root, and source files live within /src.

To contribute: Please clone this down and submit a PR, or open an issue. 😘