JSFiddle

  • 3-d Checker Board #1 is the latest revision

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

    <div class='container'>
        <div class='foo'>
        <div class='blue'></div>
        <div class='pink'></div>
        <div class='blue'></div>
        <div class='pink'></div>
        <div class='blue'></div>
        <div class='pink'></div>
            <div class='blue'></div>
        <div class='pink'></div>
        <div class='blue'></div>
        <div class='pink'></div>
        <div class='blue'></div>
        <div class='pink'></div>
            <div class='blue'></div>
        <div class='pink'></div>
        <div class='blue'></div>
        <div class='pink'></div>
        <div class='blue'></div>
        <div class='pink'></div>
            <div class='blue'></div>
        <div class='pink'></div>
        <div class='blue'></div>
        <div class='pink'></div>
        <div class='blue'></div>
        <div class='pink'></div>
        </div>
        
    </div>
  • product categories

    Underscore 1.4.4, HTML, CSS, JavaScript

    function Product(name, categories) {
    	this.name = name;
        this.categories = categories;
    }
    
    
    var categories = [
        'food',
        'Scotland',
        'books',
        'sport'
    ];
    
    
    var products = [
    	new Product ...
  • inheritance example

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

    function Product(id, name) {
    	this.id = id;
        this.name = name;
    
    
    }
    Product.prototype.doThis = function () {
    	console.log('do this', this.name ...
  • Decorator example #1 is the latest revision

    Underscore 1.4.4, HTML, CSS, JavaScript

    /* Decorator from Javascript patterns by Stoyan Stefanov */
    
    function Product(id) {
    	this.fields = {
        	id : id,
            name : '',
            price : '',
            unit : 'default'
        };
    }
    Product.prototype ...
  • flex box equal columns with gutter #2 is the latest revision

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

    <div class='container'>
        <div class='grid'>
            <div class='grid_item'>
                <div class='foo'>it's the end of the world as we know it</div>
            </div>
             <div class='grid_item'>
                <div class='foo'>it's the end of the world as we ...</div></div></div></div>
  • vertical rhythm #5 is the latest revision

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

    <div class='container'>
    <div class='foo'>
        <h2>hello I love you wont you tell me your name?</h2>
       At vero eos et accusamus et iusto odio dignissimos ducimus ...</div></div>
  • Pretty print #1 is the latest revision

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

    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
    <pre class='prettyprint'>
    (function() {
        var foo = 'hello';
        var bar = document.getElementById('bar');
        bar.addEventListener('click', function(event) {
            console.log('bar');
        }, false);
    }());
        
    </pre>
    
    <p>jjljdj</p>
    
    <pre class='prettyprint'>
    <form action='blah.php' method='post'>
        <input type='text' name='foo'/>
        <button>submit</button>
    </form>
    </pre>
  • nested nav bar

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

    <div class="container">
        <ul class="root">
            <li>customers
                <ul>
                    <li>jdfkjjd</li>
                    <li>fdfd</li>
                </ul>
            </li>
            <li>products
                <ul>
                    <li>add</li>
                    <li>edit
                        <ul>
                            <li>jdfkjjd</li>
                            <li>fdfd</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
  • vertical-align experiments #3 is the latest revision

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

    <h1>Vertical align</h1>
    <a href="http://christopheraue.net/2014/03/05/vertical-align/">vertical align tutorial</a>
    <div class="container">
      
        x
        <span class="alpha"></span>
        <span class="beta"></span>
        <span class="gamma">gamma</span>
    
        
        <br/>
        x<i class="fa fa-pinterest-p"></i><span class="hello">hello</span>
    
        
        
     
        
    </div>
  • flexbox grid #1 is the latest revision

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

    <div class="container">
        <div class="grid">
            <div class="grid-item half">
                <div class="alpha">dfdf</div>
            </div>
            <div class="grid-item quarter">
                <div class="alpha">dfd</div>
            </div>
            <div class="grid-item quarter">
                <div class="beta">dfd</div>
            </div>
            <div class="grid-item third">
                <div class="alpha">dfd</div>
            </div>
            <div class="grid-item third">
                <div class="beta">dfd</div>
            </div>
            <div class="grid-item third">
                <div class="beta">dfd</div>
            </div>
            <div class="grid-item eighth">
                <div class="beta">dfd</div>
            </div>
            <div class="grid-item eighth">
                <div class="beta">dfd</div>
            </div>
            <div class="grid-item eighth">
                <div class="beta">dfd</div>
            </div>
            <div class="grid-item quarter">
                <div class="beta">dfd</div>
            </div>
            <div class="grid-item quarter">
                <div class="beta">dfd</div>
            </div>
            <div class="grid-item eighth">
                <div class="beta">dfd</div>
            </div>
        </div>
    </div>