Proper way to subtheme?

Hi,
To use this starterkit proceed exactly as in any other subtheme.
Non-Drupal components work based on relative address of the subtheme's path

Thank you. For anyone else who may stumble upon this, I just renamed all files from bootstrap_sass* to [my_theme_name]*, and did a string find-and-replace for bootstrap_sass to [mytheme_name] and everything is working fine.

Hi,
The subtheme should inherit the files from the base theme @vood002.

I am trying to set the subtheme, and if this can help, here are the links I am using:
- official documentation on the creation of sub-theme: https://www.drupal.org/docs/8/theming-drupal-8/creating-a-drupal-8-sub-t...
- creation of the gulpfile.js, which is documented here: https://www.drupal.org/docs/8/themes/bootstrap-4-sass-barrio-starter-kit...

Is there any other links I should use?

Thanks,
Luc

Hi,
I think I understand a bit more now.
The main theme Barrio has a subtheme folder, which can be used to create a subtheme. This is standard, the subtheme will inherit the main base theme.
However in the case of the Barrio SASS Starter Kit, it sounds like we need to copy all the files and rename them, as mentioned by @vood002. The downside is that it's difficult to get future updates from Barrio SASS Starter Kit in the future, but I was not able to find another solution.
Thanks,
Luc

Hello,
Not completely true.
You can subtheme over a subtheme.The subtheme inherits from base theme or subtheme.
Just be aware that you should never use directly a theme or subtheme without renaming, because updates will wipe out customization.
Creating a subtheme from a subthem

Hi all,

Using the Barrio 8.x-4.17 theme with the renamed Barrio Starter Kit 8.x-1.6 sub-theme (let us say mythemename), there is no risk that the sub-theme customisations will be wiped out at the next update.

The only thing which bothers me is that the installation procedure generates the sub-theme in the ../themes/contrib folder, which now has the following structure:

../themes/contrib
- bootstrap_barrio
- bootstrap_sass
- mythemename

It would be nice if the Barrio Starter Kit renamed sub-theme could be installed in ../themes/custom folder, for instance.

All the best,

Gilles

Edit: just added a feature request about the file structure of the theme and sub-theme

Hi,
I'm a little confused here. I installed Barrio and the sass starter and got following structure:

../themes/contrib
- bootstrap_barrio
- bootstrap_sass

next step is "From the subtheme folder: do some npm stuff"

What is the subtheme folder? Is it the folder named subtheme inside bootstrap_barrio? Or am I supposed to copy bootstrap_sass and rename it to mytheme? Or do I need to make a subtheme from bootstrap_sass?

I would greatly appreciate, if someone could clarify the installation procedure.
I'm kinda new to setting up projects and frontend :/

Thx in advance

@hatuhay
So instead of renaming the module (bootstrap_sass > mytheme), which I suppose would break the composer requirement and status of the module itself in Drupal, it would be really great to have a prepared subtheme inside the bootstrap_sass in order to avoid manually creating a new sub-theme from scratch.

Currently if wanting to stay uptodate with bootstrap_sass one would need to keep the original theme name.
If one would want to do custom naming it's necessary to create a sub-theme of the sub-theme from scratch. :-/

So, I similarly had issues with the subthemeing process, and I have to say the published docs are very unclear. Bootstrap_barrio has a subtheme folder, Bootstrap_sass does not. The install instructions for the non-sass theme tell you to copy the subtheme folder, the starter kit instructions are very vague in telling you to jump into the subtheme and run the gulp commands. Unofficial documentation suggests just modifying the subtheme altogether!

The problem I have had is that any time I copied the folder and tried to rename the theme files, it would break my D8 install until I removed the subtheme. No visible errors, just broken.

A slightly clearer explanation of how to get started would be really useful for any noobs like myself.

@hatuhay your hard work is appreciated but the documentation is unclear. What are the full steps to create an actual subtheme with this project? Are we expected to make a copy of the 'bootstrap_sass' folder after composer installs it? Should I be creating a custom subtheme folder from scratch? Should I create the Barrio custom subtheme as per Barrio instructions and then change the 'parent' theme in that custom subtheme's *.info.yml file to point to bootstrap_sass subtheme instead?

