Theming Concepts and Layouts

The main goal of this chapter is to provide an introduction to PrimeNG themes, layouts, and the concepts involved. The theming concept used in PrimeNG is similar to the jQuery ThemeRoller CSS Framework (http://jqueryui.com/themeroller). PrimeNG components are designed to allow a developer to integrate them seamlessly into the look and feel of an entire web application. At the time of writing, there are 17 free themes and 5 premium themes and layouts. Free themes include ThemeRoller themes, a Twitter Bootstrap theme, and some custom themes powered by PrimeFaces and PrimeNG. Such themes are distributed along with PrimeNG itself under Apache License.

In Chapter 1, Getting Started with Angular and PrimeNG, we showed three possible setups and theme installations. You can also play with the free themes in the PrimeNG showcase (https://www.primefaces.org/primeng) by switching them dynamically--a theme switcher is available at the top-right corner. Premium themes can be purchased as standalone themes. You can preview premium themes and layouts in the PrimeNG Theme Gallery (http://primefaces.org/themes).

In this chapter, we will cover the following topics:

• Understanding structural and skinning CSS
• Organizing your project structure with SASS
• Simple ways to create a new theme
• Responsive grid system in PrimeNG
• Bootstrap's responsive layout meets PrimeNG