A CSS framework to quickly design responsive wireframes directly in HTML.
-
Download a release, then put the CSS and Javascript files in your project folders.
-
Include your favorite CSS grid system in the
<head>, then the wireframe CSS and Javascript.
<!-- Grid system of your choice --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.min.css" type="text/css" /> <!-- Wireframes CSS --> <link rel="stylesheet" href="css/wireframes.css" type="text/css" /> <!-- Wireframes Javascript --> <script type="text/javascript" src="javascript/wireframes.js"></script> …- Compose your ergonomy by putting blocks where you want, and apply wireframe classes when needed.
<div class="container"> <div class="wf-block">Header</div> <div class="row"> <div class="col"> <h1> <span class="wf-text-lines wf-text--important"> Lorem ipsum dolor sit amet </span> </h1> <p> <span class="wf-text-lines">Vestibulum cras condimentum dis ullamcorper mattis dictumst interdum a commodo a parturient.</span> </p> </div> <div class="col-md-4 wf-optional"> <div class="wf-block wf-block--fill"> Navigation </div> </div> </div> </div>Check out our documentation for a live demo and detailled explanations.
The icons are based on the sketchy icon set by Alice Mortaro. Licence : Creative Commons