Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
M
mkdocs-material
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Container registry
Model registry
Operate
Environments
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
This is an archived project. Repository and other project resources are read-only.
Show more breadcrumbs
Janne Mareike Koschinski
mkdocs-material
Commits
bb5f98e6
Commit
bb5f98e6
authored
9 years ago
by
squidfunk
Browse files
Options
Downloads
Patches
Plain Diff
Updated documentation
parent
e2563606
No related branches found
No related tags found
No related merge requests found
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
docs/getting-started.md
+55
-11
55 additions, 11 deletions
docs/getting-started.md
docs/index.md
+18
-3
18 additions, 3 deletions
docs/index.md
with
73 additions
and
14 deletions
docs/getting-started.md
+
55
−
11
View file @
bb5f98e6
...
...
@@ -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
install
ing
[
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
...
...
This diff is collapsed.
Click to expand it.
docs/index.md
+
18
−
3
View file @
bb5f98e6
...
...
@@ -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
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment