bourbon files are missing

[Prochitaem]

/assets/scss/bourbon-custom.scss the following files are missing: @import '../vendor/bourbon/app/assets/stylesheets/settings/prefixer.scss'; @import '../vendor/bourbon/app/assets/stylesheets/css3/transition.scss'; @import "../vendor/bourbon/app/assets/stylesheets/addons/prefixer.scss";

They are not present also in a fresh bourbon install. May be it`s time for some refactoring ;)

[kelyvin]

Thanks for reporting this issue! I'll take a look at this over the weekend and try to get a fix in for the short term.

As for the refactor, you are 100% correct. I've been meaning to refactor and do an overhaul of the entire codebase when I had some free time (i.e. integrate ES6, get off bower, fix the build-tooling, etc). Been working on other projects so time has been a little harder to find recently :( I'll see what I can do.

[Prochitaem]

So @kelyvin, is there any way to compile modified theme? (Basically, I changed only fonts).

[kelyvin]

Hi @Prochitaem,

Huge apologies for the super late reply, finally have a moment to take a look at this.

I actually did a fresh checkout and didn't run into any compile/build issues. Which version of nodejs are you running?

Unfortunately, this project is fairly old and still uses bower, which is responsible for bringing in the bourbon assets. Can you also make sure you have bower installed globally and try running bower install? It should auto run when you run npm install, but run it separately just in case.

For context, on my machine I am running on the following:

node v8.9.4 bower v1.8.2 npm v5.6.0

[Prochitaem]

Hi @kelyvin My config is: node v6.13.1 bower v1.8.2 npm 3.10.10

I was able to compile it by manually providing required files - but that broke the resulting css and js. Had to roll back to the original files.

[kelyvin]

@Prochitaem when you say "broke the resulting css and js", what do you mean by that?

I'm guessing you're trying to run the compiled assets as a theme against Ghost, what kind of errors are you seeing on your browser tools? Also what version of Ghost are you running?

[Prochitaem]

Uncaught TypeError: w.FontFaceObserver is not a constructor at caffeine-theme.js?v=0db24c18ba:8 at caffeine-theme.js?v=0db24c18ba:8 It shows site header part but no posts are visible :(

[kelyvin]

These are with your font changes? or without?

[Prochitaem]

This is with them: _fonts.scss:

// Optimize css delivery
// @import url(https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto+Slab:300,400);
// @import '../../vendor/font-awesome/scss/font-awesome';
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);
@import url(https://fonts.googleapis.com/css?family=Kurale|Roboto);

and in _variables.scss

$sans-font             : 'Kurale', sans-serif;
$sans-font-fallback    : Geneva, sans-serif;
$serif-font            : 'Roboto', Georgia, serif;

Those are the only changes I`ve made. I am a little bit suspicious about font-awesome part.

[kelyvin]

Okay perfect thanks for sending me that! I definitely know the issue.

You are correct, the issue lies within the following line: @import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

If you go to that CSS file directly, you'll see that it's trying to load the web fonts directly through lines of code that look like this: url(../webfonts/fa-solid-900.woff). However, the problem with this is that the browser tries to resolve this path and expects the font to exist within this path (which it doesn't).

So how can you fix this? There are many ways to do this. Probably the most straightforward way is to do the following: you can download Font Awesome 5 directly from their website, add the font faces to the fonts directory (which you'll see that I did the same for font awesome 4), and follow the instructions detailed here: https://fontawesome.com/how-to-use/web-fonts-with-css#less-and-sass. That should resolve your font face issue. Can you give that a try?

[Prochitaem]

No luck :( What I did:

• changed _font.scss to -- @import '../../vendor/font-awesome/scss/fontawesome.scss'; -- @import '../../vendor/font-awesome/scss/fa-solid.scss'; (prior to that, copied sccs directory from fa distribution to that location)
• added $fa-font-path: "../webfonts"; to the theme _variables.scss
• added fonts to the webfonts dir

[kelyvin]

Closing due to my own inactivity and because I want to redo the entire build system so that this is no longer an issue. See https://github.com/kelyvin/caffeine-theme/issues/62