Documentation

UI Elements

UI elements are resources that make up the look & feel of your web site. Essentially any element of web content like:

  • HTML
  • CSS
  • JavaScript
  • Images

Each UI element is targeted at a particular UI, and as such UI elements are located in the ui/(ui-name) folder of a site. By default we encourage the placement of good clean, semantic HTML and markup in the root UI of your site. These root UI elements are what are delivered by default. You'll find that the majority of your content will be delivered from the root UI, however you will be able to target variations of the content delivered to different UIs.

If you need a different physical logo for an 480px screen, wish to deliver a "download the iPhone app" link to an iPhone or geo-locate the device where supported - then you can target each of these variations of the UI to the appropriate UI folder.

For example, you may have a couple of files, logo.png and index.html that make up the site. You may however want to deliver a different logo to devices with a screen width of greater than or equal to 480 pixels. You could create you UI elements as follows:

mysite
  • ui
    • 480
      • images
        • logo.png
    • root
      • index.html
      • images
        • logo.png

where index.html includes the reference to the logo.png, e.g

<header>
  <img src="/images/logo.png"/>
</header>
Note that using the optimisation addon you can have the width and height auto-populated in this <img> element.

A few important things to note about UIs:

  • bemoko sets up a default UIs for you, although you're free to add your own.
  • You only need to target different variations where you want to deliver different behaviour.

More