JSFiddle

  • Non-obscuring matrix flyouts #10 is the latest revision

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

    <!--
    Obscuring version: jsfiddle.net/csswizardry/PRxzf
    -->
    <ul class=matrix>
      
      <li>
        <img src=http://placekitten.com/100/100 alt="" class=matrix__img>
        <div class=matrix__trigger>
          <div class=matrix__flyout><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget ...</p></div></div></li></ul></!--
    obscuring>
  • inuit.css grids

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

    <div class="gw">
        <div class="g  one-half">
            <p>Foo</p>
        </div>
        <div class="g  one-half">
            <p>Foo</p>
        </div>
        <div class="g  one-third">
            <p>Foo</p>
        </div>
        <div class="g  two-thirds">
            <p>Foo</p>
        </div>
    </div>
    
    <div class="island">
    
        <div class="gw">
            <div class="g  one-half">
                <p>Foo</p>
            </div>
            <div class="g  one-half">
                <p>Foo</p>
            </div>
            <div class="g  one-third">
                <p>Foo</p>
            </div>
            <div class="g  two-thirds">
                <p>Foo</p>
            </div>
        </div>
    
    </div>
  • Icon font implementation #14 is the latest revision

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

    <h1>This is text with an icon <i class="i  i--natural" data-char="A"></i></h1>
    
    <p>This is text with an icon <i class="i" data-char="B"></i></p>
    
    <ul>
        <li><i class="i" data-char="a"></i></li>
        <li><i class="i" data-char="b"></i></li>
        <li><i class="i" data-char="c"></i></li>
        <li><i class="i" data-char="d"></i></li>
        <li><i class="i" data-char="e"></i></li>
        <li><i class="i" data-char="f"></i></li>
    </ul>
    
    <ul>
        <li><i class="i  i--large" data-char="a"></i></li>
        <li><i class="i  i--large" data-char="b"></i></li>
        <li><i class="i  i--large" data-char="c"></i></li>
        <li><i class="i  i--large" data-char="d"></i></li>
        <li><i class="i  i--large" data-char="e"></i></li>
        <li><i class="i  i--large" data-char="f"></i></li>
    </ul>
  • ID vs. class performance question #9 is the latest revision

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

    /**
     * N.B. I am NOT suggesting anything here, I do not claim that the following is
     * correct. The following is ...
  • The effects of closing tags on whitespace

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

    <ul class=foo>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
    </ul>
    
    <ul class=foo>
        <li>Foo
        <li>Bar
        <li>Baz
    </ul>
    
    <ul class=foo>
        <li>Foo <li>Bar <li>Baz
    </ul>
    
  • Non-fluid grids

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

    <div class=wrapper>
        
        <div class=gw>
            
            <div class="g  one-third">
                <p>Foo</p>
            </div>
            
            <div class="g  two-thirds">
                <p>Bar</p>
            </div>
            
            
            <div class="g  one-quarter">
                <p>Foo</p>
            </div>
            
            <div class="g  one-half">
                <p>Bar</p>
            </div>
            
            <div class="g  one-quarter">
                <p>Baz</p>
            </div>
            
        </div>
        
    </div>
  • Fixed position test #4 is the latest revision

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

    <div class=foo>Lorem ipsum dolor</div>
    
    <div class=bar>Lorem ipsum dolor</div>
    
    <h1>Fixed position test</h1>
               
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac ...</p>
  • inuit.css latest

    Minified version of the latest inuit.css

    <h1>Welcome to inuit.css</h1>
  • Breadcrumbs

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

    <h1>Welcome to inuit.css</h1>
  • Truncation mixin #12 is the latest revision

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

    <h1 class=foo>This is some text that will truncate</h1>
    
    <p class=bar>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas ...</p>