JSFiddle

  • Flexbox #1 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>
  • inuit.css breadcrumbs idea #11 is the latest revision

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

    <h1>inuit.css breadcrumbs</h1>
    
    <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>
  • inuit.css latest

    Minified version of the latest inuit.css

    <div class="island  greybox  greybox--medium">
        <div class=wrapper>
            Header
        </div>
    </div>
    
    <div class=wrapper>
        <div class=gw>
        
            <div class="g  two-thirds">
                
                <div class="island  greybox  greybox--medium">Foo</div>
                
                <div class=gw>
                    <div class="g  one-half">
                        <div class="island  greybox  greybox--medium">Foo</div>
                    </div>
                    <div class="g  one-half">
                        <div class="island  greybox  greybox--medium">Foo</div>
                    </div>
                    
                    <div class="g  one-third">
                        <div class="island  greybox  greybox--small">Foo</div>
                    </div>
                    <div class="g  one-third">
                        <div class="island  greybox  greybox--small">Foo</div>
                    </div>
                    <div class="g  one-third">
                        <div class="island  greybox  greybox--small">Foo</div>
                    </div>
                </div>
                
                <div class="island  greybox  greybox--medium">Foo</div>
                
                <div class="island  greybox  greybox--medium">Foo</div>
                
            </div>
            
            <div class="g  one-third">
                <div class="greybox  greybox--gigantic">Foo</div>
            </div>
        
        </div>
    </div>
        
    <div class="island  greybox  greybox--medium  footer">
        <div class=wrapper>
            Footer
        </div>
    </div>
  • Emulate flexbox. Kinda. #12 is the latest revision

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

    <header 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>
        
    </header>
  • inuit.css and baselines #11 is the latest revision

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

    <h1 class=giga>inuit.css</h1>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae ...</p>
  • Protect MQs from minifiers

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

    <h1>Foo</h1>
  • OOBEM #6 is the latest revision

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

    /**
     * _object-name
     * _object-name__subcomponent-name
     * _object-name--modifier-name
     * _object-name__subcomponent-name--subcomponent-modifier-name
     *
     * extension-name
     * extension-name__subcomponent-name
     * extension-name--modifier-name
     * extension-name__subcomponent-name--subcomponent-modifier-name
     */
  • Moving inuit.css to BEM

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

    <h1>Moving inuit.css to <abbr title="Block, Element, Modifier">BEM</abbr></h1>
    
    <p><a href="http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/"><abbr title="Block, Element, Modifier">BEM</abbr></a> is a means of naming, categorising, namespacing and identifying CSS selectors, particularly in an ...</p>
  • This or this #5 is the latest revision

    Mootools 1.4.5, HTML, SCSS, JavaScript

    <h1 class="this-or-this account-options">
        <a href=# class="this two-fifths">
            Free
        </a>
        <span class="or one-fifth">
            or
        </span>
        <a href=# class="this two-fifths">
            Pro
        </a>
    </h1>
  • inuit.css v4.0.0 #184 is the latest revision

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

    <h1 class=giga>inuit.css</h1>