RockFrontend 🔥🚀 The Powerful Toolbox for ProcessWire Frontend Development

[Stefanowitsch]

@bernhard does the postCSS feature still work as intended? 

After updating RockFrontend and installing RockDevTools all my rfGrow settings are written directly to the generated styles.css like this:

font-size: rfGrow(18pxrem, 20pxrem);

 

[protro]

How do we fix the breaking changes? The documentation is unclear:

I have installed RockDevTools
added $config->rockdevtools = true; to config.php
switched styles() to stylesTag() in _main.php.

I am getting WireExceptions, and the Rockfrontend documentation is out of date https://www.baumrock.com/en/processwire/modules/rockfrontend/docs/asset-tools/

[bernhard]

1 minute ago, protro said:

How do we fix the breaking changes?

At the moment I'd recommend simply not to upgrade and use the new RockFrontend + RockDevTools just for new projects.

[protro]

And if we have already upgraded ?
Is it enough to manually add v 4.10 back into the /modules folder ?

[bernhard]

Yes that should be all you need to do.

[bernhard]

On 2/3/2025 at 11:48 AM, Stefanowitsch said:

@bernhard does the postCSS feature still work as intended? 

After updating RockFrontend and installing RockDevTools all my rfGrow settings are written directly to the generated styles.css like this:

font-size: rfGrow(18pxrem, 20pxrem);

@Stefanowitsch I'm proud to announce that this is now also successfully ported to rockdevtools 😎

Note that the syntax changed to grow() and shrink() as it is not any more a RockFrontend feature and AI told me it's safe to use these wordings as they are not used in css/less/sass

https://www.baumrock.com/en/processwire/modules/rockdevtools/docs/rockcss/

[cbc-design]

Hi @bernhard,

I get this error on old projects in Firefox (see screenshot).

Now it also appears also in a new project with RockDevTools - do you have an idea how to solve it?

Thank you, Christian.

 

[bernhard]

4 hours ago, cbc-design said:

I get this error on old projects in Firefox (see screenshot).

Does that mean you do not get this error in other browsers? So it's FireFox only?

[cbc-design]

Sorry, I had forgotten: the error appears in all browsers with which I can test. There is no error on the first call, but the liveload still doesn't work. The error then appears when the page is reloaded (attached is the screenshot from Edge).

[spoetnik]

Thanks for the great ecosystem of tools you have build

Today i tried to setup a new clean site using the ``site-rockfrontend`` profile. Right out of the box less compiling, and live reloading doesn't work.

I have read the documentation, and watched your Youtube video's, but all didn't help. Finally I came here, and read that the livereload has moved to RockDevTools. So the setting in the site config should be ``$config->rockdevtools = true;`` and not ``$config->livereload = 1;``

I think to documentation, and the site-profile are behind at the moment.

[bernhard]

1 hour ago, spoetnik said:

Thanks for the great ecosystem of tools you have build

Thx 🙂 Glad if it is helpful!

1 hour ago, spoetnik said:

Today i tried to setup a new clean site using the ``site-rockfrontend`` profile. Right out of the box less compiling, and live reloading doesn't work.

I have read the documentation, and watched your Youtube video's, but all didn't help. Finally I came here, and read that the livereload has moved to RockDevTools. So the setting in the site config should be ``$config->rockdevtools = true;`` and not ``$config->livereload = 1;``

I think to documentation, and the site-profile are behind at the moment.

Yeah that's possible. Unfortunately I had to change the way how I manage assets in my frontend. Thx for the report! I'll try to fix those issues asap.

[bernhard]

On 2/25/2025 at 6:14 PM, cbc-design said:

Now it also appears also in a new project with RockDevTools - do you have an idea how to solve it?

Thank you, Christian.

Well... the pragmatic, most efficient and probably best solution would be to use DDEV. Other than that it might be that LiveReload breaks in subfolder installations. I have to check that. But still I can't recommend DDEV enough for PW development.

[bernhard]

Hey @spoetnik I just pushed an update to the rockfrontend site profile. Can you confirm things are now working and showing infos as expected?

[spoetnik]

Is started a new ddev project, copied the site profile from https://github.com/baumrock/site-rockfrontend/tree/main/site/assets/backups/export-profile/site-rockfrontend
but it still doesn't work out of the box.......

