VS Builder Documentation

Click on the folders to open them.

Docs (builder documentation)

css

fonts

img

index.html

Octa (theme built on VS Builder)

css (style sheets used in the theme, totally compiled and minified from LESS)

demo (9 fully working websites generated with VS Builder 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 VS Builder goes here)

VS Builder (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 VS Builder)

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 VS Builder goes here)

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

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

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

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

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

Find in the package the folder named VS Page.
Copy and rename it according to your project name.
Start creating themes and custom components for VS Builder.

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

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

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:

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:

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

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:

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.

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

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".

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:

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

Keypress	Command
F1	Opens VS Builder'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).

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

<script>
    $(function () {
        VSBuilder.init();
    });
</script>

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

<script>
    $(function () {
        VSBuilder.init({
        	framework: 'foundation'
        });
    });
</script>

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 VS Builder'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)

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

Please note that, VS Builder'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.

$(function () {
    VSBuilder.init({
    	appendTo: '.builder'
    });
});

$(function () {
    VSBuilder.init({
    	fonts: [
    		{
    			name: '', // String - the name of the font
    			path: '', // String - the path to the font, e.g. 'http://fonts.googleapis.com/css?family=Open+Sans'
				fontFamily: '' // String - the css font-family property, e.g. '"Open Sans", sans-serif'.
    		}
    	]
    });
});

$(function () {
    VSBuilder.init({
    	styleSheets: [
    		{
    			name: '', // String - the name of the style sheet
    			path: '', // String - the path to the style sheet
    			includeInPage: false, // Boolean - whether the style sheet should be included in the generated page
    			includeInBuilder: false, // Boolean - whether the style sheet should be included in builder
    			priority: '' // String - low | medium | high. The styles with lower priority are appended firstly
    		}
    	]
    });
});

$(function () {
    VSBuilder.init({
    	scriptFiles: [
    		{
    			name: '', // String - the name of the script file
    			path: '', // String - the path to the script file
    			includeInPage: false, // Boolean - whether the script file should be included in the generated page
    			priority: '' // String - low | medium | high. The scripts with lower priority are appended firstly
    		}
    	]
    });
});

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

$(function () {
    VSBuilder.init({
    	useRequire: {
			mainPath: '', // String - the path to the main file
            requirePath: '' // String - the path to require.js or require.min.js
		}
    });
});

By providing a list of components, your are telling VS Builder 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

$(function () {
    VSBuilder.init({
    	components: [
			'menu',   // searches for projectName/js/components/menu.js
			'logo',   // searches for projectName/js/components/logo.js
			'article' // searches for projectName/js/components/article.js
    	]
    });
});

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 VS Builder will try to manipulate the local storage.

$(function () {
    VSBuilder.init({
    	save: function(buildersJSON){

    		$.ajax({
				// Saving the buildersJSON anywhere you want.
				async: false // Please make sure you are doing it synchronously.
    		});
			
    	},

    	load: function(){

    		var buildersJSON;

			$.ajax({
				// Loading the buildersJSON from the place you previously saved.
				async: false // Please make sure you are doing it synchronously.
    		});

    		return buildersJSON;

    	},

    	reset: function(){

			$.ajax({
				// Remove the data from the server.
				async: false // Please make sure you are doing it synchronously.
    		});

    	}
    });
});

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

	Return	Description
save()	Void	Saves the current VS Builder'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.

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

Create a menu.js file within the projectName/js/components/ folder.
Add the new created component to VS Builder like in the example below.

VSBuilder.addComponent({
	title: 'Menu', // The title of your component.  
    form: { // The form which will fetch your data from the UI. All the received data will be used later in your template.
        inputList: [ // An array of inputs that will be generated in the VS Builder's UI.
            { // Describe your input 
                type: 'text', // Input type
                tooltip: 'Give a title to the navigation', // The tip that will appear on hovering this input.
                label: 'Navigation title', // The label of the input.
                dataName: 'title' // This is the variable name that you'll use later in component's template.
            }
        ],
        align: true // A preset, it will append automatically some inputs to the 'inputList'.
    },
    template: [ // The template that will be rendered when the "Save changes" button will be clicked and all the data will be validated. VS Builder uses the underscore.js templates.
        // <%= aling %> - comes from your form prest.
        // <%= title %> - comes from defined input (dataName).
        '<p class="<%= align %>"><%= title %></p>'
    ].join('')
});

