#946 Less live build

Merged
reinhard merged 11 commits from feature/dev-less into master 2 years ago
mweimann commented 2 years ago
Collaborator

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.

**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 2 years ago
mweimann commented 2 years ago
Poster
Collaborator

@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 2 years 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 2 years ago
Poster
Collaborator

@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 2 years 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 2 years 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 2 years ago
Poster
Collaborator

Yes, it's only for local development.

Yes, it's only for local development.
vincent commented 2 years 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 2 years ago
mweimann commented 2 years ago
Poster
Collaborator

@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 2 years ago
Collaborator

Sorry, I was busy today, will comment tomorrow.

Sorry, I was busy today, will comment tomorrow.
reinhard closed this pull request 2 years ago
max.mehl commented 2 years 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 2 years ago
Poster
Collaborator

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 2 years ago
max.mehl added this to the Hackathon1905 milestone 2 years ago
The pull request has been merged as b8a66bc266.
Sign in to join this conversation.
No reviewers
No Milestone
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

This pull request currently doesn't have any dependencies.

Loading…
There is no content yet.