CSS to add to Jekyll Minima, not completely override it

Question

I am building my first Jekyll site and am happy with the Minima theme as a starting point. I would however like to customise some aspects of the site, such as colours, adding elements to layouts etc.

However, whenever I create a stylesheet or layout in the following structure(currently empty files, as I want to add supplementary elements ad hoc)

/
 --assets
   --main.css
 --_layouts
   --default.html

It overrides the default layout and style, leaving a styleless website.

How can one supplement the Jekyll Minima theme, without overwriting the default?

Answer 1

By virtue of the way gem-based Jekyll themes work, any file at source-directory take precedence over the same file if it exists in the theme-gem. i.e., <source>/_sass/minima.scss will override the entire <theme-gem>/_sass/minima.scss by its mere presence.

To make simple changes like changing the color, alter the variable values in _sass/minima.scss

To alter layout styles, copy both _sass/minima.scss and _sass/minima/_layout.scss to source, and then alter the _layout partial

---

Or if you simply want to add to Minima, do the following:

• First create a new sass sheet (say, custom.scss) in your _sass directory.
• Then into your assets/dir, copy the main.scss from Minima

• Then add a new import rule to the copied main.scss:

  @import "minima";
  @import "custom";
  

• Now whatever styles you add to custom.css should be picked up by Jekyll