/uilang

A minimal, UI-focused programming language for web designers.

Primary LanguageJavaScriptMIT LicenseMIT

uilang

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.

Getting started

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">
  clicking 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;
}

Syntax

Let's deconstruct the syntax from our previous example:

<script type="text/uilang">
  clicking 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">
  clicking on ".hide" adds class "hidden" on "div"
  clicking on "nav .tabs" adds class "active" on "target"
</script>
....
<script type="text/uilang">
  clicking 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.

Comments

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. -->
  clicking on ".hide" adds class "hidden" on "div"

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

Examples

You'll find more examples on uilang.com.