I really think that adding a few simple steps to the online documentation will make it much easier for users to adopt this subtheme and start using it.

Thanks.

@ccshannon: the documentation section will be updated, hopefully in the coming week, with the agreement of the theme maintainer who will read its content before publication (by the way, you are more than welcome to contribute).

@gillesbailleux thanks, the magic of the community please go ahead, no need to any previous agreement.

@Igsu

• Download Barrio and the SASS Starter Kit on the /themes folder - JUST DOWNLOAD
• Clone the SASS Starter Kit into the /themes/custom folder, changing the name of the new sub-theme to suit your needs. THIS IS LIKE ANY OTHER SUBTHEME
• Install packages using npm install. THIS WILL LOAD DEPENDENCIES FROM PACKAGE.JASON
• Compile SASS using gulp command gulp. THIS WILL PROCESS THE GULPFILE.JS

More details on what happens on the last two steps can be found on the documentation or researching on both commands.
Hopefully the community will help to fill the gaps.

Clone the SASS Starter Kit into the /themes/custom folder, changing the name of the new sub-theme to suit your needs. THIS IS LIKE ANY OTHER SUBTHEME

Thanks, @hatuhay, that's what was missing, for me. Looking forward to using it! :)

Also, to @gillesbailluex's point, let me know if you need any assistance writing the docs for this. I'm happy to contribute to the README.

Cheers.

@ccshannon: more than delighted to read you want to help for the documentation. There are also other users of the Barrio theme and Barrio SASS subtheme who have contacted me to join efforts for the documentation and @hatuhay, the project maintainer, supports the initiative. As always, it is a matter of time.

So, it would be nice that we organise ourselves in a structured manner on the two nodes dedicated to the documentation of the two projects:

• Barrio theme: https://www.drupal.org/node/2977592/discuss
• Barrio SASS subtheme: https://www.drupal.org/node/2945475/discuss

A comment from jurgenhaas in #3030844: Script for creating a bootstrap sub-theme got me thinking recently.

The idea ... is to not only create a new subtheme in a project but also to keep that subtheme up-to-date.

Currently we recommend either

1. Download bootstrap_sass (this module) and adjust it directly
2. Copy bootstrap_sass (this module) and change the theme-name to a custom one (issue #3030844 added a script for this)

In both cases, every time this module has a bugfix, the custom theme will not be updated. And that is not good.

In my opinion the following approach is better:

- bootstrap_sass (this module) stays in /themes/contrib and will be updated by composer/drush.
- The subtheme inherits all sass-files from bootstrap_sass, like it inherits all sass files from bootstrap.
- The subtheme doesn't override sass-files unless needed. Overriding is a responsibility of the frontend-themer.

The subtheme then will have 2 types of sass-files:

1. Sass files that override or define variables used in other sass-files (variables like typography, colors)
2. Sass files that adds additional styling (a custom component for example frontpage-hero.scss)

The subtheme's main sass file is style.scss
It should then look like this:

// First include overrides, variables from this custom theme that will be used by the sass-files from bootstrap and bootstrap_sass/barrio
// You must copy-paste this from for example /node_modules/bootstrap/scss/_variables.scss
@import "variables";

// Now load bootstrap, then bootstrap_sass's replacements of barrio's stylesheet
@import "../node_modules/bootstrap/scss/bootstrap";
@import "../../contrib/bootstrap_sass/scss/components";

// At last add additional styling from this custom theme
@import "custom";

The subtheme's scss folder will look like this:

scss/
  style.scss
    variables/
      variables.scss
      navbar.scss <-- in this example it a complete override of bootstrap's version
    custom/
      frontpage-hero.scss <-- this file does not exists in either bootstrap or barrio

What do you think about this approach?

@ndf +1 that sounds like the only logical way of customising this theme.

@hatuhay Can you please re-open this issue so it is visible to everyone?

@ndf Wouldn't it be:

@import "../../contrib/bootstrap_sass/scss/barrio";

instead of:

@import "../../contrib/bootstrap_sass/scss/components";

Please correct me if i'm missing something.