Tell VS Builder about the new created component when initializing it in your builder.html file:

VSBuilder.init({
	components: [
		'menu' // The 'menu' string corresponds to component's file name, not to component's title
	] 
});

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

VSBuilder.addComponent({
    title: '', // String [required] - the title of the component that will be listed in the VS Builder's UI.     
    form: { // Object [required] - the form that will be generated when selecting a component.
        inputList: [ // Array - a list of inputs, textareas, selects of what will consist your form
            {
                type: '', // String - the input type, possible values: text | textarea | select | checkbox
                tooltip: '', // String - some information on what this input is for.
                label: '', // String - visible text prepended to the input.
                placeholder: '', // String - input's placeholder.
                important: null, // Boolean - please don't confuse this with required, if important set as true, VS Builder will make sure that at least one input with important set true is not empty.
                dataName: '', // String - using this string will be generated a variable that will be used later in the template or CSS properties. Important: don't use white spaces.

                // If 'type' is set to 'text' you have some additional options by setting the 'dataType'. It's not required to set some 'dataType', it just sets some more data validation and makes some visual changes.
                // Available values for dataType: spinner | color | image | date | multiple
                dataType: '', // String

                // If 'dataType' is set to 'spinner', then the input expects a number and it will validate the data.
                // Now the input turned into a number spinner and you can change it's value by pressing the 'keyUp' and the 'keyDown'. 
                dataMin: null, // Integer [required] - min number value
                dataMax: null, // Integer [required] - max number value
                dataUnits: '', // String - addition units will be added to the number before being the template rendered. For example: 'px', 'em'. You can leave this empty and you'll get the pure number entered by the client.

                // If 'dataType' is set to 'color' you don't have any additional options, but the input turns into an color picker.

                // If 'dataType' is set to 'image', then the input expects an image title with it's extensions. For example 'myimg.jpg'. The following extensions will pass the validation: jpeg | jpg | png | gif | tiff.
                path: '', // String - the path that will pe prepended to the file name. If the client writes: 'myimg.jpg' and 'path' is set to 'images/' then in the template you'll get as value: 'images/myimg.jpg'. If you leave 'path' empty, you'll get the pure value written by the client.

                // If 'dataType' is set to 'color' you don't have any additional options, but the input turns into an date picker.

                // If 'dataType' is set to 'multiple', then the data written in the input will be converted to an array. The default separator is ';', but you can still change it by setting the 'splitBy' property.
                splitBy: '', // String - it could be any character you want.


                // If 'type' is set to 'textarea', you  don't have any addition options. VS Builder will just generate a multi line input instead of a single line input.

                // If 'type' is set to 'select', you have to specify it's options
                options: [ // Array - list of options in the dropdown
                    { // Object
                        text: '', // String - the text witch will be rendered in the VS Builder's UI
                        value: '' // String - the value witch will be returned in your template
                    }
                ]

                // If 'type' is set to 'checkbox', you'll have to specify what it have to return if it was checked and if it wasn't. You can still leave those empty and it will return just a true / false value.
                ifChecked: '', // String
                ifNotChecked: '' // String

            }
        ],
    },
    template: [
        '<p></p>'
    ].join('')
});

What is a preset and how it affects your component's form? That's simple, during creating VS Builder 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.

VSBuilder.addComponent({
    title: '',    
    form: {

        // Presets
        align: true, // Boolean
        margin: true, // Boolean
        padding: true, // Boolean
        borderRadius: true, // Boolean
        border: true, // Boolean
        themeColor: {
            tooltip: "Pick a color for your logo text", // String
            label: "Logo color" // String
        },
        textColor: {
            tooltip: "Pick a color for the articles text", // String
            label: "Text color" // String
        },
        background: {
            colorTooltip: "Set a background color for this section", // String
            imageTooltip: "Set a background image for this section", // String
            path: "img/page/" // String
        },
        columns: true // Boolean

    },
    template: [
        '<p></p>'
    ].join('')
});

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

Align

align: {
    type: 'select',
    tooltip: "Choose an alignment to this element",
    label: 'Align element',
    dataName: 'align',
    options: [
        {
            text: 'align to left',
            value: 'l-al',
            icon: 'vs-align vs-left'
        },
        {
            text: 'align to center',
            value: 'l-ac',
            icon: 'vs-align vs-center'
        },
        {
            text: 'align to right',
            value: 'l-ar',
            icon: 'vs-align vs-right'
        }
    ]
}

