[ADF-2463] Moved user guide pages to a subfolder (#3083)

* [ADF-2463] Moved user guide to a subfolder

* [ADF-2463] Fixed broken links and images

docs/user-guide/angular-material-design.md

@@ -0,0 +1,58 @@
+# Angular Material Design
+
+Google's
+[Material Design](https://material.io/guidelines/material-design/introduction.html)
+is an example of a _design language_, a
+general set of principles and ideas that are used to give designs a
+consistent look and feel. A design language might be used in-house by
+a company to maintain a "family resemblance" between its products or to
+produce user-friendly signage. Material Design is Google's approach to
+keeping user interfaces consistent between apps, using insights from
+product design and cognitive psychology.
+
+[Angular Material](https://material.angular.io/) is a set of components,
+styles and other GUI elements
+that follow the Material Design guidelines. ADF uses Angular Material
+to implement its components but you can also use it directly when
+creating your own components or modifying the ones provided by ADF.
+
+## Themes
+
+Material Design doesn't enforce one single color scheme but it does
+specify a number of **themes**. A theme is a set of colors in various
+shades, each of which lends itself to a particular task in the GUI.
+For example, using the suggested shades for status bars, backgrounds
+and shadows helps to give the correct emphasis to these elements and
+ensure they look familiar to the user. The Material Design 
+[themes documentation](https://material.io/guidelines/style/color.html#color-themes)
+has more information as well as color swatches and other resources.
+
+An advantage of using themes is that one theme can easily be replaced
+by another - the CSS styling is designed so that a given class name in one theme plays
+an equivalent role in all other themes. See the [Theming](theming.md) page
+for details of how to apply an off-the-shelf theme to your ADF app or to
+create your own theme.
+
+## Components
+
+Angular Material implements a variety of GUI components. These include
+controls like radio buttons and checkboxes but also structures for layout
+(lists, grids, etc) and navigation (toolbars, sidebars, menus). See the
+[components section](https://material.angular.io/components/categories) of
+the Angular Material docs for more information.
+
+## Icons
+
+Material Design has extensive
+[guidelines](https://material.io/guidelines/style/icons.html) for the design
+of icons. These images serve as visual indicators for GUI functions and data
+elements (eg, a small graphic of a person could denote a user). A selection of
+standard icons is also available for common items. For example, a microphone
+icon indicates audio input while a magnifying glass emphasizes a search box.
+See the Material Design
+[system icon docs](https://material.io/guidelines/style/icons.html#icons-system-icons)
+for further information and to download the set of standard icon images.
+
+## See also
+
+-   [Theming](theming.md)