JSFiddle

  • Greybox #111 is the latest revision

    Extremely simple wireframing toolkit.

    <div class="island  greybox  greybox--medium  header">Header</div>
    
        <div class=wrapper>
        
            <ul class="nav  nav--fit  nav--block  greybox">
                <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>
        
            <div class="island  greybox  greybox--large">Masthead</div>
        
            <div class=grid>
            
                <div class="grid__item  two-thirds  content">
                    <div class="island  greybox  greybox--gigantic">Content</div>
                </div><!-- /content -->
            
                <div class="grid__item  one-third  sub-content">
                    <div class="island  greybox">
                    
                        <div class=grid>
                            <div class="grid__item  one-half">
                                <div class="islet  greybox">Ad</div>
                            </div>
                            <div class="grid__item  one-half">
                                <div class="islet  greybox">Ad</div>
                            </div>
                        </div>
                    
                        <div class="island  greybox  greybox--huge">Sub content</div>
                    
                    
                        <div class="islet  greybox">Ad</div>
                    
                    </div>
                </div><!-- /sub-content -->
            
            </div>
        
        </div><!-- /wrapper -->
        
    <div class="island  greybox  greybox--medium  footer">Footer</div>
  • Forms #118 is the latest revision

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

    <form action=#>
        
        <fieldset>
    
            <legend>Personal details</legend>
            
            <ul class=form-fields>
                
                <li>
                    <label for=first-name>First name</label>
                    <input type=text class=text-input id=first-name>
                </li>
                
                <li>
                    <label for=last-name>Last name</label>
                    <input type=text class=text-input id=last-name>
                </li>
                
                <li>
                    <label for=email>Email</label>
                    <input type=email class=text-input id=email>
                    <small class=extra-help>.edu emails only</small>
                </li>
                
            </ul>
                
        </fieldset>
    
        <fieldset>
            
            <legend>Contacting you</legend>
            
            <p>We may contact you from time to time ...</p></fieldset></form>
  • inuit.css latest #176 is the latest revision

    Minified version of the latest inuit.css

    <h1>Welcome to inuit.css</h1>
  • Buttons #35 is the latest revision

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

    <p>
        <a href=# class="btn  btn--login">Log in</a>
    </p>
    
    <p>
        <a href=# class="btn  btn--full  btn--login">Log in</a>
    </p>
  • Icon text #35 is the latest revision

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

    <p>
        <a href=# class=icon-text>
            <i class="icon-text__icon  s  s--red-square"></i>Foo bar
        </a>
    </p>
    
    <p>
        <a href=# class=icon-text--rev>
            Foo bar<i class="icon-text__icon  s  s--red-square"></i>
        </a>
    </p>
    
  • Lozenges #16 is the latest revision

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

    <h1>This <span class=pill>here</span> is a pill!</h1>
    
    <p>This <strong class="pill  pill--error">here</strong> is also a pill!</p>
    
    <hr>
    
    <h1>This <span class=loz>here</span> is a lozenge!</h1>
    
    <p>This <strong class="loz  loz--error">here</strong> is also ...</p>
  • Complex link #15 is the latest revision

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

    <a href=log-in class=link-complex>
        <strong class=link-complex__target>Log in</strong> to your account.
    </a>
  • Sprite #32 is the latest revision

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

    <ul>
        <li><a href=#><i class="sprite  sprite--red-square"></i> Foo bar</a></li>
        <li><a href=#><i class="sprite  sprite--blue-circle"></i> Foo bar</a></li>
        <li><a href=#><i class="i  i--$"></i> Deposit funds</a></li>
        <li><a href=#><i class="i  i--star"></i> View your favourites</a></li>
        <li><a href=# class="sprite  sprite--orange-sqaure">Foo bar</a> or <a href=# class="sprite  sprite--green-circle">Bar baz</a></li>
    </ul>
    
  • Flyout #70 is the latest revision

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

    <div class="flyout  demo-block">
        Foo
        <div class="flyout__content  demo-block">
            <h1>Lorem</h1>
            <p>Ipsum</p>
        </div>
    </div>
  • Block list #47 is the latest revision

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

    <ul class=block-list>
        <li>Foo</li>
        <li>Foo <a href=#>Bar</a> Baz</li>
        <li>Baz</li>
        <li><a href=# class=block-list__link>Foo Bar Baz</a></li>
    </ul>