mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Updated documentation
This commit is contained in:
parent
e256360619
commit
bb5f98e617
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user