JSFiddle

  • Sassed grid system #1 is the latest revision

    Mootools 1.4.5, HTML, SCSS, JavaScript

    
    
  • Table cell links #3 is the latest revision

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

    <table class="market">
        <colgroup>
            <col class=t10>
            <col class=t15>
            <col>
            <col class=t15>
        </colgroup>
        <thead>
            <tr>
                <th>#</th>
                <th>Silk</th>
                <th>Horse</th>
                <th>Odds</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class=link-cell>
                    <a href=# class="text-group link-cell-link">
                        <strong class=text-group-line>1</strong>
                        <span class=text-group-line>(2)</span>
                    </a>
                </td>
                <td class=link-cell>
                    <a href=# class=link-cell-link>
                        [image]
                    </a>
                </td>
                <td class=link-cell>
                    <a href=# class="text-group link-cell-link">
                        <strong class=text-group-line>Foo bar baz</strong>
                        <span class=text-group-line>Joe Bloggs</span>
                    </a>
                </td>
                <td class=link-cell>
                    <a href=# class=link-cell-link>
                        14/1
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
  • Sass type styles #12 is the latest revision

    Mootools 1.4.5, HTML, SCSS, JavaScript

    <h1>Level 1 heading</h1>
    <h2>Level 2 heading</h2>
    <h3>Level 3 heading</h3>
    <h4>Level 4 heading</h4>
    <h5>Level 5 heading</h5>
    <h6>Level 6 heading</h6>
    
    <h1 class=zeta>Level 1 ...</h1>
  • Flyouts #18 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <div class="flyout top-left">
        <div class=flyout-content>
            <p>Lorem ipsum</p>
            <p>Dolor sit</p>
            <p>Amet</p>
        </div>
    </div>
    
    
    
    <div class="flyout top-centre">
        <div class=flyout-content>
            <p>Lorem ipsum</p>
            <p>Dolor sit</p>
            <p>Amet</p>
        </div>
    </div>
    
    
    
    <div class="flyout top-right">
        <div class=flyout-content>
            <p>Lorem ipsum</p>
            <p>Dolor sit</p>
            <p>Amet</p>
        </div>
    </div>
    
    
    
    <div class="flyout right-up">
        <div class=flyout-content>
            <p>Lorem ipsum</p>
            <p>Dolor sit</p>
            <p>Amet ...</p></div></div>
  • Line-numbered code #7 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <pre><!--
    --><ol class=line-numbers><!--
        --><li><code><span class=code-comment>/**</span></code></li><!--
        --><li><code><span class=code-comment> * A simple nav abstraction to throw any list into horizontal mode. Here we can</span></code></li><!--
        --><li><code><span class=code-comment> * see we need to use the ...</span></code></li></!--
    ></!--
    ></!--
    ></ol></!--
    --></pre>
  • Making CSS DRYer by avoiding shorthand #23 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <ul class=matrix>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
        <li>Baz</li>
        <li>Bar</li>
        <li>Foo</li>
    </ul>
  • IDs vs. more classes

    Mootools 1.4.5, HTML, CSS, JavaScript

    /*
    See http://jsfiddle.net/csswizardry/LGJXA/1/
    */
  • Sass clearfix

    Mootools 1.4.5, HTML, SCSS, JavaScript

    <ul class=nav>
        <li><a href=#>Foo</a></li>
        <li><a href=#>Bar</a></li>
        <li><a href=#>Baz</a></li>
    </ul>
  • Form fields with icons #3 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <form>
        
        <label for=name>Name</label>
        <span class="has-icon spinner">
            <input type=text id=name class=text-input>
        </span>
        
    </form>
  • Spriting and icon element

    Mootools 1.4.5, HTML, CSS, JavaScript

    <ul>
        <li><a href=#><i class="s s--user"></i> Verify account</a></li>
        <li><a href=#><i class="i i--$"></i> Deposit funds</a></li>
        <li><a href=#><i class="i i--star"></i> View your favourites</a></li>
        <li><a href=#><i class="s s--?"></i> Help &amp; support</a></li>
        <li><a href=# class="s s--twitter">Follow us on Twitter</a> or <a href=# class="s s--facebook">Friend us on Facebook</a></li>
    </ul>