Less in FX (was Re: CSS Media Queries)

[John Hendrikx]

That's an interesting approach, however I think that the readability
suffers greatly. 

Also, I'd like to give users the opportunity to modify stylesheets in a
convenient way (ie. modifying one of the base colors or base fonts) so I
package them separately; stylesheets are something that most users
understand or can be told to modify in a certain way easily enough.

--John

On 03/12/2024 17:08, Andy Goryachev wrote:
>
> My approach is to create a single stylesheet, see for example
>
>  
>
> https://github.com/andy-goryachev/MP3Player/blob/main/src/goryachev/mp3player/Styles.java
>
>  
>
> and this little guy allows to (re-)regenerate and (re-)load the
> stylesheet dynamically
>
>  
>
> https://github.com/andy-goryachev/MP3Player/blob/main/src/goryachev/fx/internal/CssLoader.java
>
>  
>
> since the stylesheet is being generated by a java class, I have all
> the tools I need - platform preferences, proper color mixing logic,
> lookups, and so on.  The only downside is that JavaFX does not allow
> programmatic creation of CSS, so the process ends up with overhead of
> creating a string, data url encoding, decoding, and parsing.
>
>  
>
> -andy
>
>  
>
>  
>
>  
>
> *From: *openjfx-dev <openjfx-dev-retn at openjdk.org> on behalf of John
> Hendrikx <john.hendrikx at gmail.com>
> *Date: *Tuesday, December 3, 2024 at 03:17
> *To: *openjfx-dev at openjdk.org <openjfx-dev at openjdk.org>
> *Subject: *Less in FX (was Re: CSS Media Queries)
>
> I've been using LESS for ages in combination with FX.   I adapted this
> project: https://github.com/i-net-software/jlessc
>
> In FX I use it with this helper class:
>
> https://github.com/hjohn/MediaSystem-v2/blob/master/mediasystem-runner/src/main/java/hs/mediasystem/runner/util/LessLoader.java
>
> Then to use a stylesheet with a control, you do something like this:
>
> *final*String CLOCK_STYLES_URL=
> LessLoader./compile/(RootNodeFactory.*class*, "clock-pane.less")
>
> Where "RootNodeFactory.class" is just a reference class as my .less
> files are located in the same package as the controls.
>
> The resulting URL can then simply be set on a control or scene:
>
> clockPane.getStylesheets().add(CLOCK_STYLES_URL);
>
> This allows me to use all kinds of handy features from LESS.  Here is
> the clock-pane.less file for example:
>
> @import"hs/mediasystem/runner/properties.less";
>
> .clock-pane
>
> {
>
> -fx-alignment: bottom-right;
>
> _-__fx__-__padding_: 5;
>
> .clock-box
>
> {
>
> _-__fx__-__padding_: 515515;
>
> -fx-alignment: center;
>
> .clock
>
> {
>
> .style-p1-extra-light;
>
> }
>
> .date
>
> {
>
> .style-p3;
>
> }
>
> }
>
> }
>
> As you can see, it uses imports, style nesting and references to
> groups of other styles (like ".style-p3").  In properties.less we find
> many custom variables, like:
>
> @tinted-glass: fade(@theme-primary, 60%);
>
> @glass-color: rgba(0, 0, 0, 0.6);
>
> @shape-disc: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111
> 248-248S393 8 256 8z";
>
> @text-primary: lighten(@theme-primary, 5%, relative);
>
> I'm probably only scratching the surface of what you can do with LESS,
> as I'm hardly a CSS designer :)
>
> The LessLoader class I wrote has one more handy feature; it allows
> suffixes on your CSS files to allow for
>
> customization per platform. I use this to select appropriate fonts per
> platform (as their names can
>
> vary apparently!). See here the Windows file. The Linux variant has
> slightly different font family names
>
> but map to the same LESS variables so I don't need to fix this
> everywhere.
>
> /*
>
> * The Noto Sans font supports many variations. To get the correct
> variation
>
> * in JavaFX, select them as follows:
>
> *
>
> * - Black = Noto Sans Blk
>
> * - Bold = Noto Sans + font-weight: bold
>
> * - Semi Bold = Noto Sans SemBd
>
> * - Medium = Noto Sans Med
>
> * - Regular = Noto Sans + font-weight: normal
>
> * - Light = Noto Sans Light
>
> *
>
> * Note that these names are for Windows. Other platforms can use
>
> * slightly different names.
>
> */
>
> .light{
>
> _-__fx__-__font-family_: "Noto Sans Light";
>
> _-__fx__-__font-weight_: normal;
>
> }
>
> .regular{
>
> _-__fx__-__font-family_: "Noto Sans";
>
> _-__fx__-__font-weight_: normal;
>
> }
>
> .medium{
>
> _-__fx__-__font-family_: "Noto Sans Med";
>
> _-__fx__-__font-weight_: bold;
>
> }
>
> .semi-bold{
>
> _-__fx__-__font-family_: "Noto Sans SemBd";
>
> _-__fx__-__font-weight_: bold;
>
> }
>
> .bold{
>
> _-__fx__-__font-family_: "Noto Sans";
>
> _-__fx__-__font-weight_: bold;
>
> }
>
> .black{
>
> _-__fx__-__font-family_: "Noto Sans Blk";
>
> _-__fx__-__font-weight_: bold;
>
> }
>
> --John
>
>  
>
> On 03/12/2024 01:08, Michael Strauß wrote:
>
>         I wish there was a simpler way to introduce variables - I think the variables might be a better solution from the stylesheet maintainability point of view, and to help with supporting light/dark, compact/roomy variants and simple things like updating the base font size.  Doing a different CSS parser is definitely a much larger project than we can afford, probably.  On the other hand, if it enables programmatic creation of style sheets...
>
>      
>
>     Custom variables would undoubtedly be a great feature. This is
>
>     orthogonal to media queries, though: at some point, even when using
>
>     custom variables, you have to ask "the medium" about things like the
>
>     color scheme or user preferences.
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://mail.openjdk.org/pipermail/openjfx-dev/attachments/20241204/3bcea6c1/attachment-0001.htm>