Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: update styling and themes docs #461

Merged
merged 1 commit into from
Oct 13, 2023
Merged

docs: update styling and themes docs #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/styling/customizing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ For a visual preview of the theme, use the [ThemeBuilder application](slug:theme
With this setup, you can customize theme variables directly in your application. For example, you can change the default primary color from orange to pink with the following lines:

```scss
$primary: #ff69b4;
$kendo-color-primary: #ff69b4;

@import "~@progress/kendo-theme-default/dist/all.scss";
```
Expand Down Expand Up @@ -70,7 +70,7 @@ To create a swatch:

1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
1. Install the [node-gyp](https://github.com/nodejs/node-gyp#installation).
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
1. Install the dependencies for all themes with `npm run setup`.
1. Switch the working directory to `packages/<THEME_NAME>`.
1. Create a `SWATCH_NAME.scss` swatch file in the `scss/swatches` folder.
1. To build the swatches for the theme, type `npm run sass:swatches` or `npm run dart:swatches`.
Expand All @@ -94,8 +94,8 @@ $theme-type: dark;
For the Default and Bootstrap themes, the swatch should look like:
```scss
// Variables.
$primary: blue;
$secondary: pink;
$kendo-color-primary: blue;
$kendo-color-secondary: pink;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
Expand All @@ -110,7 +110,7 @@ $secondary: pink;
To create a custom theme by modifying the themes source code:

1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
1. Install the dependencies for all themes with `npm run setup`.
1. Customize the theme variables in the `packages/THEME_NAME/scss/_variables.scss` files.
1. Build the themes with the `npm run sass` or `npm run dart` command to create the customized version of the themes in the `packages/THEME_NAME/dist/all.css` file.
1. After the build completes, use the [compiled CSS](slug:themesandstyles#toc-using-precompiled-css).
Expand All @@ -120,7 +120,7 @@ To create a custom theme by modifying the themes source code:
You might want to omit the styles for some components in the CSS output. To include only the styles that you need:

1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
1. Install the dependencies for all themes with `npm run setup`.
1. Switch the working directory to `packages/<THEME_NAME>`.
1. Create a `CUSTOM_THEME.scss` file in the `scss` folder. For example, create `custom.scss` file with the following lines:
```scss
Expand Down
12 changes: 6 additions & 6 deletions docs/styling/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ For a visual preview of the theme for all components and versatile color swatche
With this setup, you can customize theme variables directly in your application. For example, you can change the default primary color from orange to pink with the following lines:

```scss
$primary: #ff69b4;
$kendo-color-primary: #ff69b4;

@import "~@progress/kendo-theme-default/dist/all.scss";
```
Expand Down Expand Up @@ -109,7 +109,7 @@ To create a swatch:

1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
1. Install the [node-gyp](https://github.com/nodejs/node-gyp#installation).
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
1. Install the dependencies for all themes with `npm run setup`.
1. Switch the working directory to `packages/<THEME_NAME>`.
1. Create a `SWATCH_NAME.scss` swatch file in the `scss/swatches` folder.
1. To build the swatches for the theme by running `npm run sass:swatches` or `npm run dart:swatches`.
Expand All @@ -133,8 +133,8 @@ $theme-type: dark;
For the rest of the themes, the swatch should look like:
```scss
// Variables.
$primary: blue;
$secondary: pink;
$kendo-color-primary: blue;
$kendo-color-secondary: pink;

// Import the theme file for the components you use.
@import "../grid/_index.scss";
Expand All @@ -148,7 +148,7 @@ $secondary: pink;
To create a custom theme by modifying the themes source code:

1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
1. Install the dependencies for all themes with `npm run setup`.
1. Customize the theme variables in the `packages/THEME_NAME/scss/_variables.scss` files.
1. Build the themes with the `npm run sass` or `npm run dart` command to create the customized version of the themes in the `packages/THEME_NAME/dist/all.css` file.
1. After the build completes, use the [compiled CSS](#toc-using-precompiled-css).
Expand All @@ -158,7 +158,7 @@ To create a custom theme by modifying the themes source code:
You might want to omit the styles for some components in the CSS output. To include only the styles that you need:

1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
1. Install the dependencies for all themes with `npm run setup`.
1. Switch the working directory to `packages/<THEME_NAME>`.
1. Create a `CUSTOM_THEME.scss` file in the `scss` folder. For example, create `custom.scss` file with the following lines:
```scss
Expand Down
Loading