JSFiddle

  • Simplified matrix object

    Mootools 1.4.5, HTML, CSS, JavaScript

    <ul class="matrix four-col">
        <li class=all-cols>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Sit</li>
        <li>Amet</li>
        <li class=all-cols>Consectetuer</li>
    </ul>
  • iOS optimised scroll carousel

    Mootools 1.4.5, HTML, CSS, JavaScript

    <div class=carousel-wrapper>
        
        <ul class=carousel-controls>
            <li class=prev>Previous slide</li>
            <li class=next>Next slide</li>
        </ul>
        
        <div class=carousel>
        
            <ul class=paynes>
        
                <li>
                  <h2 class=payne-title>Payne 01 title</h2>
                  <img src=http://placekitten.com/600/400 alt="" class=payne-img>
                </li>
            
                <li>
                  <h2 class=payne-title>Payne 02 title</h2>
                  <img src=http://placekitten.com/600/400 alt="" class=payne-img>
                </li>
            
                <li>
                  <h2 class=payne-title>Payne 03 title</h2>
                  <img src=http://placekitten.com/600/400 alt="" class=payne-img>
                </li>
            
                <li>
                  <h2 class=payne-title>Payne 04 title</h2>
                  <img src=http://placekitten.com/600/400 alt="" class=payne-img>
                </li>
            
                <li>
                  <h2 class=payne-title>Payne 05 title</h2>
                  <img src=http://placekitten.com/600/400 alt="" class=payne-img>
                </li>
            
            </ul>
    
        </div>
        
    </div>
  • Centred page header (Sky Vegas)

    Mootools 1.4.5, HTML, CSS, JavaScript

    <div class=page-head>
        
        <ul class="nav page-actions fl">
            <li><a href=# class=btn>X</a></li>
            <li><a href=# class=btn>X</a></li>
            <li><a href=# class=btn>X</a></li>
            <li><a href=# class=btn>X</a></li>
        </ul>
        
        <ul class="nav page-actions fr">
            <li><a href=# class=btn>X</a></li>
            <li><a href=# class=btn>X</a></li>
        </ul>
    
        <h1 class=page-title>Foo bar baz</h1>
    
    </div>
  • Tagged CSS

    Mootools 1.4.5, HTML, CSS, JavaScript

    <h1>Tags in large CSS files</h1>
    
    <p><strong><strong>N.B.</strong> please refer to the CSS above before/whilst reading.</strong></p>
    
    <p>When working with large ...</p>
  • Even leaner star rating #71 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <span class="stars s-0">
        0 stars
    </span>
    <span class="stars s-0.5">
        0.5 stars
    </span>
    <span class="stars s-1">
        1 star
    </span>
    <span class="stars s-1.5">
        1.5 stars
    </span>
    <span class="stars s-2">
        2 stars
    </span>
    <span class="stars s-2.5">
        2.5 stars
    </span>
    <span class="stars s-3">
        3 stars
    </span>
    <span class="stars s-3.5">
        3.5 stars ...</span>
  • Slim star sprite #20 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    /*
        An even better version I made: http://jsfiddle.net/csswizardry/KL5Vs/
    */
  • Stepped spinner

    Mootools 1.4.5, HTML, CSS, JavaScript

    /*
        Correct version: 3 Sept 2012
    */
  • Inset shadowed images

    Mootools 1.4.5, HTML, CSS, JavaScript

    <a href=# class=img-frame>
        <img src=http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg alt="">
    </a>
  • Stats DL #37 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    /*
    The extra, invalid `div`s here are of more use to us than valid HTML is.
    In situations like this ...
  • Sky button test

    Mootools 1.4.5, HTML, CSS, JavaScript

    <a href=# class=btn>Record</a>