Introduction to web page styling

This page introduces the basic concepts used in Verj.io for designing and styling a web page. Each topic consists of a brief description and links where you can find more information. Reading this page from top to bottom is recommended.

Controls 1

Containers 1

Layouts 1

Controls

These are the basic building blocks for a web page, and are dragged onto a page from the palette. Examples of controls are text, hyperlink, image, field, table, menu etc.

Click here for details of all available controls.

Containers

This is a sub-category within controls i.e. some controls are containers. A container is basically something that can contain other controls. The simplest container is a Panel Control and this can be thought of as a rectangle (equivalent to a <div> in HTML). For containers, you can configure properties such as width, height, borders, background etc but probably the most important property is layout (see next section).

Click here for more details and examples of containers with different layouts.

Layouts

Every container has a configurable layout. The layout defines how the child controls of a container are positioned, relative to each other – simple examples are horizontally and vertically. This is a most important concept within Verj.io and provides the ability to very quickly set out the basic design of a web page. This is based around the concept that any web page can be thought of as a number of interconnected rectangles and these form the framework for the page. Examples are shown below.

Content is then added to each rectangle (container) and is laid out according to the layout of the container, usually horizontally or vertically. Layouts also control the size of the gaps between adjacent controls.

The following layouts are provided. Click on the links for details.

Horizontal Layout	Child controls are laid out horizontally
Vertical Layout	Child controls are laid out vertically
Column Layout	Child controls are laid out in adjacent cells of a table – you can specify the number of columns
Bootstrap Field Layout	A special layout for aligning input fields and field labels when using Bootstrap
Field Layout	A special layout for aligning input fields and field labels
Flow Layout	Child controls are allowed to flow – usually horizontally but this varies according to the width of the browser window. The gap between adjacent controls can be specified.
List Layout	Child controls are laid out in an unordered or ordered list and list items
Custom Layout	Child controls are laid out using HTML configured by the designer.
No Layout	This is the default. It’s the same as Flow Layout except that there are no configurable properties.

Because No Layout is the default, the first thing you normally do after adding a Panel Control to a page, or any other container, is to set its Layout type property. An additional property Layout properties dialog is then shown which allows you to configure further layout details e.g. gaps, alignment etc.

By nesting container controls with differing layouts you can quickly implement page design layouts of any complexity. Here is an example of a typical page that uses a combination of different layouts (horizontal, vertical, column):

To summarize, layouts provide the ability to quickly create a framework for a web page – they control the relative positioning of controls. There will be many occasions when you want to make small adjustments to individual controls and for this you use the properties of each control as provided by the styling assistants (see next section) e.g. to move a control down a few pixels, set the margin top or padding top property. You might think of this as fine tuning your layout design. A Spacer Control is also provided as an alternative way of providing space between adjacent controls.

Styling Assistants

Each control has a Styling Assistant that enables you to style it e.g. apply a border to a container, change text to bold, set colors etc. The styling assistants present all the properties that can be configured for each control in a straightforward format. Under the covers, the style is actually implemented using CSS, but the intention of the styling assistants is to protect you from the complexity of CSS and to enable you to achieve the styling you want using easily understood styling properties. Each styling assistant has an interactive preview so you can see the effect of each change you make.

Styling assistants can be invoked in a number of ways:

Clicking on the icon at the top of the Properties View
Clicking on the button opposite the Control style property
Right-clicking on a control, then selecting Style
Pressing Ctrl T when a control is selected

An Advanced Properties button is supplied for the occasions when you want to achieve some advanced styling not provided by the Styling Assistants. This gives full access to all CSS properties using either inline style or classes.

Property Sets

Property Sets are all about ease-of-use and reusability. They enable you to save a collection of styling properties and then apply this to a control at the touch of a button. Property sets are accessed by clicking the icon at the top of the Properties View for a control:

Themes

Themes are a self contained package that contains a Presentation Template. The presentation template links the web resources and images used for styling the form. A Theme can be linked to either a project or a form and provides the styling used by the form. Using a Theme is the preferred approach to styling a form. Themes allow flexibility to swap and change the look and feel of the application without having to change paths to resources because the links to the resources are relative to the Theme and not to the root of the workspace.

The Theme’s presentation template acts as container for the Property Sets. This provides the ability to specify that one particular Property Set is the default for each control type. A form can then be linked to the theme, providing the ability to apply a set of pre-generated styling (a “theme”) to a form with very little effort. When there is a need to create lots of forms or pages with a common theme, this is the recommended approach.

Grids

A Grid Control is an advanced container. As the name suggests, it provides a grid capability consisting of any number of rows and columns plus the ability to merge columns and/or rows. Each cell within the grid acts as a container in its own right and can have any layout.

There is quite a lot of overlap in functionality between a Grid Control and a Panel Control – Panel Controls can be nested with a combination of horizontal and vertical layouts that can often achieve the same result as a grid. A good tip is to use a Grid Control only when you want the alignment of both columns and rows; otherwise use nested Panel Controls.

The purpose of a Grid Control is to provide grid layout. If you want to present data values in a tabular format, then you should use a Table Control.

Click here for more information on grids.