Including Bootstrap source files in theme

[crftwrk]

The idea behind is that users can edit and compile their own Bootstrap on the fly directly in theme and child-themes without using Gulp, commands or other technical stuff. That would make the VSCode compiler template obsolete and would encourage users to edit Bootstrap by simple variables instead of using CSS overrides. This has no effect on existing theme installations because the folder structure is not changed. So it can be updated without hesitation.

Adding Source

Parent-theme

• New folder /bootstrap/scss/. Here is Bootstrap source.
• New file /css/lib/bootstrap.min.scss to edit variables. File fetches ../../bootstrap/scss/bootstrap.scss.

bootscore-main
|- css
  |- lib
    |- bootstrap.min.css
    |- bootstrap.min.scss (file with sample variables to edit, fetches bootstrap.scss)
|- bootstrap
  |- scss
    |- _files.scss
    |- bootstrap.scss

Child-themes

• Dequeues parents's bootstrap.min.css by default
• Enqueues own bootstrap.min.css by default
• New file bootstrap.min.scss to edit variables. File fetches ../../../bootscore-main/bootstrap/scss/bootstrap.scss from parent.

bootscore-child-main / bootscommerce-child-main
|- css
  |- lib
    |- bootstrap.min.css
    |- bootstrap.min.scss (file with sample variables to edit, fetches bootstrap.scss from parent-theme)

Compiler

WordPress Plugin

There are many Sass compiler plugins out there. Best result I got with this https://de.wordpress.org/plugins/happy-scss-compiler/. It compiles automatically when one of the scss files changed. Settings are simple. Using a plugin allows user to remove compiler plugin when finished development.

Including a compiler script in the theme

Instead of a WP plugin we can include a compiler script like this https://github.com/scssphp/scssphp in the theme. This will be more user friendly, but we have to maintain one more thing.

Update

When new Bootstrap version arrives, only folder /scss/ in parent must be replaced by new one. Then simply recompile, and Bootstrap is updated to latest version as well. In child-theme(s) the same, just recompile.

Conclusion

This is just a rough sketch to get started. Folder structure etc. can be made better. We could also include fontawesome.css and style.css directly in the bootstrap, then only one single CSS file is loaded at the end.

@justinkruit What do you think?

[justinkruit]

Personally I'm a huge fan of scss, as I use it at work daily. I've also wrote a complete compiler within our theme we use at work, making use of scssphp. The amount of code necessary isn't that big to write the compiler, but I don't have experience with it in a child theme.

And if we're going to do this, maybe it's an idea to do something with different scss files and the order they're loaded, so people can also use the mixins of Bootstrap? That way people can do stuff like @include media-breakpoint-down(md) {}.

I think it's a good idea to give users the option to use scss. But do we want to add this to the theme, or should we create a plugin for this, so the users can choose themselves and keep the theme lightweight? We could then load the scss files from the theme using the plugin, and then compile the css file. This way we can also make updates using this: https://github.com/YahnisElsts/plugin-update-checker

[crftwrk]

The update-checker plugin is already included in the bs-swiper and bs-grid plugin. It's planned to include it in theme as well if it's absolutely sure that there are no breaking changes anymore. I think with arriving Bootstrap 5.2 that could be done, because this version ships new color options in the navbar and delete some classes what will affect the header.php.

Think we should include Sass direct in the theme. I'm already on the point that I've included fontawesome and theme CSS files in compiled Bootstrap. So, only one single CSS file is loaded now. I think we can do the whole CSS as Sass and provide a _custom.scss file. If some users want to use CSS instead, they can use the (empty) style.css.

If you are familiar with a custom compiler, that would be great. For child themes https://picostrap.com. They did id in a nice way. Just install theme and child, do something in child/sass/_custom.scss. On save it recompile and reload page on the fly. I did not exactly understand how that works yet, but it seems to be a good way.

[justinkruit]

Picostrap has some quite interesting code. I don't think the live reloading is a smart idea, pressing f5 once should be fine. Otherwise it could create some strain on light webservers, because the code is constantly doing an ajax request to check if there are file changes.

Is there any way we can chat on for example Telegram? That way we could communicate a bit easier imo, and then later write a summary here for the public.

[crftwrk]

You have a message in your mailbox.

[justinkruit]

Compiler has been made, checking if files have been updated in order to recompile.
If you use the child theme, it will add the main theme as an import path, so the Bootstrap files aren't needed in the child theme.

Code can be seen here: bootScore | bootScore child

@crftwrk Can you check this out, if it's up to standards and if any errors happen on your side?

[crftwrk]

Enqueued main.css in child, checked and works fine! Thank you!

Let me do some more testing and maybe rename/reorder some files for smoother updating existing sites over the weekend. Think we are on a good way.

[justinkruit]

Ah yes, forgot the enqueue in the child, thanks!

In terms of renaming, I think that's indeed best if you do it, as you know the best file rearrangement for the project.

