design

Page design

If you are new to Bootstrap responsive design then it might be a bit confusing how to layout your forms. In PHsPeed, the standard rules of Bootstrap apply. Therefore we will not go into much detail regarding the bootstrap grid system. If you are not familiar with bootstrap forms, we suggest that you first take a view on the Bootstrap website for the details. Bootstrap areas are divided into 12 units. By assigning units to devices you can achieve that the application 'breaks' at the designed points. That is what makes your application responsive.

So if you have a row with two columns you could define each column to occupy 6 units on a desktop, but 12 units on smaller devices. That will break up the form on smaller devices causing the two columns to be presented below each other. The best way of getting the principle is by creating a test application and play with the settings.

Components

In PHsPeed there are three types of components, layout; visual and non-visual.

• Layout components are only used to layout your form. Examples are a panel, area, row, and column.
• Visual components result is something visual on your screen, like an image, an edit box, etc.
• Non-visual components are used to add supportive functions to the form. Examples are a database table, a data source, pdf library, and more.

1. The Area component will basically generate a simple 'div' pair. As this is a simple div, the container will not be shown on the form, unless you apply properties to it.
2. The Panel component is a bootstrap component and will generate a bootstrap class. This will automatically apply the standard bootstrap properties like padding and margin. The panel can have a header which is a separate component that you can put on the panel.

To create a responsive layout you must add rows and columns to the container. You do so by selecting the row and column components from the component bar, or add in bulk by performing a right mouse click on the panel and select 'add rows, add columns, add grid'. Then a small window will appear to bulk add a number of rows, columns, or rows with columns. In the columns, you can put your visual components like edit boxes.

Within the IDE you are able to move rows and columns to get another sequence. Also, if you are on a valid parent component you can add rows, columns of a full grid by a few mouseclicks.

Within a column, you can put different components for showing data or doing your input. Although it is not forbidden to put components elsewhere, it is important to understand and follow the bootstrap grid design pattern as described in the bootstrap documentation. Therefore do not put components on rows, but only in columns. You can add more visual components to a single column, however, you must apply a device class to each visual component to allow breaking in responsive design.

There are several properties involved in regards to styling a visual component.

• Properties, like color, border. The most common styles are exposed to simple properties. You can set these to achieve the color, spacing, etc. Most of these properties have property editors that help you to specify correct values.
• Style. This property will open up a style editor that allows you to specify special types of borders, backgrounds, shading, etc. These styles are less common and require more technical insight. For that we have added more advanced property editors that allow you to set these and see the result in real-time.
• Class. For all other styling needs, we have a class editor that gives access directly to the style sheet.

It is important to understand that the overall stylesheet is created when you generate your application. That means that you can overwrite settings if you have defined the same property on more than one level. We advise to follow the PHsPeed approach: 1. use the properties. 2. If you can't do it with the properties, use the style. If you can't use the style then use the class. In that order. If you have defined a property, don't use this in the style or class editor.

The device contexts describe the 'breaking' of your application if it is displayed on a regular monitor, a laptop, tablet, or phone. It might have an influence on the spacing of objects. It is a common habit to put labels of fields above the field and not before. The reason is that applications are created within the context of 'mobile-first'. If you know that your application is only used on large screens, you might have different desires.

As soon as you apply a device property, the component becomes a bootstrap component and will behave the bootstrap way. That can bring supprises regarding layout as sometimes, the spacing between objects or within an object (padding and margin) are set double because the owning component (the column) also has already default margins and paddings.

In the beginning, this might be a bit confusing as you have to play with the settings to get used to the bootstrap system. But if you follow the following rules then this might be a good start for you:

Creating a field with a label on top.

• Start with a panel or area, and set the container class to container-fluid; set device class to 12, if you want to use the full-screen area. Set padding to 'p-2' to allow standard padding to the inner bootstrap grid.
• Add rows and columns, set the column device classes to the rules you want it to break on different devices. I.e. 3 columns on large devices, 2 on medium and 1 on small (would be represented by 4, 6, and 12). Set padding to p-2. Set gutter to no on rows.
• Add your fields. Do not apply a device class. If it contains a value, then change it to empty. Set field width to 12 to occupy the full column.

Creating a field with a label on front.

• Start with a panel or area, and set the container class to container-fluid; set device class to 12, if you want to use the full-screen area. Set padding to 'p-2' to allow standard padding to the inner bootstrap grid.
• Add rows and columns, set the column device classes to the rules you want it to break on different devices. I.e. 3 columns on large devices, 2 on medium and 1 on small (would be represented by 4, 6, and 12). Set padding to 'p-2'. Set gutter to no on rows.
• Add your fields. Do must apply a device class. As the column has 12 units, you must reserver at least one unit for the label. So set it to 11 (PHsPeed will calculate the label space). If your device is not wide enough, or your label is too large then bootstrap will break the field and put the label on top. In that case, decrease the space of the field. Clear the field with the property.

This is a good basic approach for a simple form. If rows need to show spaces you have also the option to add a top margin. This way you can create a small space between the top of your browser and the form; or influence the space between two rows. Again, the main difference here is that the top margin reflects in a standard CSS way of defining layout where 'gutter' and 'p-x' are bootstrap defines.