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:

• npm install will install the necessary node.js packages to develop on this project
• grunt will run a series of tasks defined in Gruntfile.js, such as concatenating or minifying CSS and JavaScript.

This is the only bit of the Node language will you will need to know to use Wirefy. Everything else is simple HTML, Sass and Javascript

Adding Elements

All the element styles are separated into individual .scss files. They can be found in the sass folder categorized by their contribution to the overall build. The folder structure is broken down into base, vendor, framework, themes, helpers and modules. To include a particular element style into the main wirefy.scss file simply import the file into the head of the wirefy.scss. For example:

@import 'modules/_buttons.scss';

Anytime you add a new element to your wirefy.scss file, you will need to run grunt to compile the new styles.

If you would rather have access to all the styles and then build your own CSS or Sass file, we have placed the most current full version on CDN. Simply add the linked stylesheet to the head of your file like so:

<link rel="stylesheet" href="//cdn.getwirefy.com/wirefy.css">

Note: The same can be done for the main javascript file

<script src="//cdn.getwirefy.com/wirefy.min.js"></script>

Submitting an Issue

We use the GitHub Issue Tracker to track bugs and features. Before submitting a bug report or feature request, check to make sure it hasn't already been submitted. You can indicate support for an existing issue by voting it up. When submitting a bug report, please include a screenshot and any additional details that can help us debug, such as your operating system and browser version.

If you like this...

If you like using Wirefy, check out our other project called Pattern Portfolio, a living library of deliverables that can be stylized to fit your next project.

You can also show us some love by sharing Wirefy with your social networks. You can also join our monthly newsletter for updates on Wirefy and other responsive ux tips and inspirations.

Tweet Follow @wirefy