Skip to main content

Bold Penguin SDK Customization and Styling

Customization and Styling​

Customize the Bold Penguin SDK for your company's needs using standard frameworks like Angular or React. Within these frameworks, you apply styles to classes to create your custom storefront, replace webhooks, and apply your own branding elements.

Finding classes​

You can find class selectors for each element in our Web Component documentation or by using the search above.

Styling with Angular​

Angular applications are styled with CSS, allowing you to apply stylesheets, rules, and selectors to your app. Class names and selectors are local to the component and won't collide with classes and selectors in other parts of your application. You can also collate the CSS code of each component with the TypeScript and HTML code of the component using a global style sheet.

Loading Component Styles​

There are several ways to add styles to a component:

  • Set styles or styleURLs metadata
  • Define styles inline in the HTML template
  • Use CSS imports
  • Add the style array property to styles in the component metadata of the @Component decorator (In this case, each string in the array would define a different CSS for the component)

Styling with React​

You can use React in your Web Components, or use Web Components in React, or both. It is important to remember that Web Components use class instead of the React className.

Adding CSS Classes to Components​

To add a CSS class to components, you will pass a string as the className property

  return <span className="menu navigation-menu">Menu</span>
}

It is common for CSS classes to depend on the component properties or state:

  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

Advanced options​

You can do more advanced customization by replacing web components.