Working on CSS/Less in plonetheme.barceloneta

pigeonflight · July 26, 2015, 12:23pm

I'm working on the following issue:

The fix will most likely entail replacing @plone-font-weight-light with @plone-font-weight-regular in a less file.
I've made the change but I expected grunt watch to just detect it and then be able to see the change in my live site. Is there a step I'm missing?

I really want to see that the change has been effected before doing a pull request.

pigeonflight · July 26, 2015, 12:29pm

Enabling development mode solved the problem.

pigeonflight · July 26, 2015, 12:31pm

If I understand things correctly, Plone 5 will compile LESS without grunt, so I'm not sure if the whole grunt watch thing was even needed to fix this bug. Can anyone clarify this for me?

vangheem · July 26, 2015, 12:58pm

@zopyx that should work. If grunt watch detects it, it should compile and save.

Only other thing is to make sure you are developing plonetheme.barceloneta.

ramon · July 27, 2015, 2:34pm

Barceloneta diazo css/less is not registered on the registry of plone in order to enable zip themes to be loaded.

So, if you work on less from barceloneta on plonetheme.barceloneta you need to compile it with the gruntfile that is on the package. In diazo themes we defined the less/requirejs development files and css/js production files on the manifest.cfg so when you are on development on plone you also get the source of the code. As its not defined as a bundle you will not be able to compile it on Plone (we had a discussion on Bristol to enable that barceloneta can be a theme without profile).

Conclusion:

If you want to modify plonetheme.barceloneta less you need to run grunt less or grunt watch on plonetheme.barceloneta src folder.

pigeonflight · July 28, 2015, 5:59am

Thanks @ramon, very useful.

tkimnguyen · July 28, 2015, 3:03pm

Great info! Could it be included in https://github.com/plone/plonetheme.barceloneta/blob/master/HOWTO_DEVELOP.txt ?

pigeonflight · July 28, 2015, 7:39pm

That's a good idea. In fact this information should probably be either in the README or referenced from the README.

tkimnguyen · July 29, 2015, 5:56am

Does this capture it? (the Notes at the bottom)

Notes
-----

- You may want to enable Development Mode in the Site Setup -> Resource Registries to see your changes.

- If you want to modify plonetheme.barceloneta LESS you need to run `grunt less` or `grunt watch` on the plonetheme.barceloneta src folder

github.com

tkimnguyen/plonetheme.barceloneta/blob/master/HOWTO_DEVELOP.txt

In order to develop plonetheme.barceloneta you need to execute on the root of
the package::

 $ npm install

If you change the images/fonts files you can copy to the package at::

 $ grunt copy

After executing this commands you can run grunt to watch the changes::

 $ grunt watch

This will make sure that the many .less files are compiled to .css on the fly
and then served up from the theme. See rules.xml for the relevant Diazo rules.

Notes
-----

- You may want to enable Development Mode in the Site Setup -> Resource Registries to see your changes.

This file has been truncated. show original

pigeonflight · September 8, 2015, 1:48am

I've made some updates to the HOWTO_DEVELOP document here:

The updated file looks like this:

github.com

plone/plonetheme.barceloneta/blob/master/HOWTO_DEVELOP.rst

In order to develop plonetheme.barceloneta you need to execute on the root of
the package::

     sudo npm install
     sudo npm install -g grunt-cli

After executing these commands you can run grunt to watch for any less changes::

     grunt watch

This will make sure that the many .less files are compiled to .css on the fly and then served up from the theme.

See rules.xml for the relevant Diazo rules.

If you prefer to do a one time compile of the less files you can run::

    grunt less

Note
----

This file has been truncated. show original