diff --git a/_docs/01-quick-start-guide.md b/_docs/01-quick-start-guide.md index 1d4ca102..6cda4139 100644 --- a/_docs/01-quick-start-guide.md +++ b/_docs/01-quick-start-guide.md @@ -30,6 +30,9 @@ If you're hosting several Jekyll based sites under the same GitHub username you creating a new branch on GitHub +**ProTip:** Be sure to [delete](https://github.com/blog/1377-create-and-delete-branches) the `gh-pages` branch if you forked Minimal Mistakes. This branch contains the documentation and demo site for the theme and you probably don't want that showing up in your repo. +{: .notice--info} + ## Customize Your Site Open up `_config.yml` found in the root of the repo and edit anything under **Site Settings**. For a full explanation of every setting be sure to read the **Customization** section, but for now let's just change the site's title. diff --git a/_docs/03-installation.md b/_docs/03-installation.md index 9e0986e8..e5f135e8 100644 --- a/_docs/03-installation.md +++ b/_docs/03-installation.md @@ -26,6 +26,9 @@ There are several ways to install the theme: [ Download Minimal Mistakes Theme](https://github.com/mmistakes/minimal-mistakes/archive/master.zip){: .btn .btn--success} +**ProTip:** Be sure to [delete](https://github.com/blog/1377-create-and-delete-branches) the `gh-pages` branch if you forked Minimal Mistakes. This branch contains the documentation and demo site for the theme and you probably don't want that showing up in your repo. +{: .notice--info} + --- To move over any existing content you'll want to copy the contents of your `_posts` folder to the new site. Along with any pages, collections, data files, images, or other assets. diff --git a/_docs/09-layouts.md b/_docs/09-layouts.md index b357d5e9..72d0e843 100644 --- a/_docs/09-layouts.md +++ b/_docs/09-layouts.md @@ -8,9 +8,105 @@ sidebar: --- {% include base_path %} +{% include toc icon="columns" title="Included Layouts" %} + +The bread and butter of any theme. Below you'll find the layouts included with Minimal Mistakes, what they look like and the type of content they've been built for. + +## Default + +The base layout all other layouts inherit from. There's not much to this layout apart from pulling in several `_includes`: + +* `` elements +* masthead navigation links +* {% raw %}`{{ content }}`{% endraw %} +* page footer +* scripts + +**Note:** You won't ever assign this layout directly to a post or page. Instead all other layouts will build off of it by setting `layout: default` in their YAML Front Matter. +{: .notice--warning} + +## Compress + +A Jekyll layout that compresses HTML in pure Liquid. + +* [Documentation](http://jch.penibelst.de/) ## Single +The layout you'll likely use the most --- thin sidebar on the left, main content on the right. + +To enable add `layout: single` or better yet apply as a [Front Matter default]({{ base_path }}/docs/configuration/#front-matter-defaults) in `_config.yml`. + +### Header + +To add some visual punch to a post or page, a large full-width header image can be included. + +**Note:** Be sure to resize your header images. `~1280px` is a good medium if you aren't [responsively serving up images](http://alistapart.com/article/responsive-images-in-practice). Through the magic of CSS they will scale up or down to fill the container. If you go with something too small it will look like garbage when upscaled, and something too large will hurt performance. +{: .notice--warning} + +![single layout header image example]({{ base_path }}/images/mm-single-header-example.jpg) + +Place your images in the `/images/` folder and add the following YAML Front Matter: + +```yaml +header: + image: image-filename.jpg +``` + +For externally hosted images include the full image path instead of just the filename: + +```yaml +header: + image: http://some-site.com/image.jpg +``` + +To include a caption or attribution for the image: + +```yaml +header: + image: unsplash-image-1.jpg + caption: "Photo credit: [**Unsplash**](https://unsplash.com)" +``` + +**ProTip:** Captions written in Markdown are supported, so feel free to add links, or style text. Just be sure to wrap it in quotes. +{: .notice--info} + +### Header Overlay + +To overlay text on top of a header image you have a few more options: + +* `overlay_image` --- header image you'd like to overlay. Same rules as `header.image` from above. +* `excerpt` --- auto-generated page excerpt is added to the overlay text or can be overridden. +* `cta_label` --- call to action button text label (default is `more_label` in UI Text data file) +* `cta_url` --- call to action button URL + +With this YAML Front Matter: + +```yaml +excerpt: "This post should display a **header with an overlay image**, if the theme supports it." +header: + overlay_image: unsplash-image-1.jpg + caption: "Photo credit: [**Unsplash**](https://unsplash.com)" + cta_label: "More Info" + cta_url: "https://unsplash.com" +``` + +You should get an header image overlaid with text and a call to action button. + +![single layout header overlay example]({{ base_path }}/images/mm-single-header-overlay-example.jpg) + +You also have the option of specifying a solid background-color to use instead of an image. + +![single layout header overlay with background fill]({{ base_path }}/images/mm-single-header-overlay-fill-example.jpg) + +```yaml +excerpt: "This post should display a **header with a solid background color**, if the theme supports it." +header: + overlay_color: "#333" +``` + +### Custom Sidebar + ![single layout example]({{ base_path }}/images/mm-layout-single.png) ![single layout with header example]({{ base_path }}/images/mm-layout-single-header.png) @@ -27,8 +123,4 @@ sidebar: ## Splash Page -![splash page layout example]({{ base_path }}/images/mm-layout-splash.png) - -## Default - -## Compress \ No newline at end of file +![splash page layout example]({{ base_path }}/images/mm-layout-splash.png) \ No newline at end of file diff --git a/images/mm-gh-pages.gif b/images/mm-gh-pages.gif index b831808a..ae30c86c 100644 Binary files a/images/mm-gh-pages.gif and b/images/mm-gh-pages.gif differ diff --git a/images/mm-github-edit-config.gif b/images/mm-github-edit-config.gif index 12c0ea85..a1768603 100644 Binary files a/images/mm-github-edit-config.gif and b/images/mm-github-edit-config.gif differ diff --git a/images/mm-single-header-example.jpg b/images/mm-single-header-example.jpg new file mode 100644 index 00000000..e2aa470e Binary files /dev/null and b/images/mm-single-header-example.jpg differ diff --git a/images/mm-single-header-overlay-example.jpg b/images/mm-single-header-overlay-example.jpg new file mode 100644 index 00000000..52d93b39 Binary files /dev/null and b/images/mm-single-header-overlay-example.jpg differ diff --git a/images/mm-single-header-overlay-fill-example.jpg b/images/mm-single-header-overlay-fill-example.jpg new file mode 100644 index 00000000..dcc28d59 Binary files /dev/null and b/images/mm-single-header-overlay-fill-example.jpg differ diff --git a/images/mm-theme-fork-repo.png b/images/mm-theme-fork-repo.png index 5f450f5e..c18dfb55 100644 Binary files a/images/mm-theme-fork-repo.png and b/images/mm-theme-fork-repo.png differ