How do we update child themes of Boost to work with the changes to Boost and going with upgrading Bootstrap? As a child theme I kinda thought it would just inherit the new stuff.
Perhaps, just perhaps because M3.5 has not been released and BS 4 has only just been updated from v4 alpha to version 4.0.0 that it might not quite be ready yet? Or look at https://getbootstrap.com/docs/4.0/migration/.
Thank you. That is what I was thinking/really hoping! I kinda thought any additional styling I might have used might need to be updated but I didn't think it wouldn't load any CSS for the Fordson theme.
If the SCSS has changed, then perhaps it won't pass through the server side compiler to become CSS, then that will be a breakage. Best to test on M3.5 and look in the PHP log if it fails.
That's what I started to do. These are what I am getting but I am now wondering if Fordson is even inheriting Boost scss at this point.
Error while compiling SCSS: Undefined variable $font-size-base: line: 1 in \n* line 1480 of /lib/outputlib.php: call to debugging()\n* line 1093 of /lib/outputlib.php: call to theme_config->get_css_content_from_scss()\n* line 222 of /theme/styles.php: call to theme_config->get_css_content()\n* line 184 of /theme/styles.php: call to theme_styles_generate_and_store()\n, referer: http://localhost/moodle35/admin/purgecaches.php
And I don't really recall using anything special or even including anything other than my own custom styles. It feels like Fordson isn't inheriting anything at this point.
I've looked at other Boost child themes and it doesn't appear to be having an issue of no styling being loaded.
Granted the syling is a bit off but it loads.
Chris, there's some quite significant changes in how Bootstrap itself works.
I'm just starting to look at Waxed and Handlebar this evening, so will let you know what I find out.
But I think Gareth may be right - I believe there are/were plans to ensure the new Boost would be backward compatible with the child themes from 3.4, but not sure how far that has got.
Personally I'm hoping to make Waxed and Handlebar properly compatible with BS4 stable, rather than a compatibility layer - I think it will be worth the extra effort going forward
I would be forever grateful if you can point me to where we need to go to make it compatible.
I'm a bit stumped at the moment.
I've got Waxed 'working' (not really, but enough to pick up the scss styles - it needs quite bit of change) by adding the compatibility scss file, and putting the Boost default.scss in my presets folder and using that.
But Fordson calls the entire moodle.scss from Boost (I call all the files separately), so that should deal with the compatibility layer anyway, and if I simply add the boost default.scss file into your presets and select that, its still not working (yet...)
OK, got it:
Well - phase 1 that gets your scss files picked up, but there's a bit of work to rewrite the presets needed I suspect.
1st, I've started with your github version, so revert any changes you'd made.
2. Change your scss/moodle.scss file to simply be
// Fordson styles
3. copy the new boost/scss/preset/default.scss into your Fordson scss/presets folder
4. Edit your new default.scss file so that the middle sections point to the boost originals
// Import FontAwesome.
// Import All of Bootstrap
// Import Core moodle CSS
Recreate your presets around that format
Yes, if I load up the default.scss preset from Boost my site at least loads styles. It looks like some of Fordson features but trying to make them fit with Boost style.
It looks horrible but the page loads.
Actually the moodle.scss doesn't appear to be needed in our child themes at all
Add the @import "styles" to the end of the preset (I'm sure there's a better way to do that, but I'm going quick and dirty and getting it running first and I'll worry about best ways tomorrow.
However, when I add that in Fordson it breaks again, so I suspect there may be something in the Fordson styles.scss which is not BS4Stable
Ive got Waxed pulling in the scss that way, but now I need to look back at the classes and templates first, get those right and then I'll look at the presets - and the new BS4 versions of all the bootswatches.
I bet if you remove the h1,h2,h3,etc and the body scss from top of the styles.scss it might work. That was dealing with font family and it just might not be the most solid implementation.
I'm going to try your suggestions tomorrow.
I'm not going to lie, this really stinks. I don't even know where to begin because whenever I start adding in some of the Fordson stuff to the default scss file it breaks.
I haven't even looked at the template files but I am sure there are changes there too.
What a difference an hour makes.
I think I got my bearings and I actually love most of the styling of the new buttons etc. Bas you did an outstanding job.
I'm starting to make some progress. I think initially I just need to get the site looking halfway right and I am starting with looking over the template files to make sure those are good. Then I'll tackle the unique features of Fordson to make sure those are looking good.
Thats the approach I took last night too, Chris.
Get the basics loading scss using the default.scss file, then go away and look at the templates - I've just been back on it for the last half hour in work (with Waxed first as that was what Handlebar and my work theme were built from)
Now I'm going to go away and rebuild all the BS4 bootswatches to replace the BS3 ones that were in Waxed and (hopefully) are a resource for the community.
That will be about it for Waxed as I deliberately kept that very simple. Then I'll look at some of the extras I added to Handlebar, like the additional block regions
By then I'll have a good base on which to redevelop my work theme - hopefully by the end of next week (although plenty of other commitments to work around too!!! lol)
PS. I've also tweaked my theme_waxed_get_main_scss_content to get the theme's styles.scss sheet rather than adding that to the end of each preset (making the presets more portable between themes - I hope).
Well, I want to set up the presets the way Bas has done it for Boost
But yes, I had the same thought - why not bring the variables as one file, the swatch itself as a second and sandwich calling the others from boost in between
Its a compromise between what would work for developers like you and me and what makes a simple single file drop in preset for others I guess. And it does seem to be that the order of the files is important so they are correctly processed, so they need to be between the variables and swatch sections of the preset.
I am using this as an opportunity to clean up all the presets. This is a good thing.
I've already started in on it and I am loving the results. I think initially Fordson for M3.5 will ship with just the default preset with our core look and feel of the theme so that we can make sure we cover all the various scenarios that everyone encounters.
I need to wrap my head around how I can utilize the style.scss file to contain all the unique Fordson styles and variables for the elements we introduced with the theme and then how the presets can change and enhance the look.
Ultimately, this is a great opportunity to clean some things up and make a better theme.
I've just completed creating the BS4 bootswatches as Moodle presets - I'll put them up on github this evening when I get home.
One thing I noted, the issue we all had when we first were creating presets (the webfont import) is still broken - I'll look up the tracker issue when I get chance. Commenting those lines out of the swatches allows them to work though, and I know I added them as a separate css file in Waxed originally.
Edit: I've added them to github, but only got about halfway through testing, so will complete that and sort the fonts thing out for Waxed when I'm home tonight.
That sounds great. I'll have to check them out.
After a full day working on it I feel much better about the changes to Boost and how it affects child themes.
In fact, this major change is giving me pause to re-evaluate some of the things we were trying to do with Fordson and look at how we can clean things up a bit.
Unfortunately, I don't think we will have the same style presets. But part of looking things over will allow me to redo the color choosers to utilize the standard bootstrap variables to make changes to various elements of bootstrap.
This will be an attempt to be more compatible with Boost presets so that Fordson can utilize a growing bank of styles as well as utilize the color choosers to tweak the main standard colors of bootstrap.
The first preset i think will be called "Boost Enhanced" where we don't apply any styling beyond what is needed for the new elements and functionality that Fordson provides such as the navigation icons or the teacher dashboard. Otherwise, this new preset will look and feel like Boost core.
I'm excited about the changes to Boost. Everything from the nav drawer to buttons looks amazing!
Yep - my first release of Waxed for 3.5 is simply getting those presets working. I haven't looked at changes to the settings and colour pickers yet. Maybe tomorrow's job now
But then, for me the next step is Handlebar as thats where I started adding a bit more functionality - Waxed was (and will be) kept fairly simple.
Then the work theme, then the next community one I've been promising myself time to create for the last 6 months! lol.
OK... I can get it to load stylesheets.
But... I had to replace this "function theme_fordson_get_main_scss_content" in my scss_lib.php file to use the Boost default.scss file instead of the Fordson presets.
I suspect it is the way they are loading this stuff in the default Boost preset:
// Import FontAwesome.
// Import All of Bootstrap
// Import Core moodle CSS
How do I get these to load properly with Fordson so I can go about fixing the styling of the theme?
Taking a guess at this I would say, that since time is running out, Boost will be ahead with a possible new theme in the making to act as a child theme for theme designers to latch onto, may be with alternative options to use old Boost theme's scss.
That will hot things up a bit in this cold spell in the UK!
Like Richard mentioned the includes for the Boost sass files has changed a bit, instead of including one sass file you now need to add 3 imports to your preset. Variables need to go above these imports and any when using any mixins or other funky sass stuff add it after the last import.
// Import FontAwesome. @import "fontawesome"; // Import All of Bootstrap @import "bootstrap"; // Import Core moodle CSS @import "moodle";For more info on what's changed have a look at the /theme/boost/upgrade.txt file. We have added some backward compatibility with classes deprecated from BS4 alpha to BS4Stable, but when upgrading a child theme please look if you are using sass variables found in theme/boost/boostrap/_variables.sass.
And don't forget: BS4Stable has some awesome new ways of working with grids and great utilities. So make sure you have a look at: https://getbootstrap.com/docs/4.0/getting-started/introduction/
Good look updating your theme!
Thanks for that Bas! Very useful!
I managed to get Waxed uploading all the SCSS succesfully last night (quite quickly actually when I just looked at the Boost presets and realised the differences as you have pointed out) and am now working on recreating some of my classes/functions as new templates etc. and slight changes in the way Boost codes some of the classes - And then plan on working to bring the new BS4 bootswatches across as presets as I did originally
Then using some of the new grids and utilities, and the way BS4 now has flex by default in its grids, as part of Handlebar and my workplace theme too.
Its all looking really good - thank you for your hard work on this!
In reply to "And then plan on working to bring the new BS4 bootswatches across as presets as I did originally"
The Bootswatches on https://bootswatch.com should compile without too many changes. The script theme/boost/cli/import-bootswatches.php has been updated too and should be okay.
The only issue with bootswatches is the url() variable for fonts. With that replaced it should work fine.
I have uploaded my generated presets here: https://github.com/bmbrands/Moodle-presets. Not all presets work well, especially the ones with the dark backgrounds. I do really like the Minty preset and the Sketch preset if fun!
Thanks! I'll be checking them out.
For Fordson, I plan on offering a new "Boost Enhanced" Preset with no scss changes to the core Boost style other that what is required for some of the Fordson features. It looks exactly like Boost core except you can add in marketing tiles, slideshows, custom login page, etc that Fordson offers.
Bas, Thanks for your work on Boost. I really love the new styling and overall consistency now in regards to layout and especially buttons!
rather than a boost-enhanced preset with the required bits you need, you may want to consider adding a 'pre-preset.scss' as well as the 'styles.scss' and calling it from the get_main_scss_content function. That way any standard preset can still be dropped in without having to make it specfically for Fordson.
That's the approach I've just taken with Handlebar, where I was using some variables that are present in the default.scss, but not in all the bootswatches - Add them to a 'pre-preset' file, then allow the main preset to overwrite them where they exist, but knowing that, if they dont exist in the main preset, it wont entirely break my theme
I took your suggestion and included the Fordson variables and basic styling from scss_lib.php and now we can upload and use the default Bootswatches and specifically I used the ones from Bas.
This should open up a bit of freedom for those wanting to change up the look of Fordson beyond what the color choosers would allow.
Thank you guys so much for all the help and tips to get things working!
I still have a bunch to do but this will set up a new for people being able to download and use Bootswatches with Fordson. I really think that beyond just the default presets I will design just for Fordson that end users will love that things will be compatible with core presets.