Step 2. Configure the CSS

You can use any of the following methods to add the default Ping (ForgeRock) Login Widget styles to your app:

Import it into your JavaScript project as a module.
Import it using a CSS preprocessor, like Sass, Less, or PostCSS.

If you decide to import the CSS into your JavaScript, make sure your bundler is able to import and process the CSS as a module. If using a CSS preprocessor, configure your preprocessor to access files from within your package or from a directory.

Examples

Import the CSS into your JavaScript:

npm
Local

// app.js
import '@forgerock/login-widget/widget.css';

// app.js
import '../path/to/widget.css';

Import the CSS into your CSS:

npm
Local

/* style.css */
@import '@forgerock/login-widget/widget.css';

/* style.css */
@import '../path/to/widget.css';

Controlling the CSS cascade

How the browser applies styles to an app can depend on the order you import or declare CSS into it, referred to as the cascade.

You can use the @layer CSS rule to declare a cascade layer, ensuring Ping (ForgeRock) Login Widget styles apply separately from your own.

For more information, refer to @layer in the MDN docs.

The Ping (ForgeRock) Login Widget styles will not overwrite any of your CSS.

They are namespaced to help prevent collisions and use a CSS selector prefix of tw_.

To create a cascade layer for the Ping (ForgeRock) Login Widget styles:

Wrap your existing styles in a new layer, for example, "app":
```
@layer app {
    /* Your app's existing CSS */
}
```

Declare the order of layers in your index HTML file before loading any CSS.

The Widget has multiple @layer declarations in its CSS files

<style type="text/css">
  /* Your existing "app" CSS layer first */
  @layer app;

  /* List the Widget layers after your own styles */
  @layer 'fr-widget.base';
  @layer 'fr-widget.utilities';
  @layer 'fr-widget.components';
  @layer 'fr-widget.variants';
</style>

The CSS imported for the Widget will not overwrite any of your app’s CSS. It’s all namespaced to ensure there are no collisions. To help achieve this, the Ping (ForgeRock) Login Widget uses a selector naming convention with a tw_ prefix.

Next, you can Step 3. Import the widget

Ping SDKs

Step 2. Configure the CSS

Examples

Controlling the CSS cascade

Next