chrisrhymes / bulma-clean-theme

A clean and modern Jekyll theme based on Bulma

Hi there 👋

My name is Chris Rhymes and I'm a fullstack web developer, specialising in PHP and JavaScript, using Laravel, Vue, React and Next.js.

I also enjoy creating Jekyll themes, such as Bulma Clean Theme and Mere Blog Theme.

Latest Posts

• Using when with the Laravel Http Client
• New book announcement!
• Using prettier to format your Jekyll theme
• First impressions of React Native as a Web Developer
• Querying Laravel Eloquent's Many to Many relationships

bulma-clean-theme's Issues

Keep receiving a warning by mail for page building

The build is working but keep receiving a mail saying : "You are attempting to use a Jekyll theme, "bulma-clean-theme", which is not supported by GitHub Pages.". Should i change the "theme:" setting in _config.yml to "remote_theme:" ?

Navbar to use alpine.js

Refactor the navbar to use alpine.js instead of custom JavaScript.

Also update the read me to include notes about alpine.js being used in components going forward.

Default Code Language?

Hi!

Coming from this issue #86, you pointed out the great tip of using

```language

as a good way to do syntax highlighting. I have a blog that largely uses a certain language (it's like always writing about PowerShell). I have hundreds of old posts, is there a way to set a default language for syntax highlighting in my config.yml file?

In my imaginary usage, I'd set

syntaxLanguage : powershell

and not have to specify it for every snippet.

Thanks!

Incompatible with security update

building the Gemfile.lock with "bundle update" for the following Gemfile:

source 'https://rubygems.org'
gem "bulma-clean-theme",  '0.7.2'
gem 'github-pages', group: :jekyll_plugins
gem "kramdown", ">= 2.3.0"

yields

Bundler could not find compatible versions for gem "kramdown":
In Gemfile:
kramdown (>= 2.3.0)

bulma-clean-theme (= 0.7.2) was resolved to 0.7.2, which depends on
  kramdown (~> 1.17)

So removing the last Gemfile line (kramdown >=2.3.0) solves it and the page is beautiful.

Kramdown >=2.3.0 was my lazy way of fixing the bug CVE-2020-14001. Is the project compatible with solving this bug?

What is the best way to incorporate Bulma-extensions and change layout?

Hello,

I would like to use some of the bulma-extensions (bulma-carousel, bulma-calendar). I would also like to add images and rearrange the layout of the callouts (as shown in the attachments).

Is there a way to do this elegantly? I am concerned that if I override the theme as explained here, something might break when the Bulma Clean Theme updates.

Cheers,
Sherwin

Can I use URLs in callouts?

I recently tried to put a URL in a callout like this:

style: is-light
height: is-medium
items:
  - title: Example callout 1
    subtitle: Example subtitle 1
    icon: fa-github
    icon_brand: true
    description: >
      The example description text goes here and can be multiple lines.

      For example, such as this. 
    call_to_action_name: Call to action 1
    call_to_action_link: https://www.google.com

On the generated html file, however, the "call_to_action_link" is always used relative to the folder structure of the project. Is there a way to circumvent this?

I writed many posts but blog index not display posts

Pagination current background color doesn't update with primary color

The background color for the current page number in the blog index page (eg http://www.csrhymes.com/bulma-clean-theme/blog/) doesn't change with the rest of the site after changing the $primary color in app.scss. See screengrab below for an example.

This is not exactly a bug (even though the result looks odd), because it is a link and therefore correctly uses the $link color. The fix therefore is to add a new sass variable in app.scss to set the $link color:

---
---
$primary: #333333;
$link: #333333;
// Import Main CSS file from theme
@import "main";

I thought it might be worth adding a note about this under 'Colours and Styles' in the readme.

Hyperlinking Images in Image Gallery to Other Pages

Hey Chris!

I'm really enjoying using your bulma clean theme, and its powerful functionalities.
I recently added an image gallery to my personal website using the syntax you provided and it's looking good.

Was wondering, is there a way to add hyperlinks to the images in the image gallery so users can click on images and be brought to another page?

I've tried using markdown syntax by setting each link attribute under the images section in the gallery.yml file to something in the form of [![Alt text](/path/to/img.jpg)](http://example.net/), but this throws an error in the building of the site.

Dropdown feature not working in IE browsers

The dropdown feature doesn't work on Edge or IE11.

Update to Jekyll 4

From a fresh Jekyll install:

$ bundle
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "jekyll":
  In snapshot (Gemfile.lock):
    jekyll (= 4.0.0)

  In Gemfile:
    jekyll (~> 4.0.0)

    bulma-clean-theme was resolved to 0.6, which depends on
      jekyll (~> 3.8)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

Github Pages remote theme not working

Hi,

I've set up a project website via github pages, but the theme is not working. I'm using the option remote_theme: "chrisrhymes/bulma-clean-theme"

However, when I deploy it, there is no theme (or at least it's not displayed correctly)

Link to website

Here's my config.yml and
Gemfile

What am I doing wrong? Thank you for your help!

Liam Vereecken

Put codeblocks on the left

Is it possible to put the code on the left than centering it ?

Issue with width of code block when the code contains long lines

When adding a code block to a blog post with very long lines because the width of the div is set to 100%, it causes the content to go off the page.

Instead, the code block width should be the same as the other content on the page. The div already has overflow set to auto, so it will be horizontally scrollable, I believe.

ERROR `/favicon.png' not found.