Margin

margin: [
    {
        type: 'text',
        tooltip: 'Set margin top for this element(max: 1000, min: -1000)',
        label: 'Margin top',
        dataName: 'marginT',
        dataType: 'spinner',
        dataMax: '1000',
        dataMin: '-1000',
        dataUnits: 'px',
        dataGroup: 'margin',
        icon: 'vs-arrow vs-up'
    },
    {
        type: 'text',
        tooltip: 'Set margin bottom for this element(max: 1000, min: -1000)',
        label: 'bottom',
        dataName: 'marginB',
        dataType: 'spinner',
        dataMax: '1000',
        dataMin: '-1000',
        dataUnits: 'px',
        dataGroup: 'margin',
        icon: 'vs-arrow vs-down'
    },
    {
        type: 'text',
        tooltip: 'Set margin left for this element(max: 1000, min: -1000)',
        label: 'left',
        dataName: 'marginL',
        dataType: 'spinner',
        dataMax: '1000',
        dataMin: '-1000',
        dataUnits: 'px',
        dataGroup: 'margin',
        icon: 'vs-arrow vs-left'
    },
    {
        type: 'text',
        tooltip: 'Set margin right for this element(max: 1000, min: -1000)',
        label: 'right',
        dataName: 'marginR',
        dataType: 'spinner',
        dataMax: '1000',
        dataMin: '-1000',
        dataUnits: 'px',
        dataGroup: 'margin',
        icon: 'vs-arrow vs-right'
    }

]

Padding

padding: [
    {
        type: 'text',
        tooltip: 'Set padding top for this element(max: 1000, min: 0)',
        label: 'Padding top',
        dataName: 'paddingT',
        dataType: 'spinner',
        dataMax: '1000',
        dataMin: '0',
        dataUnits: 'px',
        dataGroup: 'padding',
        icon: 'arrow up'
    },
    {
        type: 'text',
        tooltip: 'Set padding bottom for this element(max: 1000, min: 0)',
        label: 'bottom',
        dataName: 'paddingB',
        dataType: 'spinner',
        dataMax: '1000',
        dataMin: '0',
        dataUnits: 'px',
        dataGroup: 'padding',
        icon: 'arrow down'
    },
    {
        type: 'text',
        tooltip: 'Set padding left for this element(max: 1000, min: 0)',
        label: 'left',
        dataName: 'paddingL',
        dataType: 'spinner',
        dataMax: '1000',
        dataMin: '0',
        dataUnits: 'px',
        dataGroup: 'padding',
        icon: 'arrow left'
    },
    {
        type: 'text',
        tooltip: 'Set padding right for this element(max: 1000, min: 0)',
        label: 'right',
        dataName: 'paddingR',
        dataType: 'spinner',
        dataMax: '1000',
        dataMin: '0',
        dataUnits: 'px',
        dataGroup: 'padding',
        icon: 'arrow right'
    }
]

Border Radius

borderRadius: {
    type: 'text',
    tooltip: 'Select border radius for your element in "px"',
    label: 'Border radius',
    dataName: 'borderRadius',
    dataType: 'spinner',
    dataMax: '500',
    dataMin: '0',
    dataUnits: 'px'
}

Theme Color

themeColor: {
    type: 'text',
    tooltip: tooltip,
    label: label,
    dataName: 'themeColor',
    dataType: 'color'
}

Text Color

textColor: {
    type: 'text',
    tooltip: tooltip,
    label: label,
    dataName: 'textColor',
    dataType: 'color'
}

Border

border: [
    {
        type: 'checkbox',
        tooltip: 'Check to add top border to this section',
        label: 'Border top',
        dataName: 'borderTop',
        ifChecked: 'l-border-top',
        ifNotChecked: ''
    },
    {
        tooltip: 'Pick a color for the border top',
        label: 'Border top color',
        dataName: 'borderTopColor',
        dataType: 'color'
    },
    {
        type: 'checkbox',
        tooltip: 'Check to add bottom border to this section',
        label: 'Border bottom',
        dataName: 'borderBottom',
        ifChecked: 'l-border-bottom',
        ifNotChecked: ''
    },
    {
        tooltip: 'Pick a color for the border bottom',
        label: 'Border bottom color',
        dataName: 'borderBottomColor',
        dataType: 'color'
    }
]

Background

