JSFiddle

  • typewriter.css #27 is the latest revision

    A super-simple, basic stylesheet for quickly formatting raw HTML like a typewriter. One size, one face…

    <h1>typewriter.css – one face, one size…</h1>
    
    <p>By <a href="https://twitter.com/csswizardry" target="_blank">@csswizardry</a>.</p>
    
    <h2>Header Level 2</h2>
    	       
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada ...</p>
  • UI sizing scale #5 is the latest revision

    Global naming convention for modifying sizes of UI components.

    <h1>UI sizing scale</h1>
    
    <hr />
    
    <h2>Example</h2>
    
    <p class="foo  foo--huge">
        This is a huge (quadruple-sized) foo component.
    </p>
    
    <p class="foo  foo--large">
        This is a large (double-sized) foo component.
    </p>
    
    <p class="foo">
        This is ...</p>
  • Mega dropdown idea #20 is the latest revision

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

    <ul class="menu  mega-dropdown">
    
        <li class="menu__item  mega-dropdown__trigger">
            <a href="#" class="menu__link  mega-dropdown__cue">Foo</a>
    
            <div class="mega-dropdown__content">
                <p>Foo</p>
                <p>Bar</p>
                <p>Baz</p>
            </div>
    
        </li><!--
    
     --><li class="menu__item">
            <a href="#" class="menu__link">Bar</a>
        </li><!--
    
     --><li class="menu__item  mega-dropdown__trigger">
            <a href="#" class="menu__link  mega-dropdown__cue">Baz</a>
    
            <div class="mega-dropdown__content">
                <h1>An absolute tonne of content…</h1>
                <h2>…look at all this stuff!</h2>
                <ul>
                    <li>Lorem ipsum dolor sit ...</li></ul></div></li></!--
    
    ></!--
    
    ></ul>
  • CLI cheatsheet

    Overview/cheatsheet for Sky designers.

    <h1>Command line interface (CLI) cheatsheet</h1>
    
    <h2>Using this document</h2>
    
    <p>Anything prepended with a dollar symbol (<code>$</code>) means the text following it is ...</p>
  • Drop cap #3 is the latest revision

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

    <p class="intro  intro--alt"><b class="intro__cap">L</b>orem ipsum dolor sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ...</p>
  • Responsive media object #10 is the latest revision

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

    <div class="media  media--responsive">
        <img src="http://placekitten.com/g/200/200" alt="" class="media__image" />
        <p class="media__body">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget ...</p></div>
  • Gravity button

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

    <a href="#" class="button">
        Cilck me!!!
        <span class="button__quad  button__quad--top-left"></span>
        <span class="button__quad  button__quad--top"></span>
        <span class="button__quad  button__quad--top-right"></span>
        <span class="button__quad  button__quad--right"></span>
        <span class="button__quad  button__quad--bottom-right"></span>
        <span class="button__quad  button__quad--bottom"></span>
        <span class="button__quad  button__quad--bottom-left"></span>
        <span class="button__quad  button__quad--left"></span>
        <span class="button__hit"></span>
    </a>
  • Flag object #146 is the latest revision

    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">
            <p>Pellentesque habitant.</p>
        </div>
    </div>
    
    <hr />
    
    <div class="flag  flag--rev">
        <div class="flag__body">
            <p>Pellentesque habitant.</p>
        </div>
        <div class="flag__image">
            <img src="//placekitten.com/100/100" alt="" />
        </div>
    </div>
    
    <hr />
    
    <div class="flag  flag--top">
        <div class="flag__image">
            <img src="//placekitten.com/100/100" alt="" />
        </div>
        <div class="flag__body">
            <p>Pellentesque habitant.</p>
        </div>
    </div>
    
    <hr />
    
    <div class="flag  flag--bottom">
        <div class="flag__image">
            <img src="//placekitten.com/100/100" alt="" />
        </div>
        <div class="flag__body">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ...</p></div></div>
  • Hero

    This is the hero BSkyB needs.

    var hero            = document.getElementById('js-hero');
    var heroPanelsCount = document.getElementsByClassName('js-hero__panel').length;
    
    hero.setAttribute('data-panels', heroPanelsCount);
  • Scoreboard #1 is the latest revision

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

    <div class="scoreboard">
        
        <div class="scoreboard__title">
            <span class="scoreboard__title__inner">Foo</span>
        </div>
        
        <div class="scoreboard__score">3</div>
        <div class="scoreboard__score">1</div>
        
        <div class="scoreboard__title  scoreboard__title--alt">
            <span class="scoreboard__title__inner">Bar</span>
        </div>
        
    </div>