Btw, in _bscore_custom.scss I've referred to a documentation page you could add on the bootScore site, for some useful Bootstrap mixins.

[justinkruit]

Hahaha, too bad you starting using a second branch, that way my commits don't make it into the repo :-P

[crftwrk]

Sorry, my bad. Pushed it to scss branch. Can you have a look to it?

[justinkruit]

All looks good to me!

[crftwrk]

Summary of this changes are to make existing sites updates smooth as possible. Changes would not break child themes for now. _bscore_style.scss and _fontawesome.scss are empty files. We can move style.css and fontawesome.min.css to this files later in 5.2.0 when users updated their child-themes.

• Setted compiler output to compressed
• Moved all SCSS files to folder /css/scss/
• Compiled CSS files are in folder /css/lib/
• Renamed main.scss to bootstrap.min.scss
• Pushed _bscore_style.scss back to style.css

Theme is already live on bootscore.me and works fine.

@justinkruit if you agree with that, we can delete scss-2 branch?

[justinkruit]

Since scss-2 branch got merged in the scss branch, it is fine to be deleted.

Version 5.2.0 is gonna be quite the update, with reformatted code and a complete scss compiler 😁

[crftwrk]

@justinkruit Merged the scss-2 branch to scss in child-theme too. May you have a quick view if something messed up? And maybe there is a smarter way to enqueue files https://github.com/bootscore/bootscore-child/blob/scss/functions.php ?

I'm doing the docs page now. Is there a good example of mixins you'd like to see there?

[justinkruit]

Looks like the merge went fine. I've modified the enqueue, because you can just reuse the enqueue handle and it will automatically override.

Do we want to add the compiled css to the repo too? Or should we exclude them, as they get compiled anyway the first time that someone loads the theme (because the get_theme_mod is empty). I would personally go for excluding the compiled files.

Some of my personal favorite mixins are media-breakpoint-between(sm, lg), media-breakpoint-up(md), media-breakpoint-down(md) and media-breakpoint-only(xl) (not exclusively those variables, just examples) to make it easy to create responsive layouts. Another one I like to use is button-variant(#EF4444, ##EF4444) to create custom colored buttons. And one that I started to appreciate a lot recently is font-size(2rem), as that will create the responsive font sizes Bootstrap uses on headings. They also made mixins for all the paddings and margins, and you can create your own using rfs(100px, height).

[crftwrk]

Did the same with bootCommerce child and tested. Also new parent update with non-updated child. Seems to work fine.

We should deliver compiled css in parent theme on this release, because most of users doesn't enqueued their own bootstrap.min.css in child yet. If this file is not there, then there is something missing on their pages. Think in next release we can exclude. In child-themes I agree to exclude that.

Did the docs page and added media-breakpoint-down(md) and media-breakpoint-up(md) mixin example. Do you want to see there a button-variant(#EF4444, ##EF4444) example there too? If yes, can you make an example snippet?

Do now an update guide. Think we should merge and release tomorrow 👍. Agree?

[justinkruit]

Ah yeah, forgot about bootCommerce child. Got many repos to maintain :-P

But if they update the parent theme and not the child theme, it should still automatically compile a new css file when they load the theme, so I think it's still fine to not include the compiled version in the parent repo. I will at least remove the compiled version from the child theme this afternoon.

Sure, here is an example:

.btn-red {
  @include button-variant(#EF4444, #EF4444);
}

When point 2 is clear, about the compiled css, I think it's fine to merge and ready for release!

[crftwrk]

Did you tested updating parent with excluded file by an active old child without an enqueued Bootstrap? If yes, I agree.

[justinkruit]

The code always checks if a combined last modified of all the scss files (not counting Bootstrap 5 scss files), is more than the value stored in the get_theme_mod. Since that value hasn't been set yet for people who update, it will default to 0, making the combined scss files value higher, resulting in a recompile.

I did however make some fixes for when a child theme without scss files is running, because that made it that it couldn't find the scss file to compile. Now it checks if bootstrap.min.scss exists in the child theme, and if not, default back to only using the parent theme files (11e3ecb).

[justinkruit]

Committed to each branch to remove the compiled scss now, as it will always recompile.

[crftwrk]

Perfect.

[crftwrk]

There is just a tiny problem. It's not possible to store an empty folder at GitHub. If we exclude the compiled file, we must store something other in folder lib to prevent that this folder is removed. Maybe a readme.txt?

[justinkruit]

I can also check if the lib folder exists, and otherwise make it, using php? As a readme indicates there is some information, while it's just to make the folder keep existing.

[crftwrk]

I can also check if the lib folder exists, and otherwise make it, using php?

Sounds good!

[justinkruit]

Done!

[crftwrk]

Works like a charm👍

[crftwrk]

Closed by https://github.com/bootscore/bootscore/releases/tag/5.1.1.1