JSFiddle

  • Images #126 is the latest revision

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

        <img src="http://placekitten.com/300/200" alt="" class="img--right  img--short  img--round">
        <img src="http://placekitten.com/300/200" alt="" class="img--left  img--medium">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget ...</p>
  • Marginalia object #50 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>
  • Responsive grids #562 is the latest revision

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

    <div class="grid">
        
        <div class="grid__item  one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-third  lap-one-third  palm-one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-third  lap-two-thirds  palm-one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-third  lap-one-half  palm-one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-quarter  lap-one-half  palm-one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-quarter  lap-one-half  palm-one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-half  lap-one-half  palm-one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-third  lap-one-half  palm-one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-third  lap-one-half  palm-one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-third  lap-one-half  palm-one-whole">
            <p class=demo-block>Foo</p>
        </div><!--
        
     --><div class="grid__item  one-whole  lap-one-half">
            <p class=demo-block>Foo</p>
        </div>
        
    </div>
  • Horizontal rules #52 is the latest revision

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

    <h1>inuit.css</h1>
    
    <hr>
    
    <p>Foo bar baz</p>
    
    <hr class=rule>
    
    <p>Foo bar baz</p>
    
    <hr class="rule  rule--dotted">
    
    <ul>
        <li>Foo bar baz</li>
        <li>Bar baz foo</li>
        <li>Baz foo bar</li>
    </ul>
    
    <hr class="rule  rule--dashed">
    
    <ul>
        <li>Foo bar baz ...</li></ul>
  • Stats object #57 is the latest revision

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

    <div class="stat-group  twitter-stats">
        <dl class=stat>
            <dt class=stat__title>Tweets</dt>
            <dd class=stat__value>27,740</dd>
        </dl>
        
        <dl class=stat>
            <dt class=stat__title>Following</dt>
            <dd class=stat__value>11,529</dd>
        </dl>
    
        <dl class=stat>
            <dt class=stat__title>Followers</dt>
            <dd class=stat__value>12,105</dd>
        </dl>
    </div>
  • Fixed sidebar, fluid content #82 is the latest revision

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

    <div class=page>
        <div class=sidebar>
            This is your sidebar div
        </div>
        
        <div class=content>
            This is your content div
        </div>
    </div>
  • Options nav #86 is the latest revision

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

    <ul class="nav  options  foo">
        <li><a href=#>Ignore</a></li><!--
     --><li class=current><a href=#>Read</a></li><!--
     --><li><a href=#>Delete</a></li>
    </ul>
    
    <ul class="nav  nav--fit  options  foo">
        <li class=one-third><a href=#>Ignore</a></li><!--
     --><li class="current  one-third"><a href=#>Read</a></li><!--
     --><li><a href=#>Delete</a></li>
    </ul>
  • Grids in IE7 #43 is the latest revision

    Proof of concept for IE7 grid system

    <!--[if lte IE 7]><div class=ie7-grid><![endif]-->
        
        <div class=gw>
            
            <div class="g  one-third"><div class=g__inner>
                <p class=demo-block>Foo</p>
            </div></div>
            
            <div class="g  one-third"><div class=g__inner>
                <p class=demo-block>Bar</p>
            </div></div>
            
            <div class="g  one-third"><div class=g__inner>
                <p class=demo-block>Baz</p>
            </div></div>
            
        </div>
    
    <!--[if lte IE 7]></div><![endif]-->
  • Breadcrumb object #111 is the latest revision

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

    <ol class="nav  breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">The Board</a></li>
        <li class="current"><a href="#">Directors</a></li>
    </ol>
    
    <ol class="nav  breadcrumb--path">
        <li class="breadcrumb__root"><a href="#">inuit.css</a></li>
        <li><a href="#">inuit.css</a></li>
        <li><a href="#">partials</a></li>
        <li class="current"><a href="#">objects</a></li>
    </ol>
    
    <ol class="nav  breadcrumb">
        <li><a href="#">Home</a></li>
        <li data-breadcrumb="|"><a href="#">About</a></li>
        <li data-breadcrumb="|"><a href="#">The Board</a></li>
        <li data-breadcrumb="|" class="current"><a href="#">Directors</a></li>
    </ol>
  • inuit.css latest #30 is the latest revision

    Minified version of the latest inuit.css

    <h1>Welcome to inuit.css</h1>