How CSS works?

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

    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: [
            "<div class='text'><%= text %></div>",

    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.
Tags: css, custom, templates

Last update:
2014-11-22 12:38
Vlad Sargu
Average rating: 5 (1 Vote)