Artboards

Artboards provide a fixed size container to display content mimicing mobile screens.

The artboard-demo class provides some basic styling to show the size for the examples.

The examples below are dynamically-generated with the following list of phone sizes.

phones = [
  { name: "phone-1", width: 320, height: 568 },
  { name: "phone-2", width: 375, height: 667 },
  { name: "phone-3", width: 414, height: 736 },
  { name: "phone-4", width: 375, height: 812 },
  { name: "phone-5", width: 414, height: 896 },
  { name: "phone-6", width: 320, height: 1024 }
]

Artboard (phone-1)

Preview

320×568

Code

= daisy_artboard(css: "#{phone[:name]} artboard-demo") do
  #{phone[:width]}×#{phone[:height]}

Artboard (phone-1) - Horizontal

Preview

568×320

Code

= daisy_artboard(css: "artboard-horizontal #{phone[:name]} artboard-demo") do
  #{phone[:height]}×#{phone[:width]}

Artboard (phone-2)

Preview

375×667

Code

= daisy_artboard(css: "#{phone[:name]} artboard-demo") do
  #{phone[:width]}×#{phone[:height]}

Artboard (phone-2) - Horizontal

Preview

667×375

Code

= daisy_artboard(css: "artboard-horizontal #{phone[:name]} artboard-demo") do
  #{phone[:height]}×#{phone[:width]}

Artboard (phone-3)

Preview

414×736

Code

= daisy_artboard(css: "#{phone[:name]} artboard-demo") do
  #{phone[:width]}×#{phone[:height]}

Artboard (phone-3) - Horizontal

Preview

736×414

Code

= daisy_artboard(css: "artboard-horizontal #{phone[:name]} artboard-demo") do
  #{phone[:height]}×#{phone[:width]}

Artboard (phone-4)

Preview

375×812

Code

= daisy_artboard(css: "#{phone[:name]} artboard-demo") do
  #{phone[:width]}×#{phone[:height]}

Artboard (phone-4) - Horizontal

Preview

812×375

Code

= daisy_artboard(css: "artboard-horizontal #{phone[:name]} artboard-demo") do
  #{phone[:height]}×#{phone[:width]}

Artboard (phone-5)

Preview

414×896

Code

= daisy_artboard(css: "#{phone[:name]} artboard-demo") do
  #{phone[:width]}×#{phone[:height]}

Artboard (phone-5) - Horizontal

Preview

896×414

Code

= daisy_artboard(css: "artboard-horizontal #{phone[:name]} artboard-demo") do
  #{phone[:height]}×#{phone[:width]}

Artboard (phone-6)

Preview

320×1024

Code

= daisy_artboard(css: "#{phone[:name]} artboard-demo") do
  #{phone[:width]}×#{phone[:height]}

Artboard (phone-6) - Horizontal

Preview

1024×320

Code

= daisy_artboard(css: "artboard-horizontal #{phone[:name]} artboard-demo") do
  #{phone[:height]}×#{phone[:width]}

Made with by Profoundry .