VSBuilder Documentation

Files Structure
Let's talk about what's inside the package.

Click on the folders to open them.
Docs (builder documentation)
css
fonts
img
js
index.html
Octa (theme built on VSBuilder)
css (style sheets used in the theme, totally compiled and minified from LESS)
demo (9 fully working websites generated with VSBuilder using Octa theme)
docs (documentation on how to customize the theme)
fonts (font icons used in the theme)
img (images folder structure you should follow when building a page on Octa)
js (click to see the JavaScript structure)
components (list of custom builder components)
lib (external JavaScript libraries used in the theme)
modules (general bindings and custom functions to make components interactive)
main.js (page module loader)
less (click to see the LESS structure)
frameworks (bootstrap and foundation style sheets and some builder helpers)
theme (click to see the theme structure)
octa (theme less files decomposed according to SMACSS)
theme.helper.less (styles which make components look right without JavaScript)
theme.less (imports all the files from 'octa' folder)
builder.html (the builder is imported and initialized inside this file)
index.html (the generated HTML code from VSBuilder goes here)
VSBuilder (builder's file structure)
css (builder's style sheets)
img (images used in the builder's UI)
js (builder's brain)
VS Page (blank file structure used to start building custom themes on VSBuilder)
css (click to see the theme's style sheet structure)
frameworks (bootstrap and foundation style sheets)
theme (theme style sheets compiled and minified from less)
custom (the generated css code goes here)
fonts (font icons used in the theme in case you have any)
img (images could be stored here)
js (create your own JavaScript structure)
less (click to see the LESS structure)
frameworks (bootstrap and foundation style sheets and some builder helpers)
theme (click to see the theme structure)
theme.helper.less (styles which make components look right without JavaScript)
theme.less (theme CSS rules)
builder.html (the builder is imported and initialized inside this file)
index.html (the generated code from VSBuilder goes here)

Getting Started Guide
In just few steps you are already into it.

a) I'm a User

If you want to use VSBuilder as it is, than we are proud to introduce Octa, the very first theme built for VSBuilder with a lot of components that should cover your needs. To get started just follow the following steps:

  1. Find in the package the folder named Octa.
  2. Copy and rename it according to your project name.
  3. Open the builder.html that's inside the "Octa" folder.
  4. Start building your web page.

Please note that Octa depends on VSBuilder so it should be placed at the same folder hierarchy level as "VSBuilder" folder is. If you want to move your project folder elsewhere, just make sure you've copied the "VSBuilder" folder too.

In order to clean up your project folder you could remove the "demo" and "docs" folders.

b) I'm a Developer

If you are interested in creating more complex projects using VSBuilder and customize it, we have a short guide for you too:

  1. Find in the package the folder named VS Page.
  2. Copy and rename it according to your project name.
  3. Start creating themes and custom components for VSBuilder.
Please note that your new created project depends on VSBuilder so it should be placed at the same folder hierarchy level as "VSBuilder" folder is. If you want to move your project folder elsewhere, just make sure you've copied the "VSBuilder" folder too.

Builder's Structure
Within a simple schema.

Frameworks
VSBuilder is available on two popular frameworks.

foundation

Foundation

bootstrap

Bootstrap

Basic Usage
Hands on using VSBuilder's user interface.

Breadcrumbs

DOM breadcrumbs allows you to easily select any parent of your current selected element and customize it.

Add Sections

In order to add more sections you can write the needed number of section into the corresponding field in the page tab:

Or you can just double click on the page and that will add a new section to the page:

Add Rows

In order to add more rows you can write the needed number of rows into the corresponding field in the header, section or footer tab:

Or you can just double click on the section, header or footer and that will add a new row to that section:

Full Width Row

In order to make a row full width, firstly select the row, go to "Layout options" and check the full width checkbox:

Add Columns

In order to add more columns you can write the needed size of the column into the corresponding field in the row tab:

Or you can just double click on the row and that will add a new column to that row with a default size of 4 columns:

Change Column Sizes

Select the column and depending on device dimensions change column's size:

Or you could resize them on the fly by drag and dropping their sides.

Change Container Size (max width of all the rows);

Select the page and in the "Layout options" find the "Container width" input. There you can set a new container width.

Change Font Family

Select the page and in the "Font options" find the "Font url" input. There you should paste the Google font Url and in the "Font family name" you should paste the font name given by "Google Fonts".

Section ID

Setting a section id can be useful when building a menu with smooth scrolling to a specific section. In order to set a section id, select the section and fill the "Section ID" field:

Minify CSS

To minify the generated CSS code, in the page tab, find the "Code options" and check the "Minify css" checkbox.

Hotkeys
You can go even faster.

Keypress Command
F1 Opens VSBuilder's documentation in a new tab.
CTRL + S Save builder's state.
CTRL + SHIFT + R Reset builder, that will erase all the saved data from the local storage.
Delete Remove the selected element (section, row, column, component).

Advanced Usage
Let's go deeper.

Initialize VSBuilder

In order to initialize VSBuilder you have just to call VSBuilder.init() once DOM is ready


								

Configure VSBuilder

You also can pass some configuration object to the initialize function:


								

List of Configuration Options

Let's take a look at the configuration options and their types.

Default Type Description
appendTo 'body' String Expects an jQuery selector string. Select the DOM node where VSBuilder's UI should be appended. (more)
autoSave 0 Number Auto save each x minutes. The default value 0 means that auto save is disabled. Min admissible value is 1.
framework 'foundation' String There are two available frameworks Bootstrap and Foundation.
fonts [] Array List of fonts that should be included in the page (more)
styleSheets [] Array List of style sheets that should be included in the page. (more)
scriptFiles [] Array List of script files that should be included in the page. (more)
useRequire {} Object Use require within your generated page. (more)
components [] Array An array of script file names. (more)
save null Function A custom save function which is fired once the user saves the current state of the builder. And receives as parameter the builder's JSON representation. (more)
load null Function A custom load function which is fired once the builder is initialized and needs the saved data. It must return the builder's JSON representation given as parameter to the save function. (more)
reset null Function A custom reset function which is fired once the user resets the builder. It should erase all the stored data and after that the page will be reloaded. (more)

Option 'appendTo'

This option gives the opportunity to append the VSBuilder's UI to any DOM node you may need. Just provide the jQeury selector on that element.

Please note that, VSBuilder's page will fit the height of that element and if you'll leave the height of that element being 'auto', you won't be able to double click on the page to create more sections, you'll be able to add more sections only by using the sidebar options.

								

Option 'fonts'


								

Option 'styleSheets'


								

Option 'scriptFiles'


								

Option 'useRequire'

This option will generate a script tag as this one: <script data-main="mainPath" src="requirePath"></script>


								

Option 'components'

By providing a list of components, your are telling VSBuilder that there are some components already created, so it will search for js files in projectName/js/components/

Please make sure you provided just the file name without extension. For example instead of
menu.js
use
menu

								

Options 'save', 'load' and 'reset'

By providing these three functions, you override the default ones. The example below is illustrating the case using jQuery.ajax() function, but you are free to use any technique you want. There are just two required things: manipulate the data synchronously and return the expected JSON with the load function.

Please note that if one of these functions is provided, the default one is ignored. Otherwise VSBuilder will try to manipulate the local storage.

								

List of Public Methods

Here is the list of all available methods that you can call on VSBuilder object.

Return Description
save() Void Saves the current VSBuilder's state.
getJSON() Object Returns the current JSON representation of VSBuilder.
getHTML() String Returns the full generated HTML code.
getHeadHTML() String Returns the head's generated HTML code.
getBodyHTML() String Returns the body's generated HTML code.
getHeaderHTML() String Returns the header's generated HTML code.
getSectionsHTML() String Returns the section's generated HTML code.
getFooterHTML() String Returns the footer's generated HTML code.
getCSS() String Returns the generated CSS code.
getJSFiles() Array Returns an Array of objects representing the JavaScript files included in the page's head.
getCSSFiles() Array Returns an Array of objects representing the CSS files included in the page's head.
getPageMeta() Object Returns an Object with the meta information provided by the user, like page title, author, description and keywords.

Custom Components
Here's the point where VSBuilder breaks all the limits.

Create Custom Component

In order to create your very first component, follow the following simple steps.

  1. Create a menu.js file within the projectName/js/components/ folder.
  2. Add the new created component to VSBuilder like in the example below.
  3. 
    								
  4. Tell VSBuilder about the new created component when initializing it in your builder.html file:
  5. 
    								

Input List

Let's talk about how you can get more advantage of the 'inputList':


								

Form Presets

What is a preset and how it affects your component's form? That's simple, during creating VSBuilder we observed that there are some inputs that we include very often, so we thought why not to create some templates for them and call them when is needed. That will just speed up your work flow. The list of available presets is shown in the code below.


								
Click on the presets below to see what objects are added to the input list once the are used.
Align

										
Margin

										
Padding

										
Border Radius

										
Theme Color

										
Text Color

										
Border

										
Background

										
Columns

										

Templates

The templates are the most important and at the same time the most interesting part of VSBuilder. They permit you to create large blocks of code in seconds. Take a look at the code below to see how templates work. If you want to learn more about templates and theirs possibilities take a look at the underscore's template system.


								

Css

In order to create some CSS for your custom components you have to use your predefined inputs. Take a look at the example below.


								

Subforms

They work exactly the same as simple forms do. By the way there are some differences. The main difference is that the values from the subForm inputs could not be used inside the css templates. And the second difference is that the subForm will create sub components and you will be able to loop through them within your template. Let's make our previous component more advanced using a subForm.


								

Source and Credits
If you feel uncomfortable with some notions, take a look at the web resources listed below.

Fonts

Frameworks

Scripts