JSFiddle

  • Simple, use-anywhere, semantic, pure CSS spinner. #145 is the latest revision

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

    <span class="spinner">Loading…</span>
    
    <div class="box">
        <span class="spinner  spinner--large">Loading…</span>
    </div>
    
    <div class="box  box--foo">
        <p>Fetching new messages…</p>
        <p>
            <span class="spinner">Loading…</span>
        </p>
    </div>
    
    <p>
        <button class="btn">
            <span class="spinner  spinner--small">Loading…</span> Log in
        </button>
    </p>
  • Low-specificity IDs #3 is the latest revision

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

    <div id="foo" class="foo">Foo</div>
    
    <div id="bar" class="bar">Bar</div>
  • Safely increase specificity #294 is the latest revision

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

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget ...</p>
  • JoinIn.com feed #2 is the latest revision

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

    No code. How about adding some?
  • Semantic stats listing

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

    <dl class="stats">
    
        <dt>Check-ins</dt>
        <dd>3</dd>
    
        <dt>Photos</dt>
        <dd>2</dd>
    
        <dt>Friends</dt>
        <dd>20</dd>
    
    </dl>
  • JoinIn.com frame #10 is the latest revision

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

    (function(){
        var frame  = document.getElementById('js-frame');
        var ribbon = document.getElementById('js-frame__ribbon');
        var panel  = document.getElementById('js-frame__panel');
        var ribbonHeight = ribbon.clientHeight ...
  • New project questionnaire #38 is the latest revision

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

    <h1>Heading level one</h1>
    
    <h2>Heading level two</h2>
    
    <h3>Heading level three</h3>
    
    <h4>Heading level four</h4>
    
    <h5>Heading level five</h5>
    
    <h6>Heading level six</h6>
    
    <p>Pellentesque habitant ...</p>
  • Pragmatic, simple tooltip #85 is the latest revision

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

    <p>
        Please
        <a href="#" data-tooltip="In under 30 seconds">sign up</a>,
        <a href="#" data-tooltip="Welcome back!">log in</a>,
        or <a href="https://twitter.com/csswizardry" target="_blank" data-tooltip="More CSS goodness to come…">follow me on Twitter</a>.
    </p>
    
    <span data-tooltip="Harry Roberts">
        <img src="https://pbs.twimg.com/profile_images/378800000842511021/741a0a2593ea55bbd6238f8705c7074f.jpeg" width="128" height="128" alt="A photo of Harry Roberts on stage" />
    </span>
  • Flag object

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

    <div class="flag">
        <div class="flag__image">
            <img src="//placekitten.com/100/100" alt="" />
        </div>
        <div class="flag__body">
            <h1>Person’s Name</h1>
            <h2>Job Title</h2>
        </div>
    </div>
    
    <hr />
    
    <div class="flag  flag--bottom  flag--rev">
        <div class="flag__image">
            <img src="//placekitten.com/100/100" alt="" />
        </div>
        <div class="flag__body">
            <h1>Person’s Name</h1>
            <h2>Job Title</h2>
        </div>
    </div>
    
    <hr />
    
    <div class="flag  flag--bottom">
        <div class="flag__image">
            <img src="//placekitten.com/100/100" alt="" />
        </div>
        <div class="flag__body">
            <h1>Person’s Name</h1>
            <h2>Job Title</h2>
        </div>
    </div>
    
    <hr />
    
    <div class="flag  flag--top">
        <div class="flag__image">
            <img src="//placekitten.com/100/100" alt="" />
        </div>
        <div class="flag__body">
            <h1>Person’s Name</h1>
            <h2>Job Title</h2>
        </div>
    </div>
  • Billboard player #6 is the latest revision

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

    <div class="billboard">
    
        <img src="http://i.imgur.com/CocXQmm.jpg" alt="" class="billboard__media" />
    
        <div class="billboard__mask"></div>
    
        <ul class="billboard__controls">
            <li class="billboard__prev"><a href="">Previous</a></li>
            <li class="billboard__next"><a href="">Next</a></li>
        </ul>
    
    </div>