Best process for theme frontend development

Best process for theme frontend development

by Yann Soliveres -
Number of replies: 7

Hi there,

I'm new to developing Moodle Themes, I've been fullstack developer in PHP (wordpress) and JS (node).
I need some advice on how to work properly in respect of moodle dev process.

For a start I want to modify css in a child theme of Boost. I do manage to do it by activating Theme designer mode and changing scss in my child theme. But I have to hit reload every time to see the result, it's a painfully slow process..

I'm used to use gulp + browsersync to speed this process but I can't make it work here because of Moodle css processing.

Can you guys share your development process please ? 

Thanks a lot,

Yann

--------

MacOS

Moodle 3.8.1

Average of ratings: -
In reply to Yann Soliveres

Re: Best process for theme frontend development

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
TDM off, change the CSS etc, Purge all caches -> Developer_tools#Purge_all_caches, test. There is also a cli version -> Administration_via_command_line#Purge_caches.
Average of ratings: -
In reply to Gareth J Barnard

Re: Best process for theme frontend development

by Yann Soliveres -

Thanks Gareth,

I tried it, but with TDM I can't see my changes when editing either my theme SCSS or Boost's or even moodle.css. Any idea what I did wrong ?

Plus, purging caches takes a while, if I change two lines of CSS I'll still need to wait 20sec to see the result ? 

Average of ratings: -
In reply to Yann Soliveres

Re: Best process for theme frontend development

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

With TDM off and after purging all caches (PAC) then you don't see the changes, then I don't know what you did wrong as not enough information to tell.

To speed up PAC, only have the core themes and your child theme installed with no other plugins.  Failing that, it could be anything to do with your MAMP and hardware specification / configuration.  What Mac do you have?  I run Windows and Linux virtually though, so can only guess at the performance of a given Apple model.

Average of ratings: -
In reply to Gareth J Barnard

Re: Best process for theme frontend development

by Yann Soliveres -
I got a refurbished 2012 MacBook Pro (Mojave, 8 Go 1600 MHz DDR3 RAM , 2,9 GHz Intel Core i7 ) , which has been fine so far for any type of project (wordpress and nodeJS mainly).

I'm running a basic version of Mamp with PHP 7.1.0 and MySQL 5.6.34 .

To be more specific, here is exactly what I did :
- Starting MAMP
- Login as admin
- turning TDM off and saving settings
- In the child theme ( which is just a theme based on Boost I downloaded from https://trema.tech/ and is active ) I added a simple display:none!important on the body ( which I can see when TDM is on ). Saved it.
- PAC
- Hit refresh
- Nothing happens
-Then tried modifying moodle.css in Boost
- Nothing happens
Average of ratings: -
In reply to Yann Soliveres

Re: Best process for theme frontend development

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Ok, I don't really know what you've done wrong exactly. 'moodle.css' is the fallback file, you need to change the SCSS files.

Have you read: docs.moodle.org/dev/Themes ?

Also given your existing experience, then there is "MoodleBites Theme Design Level 2" which I facilitate and is run by HRDZ, a Moodle partner.  A course has just started.
Average of ratings: -
In reply to Yann Soliveres

Re: Best process for theme frontend development

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
Wasn't php7.1 the version that had some speed issues? I may be wrong, but I seem to remember being advised to jump straight from 7.0 to 7.2.
7.1 is also now out of support, so probably should be updated anyway.

(OK, just noting that 7.1 issue *may* have simply been someone not wanting to upgrade twice 7.0-7.1 and then later 7.1-7.2! lol)
Average of ratings: -
In reply to Yann Soliveres

Re: Best process for theme frontend development

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

I keep a separate browser tab open with the Purge Caches admin page on it, and just purge theme caches not all of them. Takes a couple of seconds, but not usually 20, and is certainly more convenient than TDM which refreshes the cache every single time the page loads, whether you've changed anything or not.

However, I also just use browser tools (eg. Chrome Inspect Element) to tinker with the css and see changes instantly. That way I'm only usually transferring css I know has the desired effect into the code itself, whether the scss file of the child theme, or a customSCSS setting.

That also means I can make a series of changes before saving the code and purging caches, if I want to.

Richard

Average of ratings: -