Build intuitive, powerful wireframes for smarter web development

Wirefy was created as a tool to help web designers and developers create fast, manageable wireframes. It helps to speed up the journey between sketches and final deliverables. Like the web, it is in constant iteration. This requires a simple workflow and a well-defined collection of atomic elements so that new UIs can be quickly pulled together.

It is our belief that we aren't building pages but rather systems of components. This is why Wirefy has been built to be as flexible and comprehensive as it possible can be. We are giving you the foundation layer to build on. You can style, add or remove components as you see fit.

Our goal is to help you make smarter UX decisions by focusing on the content first rather than the subjective design decisions. With a bit of base knowledge of HTML and CSS, you can start building flexible wireframes without the headache of working through countless calculations.

Creating static wireframes can be great but sometimes clients just don't understand how they function or change based on various devices. Building functional wireframes will help you communicate with clients better and work as a foundation for your fluid designs without losing sight of the importance of the content.

Use Wirefy to build prototypes quickly, then without starting from scratch implement your Wirefy foundation into any additional framework or CMS system for a fully designed deliverable.

Getting started

To get started with Wirefy quickly, you can either clone or download the git repository

To clone the repository on a Mac, Open terminal and run

$ git clone git://github.com/cjdsie/wirefy.git
If you are unsure about how to clone a git repository then simple click on the download link below.

Download the latest

This framework using Node.js, NPM (Node Package Manager), and Grunt.js to manage the code in this repo. In order to get started with Grunt, you must install the Grunt command line interface (CLI) globally npm install -g grunt-cli. This will give you the ability to use the grunt development tasks found in the Gruntfile.js file. To preview code locally, you'll need to install Node and NPM, then run the following commands from a terminal window, in the repo directory:

 // If Grunt is not installed yet
 $ npm install -g grunt-cli

 // If Grunt is installed start here
 $ npm install
 $ grunt

Those commands do the following: