Netfluence Corporation


Knowledge Base

General Functionality and Structure of VPB Modules [DRAFT]

Published: Nov 25, 2019 1:02:58 AM


This is in document is still being worked on. You can post your comments on this card:


Last Updated: 2019-11-28


Awesome Pages created by Netfluence are consisted of modules. They are like lego pieces combined to create stunning website pages. These modules can be dragged anywhere on the Netfluence Template or pages created from the said template. Modules were created by thinking through how the end-user would feel when using the module - all possible use-case aligned to their requirements and additional functionality for them to be able to do anything with the module. Module are not only responsive per viewport resolution but also flexible, scalable and maintainable with a click of a button.

So how are these modules built? How are they structured? How do they work with each other? How do they handle styling? We'll be answering these questions in a bit.

In this document, we'll be focusing on the core structure and functionality of each module.


Default Field Grouping

The module's functionality is based on its use-case. In the example above, we have three default field groups. These varies depending on the client requirements. Although most of the custom modules start with these field groups, some modules like Header and Footer don't. 

  1. Content Settings - contains fields used to enter the module/section contents such as text, images, videos, and links/CTA.
  2. Background Settings - contains fields used to set the module/section background.
  3. General Settings - contains fields used to set the module/section height, top and bottom padding.



In order to create maintainable and scalable modules, module structure should be uniform. All development of modules should start from these core elements:

Please take note that for the sample codes, we only used single curly braces for displaying Hubl variables and calling Hubl macro functions as the blog post is interpreting these codes instead of displaying them as simple text when typed with double curly braces. For the comment and logic we added a space between the curly braces and the percent sign as well as between the curly braces and pound sign.



<section id="section_{name}" class="nf-styles-{name} {module.styles.select_theme} {module.styles.background_type} ">
<div id="{setId(module.general_settings.section_id)}" class="nf-section {module.general_settings.section_class}">
<div class="nf-container">
<!-- start your code here -->

The main container for each module is the <section> tag. This contains the unique module/section id, and various classes pertaining to the theme and background settings. Next to the section tag is a div container with the nf-section class. This contains the user-specified section id (can be used for the anchor tags) and class (for additional styling).



<div class="nf-container">
<!-- start your code here -->

The div with the nf-container class is the main wrapper for the module contents. This is where the center container width for each viewport resolution is set.

<div class="nf-row { % if module.content_settings.flip_content % } nf-fr reverse { % endif % }">
<div class="nf-col">
{ % call content(contentOption) % }
{ # image module # }
{ nf_Image(module.content_settings.image.img) }
{ % endcall % }
<div class="nf-col m-auto">
{ # default heading # }
{ default_headingContent(headerOption, descOption, ctaOption) }


Below are the core classes for structuring a section. These are somewhat similar to Bootstrap. These allow users to control how the contents are presented in various viewports:

Class Description


Module's main container.


Module's content wrapper. This is where the center container width is set.


Row inside the parent container, nf-container.

This can contain multiple child nodes.

Automatically has "display: flex" rules.  and aligned column on tablet.


Contained within the nf-row.

This can also contain additional rows depending on the section design.

Doesn't have associated styles.


Used to label the parent of the content elements


Below are the visual guides for structuring the VPB Lite modules:

Web 1920 – 1 (4)



Reusable Classes

Below are the global classes that various elements can inherit. These classes also support Bootstrap 4 available classes and some Netfluence additional classes (classes that start with "nf").



Class Description


sets flex-direction to column.


sets flex-direction to column-reverse.


sets flex-direction to row.


sets flex-direction to row-reverse.



Class Description


Global style for button (Should not be overridden); follows bootstrap rules.


Primary button style. Not defined on the style sheet but can be edited on the Site Configuration Page.


Secondary button style. Not defined on the style sheet but can be edited on the Site Configuration Page.

.btn-success, .btn-error

Styles inherited from Bootstrap.





Hubl Snippets/ShortCodes 

In our default structure, there are Hubl snippets provided for generating various elements such as Button/CTA, Image Display, RGBA Colors, Heading Texts and Body Texts*:

  1. Button/CTA/link ( nf_Cta(option) )
  2. Image and Color ( nf_Image(option) & convertColor(color) )
  3. Heading
  4. Body
  5. Content


Other Links

  1. VPB Lite Default Styling
  2. VPB Lite Default Style Guide
  3. VPB Lite UX/UI


*This list is still in progress.