JSFiddle

  • Skills tree

    Mootools 1.4.5, HTML, CSS, JavaScript

    <table class=skills>
        <tbody>
            <tr>
                <th rowspan=2 scope=rowgroup><span class=des>Design</span></th>
                <td colspan=2><span class=des>Photoshop</span></td>
                <td rowspan=2 class=t-top><span class=des>Mockups</span></td>
            </tr>
            <tr>
                <td colspan=2><span class=des>UI/UX</span></td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <th rowspan=3 scope=rowgroup><span class=dev>Development</span></th>
                <td rowspan=2 colspan=2><span class=dev>Front-end</span></td>
                <td><span class=dev>HTML5</span></td>
            </tr>
            <tr>
                <td><span class=dev>CSS3</span></td>
            </tr>
            <tr>
                <td><span class=dev>Back-end</span></td>
                <td><span class=dev>PHP</span></td>
                <td><span class=dev>CodeIgniter</span></td>
            </tr>
        </tbody>
    </table>
  • Qualified selectors #29 is the latest revision

    Basic demo of the problems caused by qualifying selectors.

    <div class=promo>
        <p>Foo</p>
    </div>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies ...</p>
  • Fixing code and vertical rhythm. #21 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <p>This has a computed style of <code class=fixed>font-size:16px;</code> and <code class=fixed>line-height:24px;</code>. Pellentesque habitant morbi tristique senectus et netus et malesuada ...</p>
  • Divider object #17 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <p class=user-action-block>
        <a href=/log-in class=btn>Log in</a>
        <span class=divide>or</span>
        <a href=/sign-up class="btn cta">Sign up</a>
    </p>
  • UI-list ++ #29 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <ul class="ui-list user-nav">
        <li class=split>
            <a href=/messages/ class=split-title title="View all messages">Messages</a>
            <a href=/messages/unread class=loz title="View unread messages">100</a>
        </li>
        <li class=split>
            <a href=/events/ class=ui-list-link title="View all events">
                <span class=split-title>Events</span>
                <span class="loz informative" title="You have 4 events this month">4</span>
            </a>
        </li>
        <li class=split>
            <a href=/messages/ class=split-title title="View all tasks">Tasks</a>
            <a href=/messages/unread class=loz title="View 3 incomplete tasks">3/8</a>
        </li>
        <li>No photos yet&hellip; <a href=/upload/>Add one?</a></li>
    </ul>
    
    <p>You have <strong class=loz>3</strong> invites remaining.</p>
    
    <div class="media island hilite">
        <img src=http://placekitten.com/100/150 alt="" class=img>
        <div class=body>
            <h3>Cats are:</h3>
            <ul class=ui-list>
                <li>Furry ...</li></ul></div></div>
  • UI-list

    Mootools 1.4.5, HTML, CSS, JavaScript

    <ul class="ui-list my-list">
        <li>Lorem</li>
        <li>
            Ipsum <a href=#>dolor</a>
        </li>
        <li>
            <a href=# class="split ui-list-link">
                <span class=split-title>
                    <i class=s></i>
                    Foo
                </span>
                <i class="s s-more-arrow"></i>
            </a>
        </li>
        <li>
            <a href=# class="split ui-list-link">
                <span class=split-title>
                    <i class=s></i>
                    Bar
                </span>
                <i class="s s-more-arrow"></i>
            </a>
        </li>
        <li>
            <a href=# class="split ui-list-link">
                <span class=split-title>
                    <i class=s></i>
                    Baz
                </span>
                <i class="s s-more-arrow"></i>
            </a>
        </li>
        <li>
            <a href=# class="split ui-list-link">
                <span class=split-title>
                    <i class=s></i>
                    Foo
                </span>
                <i class="s s-more-arrow"></i>
            </a>
        </li>
        <li>
            <a href=# class="split ui-list-link">
                <span class=split-title>
                    <i class=s></i>
                    Bar
                </span>
                <i class="s s-more-arrow"></i>
            </a>
        </li>
        <li>
            <a href=# class="split ui-list-link">
                <span class=split-title>
                    <i class=s></i>
                    Baz
                </span>
                <i class="s s-more-arrow"></i>
            </a>
        </li>
    </ul>
  • Magic number #27 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <h1>Magic Numbers</h1>
               
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae ...</p>
  • Hugged text #374 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <h1 class=title><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </span></h1>
  • Multi-level dropdown #839 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    /**
     * Infinitely nestable dropdown menu by @csswizardry
     * twitter.com/csswizardry
     */
  • Custom checkbox toggles #41 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <span class=toggle-box>
        <input type=checkbox class=toggle><i class="s s-toggle-bg"></i><i class="s s-toggle-slider"></i>
    </span>