JSFiddle

  • CSV conf

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

    /**
     * A semantic implementation of the http://csvconf.com/ website.
     */
  • Fraction width classes #8 is the latest revision

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

    <div class="8/12" style="background-color: red;  color: white;">Foo</div>
  • Sass rgba() fallback mixin #28 is the latest revision

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

    <h1>Heading</h1>
    
    <div class="box">
        Box
    </div>
  • Table grid system #13 is the latest revision

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

    <h2>Nothing lines up</h2>
    
    <table>
        <thead>
            <tr>
                <th>Lorem</th>
                <th>Ipsum</th>
                <th>Dolor</th>
                <th>Sit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem</td>
                <td>Ipsum</td>
                <td colspan="2">Dolor Sit</td>
            </tr>
        </tbody>
    </table>
    
    <table>
        <thead>
            <tr>
                <th>Lorem</th>
                <th>Ipsum</th>
                <th colspan="6">Dolor Sit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>One</td>
                <td>Two</td>
                <td>Three</td>
                <td>Four</td>
                <td>Five ...</td></tr></tbody></table>
  • Pure CSS, equal-width navigation tabs. #1098 is the latest revision

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

    /**
     * Using only CSS, we can make a tabbed navigation whose tabs always
     * occupy an equal share of the available width ...
  • Contract #7 is the latest revision

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

    <h1>Contract</h1>
    
    <h2>Terms and definitions</h2>
    
    <ul>
    <li><strong>‘This document’</strong> refers to this contract and the terms and agreements within
    it.</li>
    <li><strong>‘The Work’</strong> refers ...</li></ul>
  • Architecture website

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

    <h1 class="box  sketchy">Harry Roberts—<br />Front-end Architect</h1>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam ...</p>
  • Nested silent class mixin issue

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

    <p class="foo">Lorem <span class="bar">ipsum dolor</span> sit amet</p>
  • Layout tool

    An evolution and combination of csswizardry-grids and the flag object.

    <p>
        <b>Equally spaced items with gutters:</b>
    </p>
    
    <ul class="layout  layout--equal  layout--spaced">
    
        <li class="layout__item">
            <span class="demo-block">Foo</span>
        </li>
    
        <li class="layout__item">
            <span class="demo-block">Bar</span>
        </li>
    
        <li class="layout__item">
            <span class="demo-block">Baz</span>
        </li>
    
    </ul>
    
    <hr />
    
    <p>
        <b>Items as small as they need to be with one item that ...</b></p>
  • Kickstarter idea

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

    <p>I had an idea over the weekend for a product that
    <a href="https://twitter.com/naomisusi">@naomisusi</a> and I might like to work
    on together ...</p>