Online Webpage Builder With jQuery And Bootstrap - VvvebJs

Online Webpage Builder With jQuery And Bootstrap - VvvebJs
File Size: 1.04 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

VvvebJs is a jQuery and Bootstrap based online web page builder/creator where the users are allowed to add/remove Bootstrap 4 components via drag and drop. Licensed under the Apache License 2.0.

Features:

  • Redo/undo operations.
  • Fullscreen mode.
  • Export html.
  • Mobile/tablet/desktop views.
  • Move elements.
  • Clone elements.

See also:

How to use it:

1. Load the necessary jQuery library and Bootstrap 4 framework in the document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

2. Load the VvvebJs web page builder's JavaScript and CSS files in the document.

<!-- hotkey plugin-->
<script src="js/jquery.hotkeys.js"></script>

<!-- builder code-->
<script src="libs/builder/builder.js"></script> 

<!-- undo manager-->
<script src="libs/builder/undo.js"></script>  

<!-- inputs-->
<script src="libs/builder/inputs.js"></script>  

<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script> 
<script src="libs/builder/components-widgets.js"></script>

3. Initialize the web page builder.

$(document).ready(function() {
  Vvveb.Builder.init('demo/index.html', function() {
    //load code after iframe is loaded here
    Vvveb.Gui.init();
  });
});

4. Override the default CSS variables in the _variables.scss.

// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.


//
// Color system
//

// stylelint-disable
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

...

This awesome jQuery plugin is developed by givanz. For more Advanced Usages, please check the demo page or visit the official website.