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
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.
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.
.
.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.
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
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>
Partial: Nunjucks Footer
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">
© {{ 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.
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.