1002931: Update the CSS references for Ribbon mode

Author: Akshaya0404

Document-Processing/Word/Word-Processor/angular/ribbon.md

@@ -23,6 +23,21 @@ To enable Ribbon in Angular Document Editor, use the [`toolbarMode`](https://ej2
 
 By default, `toolbarMode` is `Toolbar`.
 
+To use Ribbon mode in the Document Editor, include the necessary CSS files from the **../node_modules/@syncfusion**  package folder. This can be referenced in [src/styles.css] using following code.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-ribbon/styles/material.css';/* Required for Ribbon */
+```
+
 The following code shows the how to enable the `Ribbon` in Document Editor.
 
 ```typescript

Document-Processing/Word/Word-Processor/react/ribbon.md

@@ -23,6 +23,21 @@ To enable Ribbon in React Document Editor, use the [`toolbarMode`](https://ej2.s
 
 By default, `toolbarMode` is `Toolbar`.
 
+To use Ribbon mode, add Document Editor component and its dependent component styles available in **../node_modules/@syncfusion** package folder. This can be added as reference in **src/App.css**.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-documenteditor/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-ribbon/styles/material.css';/* Required for Ribbon */
+```
+
 The following code shows the how to enable the `Ribbon` in Document Editor.
 
 {% raw %}

Document-Processing/Word/Word-Processor/vue/ribbon.md

@@ -23,6 +23,21 @@ To enable Ribbon in Document Editor, use the [`toolbarMode`](https://ej2.syncfus
 
 By default, `toolbarMode` is `Toolbar`.
 
+To use Ribbon mode, add Document Editor component and its dependent component styles available in **../node_modules/@syncfusion** package folder. This can be added as reference in **src/App.vue**.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-documenteditor/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-ribbon/styles/material.css';/* Required for Ribbon */
+```
+
 The following code shows the how to enable the `Ribbon` in Document Editor.
 
 {% tabs %}