JSFiddle

  • Workshop Task 1

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

    <ul class="image-grid">
    
        <li class="image-grid__item">
            <img src="http://placehold.it/320x320" alt="" class="image-grid__image" />
        </li>
    
        <li class="image-grid__item">
            <img src="http://placehold.it/100x100" alt="" class="image-grid__image" />
        </li>
    
        <li class="image-grid__item">
            <img src="http://placehold.it/100x100" alt="" class="image-grid__image" />
        </li>
    
        <li class="image-grid__item">
            <img src="http://placehold.it/100x100" alt="" class="image-grid__image" />
        </li>
    
        <li class="image-grid__item">
            <img src="http://placehold.it/100x100" alt="" class="image-grid__image" />
        </li>
    
        <li class="image-grid__item">
            <img src="http://placehold.it/100x100" alt="" class="image-grid__image" />
        </li>
    
        <li class="image-grid__item">
            <img src="http://placehold.it/100x100" alt="" class="image-grid__image" />
        </li>
    
        <li class="image-grid__item">
            <img src="http://placehold.it/100x100" alt="" class="image-grid__image" />
        </li>
    
        <li class="image-grid__item">
            <img src="http://placehold.it/100x100" alt="" class="image-grid__image" />
        </li>
    
        <li class="image-grid__item">
            <img src="http://placehold.it/100x100" alt="" class="image-grid__image" />
        </li>
    
    </ul>
  • Workshop boilerplate

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

    No code. How about adding some?
  • Elastic accordion. #15 is the latest revision

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

    <ul class="foo  foo--two-items">
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
    </ul>
    
    
    <ul class="foo  foo--three-items">
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
    </ul>
    
    
    
    <ul class="foo  foo--four-items">
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
        <li class="foo__item">
    
            <h2>Foo</h2>
        </li>
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
    </ul>
    
    
    
    <ul class="foo  foo--five-items">
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
        <li class="foo__item">
            <h2>Foo</h2>
        </li>
    </ul>
  • Make tables more betterer.

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

    <table class="table">
        <colgroup>
            <!-- Every table has 24 columns, like a grid system. -->
            <col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /><col />
        </colgroup>
        <tbody>
            <tr class="table__placeholder">
                <!-- Make Chrome work :( -->
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <!-- `colspan`s are now used like `.grid-8` classes. -->
            <tr>
                <td colspan="100%">Foo</td>
            </tr>
            <tr>
                <td colspan="12">Foo</td>
                <td colspan="12">Bar</td>
            </tr>
            <tr>
                <td colspan="8">Foo</td>
                <td colspan="8">Bar</td>
                <td colspan="8">Baz</td>
            </tr>
            <tr>
                <td colspan="6">Foo</td>
                <td colspan="6">Bar</td>
                <td colspan="6">Baz</td>
                <td colspan="6">Foo</td>
            </tr>
            <tr>
                <td colspan="4">Foo</td>
                <td colspan="4">Bar</td>
                <td colspan="4">Baz</td>
                <td colspan="4">Foo</td>
                <td colspan="4">Bar</td>
                <td colspan="4">Baz</td>
            </tr>
            <tr>
                <td colspan="3">Foo</td>
                <td colspan="3">Bar</td>
                <td colspan="3">Baz</td>
                <td colspan="3">Foo ...</td></tr></!--></tbody></table>
  • Quickly swap sections/chunks of CSS #87 is the latest revision

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

    var el = document.getElementById("foo");
    
    /**/
    el.style.border = "1px solid red";
    /*/
    el.style.border = "1px solid blue";
    /**/
  • Quasi-nested links #47 is the latest revision

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

    /**
     * Provide a large ‘read more’ hit area for clicking anywhere in the article
     * excerpt whilst preserving the ability to click ...
  • Headings Sass mixin

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

    /**
     * With thanks to @lar_zzz, @paranoida and @rowanmanning
     */
  • Responsive grids

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

    <div class="page">
        <div class="sub-content">
            <p class="block">Sub content</p>
        </div>
        <div class="content">
            <p class="block">Main content</p>
        </div>
        <div class="tertiary-content">
            <p class="block">Tertiary content</p>
        </div>
    </div>
  • beautons #43 is the latest revision

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

    <p>
        <a href=# class="btn  btn--small  btn--soft">Log in to play</a>
    </p>
    
    <p>
        <a href=# class="btn  btn--positive">Log in to play</a>
    </p>
    
    <p>
        <a href=# class="btn  btn--large  btn--negative  btn--full">Log in to play</a>
    </p>
    
    <p>
        <a href=# class="btn  btn--huge  btn--inactive  btn--hard">Log in to play</a>
    </p>
    
    <h1>This is <a href="#" class="btn  btn--natural  btn--soft"> a button ...</a></h1>
  • Obscuring matrix flyouts

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

    <!--
    Non-obscuring version: jsfiddle.net/csswizardry/Z2GX5
    -->
    <ul class=matrix>
      
      <li>
        <img src=http://placekitten.com/100/100 alt="" class=matrix__img>
        <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></li></ul></!--
    non-obscuring>