Summary

After reading this chapter, you can distinguish between structural and skinning style classes. In short words, structural style classes define the skeleton of the components and the skinning ones are for theming. We have seen how to set up any PrimeNG theme and create a new one. A new theme can be created either by ThemeRoller or by setting custom values for Sass variables and CSS properties of an existing theme with subsequent compilation to a CSS file. We encourage to use a CSS preprocessor for a modular CSS architecture. Sass preprocessor helps in writing better styles. A guideline for organizing the Sass files was provided as well.

After reading this chapter, you are also able to use one of the responsive grid systems, either PrimeNG own or Bootstrap's one. PrimeNG offers a lightweight responsive and fluid layout system. Furthermore, PrimeNG components having built-in responsive mode when using the .ui-fluid style class on the top container element. The flexbox-based layout is a new standard and a benefit for every HTML5 web application. One of the main advantages of flexbox is the ability to fill an extra space--all columns have the same height. Bootstrap 4 adds support for the flexbox model and lets you develop stunning layouts.

Starting with the next chapter, we will dive deep into each component. Our journey into the exciting PrimeNG world begins with input and select components.