[bernhard]

1 hour ago, spoetnik said:

but it still doesn't work out of the box.......

It worked for me. It would be nice to provide more information for me. What did you do, what did you expect, what was the actual behaviour? Or if you know what needs to be changed to make it work out of the box please provide that information.

[Stefanowitsch]

@bernhard I have some trouble getting the new RockFrontEnd Toolbar to work properly.

Per default, when outputting the toolbar at the beginning of the body like this:

<body class="<?= $page->template->name; ?>">
	<?= $rockfrontend->toolbar() ?>
    ...
    ...

The toolbar gets rendered but is overlapped by my <header> which has position 'fixed'. This is because the toolbar has no position declarations at all:

So I understand that you need to tweak the toolbar markup to apply style classes to make it work for the specific project.

Like mentioned in the documentation I added this code to my _init.php:

// Customize RockFrontend Toolbar
$toolbar = '';
if ($user->isLoggedin()) {
    $toolbar = rockfrontend()->toolbar();
    $dom = $toolbar->dom();
    $dom->addClass('sticky foo bar');
    $toolbar = $dom->outerHtml();
}

I added the "sticky" class because It looks like the toolbar comes with a few default styles:

Then I render the output of the toolbar in my _main.php:

<?php
// _main.php
echo $toolbar;

What is strange: The "sticky" classname gets removed after rendering:

Another problem: The _main.php is appended. So the toolbar markup will be rendered at the very bottom of the DOM. Even if the "sticky" class will be applied it has no effect as the toolbar element still will reside at the very bottom of the page.

IMHO the toolbar should be positioned 'fixed' at top 0 with the highest z-index and at the top of the DOM per default.

 

[bernhard]

Hey @Stefanowitsch thx for the quick meeting. I updated the docs in the hope that others won't have the same problem of understanding how the toolbar works. Let me know if the docs are still missing anything.

[Stefanowitsch]

Hi @bernhard, I tried to use RockDevTools to compile SCSS files. 

The documentation does not mention it but by looking into the Assets Class I find that it should be possible (?)

So after installing the SCSS module I added this to my code:

$devtools->assets()
  ->scss()
  ->add($config->urls->templates . 'styles/scss/*.scss')
  ->save('/site/templates/styles/styles2.css');

Which does not work, i get this error message:

So my question is: Does RockDevTools support SCSS file compilation and how is it managed?

 

 

[bernhard]

Do you have v1.4.1 ? This issue has been fixed 2 days ago: https://github.com/baumrock/RockDevTools/issues/3

[Stefanowitsch]

15 minutes ago, bernhard said:

Do you have v1.4.1 ? This issue has been fixed 2 days ago: https://github.com/baumrock/RockDevTools/issues/3

No. I was still on v1.4.0

It is working now 🙂

@bernhard By the way: Will there be a config option for the RockPageBuilder module to create SCSS files instead of LESS files for new blocks?

[bernhard]

3 hours ago, Stefanowitsch said:

@bernhard By the way: Will there be a config option for the RockPageBuilder module to create SCSS files instead of LESS files for new blocks?

I'm not using SCSS so I din't think of that. But it would not be hard to do I guess. Why would that help? Isn't it just creating a new file? Or should it have some prepopulated code?

[Stefanowitsch]

24 minutes ago, bernhard said:

I'm not using SCSS so I din't think of that. But it would not be hard to do I guess. Why would that help? Isn't it just creating a new file? Or should it have some prepopulated code?

@bernhard I am thinking of switching back to SCSS from LESS as it seems more popular and many components (or libraries) come with default SCSS stylesheets instead of LESS.

What is really convenient about the RPB is that it auto-creates the LESS file with a prepopulated CSS class selector that matches the block class:

.rpb-myblock {

}

This is a big time saver IMHO. So when choosing SCSS instead of LESS in the RPB settings this would offer a nice alternative.

[bernhard]

Thx @Stefanowitsch I understand.

I've just added that to v6.4.0

Docs are on the module config screen:

[Tiberium]

Where can I send the cake?

(i more in love with SCSS)

[bernhard]

Fresh on the dev branch: Some improvements for the toolbar (added a toggle):