uilang is a dead simple programming language for web designers. With uilang, you write your code just like plain English, straight into your HTML using a <script> element. uilang's logic relies on manipulating classes on HTML elements and using these classes in CSS to show, hide, animate and transform elements when a click occurs. This simple logic lets designers create most of the typical user interface behaviours: tabs, popovers, overlays, sliding menus, etc.

This fork adds support for other events (thanks to the new syntax on EVENT on and a RegExp) and is based on laurentj fork which adds support for <script type="text/uilang"></script>.

The supported events are:

var events = { 
    'click': 'click', 
    'context menu': 'contextmenu',
    'double click': 'dblclick',
    'mouse down': 'mousedown',
    'mouse up': 'mouseup',
    'mouse enter': 'mouseenter',
    'mouse leave': 'mouseleave',
    'mouse over': 'mouseover',
    'mouse out': 'mouseout',
    'input blur': 'blur',
    'input change': 'change',
    'input focus': 'focus',
    'form reset': 'reset',
    'form submit': 'submit'
  }

The first thing to do is to include uilang.js on your page. Download the minified version (1KB) and insert it anywhere in your HTML:

<script src=uilang.js></script>

You're now ready to write some uilang. Your code should be inserted in a <script> element with a type attribute, anywhere in the page. The syntax looks like this:

<script type="text/uilang">
  on click on ".hide" adds class "hidden" on "div"
</script>

This is pretty much the only syntax you'll have to learn. This code is straightforward: when you click on an element with a hide class, a hidden class will be added to every div.

Now, this hidden class can be used in your CSS to actually hide these divs with, for example, a simple fade-out effect:

div {
  transition: opacity .5s;
}
div.hidden {
  opacity: 0;
}

Let's deconstruct the syntax from our previous example:

<script type="text/uilang">
  on click on ".hide"(1) adds(2) class "hidden"(3) on "div"(4)
</script>

1. Any CSS selector.
2. adds, removes or toggles.
3. Any class name.
4. Any CSS selector or the target keyword (which selects the clicked element).

You can add as many instructions as you want into your <script> element (and many <script> element as you want):

<script type="text/uilang">
  on click on ".hide" adds class "hidden" on "div"
  on click on "nav .tabs" adds class "active" on "target"
</script>
....
<script type="text/uilang">
  on click on "img:first-child" toggles class "big" on "target"
</script>

Please note that uilang only supports click events. Hover effects can usually be achieved in CSS and other events are simply out of the scope of this language. By keeping its feature set light and focused, uilang aims to lower the barriers to entry into programming.

Keep in mind uilang is basically just HTML, which means that you're already familiar with the syntax for comments:

<script type="text/uilang">
  <!-- I'm a comment. -->
  on click on ".hide" adds class "hidden" on "div"

  <!-- I'm also a comment! -->
  on click on "nav .tabs" adds class "active" on "target"
</script>

• Simple gallery
• Hamburger menu
• Looping Keynote-like presentation
• Sliding panels

You'll find more examples on uilang.com.