|
|
@@ -7,9 +7,9 @@ order: 10
|
|
|
|
|
|
The [`@ckeditor/ckeditor5-theme-lark`](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) is the default theme of CKEditor 5. Lark is modular, [BEM–friendly](https://en.bem.info/methodology/css/) and built in [SASS](http://sass-lang.com).
|
|
|
|
|
|
-Although it has been designed with versatility and the most common editor use–cases in mind, some integrations may require adjustments to make it match the style guidelines of the ecosystem. This kind of customization can be done in two different ways, which can also be used together if needed:
|
|
|
- * by building the editor with a set of custom SASS variables and overriding [defaults](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Variable_Defaults___default), which does not change the size of the build,
|
|
|
- * by importing an extra `.scss` file and overriding the CSS rules, which increases the size of the build.
|
|
|
+Although it was designed with versatility and the most common editor use cases in mind, some integrations may require adjustments to make it match the style guidelines of the ecosystem. This kind of customization can be done in two different ways, which can also be used together if needed:
|
|
|
+ * By building the editor with a set of custom SASS variables and overriding [defaults](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Variable_Defaults___default), which does not change the size of the build.
|
|
|
+ * By importing an extra `.scss` file and overriding the CSS rules, which increases the size of the build.
|
|
|
|
|
|
You can see the demo of an editor with the dark theme as a result of customizations described later in this guide:
|
|
|
|
|
|
@@ -20,7 +20,7 @@ You can see the demo of an editor with the dark theme as a result of customizati
|
|
|
CKEditor 5 is bundled using [webpack](https://webpack.js.org/) and it handles the importing and processing of the styles using the [loaders](https://webpack.js.org/concepts/loaders/). Its configuration can be found in the `webpack.config.js` file.
|
|
|
|
|
|
<info-box info>
|
|
|
- To learn more about building CKEditor, check out the {@link builds/guides/development/custom-builds official guide}.
|
|
|
+ To learn more about building CKEditor, check out the {@link builds/guides/development/custom-builds Creating custom builds} guide.
|
|
|
</info-box>
|
|
|
|
|
|
The entire process of building and managing the styles boils down to three steps:
|
|
|
@@ -66,7 +66,7 @@ The entire process of building and managing the styles boils down to three steps
|
|
|
|
|
|
## Customization with SASS variables
|
|
|
|
|
|
-Having {@link builds/guides/development/custom-builds#Forking-an-existing-build cloned} an existing build of CKEditor for a quick start, let's take a look on the specific definitions in the `webpack.config.js`.
|
|
|
+Having {@link builds/guides/development/custom-builds#Forking-an-existing-build cloned} an existing build of CKEditor for a quick start, take a look at the specific definitions in the `webpack.config.js` file.
|
|
|
|
|
|
```js
|
|
|
module: {
|
|
|
@@ -84,10 +84,10 @@ module: {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-Each single SASS file is compiled in a separate thread, so to override default variables (defined with `!default`) across the theme, new values must be imported/declared at the very beginning of **each single** SASS file's compilation process. SASS Loader offers the [`data`](https://www.npmjs.com/package/sass-loader#environment-variables) option to do this.
|
|
|
+Each SASS file is compiled in a separate thread, so to override default variables (defined with `!default`) across the theme, new values must be imported or declared at the very beginning of **each single** SASS file's compilation process. SASS Loader offers the [`data`](https://www.npmjs.com/package/sass-loader#environment-variables) option to do this.
|
|
|
|
|
|
|
|
|
-Let's [`@import`](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_import__import) a `custom.scss` file located in the root of the repository containing all custom variables.
|
|
|
+Now [`@import`](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_import__import) a `custom.scss` file located in the root of the repository containing all custom variables.
|
|
|
|
|
|
```js
|
|
|
use: [
|
|
|
@@ -102,7 +102,7 @@ use: [
|
|
|
]
|
|
|
```
|
|
|
|
|
|
-Using the full potential of the SASS variables, the customization will make the theme dark, with slightly bigger text and more rounded corners.
|
|
|
+Using the full potential of SASS variables, the customization will make the theme dark, with slightly bigger text and more rounded corners.
|
|
|
|
|
|
<info-box hint>
|
|
|
Check out the [colors helper](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/helpers/_colors.scss) for the full list of customizable colors. You can also browse [other helpers](https://github.com/ckeditor/ckeditor5-theme-lark/tree/master/theme/helpers) to learn about other useful SASS variables.
|
|
|
@@ -111,7 +111,7 @@ Using the full potential of the SASS variables, the customization will make the
|
|
|
The contents of `custom.scss` could look as below:
|
|
|
|
|
|
```scss
|
|
|
-// Overrides the border-radius setting in the theme.
|
|
|
+// Overrides the border radius setting in the theme.
|
|
|
$ck-border-radius: 4px;
|
|
|
|
|
|
// Overrides the default font size in the theme.
|
|
|
@@ -178,18 +178,18 @@ $ck-colors: (
|
|
|
'editor-toolbar-button-background': $custom-background,
|
|
|
'editor-dropdown-background': #535254,
|
|
|
|
|
|
- // Overrides the default colors used by ckeditor5-image package.
|
|
|
+ // Overrides the default colors used by the ckeditor5-image package.
|
|
|
'image-caption-background': #f7f7f7,
|
|
|
'image-caption-text': #333,
|
|
|
|
|
|
- // Overrides the default colors used by ckeditor5-widget package.
|
|
|
+ // Overrides the default colors used by the ckeditor5-widget package.
|
|
|
'widget-border-blurred': #ddd,
|
|
|
'widget-border-hover': #FFD25C,
|
|
|
'widget-editable-focused-background': $custom-white
|
|
|
);
|
|
|
```
|
|
|
|
|
|
-Now let's build the editor using `npm run build-ckeditor` and see the results. From now on, the editor's theme is using customized styles.
|
|
|
+It is time to build the editor using `npm run build-ckeditor` and see the results. From now on, the editor's theme is using customized styles.
|
|
|
|
|
|
## Adding extra styles to the build
|
|
|
|
|
|
@@ -203,9 +203,9 @@ In the editor demo presented and the very beginning of this guide, the drop down
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-The above rule could be added directly to any styles sheet in the web page and most certainly would work as expected.
|
|
|
+The rule above could be added directly to any stylesheet in the web page and most certainly would work as expected.
|
|
|
|
|
|
-But what if the color set customized in the [previous part](#Customization-with-SASS-variables) of this guide has changed? Static CSS rules will not update along with the SASS variables and neither they can benefit from the mixins and functions provided by the theme. To add an extra styles and keep it within the ecosystem, a separate SASS file should be created (let's call it `extras.scss`):
|
|
|
+But what if the color set customized in the [previous part](#Customization-with-SASS-variables) of this guide has changed? Static CSS rules will neither update along with the SASS variables nor can they benefit from the mixins and functions provided by the theme. To add extra styles and keep them within the ecosystem, a separate SASS file should be created (in his example it will be called `extras.scss`):
|
|
|
|
|
|
```scss
|
|
|
// Allow using Lark's ck-box-shadow() mixin.
|
|
|
@@ -219,7 +219,7 @@ $shadow-color: ck-color( 'editor-toolbar-background', 10 );
|
|
|
|
|
|
.ck-editor-toolbar {
|
|
|
.ck-button.ck-dropdown__button {
|
|
|
- // Apply a dedicated inner box-shadow to the dropdown button.
|
|
|
+ // Apply a dedicated inner box-shadow to the drop-down button.
|
|
|
@include ck-box-shadow(
|
|
|
0 0 0 1px $shadow-color inset,
|
|
|
0 0 5px $shadow-color inset
|
|
|
@@ -228,7 +228,7 @@ $shadow-color: ck-color( 'editor-toolbar-background', 10 );
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-and then imported into a JavaScript file that is processed by webpack and the [loaders](#Styles-processing-and-bundling), like an e.g. an entry–point of the application.
|
|
|
+This file then needs to be imported into a JavaScript file that is processed by webpack and the [loaders](#Styles-processing-and-bundling), like for example an entry point of the application.
|
|
|
|
|
|
```js
|
|
|
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
|