background: [
    {
        type: 'text',
        tooltip: colorTooltip,
        label: 'Background color',
        dataName: 'backgroundColor',
        dataType: 'color'
    },
    {
        type: 'text',
        tooltip: imageTooltip,
        label: 'Background image',
        dataName: 'backgroundImage',
        dataType: 'image',
        path: path
    },
    {
        type: 'select',
        tooltip: "Select a repeat property for background image",
        label: 'Background image repeat',
        dataName: 'backgroundRepeat',
        options: [
            {
                text: 'repeat image',
                value: 'repeat'
            },
            {
                text: 'dont repeat image',
                value: 'no-repeat'
            },
            {
                text: 'repeat image on x',
                value: 'repeat-x'
            },
            {
                text: 'repeat image on y',
                value: 'repeat-y'
            }
        ]
    },
    {
        type: 'select',
        tooltip: "Select horizontal align for background image",
        label: 'Backgroun horizontal align',
        dataName: 'backgroundAlignX',
        options: [
            {
                text: 'Background align to left',
                value: 'left'
            },
            {
                text: 'Background align to center',
                value: 'center'
            },
            {
                text: 'Backgroun align to right',
                value: 'right'
            }
        ]
    },
    {
        type: 'select',
        tooltip: "Select vertical align for background image",
        label: 'Backgroun vertical align',
        dataName: 'backgroundAlignY',
        options: [
            {
                text: 'Background align to top',
                value: 'top'
            },
            {
                text: 'Background align to middle',
                value: 'center'
            },
            {
                text: 'Background align to bottom',
                value: 'bottom'
            }
        ]
    },
    {
        type: 'select',
        tooltip: "Select size for background image",
        label: 'Background size',
        dataName: 'backgroundSize',
        options: [
            {
                text: 'Background original size',
                value: 'auto'
            },
            {
                text: 'Background contain size',
                value: 'contain'
            },
            {
                text: 'Background cover',
                value: 'cover'
            }
        ]
    },
    {
        type: 'checkbox',
        tooltip: 'This option will make your background parallax',
        label: 'Parallax background',
        dataName: 'parallax'
    }
]

Columns

columns: [
    {
        type: 'select',
        tooltip: "Select the number of items in a single row on desktop devices",
        label: 'Number of items in row on desktop',
        dataName: 'largeColumns',
        options: [
            {
                text: '1 item in row',
                value: 'large-12'
            },
            {
                text: '2 items in row',
                value: 'large-6'
            },
            {
                text: '3 items in row',
                value: 'large-4'
            },
            {
                text: '4 items in row',
                value: 'large-3'
            }
        ]
    },
    {
        type: 'select',
        tooltip: "Select the number of items in a single row",
        label: 'Number of items in row on tablet',
        dataName: 'mediumColumns',
        options: [
            {
                text: '1 item in row',
                value: 'medium-12'
            },
            {
                text: '2 items in row',
                value: 'medium-6'
            },
            {
                text: '3 items in row',
                value: 'medium-4'
            },
            {
                text: '4 items in row',
                value: 'medium-3'
            }
        ]
    },
    {
        type: 'select',
        tooltip: "Select the number of items in a single row",
        label: 'Number of items in row on mobile',
        dataName: 'smallColumns',
        options: [
            {
                text: '1 item in row',
                value: 'small-12'
            },
            {
                text: '2 items in row',
                value: 'small-6'
            },
            {
                text: '3 items in row',
                value: 'small-4'
            },
            {
                text: '4 items in row',
                value: 'small-3'
            }
        ]
    }
]

The templates are the most important and at the same time the most interesting part of VS Builder. 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.

VSBuilder.addComponent({
    title: 'Logo',
    form: {
        align: true, // Returns a select with the 'dataName' set to 'align'. Depending on what option will be set in the select, you'll get 'l-al', 'l-ac' or 'l-ar' (witch stands for layout align left, layout align center and layout align right). So you can use them as classes in your template.

        // Describe the list of inputs and don't forget to set to all of them a 'dataName', because that's how you can access them from the template.
        inputList: [
            {
                type: 'text',
                tooltip: "Write the url for the logo image",
                label: 'Image logo',
                dataName: 'image',
                dataType: 'image',
                important: true,
                path: 'img/logos/'
            },
            {
                type: 'text',
                tooltip: "Write a URL to the logo on click action, ex:'index.html'",
                label: 'Url address for logo',
                dataName: 'url'
            }
        ]
    },

    // Now within your template you can use already created inputs.  All you have to do is to scope them with '<%= dataName %>'.
    // If your input has a 'dataType' set to 'multiple', you can loop through values using the underscore's each function like in the example below.
    // <% _.each(dataName, function(item){ %>
    //      <p><%= item %></p>    
    // <% }) %> 
    template: [
        '<section>',
            '<div class="logo-wrapper <%= align %> ">',
                '<h3 class="logo">',
                    '<a href="<%= url %>">',
                        '<img src="<%= image %>" alt="logo">',
                    '</a>',
                '</h3>',
            '</div>',            
        '</section>'
    ].join('')
});

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

