There are plenty of tutorials out there on setting up Jekyll, but there doesn't seem to be much on styling it. So here are the basics of how I am using Jekyll and Material Design Lite for my personal site.

What is Material Design Lite?

Material Design is a set of design principles created by Google. Material Design Lite (MDL) is an easy way to add Material Design aesthetics to your site.

1. Get an MDL template

Head on over to the Material Design Lite site and find a template you like. I picked the Portfolio template, as it describes exactly what I wanted to do with my Github Page: a simple portfolio site to showcase my resume, projects, and even a blog. Download the template you like.

2. Create Jekyll default layout

Jekyll uses layouts to wrap posts. The default layout is used for all pages of the site. Any part of your site that should be included in all pages should go to your default page (We'll talk about includes later). My default page includes my header, navigation, and footer.

Outside some minor changes, most of my default page looks very similar to the MDL template's index.html page. The most important part though, was changing the main section of the document. The main section of mine looks like this:

1
2
3
4
5
6
7
<main class="mdl-layout__content">
    <div class="mdl-grid portfolio-max-width">
        
        {{ content }}
        
    </div>
</main>

You see that I replaced most of it with {{ content }}. This means that the content from all the pages will go into this area. The default layout must be stored as default.html in the _layouts directory.

3. Create page layouts

Page layouts can be thought of as simplified versions of views or components in other frameworks. They are reusable templates for the different parts of your site. They must also go as html files into the _layouts directory along with your default.html. MDL cards are incredibly useful for page layouts. I currently only have two layouts, the default and the large card layout.

Here's a peek of how my large card layout looks:

1
2
3
4
5
6
7
8
9
10
11
12
13
---
layout: default
---
<div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp">
    <div class="mdl-card__title">
        <div class="card-title"> {{ page.card_title }} </div>
    </div>
    <div class="mdl-grid mdl-card__supporting-text portfolio-copy">
        
        {{ content }}
        
    </div>
</div>

Lines 1-3 are the YAML front matter. This tells Jekyll what layout to place the file in. Jekyll can contain nested layouts, as in this instance, I am putting the large card layout inside the default. Line 4 is the large card container, while lines 5 to 10 display the page's title and content in the appropriate areas. The code I used here is based on the MDL template I chose earlier. I used the code section for the large card on the About page.

4. Use page layouts for various pages

The three pages I have using my large card layout are rather similar. They only contain a title and a little content. Below is the code for my coming soon page:

1
2
3
4
5
6
7
8
9
---
layout: large_card
card_title: "Coming Soon"
---
<div class="mdl-cell mdl-card__supporting-text padding-top">
    <p>
        This page is coming soon! Check back next time!
    </p>
</div>

On my YAML matter, I simply indicate the layout the page will use and its title. Then below it, I write everything I'd like to appear on the card (which is rather short in this case).

I've discussed how I use categories for the experiences, projects, and blog page, here. But for now, this is all that's needed for a basic blog.

And there you have it! Material Design Lite on Jekyll static pages.