CSS support / CSS demo

[rubyFeedback]

Heya Andy,

First let me copy/paste an example with CSS and ruby-gtk3; I will refer to this later.

require 'gtk3'

module Gtk

class HoverButtonExampleViaCss < ::Gtk::Box # === Gtk::HoverButtonExampleViaCss

  alias e puts

  # ========================================================================= #
  # === USE_THIS_AS_THE_CSS_STRING
  # ========================================================================= #
  USE_THIS_AS_THE_CSS_STRING = <<-EOF

button {
  font-size: 36px;
  background-image: none;
  background-color: yellow;
}

button:hover {
  transition: 4000ms linear;
  background-color: lightblue;
}

#bblack1 { border: 1px solid black; }

EOF

  # ========================================================================= #
  # === initialize
  # ========================================================================= #
  def initialize
    super(:vertical)
    enable_CSS_support
    set_border_width(25)
    button = ::Gtk::Button.new(
      label: "Test hover action and transition -\n"\
             "place the mouse cursor over this text.\n"\
             "This functionality is implemented via button:hover, and transition:"
    )
    button.set_name('bblack1')
    button.signal_connect(:clicked) { e 'Click me!' }
    add(button)
    add(::Gtk::Separator.new(:horizontal))
  end

  # ========================================================================= #
  # === enable_CSS_support
  # ========================================================================= #
  def enable_CSS_support
    provider = ::Gtk::CssProvider.new
    provider.load(data: USE_THIS_AS_THE_CSS_STRING)
    ::Gtk::StyleContext.add_provider_for_screen(
      Gdk::Screen.default,
      provider,
      Gtk::StyleProvider::PRIORITY_APPLICATION
    )
  end

end; end

if __FILE__ == $PROGRAM_NAME
  window = Gtk::Window.new
  window.add(Gtk::HoverButtonExampleViaCss.new)
  window.show_all
  window.set_size_request(880, 600)
  window.move(0, 0)
  Gtk.main  
end

This example only needs the "gtk3" gem as far as I know. No idea whether that works fine on macosx but on linux it works very well.

Anyway - let me next briefly explain what the above does:

It is just showing a simple button. If you put the mouse cursor over it, aka a hover effect, it will slowly change the colour. The responsible CSS is:

  transition: 4000ms linear;
  background-color: lightblue;

Ok so far.

I would like to ask whether it is possible for Glimmer to support CSS, or some aspects of CSS. For instance, colours in particular.

I believe most toolkits support colours, including ruby-tk.

This may not be 1:1 "true" CSS, but even gtk does not use all CSS features, so I refer here more towards a "CSS-like support" of functionality.

I think it would be nice if glimmer itself could directly support it as-is. Again, I don't mean "true" CSS per se, but kind of like a wrapper, a DSL wrapper, that can support SOME CSS elements. I am not necessarily asking for ALL CSS rules, mind you, not even all within ruby-gtk3, but more like a "demo" or "proof of concept" for glimmer, so that at some later point in time, if it ever becomes important, we could say: "yes, glimmer supports some CSS functionality, at the least color and background-color". Perhaps even border or border color properties.

For the www this may be even more important, as glimmer may not have to do much here, since the browsers support CSS. For the traditional toolkits this may be a bit more work, in particular for, say, ruby-tk where you probably may have to support some mapping. Like:

.button1 { # our CSS class called button1
  color: green; # for green colour
}

We may also need a way to add an id and a css-class to all widgets. Not sure if glimmer supports this or would like to support it, but I think as an additional option this could be useful. Write once, run everywhere.

Now in the main README you mention this:

"Glimmer DSL for CSS | All Web Browsers | No | Yes | Programmable | CSS Is Over-Engineered / Too Many Features To Learn"

