JSFiddle

  • Nav++ #23 is the latest revision

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

    <ul class=nav>
        <li><a href=#>Lorem</a></li>
        <li><a href=#>Ipsum</a></li>
        <li class=flyout>
            <a href=#>Dolor</a>
            <ul class="flyout-content nav stacked">
                <li><a href=#>Foo</a></li>
                <li><a href=#>Bar</a></li>
                <li><a href=#>Baz</a></li>
            </ul>
        </li>
        <li><a href=#>Sit</a></li>
        <li><a href=#>Amet</a></li>
    </ul>
    
    <ul class="nav stacked">
        <li><a href=#>Lorem</a></li>
        <li><a href=#>Ipsum</a></li>
        <li><a href=#>Dolor</a></li>
        <li><a href=#>Sit</a></li>
        <li><a href=#>Amet</a></li>
    </ul>
  • Full-width page sections

    Mootools 1.4.5, HTML, CSS, JavaScript

        <h1>HTML Ipsum Presents</h1>
        
        <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat ...</p>
  • CSS Paper #113 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <h1>Paper</h1>
    
    <div class=paper contenteditable>
    
        <p><del>Pellentesque habitant</del> morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies ...</p></div>
  • Sassin’ about

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

    <ul class=nav>
        <li><a href=#>Lorem</a></li>
        <li><a href=#>Ipsum</a></li>
        <li><a href=#>Dolor</a></li>
    </ul>
  • Bulletproof buttons

    Mootools 1.4.5, HTML, CSS, JavaScript

    /*
    There is a lot of code here which deals with normalisation, getting a form input (e.g. <button>) to render the ...</button>
  • Matrix lists #17 is the latest revision

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

    <ul class="matrix three-col custom">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Sit</li>
        <li>Amet</li>
        <li>Consectetur</li>
    </ul>
    
    
    <ul class="matrix two-col more-custom">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Sit</li>
        <li>Amet</li>
        <li>Consectetur</li>
    </ul>
    
    
    <ul class="matrix four-col even-more-custom">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Sit</li>
        <li>Amet</li>
        <li>Consectetur</li>
    </ul>
  • Crazy Classes #33 is the latest revision

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

    <ol class=crazy>
    
        <li class=_>Hello</li>
            
        <li class=?>Hello</li>
            
        <li class=#>Hello</li>
            
        <li class=->Hello</li>
            
        <li class=♥>Hello</li>
            
        <li class=—>Hello</li>
            
        <li class=ಠ_ಠ>Hello</li>
            
        <li class=.>Hello</li>
    
        <li class=☃>Hello</li>
    
        <li class=§>Hello</li>
    
        <li class=*>Hello</li>
    
        <li class=∞>Hello</li>
    
        <li class="`">Hello</li>
    
        <li class=^>Hello</li>
    
        <li class=:P>Hello</li>
    
        <li class=">.<">Hello</li>
    
        <li class=^.^>Hello</li>
    
        <li class=foo/*bar*/baz>Hello</li>
    
        <li class="foo<!--bar-->baz">Hello</li>
    
    </ol>
  • Pure CSS help link #29 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <p>
        <a href=# class=?>Help and FAQ</a>
    </p>
    
    <p>
        <a href=# class=!>Warning</a>
    </p>
    
    <p>
        <a href=# class=#>Permalink</a>
    </p>
  • List debugger

    Mootools 1.4.5, HTML, CSS, JavaScript

    <h1>List debugger</h1>
    
    <p>A small CSS snippet to point out any incorrectly nested elements in lists.</p>
    
    <p>Pellentesque habitant morbi tristique senectus ...</p>
  • CSS yellow-fade #41 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <p id=section:foo><a href=#section:bar>Go!</a></p>
    
    <p id=section:bar><a href=#section:foo>Back!</a></p>