VSBuilder.addComponent({
    title: 'Text',
    form: {
        inputList: [
            {
                type: 'textarea',
                tooltip: 'Enter your text',
                label: 'Text',
                dataName: 'text', // This input will be rendered in your template.
                important: true
            },
            {
                type: 'text',
                tooltip: 'Pick a color for the text',
                label: 'Text color',
                dataName: 'textColor', // And this one in your css code.
                dataType: 'color'
            }
        ]
    },
    template: [
        '<section>',
            '<div class="text"><%= text %></div>',
        '</section>',
    ].join(''),

    css: [ // Array - list of selectors.
        {
            selector: '.text', // String - make a selection on your component and don't worry about scoping the component, VS Builder will scope it for you with the parent's unique class.
            properties  : [ // Array - the list of css properties on the same selector.
                {
                    name    : 'color', // String - a css property name such as: background-color, font-size, line-height, etc. 
                    value   : 'textColor' // String - as value use the dataName of your input. Just make sure that your input will return the value that your css property name will expect.
                }
            ] 
        }
    ]
});

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.

VSBuilder.addComponent({
    title: 'Text with list',
    form: {
        inputList: [
            {
                type: 'textarea',
                tooltip: 'Enter your text',
                label: 'Text',
                dataName: 'text',
                important: true
            },
            {
                type: 'text',
                tooltip: 'Pick a color for the text',
                label: 'Text color',
                dataName: 'textColor',
                dataType: 'color'
            }
        ]
    },

    subForm: {
        buttonText: 'Add list item', // String - the text written on the submit button.
        inputList:[ // Array - usual list of inputs like in simple form. 
            {
                type: 'textarea',
                tooltip: 'Enter the list item text',
                label: 'List item text',
                dataName: 'title', // String - if one of inputs has 'dataName' set to 'title', it's value will be displayed in the drag-n-drop list above the submit button. And you'll be be able to sort your sub items. Otherwise all the items will be untitled and it will be difficult to understand what stands behind this item.
                important: true
            }
        ]
    },

    template: [
        '<section>',
            '<div class="text"><%= text %></div>',
            '<ul>',
                '<% _.each(subItems, function(item){ %>', // Do an each loop through the subItems and reach theirs data with the dot notation, where 'title' is the 'dataName' of the input.
                    '<li class="lists-item"><%= item.title %></li>',
                '<% }) %>',
            '</ul>',
        '</section>',
    ].join(''),

    css: [
        {
            selector: '.text',
            properties  : [
                {
                    name    : 'color',
                    value   : 'textColor'
                }
            ] 
        }
    ]
});

Google Fonts Font Awesome

Foundation Bootstrap

Underscore Require

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

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

a) I'm a User

b) I'm a Developer

Builder's Structure Within a simple schema.

Frameworks VS Builder is available on two popular frameworks.

Foundation

Bootstrap

Basic Usage Hands on using VS Builder's user interface.

Breadcrumbs

Add Sections

Add Rows

Full Width Row

Add Columns

Change Column Sizes

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

Change Font Family

Section ID

Minify CSS

Hotkeys You can go even faster.

Advanced Usage Let's go deeper.

Initialize VS Builder

Configure VS Builder

List of Configuration Options

Option 'appendTo'

Option 'fonts'

Option 'styleSheets'

Option 'scriptFiles'

Option 'useRequire'

Option 'components'

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

List of Public Methods

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

Create Custom Component

Input List

Form Presets

Templates

CSS

Subforms

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

Fonts

Frameworks

Scripts

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

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

Builder's Structure
Within a simple schema.

Frameworks
VS Builder is available on two popular frameworks.

Basic Usage
Hands on using VS Builder's user interface.

Hotkeys
You can go even faster.

Advanced Usage
Let's go deeper.

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

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