Under the wireframe header, screens hold UI controls. One to three screens
render side by side, each inside a device frame. It is the fastest way to sketch
an app or web layout without drawing a single box.
wireframetitle: Onboarding
screen Login [phone] {
heading: Welcome back
input: Email
input: Password
button: Sign in [half]
button: SSO [half]
navbar: Home | Feed | Profile [active: 0]
}
screen Name [frame] { controls }. The frame is phone (the default),
tablet, browser, or window. Give two or three screens to show a flow.
wireframescreen Phone [phone] {
statusbar
heading: Inbox
list: Alice | Bob | Carol
tabbar: Home | Search | Me [active: 0]
}
screen Desktop [browser] {
heading: Inbox
search: Search mail
list: Alice | Bob | Carol
}
A control is kind or kind: label, plus optional attributes. Widths are
positional: full (default), half, third, or two-thirds. Consecutive
controls pack onto one row while their fractions fit. The full list of kinds is
in the reference.
wireframescreen Form [window] {
heading: Create account
input: Full name
input: Email [half]
input: Phone [half]
dropdown: Country
textarea: Bio
checkbox: Email me updates [checked]
button: Submit [half]
button: Cancel [half]
}
By default a control fills its screen's column. A width attribute puts several on
one row: full (the default), half, third, two-thirds. Consecutive controls
whose widths add up to a row sit side by side, so two halfs pair off and three
thirds make a trio. 1/2, 1/3 and 2/3 are accepted spellings.
wireframescreen Profile [browser] {
heading: Edit profile
input: First name [half]
input: Last name [half]
input: Email
button: Save changes
}
Two halves share a row; the button below returns to full width.