Updated documentation

This commit is contained in:
squidfunk 2016-02-24 17:31:01 +01:00
parent e256360619
commit bb5f98e617
2 changed files with 73 additions and 14 deletions

View File

@ -4,11 +4,11 @@
### Installing MkDocs ### Installing MkDocs
In order to install [MkDocs][], Python and `pip` the Python package manager Before installing [MkDocs][], you need to make sure you have Python and `pip`
need to be up and running. Assuming you are a developer and have a basic the Python package manager up and running. Assuming you are a developer and
understanding of how things work and what StackOverflow is, we won't provide have a basic understanding of how things work and what StackOverflow is, we
guidelines on setting those up. You can verify if you're already good to go won't provide guidelines on setting those up. You can verify if you're already
with the following commands: good to go with the following commands:
``` sh ``` sh
python --version python --version
@ -103,6 +103,31 @@ extra:
logo: 'images/logo.png' 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 ### Changing the font family
Material uses the [Ubuntu font family][] by default, specifically the regular Material uses the [Ubuntu font family][] by default, specifically the regular
@ -117,15 +142,28 @@ extra:
code: 'Roboto Mono' code: 'Roboto Mono'
``` ```
The text font will be loaded in font-weights 400 and 700, the monospaced font The text font will be loaded in font-weights 400 and **700**, the monospaced
in regular weight. If you want to load fonts from other destinations or don't font in regular weight. If you want to load fonts from other destinations or
want to use the Google Fonts loading magic, just set `extra.font` to `'none'`: don't want to use the Google Fonts loading magic, just set `extra.font` to
`'none'`:
``` yaml ``` yaml
extra: extra:
font: 'none' 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 ### Adding a GitHub and Twitter account
If you have a GitHub and/or Twitter account, you can add links to your If you have a GitHub and/or Twitter account, you can add links to your
@ -141,9 +179,8 @@ extra:
### More advanced customization ### More advanced customization
If you want to change the colors or general appearance of the Material theme, If you want to change the general appearance of the Material theme, see
see [this article](customization.md) for more information on advanced [this article](customization.md) for more information on advanced customization.
customization.
## Extensions ## Extensions
@ -242,9 +279,15 @@ theme: 'material'
extra: extra:
version: '0.1.0' version: '0.1.0'
logo: 'images/logo.png' logo: 'images/logo.png'
palette:
primary: 'indigo'
accent: 'light blue'
font: font:
text: 'Roboto' text: 'Roboto'
code: 'Roboto Mono' code: 'Roboto Mono'
i18n:
prev: 'Previous'
next: 'Next'
author: author:
github: 'my-github-handle' github: 'my-github-handle'
twitter: 'my-twitter-handle' twitter: 'my-twitter-handle'
@ -258,6 +301,7 @@ markdown_extensions:
``` ```
[MkDocs]: http://www.mkdocs.org [MkDocs]: http://www.mkdocs.org
[color palette]: http://www.materialui.co/colors
[Ubuntu font family]: http://font.ubuntu.com [Ubuntu font family]: http://font.ubuntu.com
[Google Fonts]: https://www.google.com/fonts [Google Fonts]: https://www.google.com/fonts
[Roboto font]: https://www.google.com/fonts/specimen/Roboto [Roboto font]: https://www.google.com/fonts/specimen/Roboto

View File

@ -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 and Analytics). Yet, it is highly customizable and degrades gracefully in older
browsers. browsers.
## Quick start
Install with `pip`:
``` sh
pip install mkdocs-material
```
Add the following line to your `mkdocs.yml`:
``` yaml
theme: 'material'
```
## Features ## Features
- Beautiful, readable and very user-friendly design based on Google's material - Beautiful, readable and very user-friendly design based on Google's material
design guidelines, packed in a full responsive template with a well-defined design guidelines, packed in a full responsive template with a well-defined
color palette, great typography, as well as a beautiful search interface and and [easily customizable color palette][], great typography, as well as a
footer. beautiful search interface and footer.
- Well-tested and optimized Javascript and CSS including a cross-browser - Well-tested and optimized Javascript and CSS including a cross-browser
fixed/sticky header, a drawer that even works without Javascript using 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 built on-top of [Gulp][] with `npm` and `bower` and modular and abstracted
style definitions built with [SASS][]. 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. it behaves and looks like a native application.
See the [getting started guide](getting-started.md) for instructions how to get 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 [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/ [checkbox hack]: http://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack/
[project logo]: getting-started.md#adding-a-logo [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 [GitHub and Twitter accounts]: getting-started.md#adding-a-github-and-twitter-account
[extendable and customizable]: customization.md [extendable and customizable]: customization.md
[Gulp]: http://gulpjs.com [Gulp]: http://gulpjs.com