Sculprit / Chisel Down

Destruction is much faster than construction, a universal rule you can rely on to design a web interface in the browser. Using Sculprit, you can use destruction to your advantage and construct something beneficial. You are enabled to swiftly knock down things you don't need from the code chunk, move things around, till you reach the build you seek. Just like in real-life sculpturing, you'll start with one big block of elements and components, some you want, some you don't. Chisel that block down to a purposeful block of hand-picked UI elements, and put it to good use. Sculprit is light and made with pure JavaScript.

Layout Controls Stage

• Sticky toolbar

• Distribute code to CSS, JS, HTML and JSON files

• Edit Double click

• Redo Shift + RClick (canceled)

• Direction RTL/LTR

• Expanded Mode (keyboard) – allows you to see overlapping elements

• Lay proper foundation for mouse and keyboard controls and how they should cascade

• Click again deselects

• Copy Code to Clipboard (keyboard)

• Paste Code from Clipboard (keyboard)

• Navigate (URDL):

  • Nudge URDL
  • Select sibling URDL
  • Select parent/child Shift + URDL
  • Move selected element Ctrl + URDL
  • Exit selected parent Ctrl + Shift + URDL

• Resize (Alt+URDL):

  • Column Resize Alt + R/L
  • Element Resize Alt + U/D (Text, Buttons, Input, etc.)
  • Resize Width % Alt + Ctrl + R/L
  • Resize Height % Alt + Ctrl + U/D

• Spacing

  • Margin Ctrl + URDL
  • Margin Inv. Ctrl + Shift + URDL
  • Padding Alt + URDL
  • Padding Inv. Alt + Shift + URDL

• Flex (WASD)

  • Margin Ctrl + WASD
  • Margin Inv. Ctrl + Shift + WASD
  • Padding Alt + WASD
  • Padding Inv. Alt + Shift + WASD

• Edits

  • Edit ID Shift + Alt + DblClick
  • Edit Classes Ctrl + F2
  • Edit ID Shift + F2

• Viewport Cycle input

• Locator always showing hovered element

• Highlight element and show locator only when Ctrl/Alt/Shift pressed

• Clear residual classes after undoing whe removing an item from DOM

Foundation Stage

• Decide on name, purchase domain name, work on preliminary branding
• Delete Alt + Click
• Select Ctrl + Click
• Deselect Escape
• Undo RClick, Ctrl + Z
• Redo Ctrl + Y
• Cut Ctrl + Mid-Click
• Copy Shift + Mid-Click
• Paste Mid-Click
• Move Up DOM A, Arrow Left,
• Move Down DOM D, Arrow Right,
• Move Over A, Arrow Left,
• Move Under D, Arrow Right,
• Exit Parent Up W, Arrow Up
• Exit Parent Down S, Arrow Down
• Paste clipboard into experiment area
• Save button saves the current file into a new HTML file with a specified name
• Decide on final controls
• Cut code into clipboard
• Skip Elements Up and Down
• Expanded Mode – allows you to see overlapping elements
• Use tooltips to show an element's ID and class