@salesforce-ux/c360-foundation NPM

`@salesforce-ux/c360-foundation`

About

A set of foundations supporting the C360 Subsystem at Salesforce. c360-foundation package contains the foundational styles which includes Typography, Font Face, Utilities

Getting Started

Let's start by installing c360-foundation as a dependency of your project with npm.

npm i @salesforce-ux/c360-foundation

Distributable

`c360-foundation` Integration

Dependency Inclusion

c360-styling-hooks is a styling dependency for c360-foundation. Hence, this needs to be embedded into your web app in order to make the c360-foundation work properly.

There are different ways c360-styling-hooks can be embedded. Please checkout the c360-styling-hooks Integration Guide to learn more.

Add `c360-foundation`

There are different ways to include c360-foundation to a web application depending on the requirement.It can be used in both light DOM and shadow DOM Below are the styles to include the package -

Add C360 Foundation in HTML

You can use the HTML <link> to link to C360 Foundation as an external resource.

<html>
  <head>
    <!-- Dependencies go here -->
    <link rel="stylesheet" href="...">
    
    <link rel="stylesheet" href="/node_modules/@salesforce-ux/c360-foundation/dist/index.css">
    <!-- Your application's stylesheets go below -->
    <link rel="stylesheet" href="...">
  </head>
  <body>
    <!-- Your application -->
  </body>
</html>

Add C360 Foundation in CSS

You can use CSS @imports to pull in C360 Foundation.

@import "@salesforce-ux/c360-foundation/dist/index.css";

Add C360 Foundation in JS

You can use JS import to pull in C360 Foundation directly in the JS file.

import "@salesforce-ux/c360-foundation/dist/index.css";

Example

Below are a few examples of Typography which is part of c360-foundation

HTML

<html>
  <head>
    <link rel="stylesheet" href="/node_modules/@salesforce-ux/c360-styling-hooks/dist/hooks.custom-props.css">
    <link rel="stylesheet" href="/node_modules/@salesforce-ux/c360-foundation/dist/index.css">
    <!-- Your application's stylesheets go below -->
    <link rel="stylesheet" href="...">
  </head>
  <body>
    <h1 type-style="display-1">Title display-1</h1>
    <div type-style="body-1"><p type-style="code">Text body-1 code</p></div>
  </body>
</html>