Voxel.css with updated architecture, robust tests, and npm availability
Installation
npm install voxelcss
Note: The associated styles are bundled with the JavaScript and added into the head section at runtime.
Usage
AMD (Require.js)
Add to paths attrbute of requirejs config file and require in code
// config.js
requirejs.config({
paths: {
voxelcss: 'path/to/node_modules/voxelcss/dist/voxelcss'
}
});
// main.js
define(function(require) {
'use strict';
const Voxelcss = require('voxelcss');
});
Browser global
Add script tag to your html (code will be available via
window.voxelcss
)
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<script src="path/to/node_modules/voxelcss/dist/voxelcss.js"></script>
</body>
</html>
Examples
Features
CompletelyMostly compatible with voxel.css- Touch support
- JavaScript and CSS are all bundled together into one file!
- CSS is processed by cssnext and minified with cssnano to provide auto-prefixed styles with a minimal footprint and maximum compatibility.
- Code functionality is verified by tests written using Jest
- Code standards are enforced by ESLint
- Functionality and standards are enforced locally and on remote CI servers (including visual regression tests)!
Supported Touch Gestures
Tap | Add voxel | |
Long touch | Remove voxel | |
1-finger drag | Rotate scene | |
2-finger pinch | Zoom scene | |
3-finger drag | Pan scene |
Contributing
Please read the contributing guide
Roadmap
- Follow progress on Trello
Credits
- Hunter Larco created Voxel.css
- Robert Jowett created the font used in the logo
- Browserify module bundling
- Babel ES6 transpiling and minification
- JSDoc documentation generation
- minami documentation theme