A basic, lightweight flow chart module which uses grid system to create a minimal, responsive workflow with SVG put together association lines and and arrows on the web page.
How to use it:
jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Bootstrap
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
Simpleflow Core CSS
<link rel="stylesheet" type="text/css" href="css/simple-flow.min.css">
Simpleflow Core JS
<script src="src/js/simple-flow.min.js"></script>
Add below HTML inside your body tag
<section class="container canvas"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="object"></div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="object"></div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="object"></div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="object"></div> </div> </div> </section>
Sample Usage
<script type="text/javascript"> $(function() { var settings = { lineWidth: 2, lineSpacerWidth: 15, lineColour: '#91acb3', canvasElm: '.canvas' } $('.object').SimpleFlow(settings); }) </script>
Leave a Reply