快刀布局
Gallery
Developer
GitHub
Starter's Web
An initial web page sliced by Quick Slicer. Created at {{ new Date().toDateString() }}.
View
#
Star
#
Vote
#/#
About
Options
Editor
Preview
Export
Document
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
Refresh
Copy
{{ buildCode() }}
Attributes
Choose a background
name bgcolor-pick border content-html
(ↄ) Jun 2017 @_lenik