Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

149 lines (106 sloc) 4.88 kB


A community-driven DSL for creating user interfaces on the iphone.

By including the Teacup module, you can easily create layouts that adhere to the iOS user interface guidelines, and it's an easy way to assign labels, delegators, and datasources.

The goal is not to simply rename CocoaTouch method names, but to offer a rubyesque (well, actually a rubymotion-esque) way to create an interface.

Using stylesheets and layouts, it makes coding an iOS app like designing a website with HTML and CSS.

Check out a working sample app here!


$ gem install teacup --pre # --pre means this is a *pre-release* version.

Then add the teacup library to your Rakefile, just after motion itself:

require 'motion/project'

require 'teacup'



class SomeController < UIViewController
 def viewDidLoad

  @field =
  @field.height = 50
  @field.width  = 200

  @search =
  @search.height = 50
  @search.width  = 200
  @search.placeholder = 'Find something...'



# Stylesheet do

 style :field,
  height: 50,
  width:  200

 style :search, extends: :field,
  placeholder: 'Foo...'


# Controller

class SomeController < UIViewController

 def viewDidLoad



Current version: v0.0.0 (or see lib/teacup/version.rb)

Last milestone: Pick a name

Next milestone: Pick a DSL

teacup, being a community project, moves in "spurts" of decision making and coding. Only the name — both the least and most important part :-) — is decided.

We would love suggestions of any sort, and we're always free over at the #teacuprb channel on

Ideas that proposals should keep in mind

  1. output will conform, unless explicitly disabled to the iOS HIG
  2. should provide a few useful layouts (see readme for layout proposals):

    • basic: vertically arranged "things", or
    • form: label/input combinations arranged in a table
    • navbar: with ability to customize the buttons that get placed at the top
    • tabbar: similar, but with the tabs at the bottom instead of nav at the top
    • splitview: A splitview controller (for iPad Apps) with sane navigation defaults, nice loading webviews and JSON to populate the items in the popover menu
  3. layouts should have ways of placing things relative to edges, so placing a label or nav at the "bottom" that spans the entire width should be easy. (This means we'll need to check for ipad or iphone.)

  4. actions are either blocks, defined inline, or target/action combos (e.g. target: self, action: :my_method)
  5. there should be a consistent "styling" language, preferably in a separate file, something that could be handed to a designer. this is the BIG item!
  6. teacup should take a little config block for easy configuration
  7. Ideally, there should be some way to "inherit" styles in this language. So you can define a basic layout for all platforms and then tweak (see readme for style proposals)


Please, do not hesitate to report any bugs you find with our source at the Issues page.

Actual proposals

  1. stylesheet, by ConradIrwin
  2. teacup, by colinta
  3. style, by Beakr
  4. layout, by Beakr
  5. layout, by farcaller
  6. hybrid, by colinta
Jump to Line
Something went wrong with that request. Please try again.