Planet Logo Planet UI Design System - CSS Framework
  • Home
  • Components
Getting Started
  • Introduction
  • Framework compatibility
Layout
  • Grid System
Content
  • Colors
  • Typography
  • Icons
Components
  • Alerts
  • Badges
  • Buttons
  • Button group
  • Cards
  • Dropdowns
  • Forms
  • Modals
  • Navbar
  • Pagination
  • Popover
  • Stepper
  • Tabs
  • Tables
  • Tooltips
Note: The planet UI design system is an extension of the bootstrap framework. Please also referer to the bootstrap documentation for best pratices while using the framework.

Getting-starteds

Framework compatibility

The planet design system is based on the bootstrap framework and mainly provides an extension to the bootstrap CSS. For this reason a developer should be able to import the design system CSS files along side any framework that is compatible with bootstrap. As the framework is now based on bootstrap 5 which uses ES6 for any component that uses javascript all the UI elements should work inside of any javascript framework by adding the bootstrap JS files.

Connecting to the planet payment private NPM feed

Installation process Connect your applications npm to the following devops feed to allow you to check out private npm packages https://pkgs.dev.azure.com/planetdevops/_packaging/planetpayment-npm-feed%40Release/npm/registry/ 1) Point your app at the planetpayment npm feed (only for packages in the @planetpayment scope) Place the following config properties in a file named .npmrc in the same directory as your applications package.json file. @weareplanet:registry=https://pkgs.dev.azure.com/planetdevops/_packaging/planetpayment-npm-feed%40Release/npm/registry/ @weareplanet:always-auth=true 2) Configure your credentials for the private feed Create an access token for your user account in devops and Base64 encode it.

Copyright (c) 2024 Planet Payment