A simple set of CSS styles to allow quick wireframe prototypes in HTML/CSS.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Update copyright dates. Jan 4, 2016
README.md Update README.md Dec 10, 2014
app.css
grid-dark.png Add missing background image files. Jan 25, 2015
grid-light.png Add missing background image files. Jan 25, 2015
index.html Initial commit Nov 6, 2014
noise.png Initial commit Nov 6, 2014
wf.css Update wf.css Dec 10, 2014

README.md

WireFrame

A simple set of CSS styles to allow quick wireframe prototypes in HTML/CSS. Because, why not have wireframes that provide the starting point for the actual work!

Options

By default, the wireframes use a dark theme.

Dark Theme

To change to a light theme, just alter the body tag to: <body class="light">

Light Theme

Use

When creating a prototype, just add the wf class to a surrounding tag and use the wf-* and wf-child-* classes to add styles to elements.

There are the following classes (all with wf-child-* classes):

  • wf-top to add a wireframe border to the top of an element
  • wf-bottom to add a wireframe border to the bottom of an element
  • wf-left to add a wireframe border to the left of an element
  • wf-right to add a wireframe border to the right of an element

Forms and inputs are also styled to match the wireframe look. Handwriting-style fonts are used throughout. The loaded fonts are Indie Flower for default text, Rock Salt for headers, and Coming Soon for whatever you want (not set to anything in the wireframe CSS).

The wf.css file also includes Font Awesome icon fonts.

Inspired by Wireframing with HTML and CSS.