Made Mistakes

Minimal Mistakes, a Jekyll Theme

Minimal Mistakes, a Jekyll Theme

 Design & Development 22 Comments

splash layout example single layout with comments and related posts archive layout example

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 :smile:.

Live Preview

Ruby Gem Theme

Interested in beta testing out a pre-release “gemified” version of Minimal Mistakes? Read this blog post to learn how.

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.

Questions?

Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter @mmistakes or file a GitHub issue. And if you make something cool with this theme feel free to let me know.

License

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

22 Comments

Mihai Soloi

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

zjxhz

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

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

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

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

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.

chippyash

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

Luca

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

Brian Moseley

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

Michael Rose

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.