How to overwrite/change a components' default styles the royale way?

[Olaf Krueger <ma...@olafkrueger.net>]

Hi,
I've learned in the meantime that "a Royale 'type' selector isn't really a
true CSS Type Selector.  It is really a Class selector with the same name as
the component's typeNames property".

But I wonder what is the Royale way of changing the default styles of a
component for an app developer.
It seems to me that applying a CSS class to a particular element works and
it also works to set new element/type styles in order to 'overwrite' the
defaults [1].
But the original default component styles remain in the HTML styles [2] and
so I wonder if this is the best way to achieve this.

Thanks,
Olaf

[1] https://snag.gy/RZVpUW.jpg
[2] https://snag.gy/5iqhZW.jpg 





--
Sent from: http://apache-royale-development.20373.n8.nabble.com/

Re: How to overwrite/change a components' default styles the royale way?

[Olaf Krueger <ma...@olafkrueger.net>]

I guess I understand your point now.

For the sake of completeness:
I found that CSS definitions are applied from "top->down" by browsers.
So if I understand it correctly: 
If it's always the case that the 'default Royale component styles' are
defined at the top of the .css file, they will be 'overwritten' by any
following defined styles with the same name.
So in the example [1] the 'custom style' always wins.

If this would not work for whatever reason we additionally have the chance
to use the "!important" rule. This rule overrides any other declarations.[2]
Even if this is maybe bad practise in some cases this is the way to
overwrite styles of external libraries like Bootstrap.

I am satisfied now ;-)

Thanks,
Olaf

[1]
...

/* Default style */ 
Button {
   color: red;
}

/* Custom style */
Button {
   color: green;
}

...


