Preface
Goal: Revamp the looks, of current Eleventy layout, with Bulma Stylesheet.
Source Code
This article use tutor-04 theme. We will create it step by step.
Not a CSS Tutorial
This article is not a CSS tutorial,
but rather than applying simple CSS theme,
into Eleventy
layout.
This CSS theme is a based on a SASS theme,
that we are going to discuss later.
Layout Preview for Tutor 04
1: About Bulma Stylesheet
Use Stylesheet in Eleventy.
In previous articles, we have already refactor pages into a few layouts. All done without stylesheet, so you have understanding of eleventy layout, without the burden of learning stylesheet.
The Choice
Now it is a good time to give this site a good looks.
There are many options for this such as:
Bootstrap
, Materialize CSS
, Semantic UI
, Bulma
,
or even better custom tailor made without CSS Frameworks,
or Tailwind CSS
.
Prerequiste
Use Bulma Stylesheet in Eleventy.
My choice comes to Bulma, because I have already make a few articles about Bulma, with a lot of details explanation:
This article rely on Bulma stylesheet on the article above. You should give a fast reading of above Bulma article first, before continue reading this article.
Responsive Design
Our base layout is based on responsive design. This below is general preview of, what responsive page that we want to achieve.
Different website might have different preview. Source image is available in inkscape SVG format, so you can modify, and make your own preview quickly.
This responsive design has already discussed in Bulma article series.
Related Article: CSS
I wrote about Bulma Navigation Bar that used in this article. Step by step article, about building Navigation Bar. You can read here:
Reference
2: Prepare: Assets
Directory Tree: Assets
The main.css
assets is the only custom stylesheet.
$ tree assets
assets
├── css
│ ├── bulma.css
│ └── main.css
├── favicon.ico
├── images
│ ├── light-grey-terrazzo.png
│ └── logo-gear.png
└── js
├── bulma-burger-jquery.js
├── bulma-burger-plain.js
├── bulma-burger-vue.js
├── jquery-slim.min.js
└── vue.min.js
3 directories, 10 files
Additionaly, I add three different javascript choices.
jquery
, vue
, and plain native vanilla
.
For simplicity reason, and also neutrality reason,
for the rest of the chapter, I use plain
javascript.
.eleventy.js
The assets management is set in configuration below.
module.exports = function(eleventyConfig) {
// Directory Management
eleventyConfig.addPassthroughCopy("assets");
...
// Return your Config object
return {
...
// Directory Management
passthroughFileCopy: true,
dir: {
...
output: "dist",
...
}
};
};
You can read in 11ty
official documentation.
3: Layout: Refactoring Base
We should start over again from the very fundamental layout.
Layout: Nunjucks Base
<!DOCTYPE html>
<html lang="en">
<head>
{% include "site/head.njk" %}
</head>
<body>
<!-- header -->
{% include "site/header.njk" %}
{% block general %}
<!-- main -->
<div class="columns is-8 layout-base maxwidth">
{% block main %}
{{ content | safe }}
{% endblock %}
{% block aside %}{% endblock %}
</div>
{% endblock %}
<!-- footer -->
{% include "site/footer.njk" %}
{% include "site/scripts.njk" %}
</body>
</html>
We have two block
s here:
-
main
, -
aside
.
And four include
s:
-
head
, -
header
, -
footer
, -
script
(new).
Partial: Nunjucks Head
There is a few additional changes here. Now the header contain stylesheets and meta tag.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<!-- Let browser know website is optimized for mobile -->
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ renderData.title or title or metadata.title }}</title>
<!-- CSS Framework -->
<link type="text/css" rel="stylesheet"
href="{{ "/assets/css/bulma.css" | url }}">
<!-- Custom CSS -->
<link type="text/css" rel="stylesheet"
href="{{ "/assets/css/main.css" | url }}">
<link rel="shortcut icon" type="image/x-icon"
href="{{ "/assets/favicon.ico" | url }}"/>
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-dark maxwidth"
id="navbar-vue-app">
<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"
v-bind:class="{'is-active': isOpen}">
...
</div>
</nav>
This is an example of header using vue
.
You can switch to jquery
or plain
with example in repository.
Partial: Nunjucks Scripts
You can choose, which javascript to use:
- Vue
<!-- JavaScript at end of body for optimized loading -->
<script src="{{ "/assets/js/vue.min.js" | url }}"></script>
<script src="{{ "/assets/js/bulma-burger-vue.js" | url }}"></script>
- jQuery
<!-- JavaScript at end of body for optimized loading -->
<script src="{{ "/assets/js/jquery-slim.min.js" | url }}"></script>
<script src="{{ "/assets/js/bulma-burger-jquery.js" | url }}"></script>
- Plain Native Vanilla
<!-- JavaScript at end of body for optimized loading -->
<script src="{{ "/assets/js/bulma-burger-plain.js" | url }}"></script>
You can have the code here:
Layout: Nunjucks Footer
<footer class="site-footer">
<div class="navbar is-fixed-bottom maxwidth
is-dark has-text-centered is-vcentered">
<div class="column">
© {{ metadata.now | date("Y") }}
</div>
</div>
</footer>
Wait….!!
what is this metadata.now
?
Data: metadata.js
Most common data is, of course the site metadata, such as default site title and so on.
module.exports = {
"title": "Your mission. Good Luck!",
now: new Date()
};
I’ve got this good ide from webstoemp:
4: Page Content: Home
Consider use home
layout` to begin,
and all other layout later.
Layout: Nunjucks Home
This is a single column design.
Template inheritance in nunjucks
,
start with the word extends
.
{% extends "layouts/base.njk" %}
{% block main %}
<main role="main"
class="column is-full">
<article class="blog-post box">
<h2 class="title is-4"
>{{ renderData.title or title or metadata.title }}</h2>
{{ content | safe }}
<div class="notification is-info">
This is a home kind layout,
to show landing page.
</div>
</article>
{% 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
It is a little bit different with previous index.html
.
I utilize Bulma’s box
class.
---
layout : home
eleventyExcludeFromCollections: true
---
<div class="box">
To have, to hold, to love,
cherish, honor, and protect?</div>
<div class="box">
To shield from terrors known and unknown?
To lie, to deceive?</div>
<div class="box">
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 simple homepage, by now.
Well, I cut the content a little to make this screenshot below:
Notice that this is a single column Bulma page. The other page is double columns, and deserve a its own explanation.
What is Next ?
Consider continue reading [ Eleventy - Bulma - CSS Layout ]. We are going to explore simple template inheritance in Nunjucks.
Thank you for reading.