PHsPeed is component oriented. In the IDE there is a component palette where you can select the component you require and put them on your screen where you want it. PHsPeed uses the bootstrap grid to design your forms. Designing forms has three stages:

1. Layout

PHsPeed uses the Bootstrap grid system to layout forms. To understand this concept, you should read the documentation on getbootstrap.org. But in general you have rows and columns (like the traditional HTML table) and you can apply lay-out rules to the columns. To create grids you can design rows and columns individually, or use a function to create a grid in one go. 

We will come to that later. 

Each layout-able object is divided in 12 units. Bootstrap 4 has 5 device contexts that can be defined to hold a certain number of units to a maximum of 12. Each device context describes an output device of a certain horizontal resolution.

Suppose you have a row with two columns. To define this, you need to add a row to the form, with two columns and apply 6 units to both columns of the desktop xl class:

With this definition, you will get a row with two columns of half the size (2 x 6 = 12). If you require a column of 2/3 you can use a setting of 9 and 3 (9 + 3 =12)

Depending on the presented data, it is likely that you will not be able to see two columns on a mobile phone. In older systems, you would get a horizontal scroll bar and scroll over your form to read its data. But what you really (should) want is that the columns are not horizontally on a mobile phone, but below each other so that you only need to scroll vertically. By applying 12 units to each column on the deviceclassphone property you achieve this. Bootstrap will read the resolution of your browser, determine its device class and then apply the given setting. This will cause your form to look differently on different platforms with different screen resolutions. This is called 'responsive design'. 

2. Non visual components

When you are building a database application then you need components to connect to your database, your tables, your data sources; when you want to send an email you need an email component. These components help you to make those functions accessible without complexity, but they have no visual representation like an edit box for instance. These components are called non-visual. Although you can add any type of component any time, you need a table component on your form before you define an edit field to a member of that table. 

3. Visual components

Visual components are components that have a visual presentation, like grids, fields, menus etc.