[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity





--
Sent from: http://apache-royale-development.20373.n8.nabble.com/

Re: How to overwrite/change a components' default styles the royale way?

[Alex Harui <ah...@adobe.com.INVALID>]

I think I mostly agree with your point.  We want to make styling easy as
possible.  My point was that we have lots of work to do, and sometimes we
have to "settle" for providing the same way of doing things as folks would
do if they didn't use Royale.  So, if you didn't use Royale, chose some
CSS theme like Bootstrap or MaterialDesignLite and wanted to change
something, what would you have to do?   I'm not quite sure what that is,
but I think you may need to know that CSS rules the theme designers used
in order to override them.  I'm not sure you can "un-set" a style defined
in a CSS theme or not.

Now if you have a better idea and can implement it or get a volunteer to
implement it, great.  But for now, I'm going to be happy if the CSS our
users can define can override styles in the SWCs.

My 2 cents,
-Alex

On 1/8/18, 11:19 AM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:

>Hmm, I am not sure if we're misunderstood...
>
>I don't want to say that we should go the Flex way or that we need
>something
>like skinning.
>I just would like to say that from my point of view it is important to
>provide a possibility to overwrite CSS  styles in that way, that no
>default
>styles remain in the HTML.
>
>As long as we target HTML I think the easiest way is to just apply
>HTML/CSS3
>styles to change the look and feel of components/elements.
>
>However, maybe I get something wrong... I'll continue for now with
>exploring
>those things... 
>
>Thanks,
>Olaf
>
>
>
>
>
>--
>Sent from: 
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-roy
>ale-development.20373.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7
>Cb7df7d8be61147e0303908d556ccb423%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636510359552480505&sdata=15HOLwMdIXqtQDzOyzRNf6fZCbiTTx%2BcgX3NRY%2Bz
>Xtc%3D&reserved=0

Re: How to overwrite/change a components' default styles the royale way?

[Olaf Krueger <ma...@olafkrueger.net>]

Hmm, I am not sure if we're misunderstood...

I don't want to say that we should go the Flex way or that we need something
like skinning.
I just would like to say that from my point of view it is important to
provide a possibility to overwrite CSS  styles in that way, that no default
styles remain in the HTML.

As long as we target HTML I think the easiest way is to just apply HTML/CSS3
styles to change the look and feel of components/elements.

However, maybe I get something wrong... I'll continue for now with exploring
those things... 

Thanks,
Olaf





--
Sent from: http://apache-royale-development.20373.n8.nabble.com/

Re: How to overwrite/change a components' default styles the royale way?

[Alex Harui <ah...@adobe.com.INVALID>]

From what I see in the browser, the browser is used to having a ton of CSS
to process.  While we are trying to replicate as much of Flex as we can,
we also don't want to blindly replicate all of Flex.  That's why the UI
set isn't 100% backward compatible, and in this case, why we are going to
rely on browser CSS instead of trying to make the browser implement Flex
CSS.  We will likely have a skin-able component set some day, but the
realization is that if you don't use Royale, you are probably going to
have to learn more about CSS that you did when you used Flex.  So, as long
as the CSS you would normally have to apply if you weren't using Royale
works when you do use Royale, that is the minimum.  If we can do better
than that, great, but not currently a huge priority for me.

So, if I'm not using Royale and just using HTML/CSS/JS and overriding the
default in some CSS theme, my choices are, IIRC, to set styles on a
component, or add a class selector, or override an existing class selector
from the theme. We are pretty much offering the same, I think.

My 2 cents,
-Alex

On 1/8/18, 12:31 AM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:

>Hi Alex,
>
>>We can look into it more.
>I'd highly appreciate it ;-)
>
>From my point of view the styling of (custom) components is crucial for
>Royal.
>For a Flex developer who will use Royale I guess CSS3 styling replaces
>Flex
>skinning and I guess anybody out there wants to give his compoenents a
>custom look and feel.
>Am I wrong? What do others think?
>
>So, even if the compiler maybe doesn't combine selectors properly for now
>I
>am still interested if there's a recommend way to style custom components.
>E.g. the way of 'overwriting' the default styles for a js:TextButton by
>applying styles to the 'Button' element feels not like the Royale way for
>me
>and on the other side am not sure if all default styles could be set
>successfully by applying styles by using the class selector (.myButton).
>
>If there's a recommend way I would like to write some docs in the near
>future...
>
>Thanks for help,
>Olaf
>
>
>
>
>
>
>
>--
>Sent from: 
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-roy
>ale-development.20373.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7
>C35786786a6fc40c6be2208d556737d6e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636509976388358349&sdata=aDGmTNKjZ4V95qEoWVaG%2BJdUcCkZwDuYU119XX9F0a
>A%3D&reserved=0

Re: How to overwrite/change a components' default styles the royale way?

[Olaf Krueger <ma...@olafkrueger.net>]

Hi Alex,

>We can look into it more.
I'd highly appreciate it ;-)

From my point of view the styling of (custom) components is crucial for
Royal.
For a Flex developer who will use Royale I guess CSS3 styling replaces Flex
skinning and I guess anybody out there wants to give his compoenents a
custom look and feel.
Am I wrong? What do others think?

So, even if the compiler maybe doesn't combine selectors properly for now I
am still interested if there's a recommend way to style custom components.
E.g. the way of 'overwriting' the default styles for a js:TextButton by
applying styles to the 'Button' element feels not like the Royale way for me
and on the other side am not sure if all default styles could be set
successfully by applying styles by using the class selector (.myButton).

If there's a recommend way I would like to write some docs in the near
future...

Thanks for help,
Olaf







--
Sent from: http://apache-royale-development.20373.n8.nabble.com/

Re: How to overwrite/change a components' default styles the royale way?

[Alex Harui <ah...@adobe.com.INVALID>]

Hmm.  We can look into it more.  I thought the compiler knew how to
combine selectors, and if not, I supposed we could make it work, but I
think it will be harder for properties like border that are "shortcuts"
for a bunch of other properties.

-Alex

On 1/7/18, 12:21 PM, "Olaf Krueger" <ma...@olafkrueger.net> wrote:

>Hi,
>I've learned in the meantime that "a Royale 'type' selector isn't really a
>true CSS Type Selector.  It is really a Class selector with the same name
>as
>the component's typeNames property".
>
>But I wonder what is the Royale way of changing the default styles of a
>component for an app developer.
>It seems to me that applying a CSS class to a particular element works and
>it also works to set new element/type styles in order to 'overwrite' the
>defaults [1].
>But the original default component styles remain in the HTML styles [2]
>and
>so I wonder if this is the best way to achieve this.
>
>Thanks,
>Olaf
>
>[1] 
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%2
>FRZVpUW.jpg&data=02%7C01%7Caharui%40adobe.com%7C0a9f66c53aa14b9212f308d556
>0c4b32%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636509533162326598&sda
>ta=ULVpWGIh296ybPYeMHm4FA6KvcaIf9%2BLF%2BHAqHZ5Trs%3D&reserved=0
>[2] 
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%2
>F5iqhZW.jpg&data=02%7C01%7Caharui%40adobe.com%7C0a9f66c53aa14b9212f308d556
>0c4b32%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636509533162326598&sda
>ta=Db8N3277aHtOYZPijx3eW04zfwzV4sGemPFXiNR%2BJ0o%3D&reserved=0
>
>
>
>
>
>--
>Sent from: 
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-roy
>ale-development.20373.n8.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7
>C0a9f66c53aa14b9212f308d5560c4b32%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>C0%7C636509533162326598&sdata=40WDNr1W9GhhNAVDI6SKtp1upzSJ8L8AJvwFyuKwRMk%
>3D&reserved=0