GETTING_STARTED.md

Getting Started

Get started with Covalent using the Angular CLI.

See the material getting started for instructions.

Install the CLI

npm install -g @angular/cli@latest

Create a new project

ng new my-project

The new command creates a project with a build system for your Angular app.

Install Covalent Core module

npm install --save @covalent/core
## (optional) Additional Covalent Modules installs
npm install --save @covalent/highlight @covalent/markdown @covalent/dynamic-forms @covalent/echarts

To test (only for testing!) the latest changes from develop, install the nightly build:

npm install --save https://github.com/Teradata/covalent-nightly.git
npm install --save https://github.com/Teradata/covalent-echarts-nightly.git

Import the Covalent Core NgModule

src/app/app.module.ts

import { CovalentLayoutModule } from '@covalent/core/layout';
import { CovalentStepsModule  } from '@covalent/core/steps';
/* any other core modules */
// (optional) Additional Covalent Modules imports
import { CovalentHighlightModule } from '@covalent/highlight';
import { CovalentMarkdownModule } from '@covalent/markdown';
import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
// other imports
@NgModule({
  imports: [
    CovalentLayoutModule,
    CovalentStepsModule,
    // (optional) Additional Covalent Modules imports
    CovalentHighlightModule,
    CovalentMarkdownModule,
    CovalentDynamicFormsModule,
    CovalentBaseEchartsModule,
  ],
  ...
})
export class AppModule { }

Include the core, theme and typography:

This is required to apply all of the core, theme and typography styles to your application.

See the material theming guide and the material typography guide for instructions.

A theme file is a simple Sass file that defines your palettes and passes them to mixins that output the corresponding styles. A typical theme file will look something like this:

@use '@angular/material' as mat;
@use '@covalent/core/theming/all-theme' as cov;

// (optional) Additional themes
@use '@covalent/markdown/markdown-theme' as markdown;
@use '@covalent/highlight/highlight-theme' as highlight;

// Define a custom typography config that overrides the font-family
// or any typography level.
$typography: mat.define-typography-config(
  $font-family: 'Inter, monospace',
  $headline: mat.define-typography-level(32px, 48px, 700)
);

mat.core(
  $typography
); // $typography is an **optional** argument for the mat-core

$primary: mat.define-palette($mat-orange, 800, 100, 900);
$accent: mat.define-palette($mat-light-blue, 600, 100, 900);
$warn: mat.define-palette($mat-red, 600, 100, 900);

$theme: mat.define-light-theme($primary, $accent, $warn);

mat.angular-material-theme($theme);
cov.covalent-theme(
  $theme,
  $typography
); // $typography is an **optional** argument for the covalent-theme

// (optional) Additional themes
markdown.covalent-markdown-theme($theme);
highligh.covalent-highlight-theme();

You only need this single Sass file; you do not need to use Sass to style the rest of your app.

If you are using the Angular CLI, support for compiling Sass to css is built-in but you have to add a new entry to the "styles" list in .angular-cli.json pointing to the theme file and the platform.css as follows:

Covalent Utility Classes

This is an optional set of CSS classes that will help to speed up development and standardize your application.

Add via platform.css

The covalent utility CSS classes can be included via platform.css file either in your index.html or as a new entry to the "styles" list in .angular-cli.json

src/index.html

<link href="../node_modules/@covalent/core/common/platform.css" rel="stylesheet" />

or

.angular-cli.json

"styles": [
  "../node_modules/@covalent/core/common/platform.scss"
],

This also includes the material icons by default.

Not interested in using ALL the CSS?

Click here if you want to cherry pick the utility classes instead of loading the platform.css

---