I am not sure if the "Too many features to learn" is an inside-joke or something :D - but I do not disagree. CSS is very complex. Which is why I refer to a subset of CSS really, keep it simple. That is why I think starting with colours is just about the simplest and best "common grounds" for CSS. A lot of the extra stuff is not necessary although it can be cool to write down full animations in CSS. I tested some of them in the browser and some animations are awesome. But again, I focus here on SIMPLICITY; so - just colours.

My goal here is not solely confined to ruby-gtk of course. I more would like to see how much glimmer itself could support a "CSS-like concept", and how much work it would be to have it for, say, a few of the glimmer "dialects". Say, glimmer-swt since that seems to be your main focus, perhaps glimmer-gtk because ruby-gtk3 supports it, and last but not least perhaps ruby-tk as proof-of-concept to show how CSS-like properties could be supported.

I think in the simplest case you could just wrap the CSS rules into one big string like:

foobar_CSS_rules '

tons of code here

'

And then have one class in glimmer that can parse these rules accordingly to the backend that is used. Perhaps even showcase that in sinatra/rails/opal.

I am not sure how much work that would be, and I mostly refer to a proof-of-concept just to showcase that this could be done. You are doing a LOT of video tutorials and I don't want to distract you from that, but if in some months down the road you come to revisit glimmer-gtk as well as the idea for CSS or CSS-like properties, I think it could be a nice use case for glimmer. Kind of like offering additional ways to style applications - and it could be an appeal for people who come from a background of CSS and HTML rather than ruby itself. Ideally we could then specify our UI elements in CSS and have these work in www-apps as well as across glimmer. And who knows, perhaps one day glimmer can even autogenerate tons of additional code, such as crystal! Or C, and we can all re-use that and have tons of autogenerated code and bindings. :D

Anyway that's it for now, thanks for reading, as always please proceed in any way shape or form. I have a few more ad-hoc ideas, including "support for Shoes 1:1" syntax (just to showcase how glimmer could work with a Shoes DSL 1:1) as well as a more important suggestion in regards to glimmer's DSL. You kind of mentioneed this indirectly, lately, via this here:

https://github.com/AndyObtiva/glimmer/commit/56eee0ddb2618ac5a513fea65f344b3bb20651e2

Aka that part:

"Allow being able to include Glimmer for a particular DSL (e.g. include Glimmer[:data_binding] to add observe keyword only) without having to enable/disable DSLs (create scoped realms of DSL activation)"

And I think this is a VERY good idea. Perhaps I just briefly mention my rough idea here too but disregard it please for now :D

I want to add a glimmer-like DSL to the gem called gtk_paradise eventually, or perhaps two DSLs. One that should be 100% compatible to glimmer as-is; and a second one that I want to toy around a bit with. To see how much more effective a glimmer DSL could be.

One problem I have is that I don't understand all of the DSL. I think kojix2 had a similar problem via the <=> or whatever it was, and I think while it is probably super-simple to you, it may be hard for newcomers or other folks. And this is why I think a modular DSL may be a great idea. Kind of like where people can:

a) mix and combine it via traditional OOP, e. g. keep some parts in an OOP style, oldschool, but also add some glimmer-variants in the middle, before doing a "full port" or something

and

b) also very important, to slowly learn new things. I should be fine learning things slowly step by step, but to go from 0 to understanding a whole DSL suite can be very, very difficult. I know a little bit of rails but there are still many things that look very alien and confusing to me. So providing smaller "baby steps" along the way is a good idea IMO. So a fine-tuned modular DSL we can cherry-pick from would be great. But anyway, this is an aside, I may create a separate issue in a few days or so in the main glimmer repository.

This here is mostly just about CSS or CSS-like support, kind of providing users with an additional option how they could use glimmer to style applications. (And if this works to perhaps showcase ONE simple example with it. But this may refer to the whole glimmer suite; it is probably not worth to add it only for glimmer-gtk. It would be better to have the whole glimmer suite support it, or a subset at the least. A bit like libui does things for cross-platform support, although I would not mind platform-specific UI improvements.)