LittleCub Forms

LittleCub is designed to work with various responsive and mobile UI frameworks with out of the box support for most popular ones such as Twitter Bootstrap, Zurb Foundation, jQuery UI, jQuery Mobile etc.

Each theme contains a set of Handlebar templates placed in an HTML file and a JavaScript class that describes and registers it with LittleCub.

LittleCub allows you to load and register multiple themes at the same time and use mixed themes for the same form if needed. In general, there are two ways to load themes :

Runtime Mode

For the best performance, it is recommended to pre-compile theme templates into JavaScript code. And then includes the compiled code into your HTML pages. LittleCub provides custom Grunt task that can work with its Handlebar plugin to parse out the templates from the template HTML files and compile them.

<script src="dist/littlecub-core.min.js" type="text/javascript"></script>
<script src="dist/templates-defaults.min.js" type="text/javascript"></script>
<script src="dist/templates-foundation.min.js" type="text/javascript"></script>

Development Mode

During the development phase, it is very unpleasant and inefficient to compile and reload templates for any template change. Thus LittleCub allows you to load themes from their HTML files directly so that no compilation is needed. To use the loadThemes API, you will need to provide the list of key/value pairs for theme ID and its HTML file location.

LittleCub.loadThemes({
    "default" : "../../../themes/default/default.html",
    "default-horizontal": "../../../themes/default/default-horizontal.html"
}, function() {
    // Rest of your forms related code goes here!
});

Once themes are loaded, they are ready to be used for your form rendition. LittleCub follows following rules to find the theme for your control and then locate the corresponding rendition template from the theme.

Theme defined by the control's theme option of its configs parameter.
If the control-level theme is not set, it will try to look for the theme specified for the control's parent. The look-up process will stop unless a theme is founded or it can't find the parent control any more.
If still no theme is found, it will then try to use the global default theme which is defined by LittleCub["defaults"]["theme"] which can be overwritten such as.

LittleCub["defaults"]["theme"] = "foundation";

Adding the JavaScript class that describes the theme and registers it with LittleCub.

LittleCub.registerTheme({
    /* An unique ID that LittleCub API will reference to. */
    "id" : "bootstrap",
    /* Short description of the theme. */
    "title" : "Default Twitter Bootstrap Theme",
    /* Detailed description of the theme. */
    "description" : "Default Twitter bootstrap theme for rendering basic forms.",
    /* Theme ID of the parent theme that this theme extends. This is a required setting and all themes must inherit from
        the base theme.*/
    "parent" : "base",
    /* Optional callback for injecting additional styles or elements for invalid controls. */
    "errorInjection" : function(status) {
        // the context this will be the target control.
    },
    /* Optional style classes that will be injected into the control when it is invalid. */
    "errorClass" : "ui-state-error",
    /* Optional callback for for processing dynamic elements. */
    "injection" : function(container) {
        // container is the outer container of the target control.
    }
});

Creating an HTML file with your custom Handlebar templates that are wrapped in script tags.
Each tag needs to have the template id. You will also need to name the html as [theme id].html so that you can compile the templates with the custom Grunt task that LittleCub provides.

<html>
<head>
    ...
    <script id="control_helper" type="text/x-handlebars-template">
        ...
    </script>
    ....
</head>
</html>

Default Themes

Basic themes that provide minimal required templates for rendering plain forms with no dependency on any UI framework. They can be served as good starting point to write own theme or you can provide it with your own stylesheet to make them look prettier.

LittleCub Forms

Load Themes

Runtime Mode

Development Mode

Apply Themes

Add A New Theme

Supported Themes

Default Themes

Twitter Bootstrap Themes

Zurb Foundation Themes

jQuery UI Themes

jQuery Mobile Themes