Quick Slicer

Starter's Web

An initial web page sliced by Quick Slicer. Created at {{ new Date().toDateString() }}.

View #
Star #
Vote #/#

About Quick Slicer {{version}}

Quick slicer is a prototyping tool to initialize the layout of a web page.

Keyboard Shortcuts

ESC/Space: Back to Select mode.
H: Draw Horizontal Line.
V: Draw Vertical Line.
O: Create Offset Inside.
Delete/D: Switch to Erase mode.
A: Toggle Attributes View palette.
B: Toggle between Percentige Ratio and Absolute Dimension.
F: Switch the Fill Color for blocks.
R: Toggle Round Corner mode for blocks.
C: Toggle the display of Composite Id tag at top-left of each block.
Z: Toggle dimension measurement between from the start and to the end.
S: Switch to Options view.
E: Switch to Editor view.
X: Switch to Export view.

TODO

A simple web server to login and upload artworks.
Write the help manual.
Save/Load sketches for later editing.
Resize block (in one direction), optionally in strict/elastic mode.

Options

Slightly different backgrounds for different tags.
Show bounding boxes in the preview. - or Fill random colors of low saturation in the blocks.
For generated _*, export to indiced selector or embedded.
Display the dimension numbers when placing lines.
Align to the grid, and snap to the grid.
Line thickness 1/2/3 switcher. dash also.
Prefix to css selector names.

Select
Horizontal Line
Vertical Line
Offset Inside
Eraser

div

#top

#main

#left

#content

#right

#bottom

Selection:

.html file
HTML code
CSS <style>
.css file
.scss file

Libraries:

Bootstrap
jQuery
Vue.js

{{ buildCode() }}

Attributes

Choose a background

name bgcolor-pick border content-html

(ↄ) Jun 2017 @_lenik