JSFiddle

  • Sky Bet FAQ reduced test case #3 is the latest revision

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

    <div class="loyalty-faq">
    
            <h2 class="loyalty-head  islet" style="margin-bottom:0;">FAQs</h2>
    
            <div class="loyalty-faq__lists">
    
                <div class="fgw">
                    <div class="fg  one-half">
                        <ul class="ui-list  ui-list--bare  loyalty-faq__list">
                                                    <li class="expand-toggle">
                                <a href="javascript:void(0);" class="expando">
                                    <i class="s toggle"></i>
                                    <b>Which bet types class as qualifying bets?</b>
                                </a>
                                <div class="loyalty-faq__content  accessibility">
                                    Accumulator bets with two or more selections.  SP bets can be included ...</div></li></ul></div></div></div></div>
  • Fullscreen, fluid height masthead

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

    var masthead       = document.getElementById("js-masthead");
    var pageWidth      = masthead.offsetWidth;
    var viewportHeight = window.innerHeight;
    var fluidPadding   = (viewportHeight/pageWidth) * 100;
    
    masthead.style ...
  • Fullscreen, fluid height masthead #14 is the latest revision

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

    var masthead       = document.getElementById("js-masthead");
    var pageWidth      = masthead.offsetWidth;
    var viewportHeight = window.innerHeight;
    var fluidPadding   = (viewportHeight/pageWidth) * 100;
    
    masthead.style ...
  • Work section idea

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

    <div class="masthead">
    
        <a href="#" class="logo">
            <img src="data:image/png;base64,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" alt="CSS Wizardry" class="logo__img" width="64" height="64" />
        </a>
    
    </div>
    
    <div class="page">
    
        <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></div>
  • Sass: Silent class generator #56 is the latest revision

    Generate a solid and a silent class in one go.

    <p class="foo  foo--bar">Foo bar baz</p>
    
    <p class="bar">Foo bar baz</p>
  • Slant

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

    <span class="slant  slant--before  slant--after">Lorem ipsum dolor sit amet</span>
  • CSS Wizardry details

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

    <p class="details">       <a href="">harry@<b class="brand">csswizardry</b>.com</a>
                 <a href=""><b class="brand">csswizardry</b>.com</a>
     <a href="">twitter.com/<b class="brand">csswizardry</b></a>
      <a href="">github.com/<b class="brand">csswizardry</b></a>
    <a href="">dribbble.com/<b class="brand">csswizardry</b></a></p>
  • Poor man’s truncation. #3 is the latest revision

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

    <div class="truncate">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget ...</p></div>
  • CSS hexagon #24 is the latest revision

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

    <div class="foo">
        This is content
    </div>
  • Fluid-height banner #17 is the latest revision

    CSS Wizardry style fluid banner.

    <a href="http://www.flickr.com/photos/rockersdelight/9184241504/"
       target="_blank"
       title="Flapjack, by Ashley Baxter"
       class="banner"
     ></a>