Set common styling

If some settings need to be done for both parent & children elements, it should be set for parent element first, not individual child. Then, the settings will be inherited. 

The above examples are recommended for inherited stylings:

• Text alignment
• Colour

Important!

In some special cases, the styling should be set to individual elements to avoid the theme’s override, for example:

• Font styles

Set device-specific styling

Set device-specific value only when needed

When editing the device-specific layout:

• If no special styling is required, leave the value to either “--” or blank.
• If special styling is required, try to update those parameters that already has some value set in “All” mode.

Use device-specific image only when needed

If no special image is required for an individual device, just set once in “All” mode. JSN PageBuilder 4 will automatically generate and choose the appropriate image size for individual devices.

Set background

Set background image

• Be thoughtful when selecting which container to have a background. For example:
• Full-width background must be set to section.
• A background designed only for a specific container must be set to the column.
• The decorative background of some elements must be set to that element.
• Clearly, understand the Background Size parameter and choose “Contain” and “Cover” carefully.
• If “Size” is set to “cover”, then “Repeat” is not required.
• If the background is patterned, create seamless background image carefully and utilize the “Repeat” parameter accordingly.

Handle background image with border properly

If the background image has border, better to cut that border out of background image and use “Border” settings instead. That will make the layout looks good on all devices automatically.

Have a background image with the border will make it presents poorly on the different device screen.

Have a background image without border will make it look good on all devices. Also, when the image goes through JPEG compression, the picture with border might decrease quality. Thus, it is recommended using “Border" setting to keep high quality for the image

Handle lines

Use the border instead of the divider if possible

Most of the time, lines are just a decoration of some elements. In this case, use border settings of that element instead of the Divider element.

Use divider when needed

If the design is sophisticated, and the border is not a good idea to separate different parts, use the divider element.

Handle inline & block elements

By default, block-level elements (heading, paragraph, etc.) will expand their width to the full container. If you want those elements to have width-by-content behaviour, then set “Inline” in the Display section.

Read more about the difference between inline and block elements.

Keep line-height consistently

• The line-height of similar text elements should be the same.
• If no special design requirements, the recommended value is 1.5 for both heading and paragraph.

Do not set redundant values

Case #1

Margin setting

If the box got inherited number from parent and you do not have the need to change it. Just keep it, you do not put the same number again

Case #2

If the visual boundaries around content are not necessary, do not set spacing parameters.

Case #3

If some parameters need to be set with the same value for all devices, set it for “All devices” mode and don’t need to set for single-mode such as “Mobile” or “Desktop”.

Avoid using Custom CSS code

• Try to use element parameters to get the job done with no custom CSS code involved.
• Set styling parameters only when necessary. It’s better to keep the page inherit style from the theme.

References

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
• https://icons8.com/articles/how-to-create-a-seamless-background-pattern-inphotoshop/
• https://codeburst.io/block-level-and-inline-elements-the-difference-between-div-and-span-2f8502c1f95b

---

Previous chapter: Chapter 4: Learn to adjust The Layout Pages

Next chapter: Chapter 6: Check your final works