#946 Less live build

Merged
reinhard merged 11 commits from feature/dev-less into master 4 months ago

What

This PR introduces a live build of the less files in the browser.

It removes the fsfe.min.css from the repo.

Why

This should solve some issues regarding styles:

  • It isn’t necessary any longer to call lessc for development
    • That was an obstacle for some people
  • Conflicts in the fsfe.min.css file are avoided

How

There is now a new file config.xsl in the project root. Depending on the css-mode variable it uses the live browser less build or includes the fsfe.min.css.

browser → less browser build compiled → include fsfe.min.css

ToDo

There are still some things to do to make this work.

  • Less build on build/deployment system
  • Some testing
**What** This PR introduces a live build of the less files in the browser. It removes the `fsfe.min.css` from the repo. **Why** This should solve some issues regarding styles: * It isn't necessary any longer to call `lessc` for development * That was an obstacle for some people * Conflicts in the `fsfe.min.css` file are avoided **How** There is now a new file `config.xsl` in the project root. Depending on the `css-mode` variable it uses the live browser less build or includes the `fsfe.min.css`. `browser` → less browser build `compiled` → include `fsfe.min.css` **ToDo** There are still some things to do to make this work. * [ ] Less build on build/deployment system * [ ] Some testing
mweimann added the
build
label 4 months ago
mweimann commented 4 months ago
Poster

@reinhard maybe you could have a look at the idea. For the build system setup I also need your help (see ToDo).

cc @max.mehl

@reinhard maybe you could have a look at the idea. For the build system setup I also need your help (see ToDo). cc @max.mehl
reinhard commented 4 months ago
Collaborator

How cool!

To build the .min.css files, I think the main (phase 1) Makefile would be the ideal place.

There might be better ways to distingiush between development and production environment, for example by adding a xslt parameter which is automatically set in the build script. I first need to understand which actually should be development environment, and which should be production environment. For example, will the automatic build of test.fsfe.org be production or development?

How cool! To build the .min.css files, I think the main (phase 1) Makefile would be the ideal place. There might be better ways to distingiush between development and production environment, for example by adding a xslt parameter which is automatically set in the build script. I first need to understand which actually should be development environment, and which should be production environment. For example, will the automatic build of test.fsfe.org be production or development?
mweimann commented 4 months ago
Poster

@reinhard I took another round with Max to integrate the valentine mode as well. We updated the name of the control file to config. The variable is now css-mode. Max suggested to simply sed the css-mode in the make file. Could you prepare that.

@reinhard I took another round with Max to integrate the valentine mode as well. We updated the name of the control file to `config`. The variable is now `css-mode`. Max suggested to simply `sed` the `css-mode` in the make file. Could you prepare that.
max.mehl commented 4 months ago
Owner

Max suggested to simply sed the css-mode in the make file

Sorry, I didn’t see Reinhard’s suggestion before, a parameter would be even cooler, but to be honest I don’t have a strong preference here.

For example, will the automatic build of test.fsfe.org be production or development?

IMHO production or compiled as it is called now. The server can take care of the CSS generation, so I see no reason for increasing the loading time.

> Max suggested to simply sed the css-mode in the make file Sorry, I didn't see Reinhard's suggestion before, a parameter would be even cooler, but to be honest I don't have a strong preference here. > For example, will the automatic build of test.fsfe.org be production or development? IMHO production or `compiled` as it is called now. The server can take care of the CSS generation, so I see no reason for increasing the loading time.
reinhard commented 4 months ago
Collaborator

So the dynamic genereration of the CSS with JavaScript is intended only for the case when fsfe-local-build is used with fsfe-preview.sh, correct?

So the dynamic genereration of the CSS with JavaScript is intended only for the case when fsfe-local-build is used with fsfe-preview.sh, correct?
mweimann commented 4 months ago
Poster

Yes, it’s only for local development.

Yes, it's only for local development.
vincent commented 4 months ago
Collaborator

Great feature, thank you! Just a reminder that once this gets merged we should update this documentation.

Great feature, thank you! Just a reminder that once this gets merged we should update [this](http://wiki.fsfe.org/TechDocs/Mainpage/CSSwithLESS) documentation.
mweimann changed title from WIP: Less live build to Less live build 4 months ago
mweimann commented 4 months ago
Poster

@reinhard if you’re happy with it could you prepare the make file? lessc then has also to be available on the build system.

I’ll update the wiki page right after the merge.

@reinhard if you're happy with it could you prepare the make file? `lessc` then has also to be available on the build system. I'll update the wiki page right after the merge.
reinhard commented 4 months ago
Collaborator

Sorry, I was busy today, will comment tomorrow.

Sorry, I was busy today, will comment tomorrow.
max.mehl commented 4 months ago
Owner

Really nice, thank you @mweimann and @reinhard !

For all people who already use local build, it’s important to run fsfe-preview --copy look/ build/ scripts/ to have everything prepared. From then on, all pages have to be rebuild at least once to render them correctly since fsfe.min.css is no longer available. But probably a full rebuild would make sense anyway.

Really nice, thank you @mweimann and @reinhard ! For all people who already use local build, it's important to run `fsfe-preview --copy look/ build/ scripts/` to have everything prepared. From then on, all pages have to be rebuild at least once to render them correctly since fsfe.min.css is no longer available. But probably a full rebuild would make sense anyway.
mweimann commented 4 months ago
Poster

I wrote a ticket for updating the wiki and send a mail to the list: #967

I’ll do that later.

I wrote a ticket for updating the wiki and send a mail to the list: #967 I'll do that later.
mweimann deleted branch feature/dev-less 4 months ago
max.mehl added this to the Hackathon1905 milestone 4 months ago
The pull request has been merged.
Sign in to join this conversation.
Loading…
Cancel
Save
There is no content yet.