docs: better usage advice

Signed-off-by: Florian-Schoenherr <[email protected]>

Author: Florian-Schoenherr

packages/docs/src/routes/getting-started/installation.md

@@ -28,18 +28,6 @@ If you want a fast and basic setup, without custom SCSS/SASS, then only installi
 $ npm i svelte-materialify
 ```
 
-In your svelte files, import the _compiled_ module `from 'svelte-materialify'`:
-
-```html
-<script>
-  // Import Everything
-  import * as S from 'svelte-materialify';
-  // or...
-  // Import a single component
-  import { Button } from 'svelte-materialify';
-</script>
-```
-
 ## Install with Custom Styles
 
 If you want finer control over Svelte Materialify, install all its peer dependencies:
@@ -48,18 +36,6 @@ If you want finer control over Svelte Materialify, install all its peer dependen
 $ npm i -D svelte-materialify svelte-preprocess sass postcss
 ```
 
-In your svelte files, import the _uncompiled_ module `from 'svelte-materialify/src'`:
-
-```html
-<script>
-  // Import Everything
-  import * as S from 'svelte-materialify/src';
-  // or...
-  // Import a single component
-  import { Button } from 'svelte-materialify/src';
-</script>
-```
-
 Now create a **\_material-theme.scss** file. Let's put it in a folder called **theme**.
 Include the folder path in the `sveltePreprocess` function in your **rollup.config.js**:
 

packages/docs/src/routes/getting-started/usage.md

@@ -9,16 +9,45 @@ related:
 
 # Usage
 
-Once you have installed Svelte Materialify and other dependencies, it is time to learn how to use it.
+Once you have installed Svelte Materialify, it's time to learn how to use it.
 
+## Importing the Components
+Depending on the Install you chose, there are two ways to import:
+### With Default styles
+
+In your svelte files, import the _compiled_ module `from 'svelte-materialify'`:
+
+```html
+<script>
+  import { MaterialApp, Button } from 'svelte-materialify';
+</script>
+
+<MaterialApp>
+  <Button>Compiled (Default styles, used in the REPL)</Button>
+</MaterialApp>
+```
+### With Custom styles
+
+In your svelte files, import the _uncompiled_ module `from 'svelte-materialify/src'`:
+
+```html
+<script>
+  import { MaterialApp, Button } from 'svelte-materialify/src';
+  //this works, too:
+  import Button from 'svelte-materialify/src/components/Button/Button.svelte';
+</script>
+
+<MaterialApp>
+  <Button>Uncompiled (Custom styles, defined in _material-theme.scss)</Button>
+</MaterialApp>
+```
 ## Layout
 
-All components should be children of `MaterialApp` which has all the global styles and
-enables theming.
+All components should be children of `MaterialApp`, which has all the **global styles** and enables theming:
 
 ```html
 <script>
-  import { MaterialApp } from 'svelte-materialify';
+  import { MaterialApp } from 'svelte-materialify'; //or from `/src`
   let theme = 'light';
 </script>
 
@@ -27,39 +56,43 @@ enables theming.
 </MaterialApp>
 ```
 
+If you don't want any global styles (other than theming and colors), you can use `MaterialAppMin` instead:
+
+```html
+<script>
+  import { MaterialAppMin } from 'svelte-materialify'; //or from `/src`
+  let theme = 'light';
+</script>
+
+<MaterialAppMin theme="{theme}">
+  <slot />
+</MaterialAppMin>
+```
+
 ## Theming
 
-What to customise some SCSS variables, worry not, just put them in the **\_material-theme.scss** you had created.
+You want to customise some SCSS variables? Worry not, just put them in the **\_material-theme.scss** you had created:
 
 ```scss
+$primary-color: #004d26;
+$secondary-color: #ff99cc;
+$error-color: #420420;
+$success-color: #66ff99;
+
 $body-font-family: "Poppins", "Segoe UI", sans-serif;
 
 $spacer: 6px !default;
 ...
 ```
 
-To access these variables in your own components just import the variable file from svelte materialify.
+To access these variables in your own components, just import the variable file from svelte materialify:
 
 ```scss
 @import 'svelte-materialify/src/styles/variables';
 ```
 
-## Components
-
-Just import them one by one or all at once from svelte materialify.
-
-```html
-<script>
-  import * as S from 'svelte-materialify';
-
-  import { Button } from 'svelte-materialify';
-  // OR import from source
-  import { Button } from 'svelte-materialify/src';
-  // OR directly import the button component
-  import Button from 'svelte-materialify/src/components/Button/index.js';
-</script>
+<Components.Alert type='info'>
 
-<S.Button>These Are</S.Button>
+If you want to use SCSS and SASS styles in your own components, [use svelte-preprocess](https://github.com/sveltejs/svelte-preprocess/blob/master/docs/usage.md).
 
-<button>The Same Thing</button>
-```
+</Components.Alert>