ssg  

Preface

Goal: Apply SASS in Eleventy using Bulma Material Design.

Source Code

This article use tutor-05 theme. We will create it step by step.

Not a SASS Tutorial

This article is not a SASS tutorial, but rather than providing example of applying custom SASS theme, into eleventy layout. We are going to use this custom SASS theme, for the rest of this article series.

Layout Preview for Tutor 05

Nunjucks: Layout Preview for Tutor 05


1: About Bulma MD Stylesheet

Use SASS in Eleventy.

This is basically just changing theme, from using simple CSS theme to customizable SASS theme. We have to start the previous chapter all over again, with extra difficulties.

The Choice

There is always a place to enhance this site looks. SASS is not the only CSS preprocessor. There are many options for this such as: Stylus, Less, or even PostCSS via PreCSS. Bulma is using SASS, so SASS is our choice by now.

Create necessary sass, as you need.
However, still Bulma can save you,
from writing a lot of CSS code.

Prerequiste

Use Bulma MD in Eleventy.

This article rely on Bulma MD in article below. You should give a fast reading of this Bulma MD article first, before continue reading this article.

Reference


2: Prepare: Assets

With the right configuration, Eleventy can manage SASS. This tutorial using conventinal way, running SASS from CLI.

Directory Tree: CSS

First thing to do is to create sass directory, in the same level with assets.

❯ tree -d sass assets -L 1
sass
├── css
└── vendors
assets
├── css
├── images
└── js

5 directories

Note that you can use other directory as well. This is just an example.

11ty: Tree: CSS

Bulma MD has a bunch of SASS. If you take a look closer of the sass/css, it contains a few separated stylesheet, prepared design to build a blog site.

❯ tree sass/css
sass/css
├── bulma
│   ├── _derived-variables.sass
│   └── _initial-variables.sass
├── bulma.sass
├── fontawesome.scss
├── helper
│   └── _spacing.sass
├── helper.scss
├── main
│   ├── _decoration.sass
│   ├── _layout-content.sass
│   ├── _layout-page.sass
│   └── _list.sass
├── main.sass
├── materialize
│   ├── _color-classes.scss
│   ├── _color-variables.scss
│   └── _shadow.scss
└── post
    └── _content.sass

5 directories, 15 files

So expect, to face new custom class in example ahead.

11ty: Tree: SASS

.

.eleventy.js

Eleventy can manage SASS. But I skip this method choose the other way.

Running SASS manually in CLI

I’m using dart-sass and set the ~/.zshrc or ~/.bashrc.

alias dart-sass='/media/Works/bin/dart-sass/sass'

Then run the dart-sass.

$ dart-sass --watch -I sass sass/css:assets/css
Compiled sass/css/fontawesome.scss to assets/css/fontawesome.css.
Compiled sass/css/helper.scss to assets/css/helper.css.
Compiled sass/css/bulma.sass to assets/css/bulma.css.
Compiled sass/css/main.sass to assets/css/main.css.
Sass is watching for changes. Press Ctrl-C to stop.

11ty: Dart SASS

This will compile into assets/css directory.

❯ tree assets/css
assets/css
├── bulma.css
├── bulma.css.map
├── fontawesome.css
├── fontawesome.css.map
├── helper.css
├── helper.css.map
├── main.css
└── main.css.map

0 directories, 8 files

11ty: Tree: CSS


3: Layout: Refactoring Base

As we did with previous articles. We should start over again from layout.

Layout: Nunjucks Base

No difference here. Just leave this base as it was.

Layout: Nunjucks Head

There is no changes here either.

Partial: Nunjucks Header

It is a long header, so I crop the code. You can get the complete code in the repository.

  <nav role="navigation" aria-label="main navigation"
       class="navbar is-fixed-top is-white maxwidth
              white z-depth-3 hoverable">
    <div class="navbar-brand">
      <a class="navbar-item"
         href="{{ "/" | url }}">
        <img src="{{ "/assets/images/logo-gear.png" | url }}" 
           alt="Home" />
      </a>
      <a class="navbar-item"
         href="{{ "/pages/" | url }}">
        Blog
      </a>

      <a role="button" ...>
        ...
      </a>
    </div>

    <div id="navbarBulma" class="navbar-menu">
      ...
    </div>
  </nav>

This is an example of header using vue . You can switch to jquery or plain with example in repository.

Partial: Nunjucks Scripts

I choose plain native vanilla.

  <!-- Additional javaScript here -->

And move the javascript to the head.

  <script src="{{ "/assets/js/bulma-burger-plain.js" | url }}"></script>

Like I said, we utilize new custom class.

  <footer class="site-footer">
    <div class="navbar is-fixed-bottom maxwidth
          is-white has-text-centered is-vcentered
          white z-depth-3 hoverable">
      <div class="column">
        &copy; {{ metadata.now | date("Y") }}
      </div>
    </div>
  </footer>

4: Page Content: Home

Consider use home layout` to begin, and all other layout later.

Layout: Nunjucks Home

This is a single column design.

There are a lot of changes in here. Now the layout is using main-wrapper, and inside main-wrapper has blog-header and blog-body.

{% extends "layouts/base.njk" %}

{% block main %}
  <main role="main" 
        class="column is-full">

    <section class="main-wrapper blue-grey">
      <div class="blog white z-depth-3 hoverable">

        <section class="blog-header has-text-centered
                        blue-grey lighten-5">
          <div class="main_title"> 
            <h4 class="title is-4"
                itemprop="name headline">
              {{ renderData.title or title or metadata.title }}</h4>
          </div>
        </section>

        <article class="blog-body has-text-centered"
                 itemprop="articleBody">
          {{ content | safe }}
          <div class="notification blue darken-3 is-dark">
            This is a home kind layout,
            to show landing page.
          </div>
        </article>

      </div>
    </section>

  </main>
{% endblock %}

There will be double columns design in other layout. Both single column and double columns design, extends the same base parent.

Page Content: Index (Home)

The only differences is that I add custom color class for each box.

---
layout    : home
eleventyExcludeFromCollections: true
---

  <div class="box blue lighten-1">
    To have, to hold, to love,
    cherish, honor, and protect?</div>
  
  <div class="box blue lighten-3">
    To shield from terrors known and unknown?
    To lie, to deceive?</div>

  <div class="box blue lighten-5">
    To live a double life,
    to fail to prevent her abduction,
    erase her identity, 
    force her into hiding,
    take away all she has known.</div>

Render: Browser

Open in your favorite browser. You should see, a blue colored homepage, by now.

11ty: Page Content: Home

Notice that this is a single column page. All other page is double columns, and again, deserve its own explanation.


What is Next ?

Consider continue reading [ Eleventy - Bulma - SASS Layout ]. We are going to explore complex template inheritance in Nunjucks.

Thank you for reading.