Customising Shoehorn using 'Grunt' screen casts. *Essential

Customising Shoehorn using 'Grunt' screen casts. *Essential

by Gareth J Barnard -
Number of replies: 6
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hello Moodlers,

Due to how Shoehorn is created, there are lots of style attribute values that are kept in the LESS files that are used in the creation of the CSS for the theme.  They need a tool called 'Grunt' to create them.  Even with the instructions in the 'Gruntfile.js', installing and running 'Grunt' can be difficult, so as I have been meaning to do so and been asked on: https://moodle.org/mod/forum/discuss.php?d=278604.  I have created two screen casts, one 'Production' and one 'Development'.  The latter follows the former, so watch 'Production' first.

Production:


Development:


I hope that you will now know enough to really start customising your installation of Shoehorn.

Edit: I've changed the title as just remembered that Essential uses the same 'grunt' technology, so you apply what you see in the screen casts to Essential as well.  If you'd like an Essential specific screen cast, then please do say but it did take me several hours to make, edit, cut and produce so give me time smile.

Cheers,

Gareth

Average of ratings: Useful (3)
In reply to Gareth J Barnard

Re: Customising Shoehorn using 'Grunt' screen casts.

by KirK Chapman -

Many thanks Gareth!

You continue to show your dedication to Moodlers with innovative concepts and outstanding support! I assure others that I did extensive customizations of Shoehorn without the use of Grunt. While I am encouraged by the screen-casts I hope that they will not be misunderstood as requisite viewing before customizing Shoehorn. In any event, these screen-casts will help promote learning - and ain't that what the Moodle community is about.

Thanks again for the time you put in!


Peace




Average of ratings: -
In reply to KirK Chapman

Re: Customising Shoehorn using 'Grunt' screen casts.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thank you Kirk smile

Indeed the screen casts are meant to expand on what you can already do in Shoehorn.

Average of ratings: -
In reply to Gareth J Barnard

Re: Customising Shoehorn using 'Grunt' screen casts.

by Hartmut Scherer -

Hi Gareth,

Thank you for both screen casts. They are excellent and very detailed. I watched both of them. This will be a totally different approach to customizing themes. 

So far I was happy when I found the right code, added this code in Custom CSS and kept a copy or comments in a text program. Others may have done the same. In other words they already have a customized Shoehorn theme and didn't bother about 'Grunt.' You helped me using 'Grunt' and I can now use the map file, but I have not yet started changing code in LESS files of Shoehorn.

My understanding is that I will copy a line from my Custom CSS file, open Inspect Element and search for this code. Then the map file will tell me which line I have to change in a LESS file. Now I can delete the line in my Custom CSS. Then I go to the next line in my Custom CSS and do the same. In this process I may change more than one LESS file. After running 'compile' and if everything looks okay, I will have a smaller Custom CSS file with a faster page load. I appreciate this benefit considering that we are still using a shared server. 

What happens when there will be an updated release of Shoehorn? Currently I just copy and paste all the lines from my text program into Custom CSS of Shoehorn and check, if I need to change or add another line of CSS code. I have no clue how to "merge" any customized LESS files with the LESS files of an updated Shoehorn theme. 

When I share my thoughts here, this is only meant for clarification. I really appreciate your effort, Gareth, that you invest in this approach of customizing themes. It's just my lack of understanding when I ask questions. 

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Customising Shoehorn using 'Grunt' screen casts.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Hartmut,

Thank you smile.

With managing updates (interesting question) there are two solutions beyond the 'Custom CSS' box:

1. Have a separate CSS file and add a line to the config.php file as you would in any theme.

2. Have a separate LESS file and add an 'import' line in this file: https://github.com/gjb2048/moodle-theme_shoehorn/blob/MOODLE_27/less/moodleallshoehorn.less then recompile.

Ok, with both you still need to make subtle changes, but in both cases they are one liners.  I recommend that instead of changing the existing LESS files that you add your 'overrides' at the end.  This will even work for changing variables in the variables-shoehorn.less file as re-declaring the same variable with a different value will mean the new value is used everywhere.  This is because the lessc compiler is 'two-pass' so it remembers the last value set for a variable in the first pass and then apples it to the assigned attribute in the second.

The 'developer' version is just really helpful for understanding what custom LESS to write in the first place.

The advantage with LESS over CSS is what you can do with it - http://lesscss.org/features/ - to make the 'source' smaller, maintainable, adaptable (change once use many) and use functions and mixins.  The outputted CSS will still be the same as the browser only understands CSS.

To be fair I'm not sure about smaller CSS file.  That would depend on comparing the minification of the lessc compiler with the core compressor.  So even the CSS in the 'Custom CSS' box I think is minified with TDM off.

Cheers,

Gareth


Average of ratings: -
In reply to Gareth J Barnard

Re: Customising Shoehorn using 'Grunt' screen casts.

by Hartmut Scherer -

Hi Gareth,

Yesterday evening I took the time to use 'Grunt' and applied it to the stable release of Shoehorn. Whether it has to do with using the LESS files or with your new release of Shoehorn, I don't know, but our site is loading significantly faster. Thank you for walking me through the process of using 'Grunt'. As you have invested so many hours to produce two screen casts, it may be helpful to add the links to YouTube within the 'grunt' file.

Here is what I did. In my test site I installed the latest release of Shoehorn without adding any CSS in Custom CSS (Site administration > Appearance> Themes > Shoehorn > General).

I copied and pasted the Custom CSS from my text program into C:\Bitnami_M2.8dev\apps\moodle\htdocs\theme\shoehorn\less\shoehorn-custom and added all lines at the end of that LESS file.

Next, I ran 'grunt compile --build=p --urlprefix=/moodle' and purged the cache of my test site. Result: All changes were visible.

I deleted the old Shoehorn folder at our production site and uploaded the complete new Shoehorn folder, which took very long, as I hadn't noticed the increase of files and folders by using 'Grunt.' Then, I excluded the folder 'node_modules' (~ 23MB) and finished uploading Shoehorn. Looks great now and works fine.

One question: In the future when I do further customization of Shoehorn and run 'Grunt' which folder should I copy from my test site to the production site? The 'less' folder and/or the 'styles' folder?

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Customising Shoehorn using 'Grunt' screen casts.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Hartmut,

Interesting smile.

Cool idea about YouTube links in the grunt file.

Ah ha, you don't need to copy the 'node_modules' folder, that's only used by npm and grunt for making the CSS from the LESS.

When updating production version, you only need to copy the 'css' files in the 'style' folder, any map files will not be referenced anyway.  The 'less' folder is just there to make the CSS in the first place.  Think of it as the 'template' that makes the product.

Cheers,

Gareth

Average of ratings: -