Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jhwohlgemuth/voxelcss
Voxel.css with updated architecture, robust tests, and npm availability
https://github.com/jhwohlgemuth/voxelcss
browser css fun modern voxel
Last synced: 3 months ago
JSON representation
Voxel.css with updated architecture, robust tests, and npm availability
- Host: GitHub
- URL: https://github.com/jhwohlgemuth/voxelcss
- Owner: jhwohlgemuth
- License: mit
- Created: 2017-07-16T22:16:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-10T21:42:29.000Z (4 months ago)
- Last Synced: 2024-10-19T17:55:27.665Z (3 months ago)
- Topics: browser, css, fun, modern, voxel
- Language: JavaScript
- Homepage: https://voxelcss.js.org/
- Size: 12.8 MB
- Stars: 4
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
> [Voxel.css](http://www.voxelcss.com/) with updated architecture, robust tests, and npm availability
[](https://www.npmjs.com/package/voxelcss)
[](https://travis-ci.org/jhwohlgemuth/voxelcss)
[](https://ci.appveyor.com/project/jhwohlgemuth/voxelcss/branch/master)
[](https://coveralls.io/github/jhwohlgemuth/voxelcss?branch=master)
[](https://www.bithound.io/github/jhwohlgemuth/voxelcss)
[](https://snyk.io/test/github/jhwohlgemuth/voxelcss)
Installation
------------
```bash
npm install voxelcss
```
> **Note:** The associated styles are [bundled with the JavaScript](https://github.com/jhwohlgemuth/voxelcss/blob/master/lib/index.js#L3) and [added into the head section at runtime](https://github.com/cheton/browserify-css#autoinject).
Usage
-----
**AMD (Require.js)**
> Add to [paths attrbute of requirejs config file](http://requirejs.org/docs/api.html#config-paths) and require in code
```js
// 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`)
```html
...
```
Examples
--------
[demo](https://voxelcss.js.org/examples/demo)
Features
--------
- ~~Completely~~ [*Mostly*](https://github.com/jhwohlgemuth/voxelcss/pull/10) compatible with [voxel.css](https://github.com/HunterLarco/voxel.css)
- [Touch support](#supported-touch-gestures)
- JavaScript and CSS are all bundled together into one file!
- CSS is processed by [cssnext](http://cssnext.io/) and minified with [cssnano](http://cssnano.co/) to provide auto-prefixed styles with a minimal footprint and maximum compatibility.
- Code functionality is verified by tests written using [Jest](https://facebook.github.io/jest/)
- Code standards are enforced by [ESLint](http://eslint.org/)
- 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](.github/CONTRIBUTING.md)
Roadmap
-------
- Follow progress on [Trello](https://trello.com/b/Q3sVE18k/voxelcss)
Credits
-------
- [Hunter Larco](http://hunterlarco.com/) *created Voxel.css*
- [Robert Jowett](http://www.dafont.com/percy-pixel.font?fpp=100&l%5B%5D=10&l%5B%5D=1&text=voxelcss) *created the font used in the logo*
- [Browserify](http://browserify.org/) *module bundling*
- [Babel](https://babeljs.io/) *ES6 transpiling and minification*
- [JSDoc](http://usejsdoc.org/) *documentation generation*
- [minami](https://github.com/Nijikokun/minami) *documentation theme*
License
-------
[](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fjhwohlgemuth%2Fvoxelcss?ref=badge_large)