Skip to content

Commit

Permalink
docs: updated the description on the Installation and usage page (ope…
Browse files Browse the repository at this point in the history
  • Loading branch information
PKulkoRaccoonGang authored Dec 22, 2023
1 parent 6a3a66f commit d3b4a67
Showing 1 changed file with 18 additions and 12 deletions.
30 changes: 18 additions & 12 deletions www/src/pages/guides/getting-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,31 @@ In your React project:
import { ComponentName } from '@edx/paragon';
```

## SCSS Foundation
## CSS Foundation

Usage with no theme:
### Usage with no theme
The Paragon CSS Foundation offers a collection of fundamental styles, encompassing padding, typography, and sizing.
When applied, these styles contribute to the creation of a straightforward and neat appearance for your application.

To integrate these foundational styles into your project, include the following import:

```scss
@import "@edx/paragon/styles/scss/core/core.scss";
@use "@edx/paragon/dist/core.min.css";
```

Usage with a theme:
### Usage with a theme
In addition to the basic styles, you can provide a theme layer that includes styles for colors, shadows,
backgrounds and transparency of elements. This allows you to visually represent a specific theme in your application.

When working with a theme the order of imports is important: if you need to override Paragon's variables you must import theme's variables before Paragon core (that's because all variables in Paragon use `!default` flag which allows you to override them before importing, you can read more [here](https://sass-lang.com/documentation/variables#default-values)), while to override Paragon's styles, the theme's style overrides must be imported after.
To apply these theme-specific styles, include the following import:

```scss
@import "@my-brand/fonts.scss";
@import "@my-brand/variables.scss";
// Import the Paragon core after setting brand-themed variables.
@import "@edx/paragon/styles/scss/core/core.scss";
// Import brand overrides after the Paragon core.
@import "@my-brand/overrides.scss";
@use "@my-brand/light.min.css";
```
### CDN links
Alternative style integration is available when using CDN links:

Note that including fonts will affect load performance. In some pages you may choose not to load the custom font.
```scss
@import url("https://cdn.jsdelivr.net/npm/@my-brand/core.min.css");
@import url("https://cdn.jsdelivr.net/npm/@my-brand/light.min.css");
```

0 comments on commit d3b4a67

Please sign in to comment.