Each component is styled with CSS and contains two layers of style information: structural or component-specific and skinning or component-independent styles. In this section, you will understand the difference between these two types of CSS, learn some useful selectors, and see an exemplary styling of the Paginator component in the generated HTML. Let's start. Go to the Paginator showcase (https://www.primefaces.org/primeng/#/paginator) and explore the HTML code of the Paginator component. The next screenshot shows the HTML and styles in the Google Chrome DevTools.

The highlighted line in the preceding screenshot represents the container element of the Paginator component with the following style classes:

• ui-paginator
• ui-unselectable-text
• ui-widget
• ui-widget-header

The first two style classes ui-paginator and ui-unselectable-text are generated by PrimeNG. These...

Every large frontend application needs a robust, scalable CSS architecture. A CSS preprocessor is indispensable--it helps to write cleaner, modular code with reusable pieces and maintain large and complex style sheets. A CSS preprocessor is basically a scripting language that extends CSS and compiles it into regular CSS. There are three primary CSS preprocessors today: Sass, LESS, and Stylus. As per Google Trends, Sass is the most used preprocessor today. Sass mimics the HTML structure and lets you nest CSS selectors that follow the same visual HTML hierarchy. With CSS, you would need to write this:

.container {
  padding: 5px;
}

.container p {
  margin: 5px;
}

With Sass, you can simply write this:

.container {
  padding: 5px;
  p {
    margin: 5px;
  }
}

While nesting CSS selectors, you can use the handy & symbol...

We sometimes need to create our own themes instead of using the predefined ones. Web applications should often feature a company-specific look and feel, which is constant and preset by company-wide style guides. Creating new themes is easy with PrimeNG, because it is powered by the ThemeRoller CSS Framework (http://jqueryui.com/themeroller). ThemeRoller provides a powerful and easy-to-use online visual tool. In this section, we will systematically show all the required steps to create a new theme. There are two ways how to create a new theme, either by ThemeRoller or from scratch with Sass.

To gain first-hand experience of the ThemeRoller online visual tool, go to the ThemeRoller home page, explore the available theme's gallery, and play with the CSS properties to see changes for widgets embedded on the page. All CSS changes will be applied on the fly.

We have to select one of the existing themes (the Gallery tab) and edit it (the Roll Your Own tab). A click on the Download theme button accomplishes the work.

Next, we need to migrate the downloaded theme files from ThemeRoller to the PrimeNG theme infrastructure. The migration steps are straightforward:

1. The theme package that we have downloaded will have a CSS file jquery-ui.theme.css (as well as minified variant) and the images folder. Extract the package and rename the CSS file as theme.css.

2. In your web application, create a folder...

The second way is more flexible and accurate. It is preferable to create a new theme manually by Sass because the theme is better maintainable. The main CSS settings, such as font, colors, border radius, and many more can be done configurable by Sass variables. You can create a new theme by setting custom values for those variables. This is exactly the approach followed by PrimeNG. The mostly free themes were created in such manner.

Every theme has a separate folder with a Sass file where variables are set. The variables themselves are used in _theme.scss--shared file for all free themes. This file can be found under node_modules/primeng/resources/themes/, if you install PrimeNG as the dependency. Sometimes, you also need to set custom fonts or special settings for particular CSS selectors. You can overwrite default style rules with your own ones--just write them...

PrimeNG has Grid CSS--a responsive and fluid layout system optimized for mobile devices, tablets, and desktops. PrimeNG components use Grid CSS internally, but this lightweight utility can be used as standalone as well. CSS Grid is based on the 12-columns layout as many other grid systems. The total width of all columns is 100%. In this section, we will explain all features of the PrimeNG grid system in details.

The layout container should have the ui-g style class. Children elements of the layout container become columns when they are prefixed with ui-g-* where * is any number from 1 to 12. The number expresses the taken space of 12 available units. When the number of columns exceeds 12, columns wrap to the next line:

<div class="ui-g">
  <div class="ui-g-2">2</div>
  <div class="ui-g-4">4</div>
  <div class="ui-g-6">6</div>
  <div class="ui-g-8">8</div>
  <div class="ui-g-4">4</div>
</div>

The following layout has two lines (rows):

The same two-row layout is also possible with two ui-g containers:

<div class="ui-g">
  <div class="ui-g-2">2</div>
  <div class="ui-g-4">4</div>
  <div class="ui-g-6">6</div>
</div>
<div class="ui-g">
  <div class="ui...

Columns can be nested in more complex layouts. To achieve that, just nest elements with the ui-g-* style classes:

<div class="ui-g">
  <div class="ui-g-8 ui-g-nopad">
    <div class="ui-g-6">6</div>
    <div class="ui-g-6">6</div>
    <div class="ui-g-12">12</div>
  </div>
  <div class="ui-g-4">4</div>
</div>

With this structure, columns with different content will not have equal height. There is a more robust solution to force equal height for columns with different content. Just wrap the internal div elements inside another div with the ui-g style class or even simpler, assign ui-g to the column having nested columns:

<div class="ui-g">
  <div class="ui-g ui-g-8 ui-g-nopad">
    <div class="ui-g-6">6<br/>6<br/>6<br/>6<br/>6<br/>6<br/></div>
    <div class=...

Responsive layout is achieved by applying additional classes to the columns. Four screen sizes are supported with different breakpoints.

When an element features multiple style classes listed in the table, they get applied from the bottom to the top. Let's take an example:

<div class="ui-g">
  <div class="ui-g-12 ui-md-6 ui-lg-2">ui-g-12 ui-md-6 ui-lg-2</div>
  <div class="ui-g-12 ui-md-6 ui-lg-2">ui-g-12 ui-md-6 ui-lg-2</div>
  <div class="ui-g-12 ui-md-4 ui-lg-8">ui-g-12 ui-md-4 ui-lg-8</div>
</div>

What is happening here?

• On large screens, three columns are displayed in proportion 2:12, 2:12, and 8:12.
• On medium screens...

In this section, we will reimplement the graphic editor introduced in the Organizing your project structure with Sass section with Bootstrap 4 (https://v4-alpha.getbootstrap.com) and PrimeNG components. Starting with the version v4.0.0-alpha.6, Bootstrap only has a flexbox-based layout by default, with no fallback.

Flexbox is a new layout model, which is widely supported in all modern browsers (http://caniuse.com/#search=flexbox). There are many tutorials on the Internet. You can, for example, read a comprehensive guide to the CSS flexbox layout at https://css-tricks.com/snippets/css/a-guide-to-flexbox. Flexbox tackles many layout problems. One of the main advantages of flexbox is the ability to fill extra space. All columns in the flexbox layout have the same height irrespective of their content. Let's show final screens of the graphic editor for two device resolutions.

For desktop:

For mobile:

Beside PrimeNG, we need to install the latest...

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...