JSFiddle

  • Simple, responsive nav #422 is the latest revision

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

    /**
     * We need to add a class of `responsive-nav--open` to
     * `#js-responsive-nav` ONLY when the nav is clicked AND
     * when we’re ...
  • Naming UI components in OOCSS #61 is the latest revision

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

    <ul class="ui-list">
    
        <li class="ui-list__item">
            <div class="media">
                <img src="http://dummyimage.com/120/ccc/ccc.png" alt="" class="media__img" />
                <div class="media__body">
                    <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>
  • Consistent sprite layouts

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

    <span class="icon  icon--09"></span>
    
    <span class="icon  icon--large  icon--01"></span>
    
    <span class="icon  icon--respond  icon--07"></span>
    
    <span class="icon  icon--large  icon--11"></span>
    
    <span class="icon  icon--05"></span>
    
    <span class="icon  icon--large  icon--05"></span>
    
    <span class="icon  icon--respond  icon--10"></span>
    
    <!--
    
    <p>Regular:</p>
    
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABgCAMAAADipIp7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGQUYzMUE5QTZBNjExRTNCRkE0Rjk2Q0Y4ODkwMENGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGQUYzMUFBQTZBNjExRTNCRkE0Rjk2Q0Y4ODkwMENGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZBRjMxQTdBNkE2MTFFM0JGQTRGOTZDRjg4OTAwQ0YiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZBRjMxQThBNkE2MTFFM0JGQTRGOTZDRjg4OTAwQ0YiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7UMp3/AAAAJ1BMVEXNzpZ8pp1gVWGmfKHOQEDw2NimfHxYpUf+2khMaG6TutjRcXH///+gjVTnAAAADXRSTlP///////////////8APegihgAAAH1JREFUeNrs1kEOgkAUBUEERcG5/3ndNwcYEqu37ydTy1k+aaRX6n6k7t/UfQEAAAAAAACYDhiTAwAAAAAAAJgPeKcerKn7M10eSAAAAAAAAAD3A/gRAQAAAAAAAJypB1vq/kjd9wQAAAAAAABwP4AfEQAAAAAAwN8DfgIMAEwa8hBIUaj0AAAAAElFTkSuQmCC" />
    
    <p>Large:</p>
    
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABgCAMAAADipIp7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGQUYzMUE1QTZBNjExRTNCRkE0Rjk2Q0Y4ODkwMENGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGQUYzMUE2QTZBNjExRTNCRkE0Rjk2Q0Y4ODkwMENGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzM3ODY4NDZBNUYyMTFFM0JGQTRGOTZDRjg4OTAwQ0YiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZBRjMxQTRBNkE2MTFFM0JGQTRGOTZDRjg4OTAwQ0YiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7rG/HxAAAAJFBMVEXNzpZ8pp1gVWGmfKHOQEDw2NimfHxYpUf+2khMaG6TutjRcXFrDKfzAAAAYUlEQVR42uzONwHAMADAsHQv/nwLwWceCYHGHY7whC8MAQEBAQEBAQEBAQEBAQGB6YErrGEPowgICAgICAgICAgICAgICEwPvGELSziDgICAgICAgICAgICAgIDA9MAvwADYAggQRqyILgAAAABJRU5ErkJggg==" />
    
    -->
  • Spoofed file upload button #2 is the latest revision

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

    <div class="file-upload">
        <span class="btn">Upload</span>
        <input type="file" class="file-upload__input" />
    </div>
  • Content blocks #7 is the latest revision

    Semi-complex, responsive content blocks.

    <ul class="blocks">
        <li class="blocks__item">
            <h4>Lorem ipsum</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae ...</p></li></ul>
  • Availability calendar idea

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

    <table class="calendar">
        <thead>
            <tr>
                <th colspan="4">2014</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="calendar__month  calendar__month--unavailable" title="January – Unavailable"></td>
                <td class="calendar__month  calendar__month--unavailable" title="February – Unavailable"></td>
                <td class="calendar__month  calendar__month--unavailable  calendar__month--current" title="March – Unavailable"></td>
                <td class="calendar__month  calendar__month--unavailable" title="April – Unavailable"></td>
            </tr>
            <tr>
                <td class="calendar__month  calendar__month--limited" title="May – Limited"></td>
                <td class="calendar__month  calendar__month--limited" title="June – Limited"></td>
                <td class="calendar__month  calendar__month--available" title="July – Available"></td>
                <td class="calendar__month  calendar__month--available" title="August – Available"></td>
            </tr>
            <tr>
                <td class="calendar__month  calendar__month--available" title="September – Available"></td>
                <td class="calendar__month  calendar__month--available" title="October – Available"></td>
                <td class="calendar__month  calendar__month--available" title="November – Available"></td>
                <td class="calendar__month  calendar__month--available" title="December – Available"></td>
            </tr>
        </tbody>
    </table>
  • Grouping related classes in your markup #21 is the latest revision

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

    <!--
      - Thinking out loud here (I haven’t actually tried this out on
      - a project before), but this is a way of grouping class-heavy
      - markup to keep related classes together. It doesn’t tell us
      - anything that the BEM notation doesn’t already tell us, but
      - it does make things much easier to scan/glance at (i.e. you
      - don’t even have to read the classes’ prefixes to see if/how
      - they are related). It might be even more useful on projects
      - that don’t employ a namespace-based naming convention.
      -
      - It also means that, as a Vim user, I can use thingslike `ci[`
      - to change the contents of a group in one go, `da[` to delete
      - an entire group in one go, etc.
      -->
    
    <div class="[ foo  foo--large ]  [ bar  bar--inverse ]  baz">
        Foo
    </div>
    
    <div class="[ foo  foo--large ]  bar  baz">
        Foo
    </div>
    
    <div class="foo  [ bar  bar--inverse ]  baz">
        Foo
    </div>
    
    <!--
      - It might be more hassle than it’s worth, as it would be quite
      - easy to accidentally remove a space and invalidate a class,
      - but it’s at least a semi-interesting concept.
      -->
  • Fasetto nav idea #6 is the latest revision

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

    <ul class="primary-nav">
        <li class="primary-nav__item">
            <a href="#" class="primary-nav__link">Home</a>
        </li>
        <li class="primary-nav__item">
            <a href="#" class="primary-nav__link">Pricing</a>
        </li>
        <li class="primary-nav__item">
            <a href="#" class="btn  btn--full">Sign up</a>
        </li>
    </ul>
  • Page Frame Ideas #9 is the latest revision

    Proof of concept for NHS page frame layout

    <div class="page-frame">
        <img src="http://placekitten.com/600/400" class="page-frame__feature" />
        <div class="page-frame__meta">
            <h1>Abraham Maslow</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae ...</p></div></div>
  • Cutting corners #106 is the latest revision

    Snipping the corner off of an element.

    <div class="cut">
    
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget ...</p></div>