Grid layout with hugo

Joerg · December 26, 2017, 7:51am

I want to use a grid layout for my hugo pages. This are my first steps. I need
a little help.

Here my questions:

how can I insert the contents of _index.md into the grid?
specify the width (mdc-layout-grid__cell–span-x) and position on the site?

Please take a look on the screen shot.

styles.css

.page-grid {
  padding: 0;
}
.page-cell {
  background-color: #ffffff;
  border: 1px solid rgba(35, 31, 32, 0.26);
  border-radius: 6px;
  min-height: 200px;
  padding: 1em;
}

layout/index.html

{{ partial "header.html" . }}

    <div class="page-grid mdc-layout-grid">
      <div class="mdc-layout-grid__inner">
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
          {{ Content }}   ?????
        </div>
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
          Text 2
        </div>
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
          Text 3
        </div>
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
          Text 4
        </div>
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
          Text 5
        </div>
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
          Text 6
        </div>
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
          Text7 
        </div>
      </div>
    </div>

{{ partial "footer.html" . }}

/content/_index.md

title: “Home”
date: 2017-12-11T05:20:45+01:00
description: “Home”
categories: [“Home”]
tags: [“Home”]
author: [""]
toc: false
draft: false

First Box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis

Second Box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis

/* And so on */

Text 3

RickCogley · December 26, 2017, 8:20am

The main content in your _index.md can be accessed by { .Content } in your template. Then you could use some strings in front matter, to populate the “boxes”. Haven’t tried it, but, you should also be able to use the same technique to push a css class to the template. Specify in frontmatter, then access it.

Edit: let me ask, do you mean you want the boxes to have content from different markdown files / content pages, on the site?

RickCogley · December 26, 2017, 8:29am

In terms of putting info from specific pages in different boxes I do this on my https://rick.cogley.info/ site. The top “freshest” blurb is this:

github.com

RickCogley/RCC-Hugo2015/blob/master/layouts/index.html#L14


{{ partial "bodytop.html" . }}
{{ partial "headerbanner1.html" . }}
{{ partial "hometop2.html" . }}


<main class="m0 p4 bg-lightpaperfibers">
<section id="latest-post" class="p0 m0 center">
  <header class="mt3 mb1 py1 border-bottom border-darken-2">
    <h2 class="big-title text-shadow h2-responsive sans m0 rice-paper-dark">The Latest, <span class="rice-paper-light italic">& Freshest</span><svg class="rice-paper-light"><use xlink:href="/img/symbol-defs.svg#icon-feather2" /></svg></h2>
  </header>
  <div class="clearfix">
    {{ range first 1 .Site.Pages }}
    <div class="xs-hide sm-col sm-col-12 md-col-2 lg-col-3 px2">
      <svg class="latest-accent-svg-icon"><use xlink:href="/img/symbol-defs.svg#{{ .Params.postsvg }}" /></svg>
    </div>


    <div class="sm-col-right sm-col-12 md-col-10 lg-col-9 px2 align-top left-align">
    <h3 class="h2 h2-responsive m1">
      <a href="{{ .RelPermalink }}">{{ .Title }}</a>
    </h3>
    <p class="deco italic m1 large">{{ .Params.postsummary | markdownify }}</p>
    <div class="right p0 m0">

Then the following “still fresh” boxes are this:

github.com

RickCogley/RCC-Hugo2015/blob/master/layouts/index.html#L50-L58


{{ range $index, $element := first 7 (where .Site.Pages "Section" "post") }}
{{ if (eq $index 1) }}
<h3 class="h3-responsive m1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
<p class="italic m1">{{ .Params.postsummary | markdownify }}</p>
<div class="right p0 m0">
  <p><a href="{{ .RelPermalink }}" class="deco"><svg><use xlink:href="/img/symbol-defs.svg#icon-pointer-right" /></svg></a></p>
</div>
<p class="deco italic m1">By <a href="{{ .Site.Author.biourl }}">{{ .Site.Author.name }}</a>, <br class="sm-hide md-hide lg-hide">on {{ .Date.Format "2-Jan-2006" }}</p>
{{ end }}

I know, I know, it’s ironic that the content is not at all fresh, lol.

Joerg · December 26, 2017, 8:29am

Thank you for your answer. I have not planned the fill the boxes with content from other markdown files. But that is not excluded

RickCogley · December 26, 2017, 8:30am

Sure. You can fill from other posts, or you could put text in variables in frontmatter of the relevant _index.md file, and pull those in.

Joerg · December 26, 2017, 8:39am

Thank you for your repo. I will try to understand what you have coded.
Here is my gitlab repo https://gitlab.com/joklein/hugo

RickCogley · December 26, 2017, 8:42am

If it is not a dynamic page, you can also hard code it the old-fashioned way and just write html in the index.html template. That works too.

Joerg · December 26, 2017, 9:46am

I have some questions.

In the front mater sould be
a) the grid layout
b) the content from the # Welcome in the first box in the first position
with a Grid of 8 and for example the content from ## Important Notice in
the third box with a grid of 4?
c) the content from a different markdown files in Box 5 with a Grid of 6?

It is possible to get some lines of code? I am not sure if I understand the Idea
from Rick Cogley.

