Visual DOM Sculptor

Basic Mouse Actions:
Select            Click	
Deselect          Re-Click / Esc
Delete            Alt + Click
Copy              Ctrl + Click
Cut               Ctrl + Shift + Click
Paste             Ctrl + Shift + Alt + Click

Edit Content:
Edit Text         DblClick	
Edit Class        Alt + Ctrl + DblClick	
Edit ID           Alt + Shift + DblClick	

Margin & Padding:
Margin            WASD
Margin Inv.       Alt + WASD
Padding           Ctrl + WASD
Padding Inv.      Ctrl + Alt + WASD

Shifting Element:
Nudge             Arrow Keys
Move              Ctrl + Arrow Keys
Exit Parent       Ctrl + Shift + Arrow Keys
Resize Column     Shift + Right/Left
Resize Text       Shift + Up/Down
Resize Width %    Alt + Right/Left
Resize Height %   Alt + Up/Down

Basic Keyboard Actions:
Delete            Del	
Cut               Ctrl + X	
Copy              Ctrl + C	
Paste             Ctrl + V	
Undo              Ctrl + Z	
Redo              Ctrl + Y	
F2	          Rename
Esc	          Deselect

Cursor action indications: Selected Parent Hovered

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Holy guacamole! You should check in on some of those fields below.

Introduction

Morbi id felis diam. Maecenas auctor pellentesque odio a porta. Integer fringilla sagittis elit in tempor. Etiam malesuada lectus a sem posuere eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Password

Address

Address 2

City

State

Zip

Check me out

Featured

With supporting text below as a natural lead-in to additional content.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago