A flexbox layout builder. Flexboxer is a visual tool for creating flexbox css rules.
You need a POSIX environment (Linux / OS X), NodeJS, NPM and JSPM installed. You can get the latter by running:
npm install -g jspm
Checkout the project, and run:
npm install
jspm install
This project uses simple npm
commands for building, rather than a dedicated tool like gulp
or grunt
. The following scripts are available:
npm run build
- build the project into thedist/
directory.npm run serve
- serve the project fromsrc/
.npm run serve-dist
- serve the projet fromdist/
The npm run build
command is actually running all these, in the following order:
npm run bundle
- create an SFX bundle with JSPM, in dist/npm run uglify
- compressdist/build.js
intodist/build.min.js
npm run html-dist
- copyindex.html
fromsrc/
todist
and replace the script tags for releasenpm run styles
- copy the stylesheet fromsrc/styles
todist/styles
- Improve defaults for new layout items:
- random colour bg;
- magic incrementing selector
- Hover highlighting in Tree / Visualiser.
- Export to JSBin / JSFiddle / etc.
- Tests >:-S
- Drag and drop tree?
- Better input controls, with dev-tools like autopopulation and keyboard shortcuts
- Internal save (as opposed to only exporting to third parties)
- Output as less / scss as well as CSS