Here is the /content_index.md

---
title: "Home"
date: 2017-12-11T05:20:45+01:00
description: "Home"
categories: ["Home"]
tags: ["Home"]
author: [""]
toc: false
draft: false
---

# Welcome

----

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla 


## Important Notice

----

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla

RickCogley · December 26, 2017, 11:56pm

The part from # Welcome and down in your _index.md is fed to { .Content } in your template, so you can put that where you want. This bit:

https://gitlab.com/joklein/hugo/blob/master/content/_index.md#L12-48

You can also add data into your frontmatter, and refer to it. For instance:

 postsummary: 'Autumn in Japan is lovely for many reasons, crisp cool weather, excellent food, a year winding down, but most of all new words and buzzwords!'

I’m accessing it like this in my templates:

 {{ .Params.postsummary | markdownify }}

You could pick somewhere to show your {{ .Content }} and just put that in your template where you want it to appear, then for other “boxes” use frontmatter for that, like so:

---
title: "Home"
date: 2017-12-11T05:20:45+01:00
description: "Home"
categories: ["Home"]
tags: ["Home"]
author: [""]
toc: false
draft: false
box1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
box2: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
box3: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
---

Then pull them into your template. Or, use the technique I used in my site to pull an index from a range, getting the latest post or latest N posts in specific boxes in your grid.

Regarding css, just use the same concept to put the classes you need in your front matter (for instance).

---
title: "Home"
date: 2017-12-11T05:20:45+01:00
description: "Home"
categories: ["Home"]
tags: ["Home"]
author: [""]
toc: false
draft: false
box1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
box1css: 'onestyle'
box2: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
box2css: 'twostyle'
...
---

Completely untested but, then it’s just a matter of doing something like:

 <div class:"{{ .Params.box1css }}">{{ .Params.box1 | markdownify }}</div>

Read ‘page variables’ from here: https://gohugo.io/variables/

Joerg · December 28, 2017, 6:48am

Here my result of the idea from Rick. I am not sure if all okay.
For a line break I have to use <br />
for a line a have to use <hr> and not ---

If that the only solution to fill a box?

/layouts/index.html

<div class="page-grid mdc-layout-grid"> 
      <div class="mdc-layout-grid__inner"> 
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-8"> 
          {{ .Params.box1 | markdownify }} 
        </div>
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"> 
          {{ .Params.box2 | markdownify }}
        </div> 
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"> 
          {{ .Params.box3 | markdownify }}
        </div> 
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"> 
          {{ .Params.box4 | markdownify }}
        </div>
        <div class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"> 
          {{ .Params.box5 | markdownify }}
        </div> 
      </div> 
    </div>

/content/_index.md

box5: "

### Headline Lorem ipsum dolor sit amet, consectetuer

<hr>

**Lorem ipsum dolor sit amet, consectetuer**
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu"

RickCogley · December 28, 2017, 6:57am

Well, it’s one way. You could pull the header tags out of the frontmatter and put it in the template for instance. All the stuff under the frontmatter is pushed to {{ .Content }} so, you can decide to use that as the complex bit, if you can’t get the frontmatter pulling (with formatting) to work reliably.

jonathanulco · December 29, 2017, 7:24pm

My 2cts, maybe you should use a shortcode for this

/themes/name-theme/layouts/shorcodes/divmd.html

<div class="{{ with .Get "class"}}{{.}}{{end}}">
  {{ .Inner }}
</div>

and then call the shortcode exemple
/content/post.md

{{% divmd class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-8" %}}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu
{{% /divmd %}
{{% divmd class="page-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-8" %}}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu
{{% /divmd %}

Another point of attention with
and layouts responsive, words may pass to line in an unsightly way.

And today we can do without using grid-layout from framework like bootstrap, and instead use the property css grid and save a considerable weight to the css.

So we remain in the philosophy of hugo and jamstack by keeping in focus the webperf and the ux for the users.

Joerg · January 2, 2018, 10:55am

Hello Jonathan,

thank you for your help. I have a question, You wrote that I don’t use grid-layout from framework like bootstrap, and instead use the property css grid and save a considerable weight to the css. Okay I will try this. I like Google’s Material Design. For the Grid I use grid css and for all the other the Material Design?

With best regards

Joerg

jonathanulco · January 4, 2018, 4:25pm

exactly,
but it is better to be familiar with sass (scss) and take component by component

Topic		Replies	Views
How to use same layout for index.md - sub/index.md - sub/sub/index.md support	2	287	September 30, 2020
Cant get to grips with Hugo - Help needed support	3	172	February 10, 2024
Elements inside article content with different style support	1	239	January 18, 2021
Ignoring the _index.md file support	3	308	April 3, 2023
How does hugo relate a .md file to a html layout file? support	3	1598	June 6, 2017

Grid layout with hugo

/content/_index.md

title: “Home” date: 2017-12-11T05:20:45+01:00 description: “Home” categories: [“Home”] tags: [“Home”] author: [""] toc: false draft: false

First Box

Second Box

Text 3

Related Topics

title: “Home”
date: 2017-12-11T05:20:45+01:00
description: “Home”
categories: [“Home”]
tags: [“Home”]
author: [""]
toc: false
draft: false