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
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

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
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