article:
Creative Website: The Expressive Web
article:
Elements Design: Facebook Covers

Elements Design & Code: Wirefy - The Responsive Wireframe Boilerplate

Advertisement

"Wirefy is a collection of CSS & JS files to help you rapidly experiment with responsive wireframes. Whether you keep them to yourself or use them to help educate your clients, Wirefy is flexible and here to help. Wirefy has been built from the ground up. Following the philosophy of mobile first, Wirefy will respond to the proper viewport. Go ahead, resize this page to see how it works. Wirefy is style agnostic so that clients don't get hung up on colours, fonts, other design elements. It's meant to be another tool for your development kit that provides the most basic styles as a foundation."


Sample

Grid

Resource: Wirefy - The Responsive Wireframe Boilerplate


Menus

Resource: Wirefy - The Responsive Wireframe Boilerplate

<nav role="navigation">
  <ul>
    <li><a href="#">Sample Page 1</a></li>
    <li><a href="#">Sample Page 2</a></li>
    <li><a href="#">Sample Page 3</a></li>
  </ul>
</nav>


Breadcrumbs

Resource: Wirefy - The Responsive Wireframe Boilerplate

<ul class="breadcrumb">
  <li><a href="#">Home</a><span class="divider"></span></li>
  <li><a href="#">Library</a><span class="divider"></span></li>
  <li class="active">Data</li>
</ul>


Pagination

Resource: Wirefy - The Responsive Wireframe Boilerplate

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>
</div>

... 


source
download

Advertisement
Tags: responsive, js, plugin, jquery, grid, menu, breadcrumbs, pagination, pager, images, slideshow, typography, buttons, tabs, tables, forms, media queries, design, layout, develop, web, internet, desktop, mobile, wireframe, boilerplate

Leave a Comment

No Comment

© Creative3x Ltd.