uilang

a minimal, ui-focused programming language for web designers

clicking on ".try-it" toggles class "hidden" on ".info-box"
Try It

Getting Started

Insert uilang.js in your page, write some uilang as shown above in a simple <code> element and use CSS to show, hide and animate things.

Download 1KB

Build Interfaces

Create popovers, tabs, galleries, overlays and more using a language specifically designed for this. No programming experience is required.

Examples
  1. Example

    Simple notification banner

    The principle is straightforward: when Hide is clicked, we add a hidden class to the banner. We can then set this class to opacity:0 in our CSS.

    <!doctype html>
    <title>Example</title>
    <script src=uilang.js></script>
    
    <style>
      /* Font styles, colors, etc. omitted for clarity */
      #notification {
        transition: .8s
      }
      #notification.hidden {
        opacity: 0
      }
    </style>
    
    <div id=notification>
      <p>You have 3 unread messages.</p>
      <button class=hide>Hide</button>
    </div>
    
    <code>
      clicking on ".hide" adds class "hidden" on "#notification"
    </code>
    Download example
  2. Example

    Animated switch

    Instead of adding a class, we’ll now use uilang’s toggle class to switch between the active and inactive state when the control is clicked.

    <!doctype html>
    <title>Example</title>
    <script src=uilang.js></script>
    
    <style>
      #switch, #circle {
        transition: .4s
      }
      #switch {
        background: #FAFAFB /* gray */
      }
      #switch.active {
        background: #52D468 /* green */
      }
      #circle {
        width: 50%
      }
      #switch.active #circle {
        transform: translateX(100%)
      }
    </style>
    
    <div id=switch>
      <div id=circle></div>
    </div>
    
    <code>
      clicking on "#switch" toggles class "active" on "#switch"
    </code>
    Download example
  3. Example

    Navigation popover

    Same principle as the previous example: when More is clicked, we fade the popover in and out by simply toggling a CSS class on it.

    <!doctype html>
    <title>Example</title>
    <script src=uilang.js></script>
    
    <style>
      #popover {
        opacity: 0;
        pointer-events: none;
        transform: scale(.8) translateY(-30%);
        transition: .4s cubic-bezier(.3, 0, 0, 1.3)
      }
      #popover.visible {
        opacity: 1;
        pointer-events: auto;
        transform: none
      }
    </style>
    
    <ul id=nav>
      <li><a href=#>Home</a>
      <li><a href=#>Services</a>
      <li><a href=#>Portfolio</a>
      <li>
        <a href=# class=more>More</a>
        <ul id=popover>
          <li><a href=#>About</a>
          <li><a href=#>Blog</a>
          <li><a href=#>Contact</a>
        </ul>
    </ul>
    
    <code>
      clicking on ".more" toggles class "visible" on "#popover"
    </code>
    Download example
  4. Example

    Tabs

    This example introduces the target keyword which matches the clicked element. We’ll then use the CSS adjacent selector to select the content.

    <!doctype html>
    <title>Example</title>
    <script src=uilang.js></script>
    
    <style>
      h1 {
        background: #FAFAFB
      }
      h1.active {
        background: white
      }
      p {
        display: none
      }
      h1.active + p {
        display: block
      }
    </style>
    
    <h1 class=active>About me</h1>
    <p>Hi! My name’s Ben, I’m a 30-year old interface designer.
    
    <h1>Work</h1>
    <p>You can see some of my recent work on Dribbble.
    
    <h1>Contact</h1>
    <p>Feel free to send me an email or ping me on Twitter!
    
    <code>
      <!-- start by removing the previous "open" class -->
      clicking on "h1" removes class "active" on "h1.active"
    
      <!-- then add it to the clicked title -->
      clicking on "h1" adds class "active" on "target"
    </code>
    Download example
  5. Example

    Accordion

    Exactly the same logic as with the tabs: set an open class to the clicked element, use this class in CSS to style that element and its siblings.

    <!doctype html>
    <title>Example</title>
    <script src=uilang.js></script>
    
    <style>
      h1, h1::before, p {
        transition: .4s
      }
      h1 {
        cursor: pointer
      }
      h1::before {
        background: url(blue-arrow.svg);
        transform: rotate(-90deg)
      }
      h1.open::before {
        transform: none
      }
      h1.open ~ h1 {
        /* slide down all the h1 following the open one */
        transform: translateY(24px)
      }
      p {
        opacity: 0;
        pointer-events: none
      }
      h1.open + p {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(8px)
      }
    </style>
    
    <h1 class=open>About me</h1>
    <p>Hi! My name’s Ben, I’m a 30-year old interface designer.
    
    <h1>Work</h1>
    <p>You can see some of my recent work on Dribbble.
    
    <h1>Contact</h1>
    <p>Feel free to send me an email or ping me on Twitter!
    
    <code>
      clicking on "h1" removes class "open" on "h1.open"
      clicking on "h1" adds class "open" on "target"
    </code>
    Download example
  6. Example

    Overlay

    Add a visible class to the overlay when RSVP is clicked, remove that class when close or confirm is clicked. The rest is good ol’ CSS.

    <!doctype html>
    <title>Example</title>
    <script src=uilang.js></script>
    
    <style>
      #overlay, #registration {
        opacity: 0;
        transition: .5s
      }
      #overlay {
        pointer-events: none
      }
      #overlay.open {
        opacity: 1;
        pointer-events: auto
      }
      #registration {
        transform: translateY(80%) scale(.8);
        transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
        transition-delay: .4s
      }
      #overlay.open #registration {
        opacity: 1;
        transform: none
      }
    </style>
    
    <p>Design Meetup. <button class=rsvp>RSVP</button>
    
    <div id=overlay>
      <div id=registration>
        <a href=# class=close>Close</a>
        <h1>Design Meetup</h1>
        <input placeholder=Name>
        <input placeholder=Email type=email>
        <a href=# class=confirm>Confirm</a>
      </div>
    </div>
    
    <code>
      clicking on ".rsvp" adds class "open" on "#overlay"
      clicking on ".close, .confirm" removes class "open" on "#overlay"
    </code>
    Download example

Frequently asked questions

What is uilang good for?
Creating custom user interface components, adding some interactivity to your site, building prototypes—the possibilities provided by uilang’s simple class manipulation logic are endless. You can read more about the philosophy behind uilang in this article on Medium.
Does uilang support other events?
No, uilang lets you only react to clicks. 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.
Where should I insert the code?
uilang.js can be inserted anywhere, but it’s recommended to have the code element containing your uilang code at the very end of the page, just before the closing body tag. Don’t worry about having other code elements on the page, the script will only execute the uilang one.
Can I use uilang in production?
Yes, uilang is fast, multi-platform and extremely lightweight. It doesn’t have any external dependencies and plays nicely with JavaScript. That means a designer can, for example, code UI effects and behaviors with uilang and let developers implement the logic in JavaScript.