This error shows up when serving the website with the command:
bundle exec jekyll serve
I think is because the favicon.png file is hardcoded here:

bulma-clean-theme/_includes/head.html

Line 6 in 42dcd22

<link rel="shortcut icon" type="image/png" href="{{ site.baseurl }}/favicon.png" />

If I download the favicon.png from your repo and put it in my project folder, then the error disappears. But what if I want to change the shortcut icon?

Theme is not compatible with Jekyll 4.0.0

Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "jekyll":
  In Gemfile:
    jekyll (~> 4.0.0)

    bulma-clean-theme was resolved to 0.6.4, which depends on
      jekyll (~> 3.8)

If you run bundle update with this theme on the latest version of jekyll, it fails.

Blog layout not surfacing post-card include

I just pulled in your theme to a brand new GitHub repository. I noticed that it came with four posts in the _posts folder (which surface if I turn the side bar on) but they do not seem to be registering on the blog page. This is what I see:

The code is all standard with your repository (I haven't changed anything) and looks to be correct so I am at a loss.

gh-pages fails to build

I followed your instructions in your repository and in _config.yml i added:

remote_theme: chrisrhymes/bulma-clean-theme

but when i pushed to github i receive this error and the webssite is not build see the picture.

What i'm doing wrong?
You can find the source code here: https://github.com/webarkit/webarkit.github.io
I will appreciate if you can help me with this issue. 🙂

customise font family

Hey there

Is there a way to customise the main font family, i.e. the $family-sans-serif bulma variable?

I've tried setting it (and importing the relevant style sheets to set up the web font) in app.scss, both before and after @import "main" but it doesn't seem to take effect. Is that because $family-sans-serif is one of only a couple of variables which is actually set in _main.scss (directly before importing the main bulma style sheet)?

Open links in new window

Dear Chris,

thank you for the fantastic theme!

We are looking for a way to open external links in a new window by default (i.e. target="_blank"). This relates especially to links in the callouts and the navigation bar (i.e. links set in the yml files), as html can be used in the md files. We use github-pages and a fork of the bulma-clean-theme as remote theme. We tried the jekyll-target-blank plugin in the _config.yml of both our website and the theme fork, which didn't work. Is there a way to achieve this using the theme?

We very much appreciate your work! Thanks!

iframes do not display properly in theme (dimensions)

I am trying to embed Youtube videos in a blog post ... please see snippet below. The dimensions of the embedded video that show up in the post are not what are specified in the code.

<iframe width="560" height="1200" src="https://www.youtube.com/embed/v5ASgX60Lg8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Tags for posts

Could click on a tag in a blog post link to a paginated list of posts with this tag?

Also the main page for the blog should probably contain a list of such tags to click.

Perhaps based on https://github.com/jekyll/jekyll-archives

[feature request] adding theme-color in the head section

I want to add the theme-color to the head section, so i customized the head-script.html with this line of code:

<meta name="theme-color" content="#157878">

But i think would be nice add this line in the head section by default adding a theme_color variable in the _config.yml:

// inside the head section!
<meta name="theme-color" content={{ site.theme_color }}>

// somewhere in _config.yml
theme_color: #157878

bulma-clean-theme defaults to version 0.3 when run locally with github-pages gem

I am facing a strange problem. I have been testing locally my site with bulma-clean-theme using this Gemfile:

source 'https://rubygems.org'
gem 'github-pages'
gem 'bulma-clean-theme'

Running bundle install resolves bulma-clean-theme to version 0.3. I am attaching the full Gemfile.lock here Gemfile.lock.txt. This file is from the Windows tests, but on Gentoo the file is basically the same, except it misses x64-mingw32 flavoring.

If I try to force the latest version of the theme in Gemfile:

source 'https://rubygems.org'
gem 'github-pages'
gem 'bulma-clean-theme', '0.5.6'

bundle update fails with some unresolved dependencies:

$ bundle update
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "jekyll":
  In Gemfile:
    bulma-clean-theme (= 0.5.6) was resolved to 0.5.6, which depends on
      jekyll (~> 3.8)

    github-pages was resolved to 4, which depends on
      jekyll (= 1.1.2)

Bundler could not find compatible versions for gem "rouge":
  In Gemfile:
    bulma-clean-theme (= 0.5.6) was resolved to 0.5.6, which depends on
      rouge (~> 3.3)

    github-pages was resolved to 198, which depends on
      rouge (= 2.2.1)

Now, I have tried this on Windows and on Gentoo with almost the same results (Windows version gives also an unresolved dependency on ruby on top). But all those versions seem so ancient that I suspect there is some bug in the dependency definition.

So at the moment, I am running the theme locally with 0.3 version, but when I set the theme as remote-theme in a GitHub repo (https://risa2000.github.io/testpages/) it generates a page, which seems to be using the newer version of the theme because the layout (e.g. the footer section) corresponds to the newer version found in 0.5.6.

Now I am not sure, how to test the theme locally, and how to find out, which version is used when GitHub pages are generated directly from the repo.

I am also not sure, if this is a problem with the theme or github-pages gem, but would like to figure it out, so I could use the same version of the theme locally as the one which GitHub uses (and which github-pages gem is actually supposed to ensure).

Any ideas?

tag release for remote_theme use

hello,

would you consider tagging a release of the theme on github (e.g., v0.9.2, according to the gemspec)? i'm currently using the theme as a remote_theme on github pages which works great, but having my site build off of your master branch (which is subject to change) instead of a static release seems unnecessarily volatile.

thanks for your consideration!

Typo in subscribe.html

Hello chrisrhymes, thank you so much for creating this theme. So far I've been loving it. I just noticed that there's a typo in _includes/subscribe.html where in line 4, the word subscribe is spelt incorrectly as Subscrbe with a missing i.

Local Jekyl build of bulma clean theme and then push to Github

Hi Chris,

I was hoping you could give me a few pointers please!
I'm creating a little website/blog to post about my electronic engineering projects and hacks, and want to use your theme, it looks perfect!

Rather than use the remote_theme within the config yaml file, I would like to be able to do local development and do local jekyll builds, and then push to github (pages) when I am ready for it.

Frustratingly, I cannot get my head around it, and I was wondering if you had any tips and tricks? Jekyll & Github pages is a new one to me, but certainly enjoy a challenge and learning.

Thanks very much,

James

Reflexion on my recent bulma-clean-theme adaptation

@chrisrhymes I have been hacking your theme lately for my two projects and thought I might give you some feedback on some points I changed or added. I am not creating a PR for that because I am not sure if it is really "pullable" in the current state, and if it is even possible to make it general enough so it is worth adding to the theme. Nevertheless here is what I did:

1. I have changed the _includes/header.html and removed site.title from the nav menu. I found it confusing to have two buttons (site.title and Home) pointing to the same URL i.e. root. Plus in one of my project, I have also an additional custom menu item (with a drop down menu) which also points to the root (https://risa2000.github.io/vrdocs/) so it became mega confusing.

Originally I thought about using site.title only (and Home when site.title was not defined), but it turned out to be confusing too. On the project given above it would give VR Docs and Docs buttons both pointing to the root, the former just doing "less". So I finally decided to keep just Home (and made it the prominent button in the layout). You can find the changed file (and others) in my project repo here (https://github.com/risa2000/vrdocs/tree/master/_includes).

2. I have changed the footer too, because I liked the one you put on your personal site, so I just modified it to include my license. What I also did though was deliberately changing the href to bulma-clean-theme which originally pointed to the Ruby Gem repository to point to the GitHub repo. I thought that if anyone find the style appealing, he would probably want to know more about the style and I thought it would be better answered by the GitHub repo info than by the Gem statistics.

3. I have "hacked" your _includes\menubar.html and added the TOC (of the current page) from @allejo (https://github.com/allejo/jekyll-toc) to the menubar nav pane. The TOC is created when both page.menubar and page.menubar_toc are set. You can see how it looks here (https://risa2000.github.io/vrdocs/docs/hmd_fov_calculation.html). There is a possibility to have also the site menubar above the TOC (if it is defined in YAML), but at the moment I am not using it as I do not need it.

I would say this one would be a good candidate for an addition, except that the TOC script offers several user configurable options, some of which could be hardcoded, but most should be left exposed to the user, and I do not know, if or how it could be done.

Change code blocks color

I would like to change code blocks for darker colors. Is it possible ? And also, put the code to the left of the block in the post layout.

Only local resources

To protect website visors best from tracking it would be beneficial if no resources would be loaded from third-party websites. Currently alpine.min.js is loaded from an external source. A strict interpretation of the EU's GDPR does no allow the transfer of personal information (such as the IP address) into a non-EU country without the user's consent. So I don't have a good feeling about it.

A simple solution would be a local copy of alpine.min.js in the assets/js/ directory. However, eventually that copy will be outdated. Ideally, an up-to-date copy would be created when the website is processed by Jekyll. I have just started using Jekyll, so I am not sure if that would be possible.

updating to bulma 7.5

Would it be possible to update the theme to bulimia 7.5 ?

Specify custom page for sidebar?

Hi!

I've been migrating my blog from WordPress to Jekyll and have fallen in love with this theme.

The only thing I'm missing now is how to control what the sidebar looks like. When I turn 'Show_sidebar' to true now, it looks to be using the index page again as its source, as shown in this screenshot.

I want to have the sidebar enabled on all pages on my blog so I have it specified in my config.yml file.

Is there a way I can specify which .md file to use for my sidebar? I'd ideally then just put a few chunks of markdown in it and be done.

Example Sidebar from WordPress

Thank you very much for this awesome theme!

Categories

Any easy way to add Categories to the theme? I see that tags are there but they are not clickable...

Icons not showing up properly

The icon is way too close to the title, making it look off.

This also shows up on the example page, so it is not a local issue.

Configurable footer and sidebars

Hey!
Great theme, just came across it and it seems super powerful. I would like to see if its possible to create a configurable footer based on the nav structure you have defined.
As an example, in menu.yml within _data:

items:

• name: Page With Sidebar
  link: /page-1/
  nav_footer: yes
• name: Page Without Sidebar
  link: /page-2/
  nav_footer: no

However, it would be nice to have flexbox configurable as well to include the nav links in a given box. But maybe that is asking too much....

Same for sidebars if possible (currently only latest blog posts are there)

I may be able to help add this but I would need to work with you to come up with a proper structure.

Reasoning: Would like to use this theme for a baseline for online marketing/ecommerce type sites. Would love to have integration with formspree or something similar for getting email signups etc , in the footer and possibly in a sidebar as well (configurable).

Any ideas?

Customize font style and footer

Hey!
This is a great and powerful theme! However, I have two problems when I use the theme:

1. I customize my own font-face in /assets/css/app.scss, and it works for font-family. However, no matter how I change the font-weight, the result could be the same. Here are my codes:

/* Web Fonts */
/* monda-regular - latin */
@font-face {
    font-family: 'Monda';
    font-style: normal;
    font-weight: 400;
    src: local('Monda Regular'), local('Monda-Regular'),
         url('/fonts/monda-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/monda-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* monda-700 - latin */
  @font-face {
    font-family: 'Monda';
    font-style: normal;
    font-weight: 700;
    src: local('Monda Bold'), local('Monda-Bold'),
         url('/fonts/monda-v7-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/monda-v7-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* julius-sans-one-regular - latin */
  @font-face {
    font-family: 'Julius Sans One';
    font-style: normal;
    font-weight: 400;
    src: local('Julius Sans One'), local('JuliusSansOne-Regular'),
         url('/fonts/julius-sans-one-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/julius-sans-one-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  body {
    font-family: 'Monda', Sans-Serif;
  }
  h1, h2, h3, h4, h5 {
    font-family: 'Julius Sans One', Sans-Serif;
  }

2. My homepage is very simple(less than one page of screen), and I want to make the footer at the end of screen, what is the best way to do that?

I am a css/bulma newbie, hope to get some advice, thank you!

How to use app.scss to modify a value?

Hi! I want to modify the padding of this class:

<div class="hero-body hero-darken">

I read the docs but don't understand where or how to overload it here within app.scss. I want to set

.hero.is-medium .hero-body padding to the following rem value for padding:

padding: 7rem 1.5rem;

Sensible {% highlight %} text alignment

The center alignment style on .content figure is not a sensible selector given that {% highlight ruby %} outputs figure for code highlighting. It outputs figure.highlight so there is a way to detect and avoid this situation with a more specific .content figure:not(.highlight) selector.

jekyll 4 compatibility

Thanks for your bulma theme. I did actually a test with jekyll 4.2.0 and it makes some troubles:

Bundler could not find compatible versions for gem "jekyll":
  In snapshot (Gemfile.lock):
    jekyll (= 4.2.0)

  In Gemfile:
    jekyll (~> 4.2.0)

    bulma-clean-theme was resolved to 0.10.4, which depends on
      jekyll (~> 3.9)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

Actually I don't know exactly if this could be a real problem or maybe only a version before...?

GitHub Pages not updating to the theme.

Hello!

I would like to use this great theme with GitHub pages, but I ran into a problem.

After downloading a zip and extracting it to a local folder, I uploaded the files to my own repository.

Then I added the line remote_theme: chrisrhymes/bulma-clean-theme to the config.yml.

This step however did not activate the theme on my GitHub Page, as you can see here:

I kindly request advice on this matter.

Leslie

Problem with Jekyll-version 4.0 x bulma-clean-theme-version 3.8

In snapshot (Gemfile.lock):
jekyll (= 4.0.0)

In Gemfile:
jekyll (~> 4.0.0) x64-mingw32

bulma-clean-theme x64-mingw32 was resolved to 0.6.5, which depends on
  jekyll (~> 3.8) x64-mingw32

Headings not showing up in "post" layout

For some reason, headings are not showing up in the "post" layout. "page" layout works fine. (See attached md snippet and screenshot)

https://gist.github.com/vgoel/d9dc3bfb1ef629a54fe2e1aea43e3b1f

change code variable does not change the code color?

Hi Chris,

Thanks for open-sourcing this great theme. I want to change the text color of XXX, and I found Bulma has a variable $code, but after I set it in the app.scss file/main.scss file, the color still does not change. I am wondering if you have encountered this issue before? Thanks a lot!

I18N

First of all, thank you very much for the theme. It is exactly what I was looking for.

I wonder if there is a way to make it better usable for non-English websites. There are a couple of hard-coded text e.g. "Latest Posts", "Next", "Previous". It would be possible to change these words directly in the files in the _includes folder. However, that would make updates difficult and require repeated work for every website.

My idea is to create YAML files containing the translated texts, en.yml for English, de.yml for German etc. The desired language would be chosen by setting a variable in _config.yml or a page's front matter. Does that sound like a good idea?

Regarding Jekyll version 4

I loved this theme and trying to test in local env and I was facing this error.

Bundler could not find compatible versions for gem "jekyll": In Gemfile: jekyll (~> 4.1.1)

bulma-clean-theme was resolved to 0.9.1, which depends on jekyll (~> 3.8)

When I have changed to version 3.8, it's working fine. Just curious to know when version 4 will be supported for this theme? or is there any way to use 4.1.1 by changing some configuration?

Latest Posts sidebar is including the footnotes

Hi,

I have noticed that when the latest posts are shown in the side bar, it is including the footnotes.

I've tried to trace this, and it seems to be coming from what is generated for {{ post.excerpt }} in post-card.html - I've not yet figured how to amend what is generated for {{ post.excerpt }}.

For now, I've added post-card.html to _includes and commented out <p>{{ post.excerpt }}</p>

Any input appreciated, cheers,
James

My share links only include the relative URL?

Hi! Once more, I love this theme!

I am wondering if I missed a configuration in setting up my links for sharing. When I click a share button on one of my posts, the window which opens looks like this:

The url in the title bar is

https://www.facebook.com/share.php?u=%2Fblog%2Fprogressive-automation-pt-ii-powershell-guis.html

It's like the share button is leaving off of base of the site url and only includes the relative link. Is there a config setting that controls this?

site	url when clicked
facebook	https://www.facebook.com/share.php?u=%2Fblog%2Fprogressive-automation-pt-ii-powershell-guis.html
reddit	https://reddit.com/submit?url=/blog/progressive-automation-pt-ii-powershell-guis.html
twitter	https://twitter.com/intent/tweet?text=/blog/progressive-automation-pt-ii-powershell-guis.html

Thank you!

Display posts from a category on blog layout

I would like to display some posts on a page that respond to a same subject like for exemple on my site (https://funeoz.github.io/techlovers/), the subject "Linux". Is is possible ?

Add images to posts with click to enlarge function

Hi Chris,

I am looking for a way to be able to add images of any dimension within a post, and have it display at a suitable size, and then be able to open the full size image by clicking on it (maybe even scroll through the images, though that would be a bonus).

I can't seem to be able to do that right now with markdown, and to do it with HTML requires some javascript, I think?

Do you have any suggestions or work-arounds for this please?

Thanks very much!

James

Sidebar appears on right even in mobile layout?

Hi!

I love this theme, it's so pretty :)

I noticed in testing the theme that the sidebar (./latest-posts.html') appears in a mobile layout. Is there a way for the sidebar to appear below the content when in a mobile layout?

My sidebar is setup like so:

https://github.com/1RedOne/1redone.github.io/blob/937b8829362d925c24ccbd62c739218ad20c9f6f/_layouts/default.html#L43-L45

 {% if site.posts and page.show_sidebar %}
                <div class="column is-4-desktop is-12-tablet">
                    {% include latest-posts.html %}
                </div>
 {% endif %}

Thank you!