diff --git a/docs/getting-started.md b/docs/getting-started.md
index 09c14f9538bb8fe93c9ee15513de2f478a181235..7b63d2e66afaa2fe62649768770b2bb019adbb05 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -4,11 +4,11 @@
### Installing MkDocs
-In order to install [MkDocs][], Python and `pip` – the Python package manager –
-need to be up and running. Assuming you are a developer and have a basic
-understanding of how things work and what StackOverflow is, we won't provide
-guidelines on setting those up. You can verify if you're already good to go
-with the following commands:
+Before installing [MkDocs][], you need to make sure you have Python and `pip`
+– the Python package manager – up and running. Assuming you are a developer and
+have a basic understanding of how things work and what StackOverflow is, we
+won't provide guidelines on setting those up. You can verify if you're already
+good to go with the following commands:
``` sh
python --version
@@ -103,6 +103,31 @@ extra:
logo: 'images/logo.png'
```
+### Changing the color palette
+
+Material defines a default hue for every primary and accent color on Google's
+material design [color palette][]. This makes it very easy to change the
+overall look of the theme. Just set the variables `extra.palette.primary` and
+`extra.palette.accent` to one of the colors defined in the palette:
+
+``` yaml
+extra:
+ palette:
+ primary: 'indigo'
+ accent: 'light blue'
+```
+
+Color names can be written upper- or lowercase but must match the names of the
+material design [color palette][]. Valid values are: _red_, _pink_, _purple_,
+_deep purple_, _indigo_, _blue_, _light blue_, _cyan_, _teal_, _green_, _light
+green_, _lime_, _yellow_, _amber_, _orange_, _deep orange_, _brown_, _grey_ and
+_blue grey_. The last three colors can only be used as a primary color.
+
+If the color is set via this configuration, an additional CSS file called
+`palettes.css` is included that defines the color palettes. If you want to
+keep things lean, clone the repository and recompile the theme with your
+custom colors set. See [this article](customization.md) for more information.
+
### Changing the font family
Material uses the [Ubuntu font family][] by default, specifically the regular
@@ -117,15 +142,28 @@ extra:
code: 'Roboto Mono'
```
-The text font will be loaded in font-weights 400 and 700, the monospaced font
-in regular weight. If you want to load fonts from other destinations or don't
-want to use the Google Fonts loading magic, just set `extra.font` to `'none'`:
+The text font will be loaded in font-weights 400 and **700**, the monospaced
+font in regular weight. If you want to load fonts from other destinations or
+don't want to use the Google Fonts loading magic, just set `extra.font` to
+`'none'`:
``` yaml
extra:
font: 'none'
```
+### Localization
+
+The **Previous** and **Next** labels in the footer can easily be changed by
+defining the variables `extra.i18n.prev` and `extra.i18n.next`:
+
+``` yaml
+extra:
+ i18n:
+ prev: 'Previous'
+ next: 'Next'
+```
+
### Adding a GitHub and Twitter account
If you have a GitHub and/or Twitter account, you can add links to your
@@ -141,9 +179,8 @@ extra:
### More advanced customization
-If you want to change the colors or general appearance of the Material theme,
-see [this article](customization.md) for more information on advanced
-customization.
+If you want to change the general appearance of the Material theme, see
+[this article](customization.md) for more information on advanced customization.
## Extensions
@@ -242,9 +279,15 @@ theme: 'material'
extra:
version: '0.1.0'
logo: 'images/logo.png'
+ palette:
+ primary: 'indigo'
+ accent: 'light blue'
font:
text: 'Roboto'
code: 'Roboto Mono'
+ i18n:
+ prev: 'Previous'
+ next: 'Next'
author:
github: 'my-github-handle'
twitter: 'my-twitter-handle'
@@ -258,6 +301,7 @@ markdown_extensions:
```
[MkDocs]: http://www.mkdocs.org
+[color palette]: http://www.materialui.co/colors
[Ubuntu font family]: http://font.ubuntu.com
[Google Fonts]: https://www.google.com/fonts
[Roboto font]: https://www.google.com/fonts/specimen/Roboto
diff --git a/docs/index.md b/docs/index.md
index b6d7fd5ba7c47cdc849a80dade84c8decd697b93..5d6ce9f1dce2dd1177f78614fb26d675c7ab487e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -14,12 +14,26 @@ CSS that weighs less than 30kb (minified, gzipped and excluding Google Fonts
and Analytics). Yet, it is highly customizable and degrades gracefully in older
browsers.
+## Quick start
+
+Install with `pip`:
+
+``` sh
+pip install mkdocs-material
+```
+
+Add the following line to your `mkdocs.yml`:
+
+``` yaml
+theme: 'material'
+```
+
## Features
- Beautiful, readable and very user-friendly design based on Google's material
design guidelines, packed in a full responsive template with a well-defined
- color palette, great typography, as well as a beautiful search interface and
- footer.
+ and [easily customizable color palette][], great typography, as well as a
+ beautiful search interface and footer.
- Well-tested and optimized Javascript and CSS including a cross-browser
fixed/sticky header, a drawer that even works without Javascript using
@@ -34,7 +48,7 @@ browsers.
built on-top of [Gulp][] with `npm` and `bower` and modular and abstracted
style definitions built with [SASS][].
-- Web application capability on iOS - when the page is saved to the homescreen,
+- Web application capability on iOS – when the page is saved to the homescreen,
it behaves and looks like a native application.
See the [getting started guide](getting-started.md) for instructions how to get
@@ -44,6 +58,7 @@ it up and running.
[material design]: https://www.google.com/design/spec/material-design
[checkbox hack]: http://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack/
[project logo]: getting-started.md#adding-a-logo
+[easily customizable color palette]: getting-started.md#changing-the-color-palette
[GitHub and Twitter accounts]: getting-started.md#adding-a-github-and-twitter-account
[extendable and customizable]: customization.md
[Gulp]: http://gulpjs.com