diff --git a/docs/getting-started.md b/docs/getting-started.md index 09c14f953..7b63d2e66 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 b6d7fd5ba..5d6ce9f1d 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