Minimal Mistakes, a Jekyll theme

/ /

Minimal Mistakes is a flexible two-column Jekyll theme. Perfect for hosting your personal site, blog, or portfolio on GitHub or your own server.

Includes responsive layouts (single, archive, and splash pages) that look great on mobile and desktop browsers. As the name implies — styling is purposely minimalistic to be enhanced and customized by you .

Live preview

Theme features

Compatible with GitHub Pages
Several layout options (single, archive, splash pages)
SEO optimized with support for Twitter Cards and Open Graph data
Optional header images, sidebars, table of contents, galleries, related posts, breadcrumb links, and more.
Optional comments (Disqus, Facebook, Google+, Staticman, and custom)
Optional analytics (Google Analytics and custom)

Usage

To learn more about how to customize this theme, include feature images in posts, modify the look and feel, create new posts, and some other junk, read up here.

License

This theme is free and open source software, distributed under the MIT License.

Enjoyed this content?

Help keep it free by sending a donation or purchasing something from my Amazon Wish List. You can also subscribe to various site feeds to get notified of new posts or follow me on social media.

22 comments

Mihai Soloi on July 19th, 2013

amazing design man, long time waiting for a theme like this… love it!!!

Michael Rose on July 19th, 2013

Thanks sir!

nxbtch on August 9th, 2013

fucking beautiful. only exist in my dream!

Lindsay Kay on September 27th, 2013

Michael - brilliant work, exactly what I needed. Typography spot on, clean code, flawless install. Thanks!

Michael Rose on September 27th, 2013

Awesome. Glad it’s been useful.

Lindsay Kay on October 26th, 2013

Minimal Mistakes in the wild: http://xeolabs.com

Michael Rose on October 26th, 2013

Sweet! Thanks for sharing.

taiar, a. on October 29th, 2013

this theme is awesome. wonderful work!

zjxhz on November 13th, 2013

A simple yet beautiful theme, thanks! However, I would like to be able to customize the style a bit, for example I don’t like the indent of a new paragraph and its close margin to the previous one. So I had to comment out the "p+p" part in main.min.css. I’m very new to css, actually I had only spent less than a few hours to learn it today, so it was difficult for me to customize it further, e.g. to change the font of the posts, without a clear document.

So my question is that is there a document associated with this main.min.css file? Or at least can I find a pretty formatted one(formatting it with some tools led me to some errors)? I can only guess that it contains something from <git.io/normalize> but they seem very different now, or it a combination of other css files too?

Michael Rose on November 13th, 2013

I’ve created a few Jekyll themes after this one so forgive me if I jumble this up. They’re all starting to blend together to me now ;-)

The typography in this theme was heavily based off of Typeplate’s set of styles. I liked the indents and no padding around paragraphs because it mimic the typography of most books, which is a feel I was going for.

Typeplate has since dropped support for LESS, so I removed it for the most part and incorporated a few mixins as a base to build off of.

If you’re new to CSS then there’s a lot going on with the theme that I can’t easily explain in a comment. To further complicate it I use LESS to build all of the stylesheets, which are broken up into smaller chunks and preprocessed to output main.min.css. That’s another layer of abstraction that you’d have to get familiar with on top of learning CSS.

But if you take a look at the .less files you’ll see they’re much more logical than digging through main.min.css which has been optimized for speed by removing extra spaces and comments. The .less files have more documentation to help customize. For the most part if you bump around typography.less, page.less, and variables.less you should be able to do some simple modifications to suit your taste.

zjxhz on November 13th, 2013

Thanks for the quick reply! It seems to me now more clear and logical even I’m still confused, but I’m happy already with the paragraph changes I’ve made and I’ll leave other customizations to future.

Luca on October 4th, 2014

This is a beautiful theme!! One question, if possible.

I want to change the home page , so that it contains the list of posts instead of recent posts (like your theme “hpstr”)

Is it possible? If yes, how?

Thank you very much.

Michael Rose on October 4th, 2014

Anything is possible. You’ll have to modify index.html to pull in full posts instead of just the title and excerpt.

If you look at HPSTR you should be able to get some inspiration and modify the homepage code and apply it to the Minimal Mistakes theme.

Jordi Pont-Tuset on October 9th, 2014

Thanks a lot for this theme, I love it!

You can check my version here :)

raathigesh on October 19th, 2014

Beautiful Theme. Love it :)

Michael Rose on October 22nd, 2014

Looking good!

Clayton Burlison on October 30th, 2014

You have a bad link on this page. Under the “Usage” header, the “read up here” should now link to https://mmistakes.github.io/minimal-mistakes/.

Michael Rose on October 31st, 2014

Eagle eyes. That’s for the bad link catch.

chippyash on December 15th, 2014

Thank you Michael - just started with it (and Jekyll.) Made setting up my Github page very easy and quick.

Luca on December 18th, 2014

Thanks for the advice! This is my first work with “minimal mistakes” theme (v. 0.1 beta ;)).

Brian Moseley on January 12th, 2015

Is it possible to create a dropdown “submenu” with this theme through the data file and some alterations to navigation.html?

Michael Rose on January 12th, 2015

It is possible if your CSS skills are strong. It’s tricky to do multi-leveled navigation with Jekyll but it can be done. I couldn’t think of a one-size fits all solution to cover every use-case so I purposely kept things simple. You can certainly hack something together that would meet your specific needs.

You’ll likely have to hard code some of the navigation lists rather than relying on data files for all of the menus. Unless you want to string together some crazy Liquid spaghetti code to do it.

I’d Google around for some ideas. I know I’ve seen a blog post or two with ways of dealing with tiered and dynamic navigations in Jekyll.

Comments are closed

If you have a question concerning the content of this page, please feel free to contact me.