docs(common): clarify getting started tutorial; examples of all themes fromt the CDN, separate server and client examples

marin-bratanov · marin-bratanov · commit 75d64a564894 · 2019-10-19T11:10:43.000+03:00
diff --git a/_contentTemplates/common/get-started.md b/_contentTemplates/common/get-started.md
@@ -55,9 +55,9 @@ Once you have added the Telerik NuGet feed, continue with this tutorial.
 #project-creation-part-1
  If you have one, go to the [Add to Existing Project](#add-to-existing-project) section below.
 
-If you don't have a Blazor project set up, first you need to create one.
+If you don't have a Blazor project set up, first you need to create one, then go to the [Add to Existing Project](#add-to-existing-project) section below.
 
->tip You can use the [Visual Studio Extensions]({%slug getting-started-vs-integration-new-project%}) we provide to prepare the project for you.
+>tip You can use the [Visual Studio Extensions]({%slug getting-started-vs-integration-new-project%}) we provide to prepare the project for you, so that you can start using the Telerik components immediately.
 
 To create a project manually, follow these steps:
 
diff --git a/_contentTemplates/common/js-interop-file.md b/_contentTemplates/common/js-interop-file.md
@@ -6,7 +6,7 @@
 #end
 
 #add-js-interop-file-to-getting-started-client
- add the `telerik-blazor.js` file to your main index file - `wwwroot/index.html`:
+ **add** the `telerik-blazor.js` file to your main index file - `wwwroot/index.html`:
 
     **HTML**
     
@@ -16,7 +16,7 @@
 #end
 
 #add-js-interop-file-to-getting-started-server
- add the `telerik-blazor.js` file to your main index file - `~/Pages/_Host.cshtml`:
+ **add** the `telerik-blazor.js` file to your main index file - `~/Pages/_Host.cshtml`:
 
     **HTML**
     
diff --git a/getting-started/client-blazor.md b/getting-started/client-blazor.md
@@ -33,6 +33,7 @@ For client-side `Blazor App`, we recommend the usage of `Blazor (ASP.NET Hosted)
 
     ![Select Blazor Project Type](images/choose-project-template.png)
 
+Now that you have a Blazor project running, it's time to [Add the Telerik components](#add-to-existing-project) to it.
 
 ### Add to Existing Project
 
diff --git a/getting-started/server-blazor.md b/getting-started/server-blazor.md
@@ -33,6 +33,7 @@ To use Blazor server-side, you need to use the `Blazor App` type of project with
 
     ![Select Blazor Project Type](images/choose-project-template-server-blazor.png)
 
+Now that you have a Blazor project running, it's time to [Add the Telerik components](#add-to-existing-project) to it.
 
 ### Add to Existing Project
 
diff --git a/themes.md b/themes.md
@@ -18,21 +18,44 @@ The UI for Blazor suite comes with a set of built-in themes that you can choose
 
 These themes are shared with the Kendo UI suites with which the UI for Blazor suite shares HTML rendering, classes and appearance (even though UI for Blazor are native components). You can read more about the way the available themes function in the [Kendo SASS Themes](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) article.
 
-To use a theme, you must reference its stylesheet in the `<head>` of your main index file. For a [client-side Blazor app]({%slug getting-started/client-side%}), this is `wwwroot/index.html` and for a [server-side Blazor app]({%slug getting-started/server-side%}), it is `~/Pages/Index.cshtml`. The Razor syntax for a server application may differ and you need to escape the `@` symbols as `@@`.
+To use a theme, you must reference its stylesheet in the `<head>` of your main index file. For a [client-side Blazor app]({%slug getting-started/client-side%}), this is `wwwroot/index.html` and for a [server-side Blazor app]({%slug getting-started/server-side%}), it is `~/Pages/Index.cshtml`. The Razor syntax for a server application differs and you need to escape the `@` symbols as `@@`.
 
->caption Reference the Default theme from the cloud
+>caption Reference the Telerik theme from the cloud
 
-````HTML
+````ClientApp
 <!DOCTYPE html>
 <html>
 <head>
     . . .
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
+    
+    <!-- Choose only one of the themes -->
+    <!-- 
+        <link href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css" rel="stylesheet" />
+        <link href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css" rel="stylesheet" />
+    -->
 </head>
-<body>
-    <app>Loading...</app>
+
+ . . .
+ 
+</html>
+````
+````ServerApp
+<!DOCTYPE html>
+<html>
+<head>
     . . .
-</body>
+    <link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-default@@latest/dist/all.css" />
+    
+    <!-- Choose only one of the themes -->
+    <!-- 
+        <link href="https://unpkg.com/@@progress/kendo-theme-bootstrap@@latest/dist/all.css" rel="stylesheet" />
+        <link href=https://unpkg.com/@@progress/kendo-theme-material@@latest/dist/all.css" />
+    -->
+</head>
+
+ . . .
+ 
 </html>
 ````
 

Original file line number	Diff line number	Diff line change
@@ -33,6 +33,7 @@ For client-side `Blazor App`, we recommend the usage of `Blazor (ASP.NET Hosted)
`33`	`33`
`34`	`34`	`![Select Blazor Project Type](images/choose-project-template.png)`
`35`	`35`
	`36`	`+Now that you have a Blazor project running, it's time to [Add the Telerik components](#add-to-existing-project) to it.`
`36`	`37`
`37`	`38`	`### Add to Existing Project`
`38`	`39`
Original file line number	Diff line number	Diff line change
@@ -33,6 +33,7 @@ To use Blazor server-side, you need to use the `Blazor App` type of project with
`33`	`33`
`34`	`34`	`![Select Blazor Project Type](images/choose-project-template-server-blazor.png)`
`35`	`35`
	`36`	`+Now that you have a Blazor project running, it's time to [Add the Telerik components](#add-to-existing-project) to it.`
`36`	`37`
`37`	`38`	`### Add to Existing Project`
`38`	`39`