@anjuna/theme

The @anjuna/theme package consists of a few different pieces to use in your app.

• Raw SASS files to be imported directly into your app.
  • anjuna.scss: does not generate any CSS output.
• Compiled CSS to be included in your app via CDN.
  • theme.css: includes color palette and utility classes to be used by libraries and apps.
  • icons.css: includes color palette and utility classes to be used by libraries and apps.
  • application.css: Subset of Bootstrap blended with our theme for use by applications.
• Static assets (favicon for example) which are also included via the CDN.
  • favicon.ico

Using CSS via CDN

Using the CDN is comparable to using any other CDN assets. CSS can either be included either directly in the application HTML like such:

<link href="//cdn.zuora.com/@anjuna/[email protected]/css/dist/application.css" rel="stylesheet">

Or you can import the file into your CSS/SASS like this:

@import url('//cdn.zuora.com/@anjuna/[email protected]/dist/css/application.css');

Using assets

Assets on the CDN work the same way except they are in the "assets" path, not the "css" path.

<link rel="shortcut icon" href="//cdn.zuora.com/@anjuna/[email protected]/dist/assets/cloud-favicon.ico" type="image/x-icon" />

Using the SASS

To use Bootstrap and Anjuna SASS variables and mixins within your application, install the @anjuna/theme npm package.

npm install @anjuna/theme

The shared sass file can then be imported into your application's sass.

@import "~@anjuna/theme/sass/anjuna";

NOTE: While it is possible to just import the anjuna.scss sass file wherever you need, that is not recommended. Instead we suggest creating your own _shared.scss partial, including anjuna.scss there, and then including your application specific shared file into your other sass files. This will let you leverage not only the Bootstrap and Anjuna helpers, but also your own. Like the Anjuna sass file, your own shared file shouldn't generate any output.