JSFiddle

  • Media object #59 is the latest revision

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

    <div class=media>
        <img src=http://placekitten.com/96/96 alt="" class=media__img>
        <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    
    <div class=media>
        <img src=http://placekitten.com/96/96 alt="" class=media__img--rev>
        <p class=media__body>Lorem ...</p></div>
  • This or this #20 is the latest revision

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

    <h1 class=this-or-this>
        <a href=# class="this-or-this__this two-fifths">
            Free
        </a>
        <small class="this-or-this__or one-fifth">
            or
        </small>
        <a href=# class="this-or-this__this two-fifths">
            Pro
        </a>
    </h1>
    
    <div class="this-or-this  foo">
        <p class="this-or-this__this  two-eighths">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat ...</p></div>
  • Pagination #50 is the latest revision

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

    <ol class="nav pagination">
        <li class=pagination__first>First</li><!--
     --><li class=pagination__prev>Previous</li><!--
     --><li><a href=/page/1>1</a></li><!--
     --><li><a href=/page/2>2</a></li><!--
     --><li class=current><a href=/page/3>3</a></li><!--
     --><li><a href=/page/4>4</a></li><!--
     --><li><a href=/page/5>5</a></li><!--
     --><li class=pagination__next><a href=/page/next>Next</a></li><!--
     --><li class=pagination__last><a href=/page/last>Last</a></li>
    </ol>
  • Split object #40 is the latest revision

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

    <dl class=split>
        <dt class=split__title>Burger and fries</dt>
        <dd>&pound;5.99</dd>
        <dt class=split__title>Fillet steak</dt>
        <dd>&pound;19.99</dd>
        <dt class=split__title>Ice cream</dt>
        <dd>&pound;2.99</dd>
    </dl>
    
    <ol class=split>
        <li><b class=split__title>1st place</b> Bob</li>
        <li><b class=split__title>2nd place</b> Lilly</li>
        <li><b class=split__title>3rd ...</b></li></ol>
  • Matrix object #91 is the latest revision

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

    <ul class="matrix three-cols">
        <li class=all-cols>Lorem</li>
        <li>Ipsum <a href=#>dolor</a></li>
        <li><a href=# class=matrix__link>Sit</a></li>
        <li>Amet</li>
        <li class=all-cols>Consectetuer</li>
    </ul>
    
    <ul class="multi-list four-cols">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Sit</li>
        <li>Sit</li>
        <li>Dolor</li>
        <li>Ipsum</li>
        <li>Lorem</li>
    </ul>
  • Flexbox #57 is the latest revision

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

    <div class=flexbox>
        
        <div class=flexbox__item>
            <b>Welcome to</b>
        </div>
        
        <div class=flexbox__item>
            <img src="https://a248.e.akamai.net/camo.github.com/b402c145cb1134727d8b1416c7f080731cca1244/687474703a2f2f63737377697a61726472792e636f6d2f696e7569746373732f696d672f6c6f676f2e6a7067" alt="inuit.css logo">
        </div>
        
    </div>
  • The island object #49 is the latest revision

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

    <div class="island  demo-block">
        I am boxed off.
    </div>
    
    <div class="islet  demo-block">
        I am boxed off.
    </div>
  • Nav abstraction #108 is the latest revision

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

    <ul class=nav>
        <li><a href=#>Home</a></li>
        <li><a href=#>About</a></li>
        <li><a href=#>Portfolio</a></li>
        <li><a href=#>Contact</a></li>
    </ul>
    
    <ul class="nav  nav--stacked">
        <li><a href=#>Home</a></li>
        <li><a href=#>About</a></li>
        <li><a href=#>Portfolio</a></li>
        <li><a href=#>Contact</a></li>
    </ul>
    
    <ul class="nav  nav--banner">
        <li><a href=#>Home</a></li>
        <li><a href=#>About</a></li>
        <li><a href=#>Portfolio</a></li>
        <li><a href=#>Contact</a></li>
    </ul>
    
    <ul class="nav  nav--block  foo">
        <li><a href=#>Home</a></li><!--
     --><li><a href=#>About</a></li><!--
     --><li><a href=#>Portfolio</a></li><!--
     --><li><a href=#>Contact</a></li>
    </ul>
    
    <ul class="nav  nav--fit  foo">
        <li><a href=#>Home</a></li>
        <li><a href=#>About</a></li>
        <li><a href=#>Portfolio</a></li>
        <li><a href=#>Contact ...</a></li></ul>
  • Columns #16 is the latest revision

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

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget ...</p>
  • Grid system #540 is the latest revision

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

    <h1>Regular grids</h1>
    
    <div class=grid>
        
        <div class="grid__item  one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-half">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-quarter">
            <p class=demo-block>Bar</p>
        </div><!--
        
     --><div class="grid__item  one-quarter">
            <p class=demo-block>Baz</p>
        </div><!--
        
     --><div class="grid__item  one-third">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  two-thirds">
            <p class=demo-block>Bar</p>
        </div><!--
        
     --><div class="grid__item  one-half">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-half">
            
            <div class=grid>
                
                <div class="grid__item  one-half">
                    <p class=demo-block>Foo</p>
                </div><!--
        
             --><div class="grid__item  one-half">
                    <p class=demo-block>Bar</p>
                </div>
                
            </div>
            
        </div><!--
        
     --><div class="grid__item  one-whole">
            <p class=demo-block>Foo</p>
        </div>
        
    </div>