You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Carlos Rovira <ca...@apache.org> on 2018/03/06 14:16:15 UTC
two things: Clean components final HTML Output - Button basic styles
still around
Hi,
I want to share some things that affect my work on Jewel UI set and thing
we should fix:
1.- Get rid of "style" configurations
For example, I'm getting this output for some buttons
<button type="button" class="TextButton" style="margin: 0px; display:
block;">Some</button>
<button type="button" class="TextButton" style="margin: 10px 0px 0px;
display: block;">Button</button>
I think display: block; should be part of the basic.css
In the case of margins, I think this come from the
<js:VerticalLayoutWithPaddingAndGap gap="10"/>
In this case, I think would be better to affect some CSS to left the HTML
as clean as possible
For me the output should be:
<button type="button" class="TextButton">Some Label</button>
2.- When Alex did changes to basic css and remove "*" I check that
textfield was behaving correctly, but I think button is getting some styles
that shouldn't be in my app
Button {
border: 1px solid #808080;
padding: 4px;
background-color: #f8f8f8;
margin: 0px;
border-radius: 2px;
}
Button:hover {
border: 1px solid #808080;
padding: 4px;
background-color: #e8e8e8;
}
Button:active {
border: 1px solid #808080;
padding: 4px;
background-color: #d8d8d8;
}
Why this styles are still there? can I remove them or put in other place?
--
Carlos Rovira
http://about.me/carlosrovira
Re: two things: Clean components final HTML Output - Button basic
styles still around
Posted by Carlos Rovira <ca...@apache.org>.
HI Piotr,
2018-03-06 15:31 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:
> If you are extending Basic components, you got styles from there. If you
> don't need those styles you will have to do one of the two things in my
> opinion:
>
> 1) Exclude basic styles as we did it in MDL
>
exclusion was removed since the target was not need it anymore (compiler
option is not there anymore, or I think I read somewhere in this list when
changes to basic css and * where done by Alex). AFAIK, the actual way (and
right way) is not include things you don't need since is against our royale
philosophy (compile a .css that you don't need is anti-PAYG)
> 2) Override some of them using theme/your css file style
>
>
If I use a theme and want to override something, that's ok. But that's not
the case. I don't want to use anything, ergo, I should not have it include
and with the need of override it. And btw, this have colateral effects (we
all know how cumbersome CSS can become if you don't have control from the
beginning and you are inherit something you don't want to inherit )
--
Carlos Rovira
http://about.me/carlosrovira
Re: two things: Clean components final HTML Output - Button basic
styles still around
Posted by Carlos Rovira <ca...@apache.org>.
HI Alex,
2018-03-06 18:19 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
> Hi Piotr,
>
> Your advice is no longer true (was true until recently). Carlos can move
> the visual styling from the Button Type selectors in defaults.css to
> basic.css.
>
I'll move Button rules to basic, and as I find more component, I'll be
moving as many rules as I can
I think we should end with a basic/defaults.css almost with no code, and
basic.css with the actual code (and changes
or additions should go there)
>
> I have seen some surprising defaults in the browsers, like border-width
> defaulting to 4px. So a simple test is to not use Royale at all and
> manually create some HTML that loads the SVG and see how thick the strokes
> are. I primarily use Safari, and can debug the styles to see that the
> browser defaults are dictating border-width, for example.
>
I'm as well using Safari as my main browser, but looking as well in Chrome
and Safari.
Safari and Firefox shows thick borders when remove basic styles, but Chrome
remains the same.
I'l try some changes to see if I get the most default styles possible as if
no styles will be applied.
And then move from basic to basic theme
>
> Regarding the "display" style when examining nodes, that is how some
> layouts works. If you have a better idea of how to force every element to
> be on its own line, let us know what that is. I couldn't think of any
> other way. If you use HorizontalLayout, I think we use display:
> inline-block".
>
> Other layouts can be written to use FlexBox, or CSS Grid and set other
> properties to dictate one column of children, but for a generic Div that
> can contain Spans, setting display on each child was the only way I could
> think of. Definitely open to other ideas.
>
> Same for Gap. I couldn't think of any other way to control the spacing
> without using absolute positioning. Open to other ideas here as well.
>
> Now if you know that all of your children are already Divs and thus
> blocks, then you can avoid using a layout at all. And you can set margins
> on each child to get the spacing you need.
>
I think this deserves another thread, I'll be creating another one so we
can discuss this.
I think other frameworks doesn't use nothing inline in the html, they put
on CSS, I'm not saying we should not do the same as we have, I only say we
should put that code on CSS files since the opposite means to have our html
with code that will not serve all proposals. But as I said, I'll be
creating another thread for this issue.
thanks!
>
> HTH,
> -Alex
>
>
> On 3/6/18, 6:31 AM, "Piotr Zarzycki" <pi...@gmail.com> wrote:
>
> >If you are extending Basic components, you got styles from there. If you
> >don't need those styles you will have to do one of the two things in my
> >opinion:
> >
> >1) Exclude basic styles as we did it in MDL
> >2) Override some of them using theme/your css file style
> >
> >
> >
> >2018-03-06 15:26 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> >
> >> In fact, If I remove the styles in basic, I end with some visual
> >>changes in
> >> JewelExample, like SVG strokes more thick in the buttons. Don't know
> >> exactly why this is happening, but it's clear that styles from basic
> >> component should be exactly 0, and then if people wants basic styles
> >>they
> >> should use basic theme as a dependency.
> >>
> >> I should have a 0 styles start so Jewel styles don't be affected by any
> >> other inherit rule
> >>
> >> 2018-03-06 15:16 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> >>
> >> > Hi,
> >> >
> >> > I want to share some things that affect my work on Jewel UI set and
> >>thing
> >> > we should fix:
> >> >
> >> > 1.- Get rid of "style" configurations
> >> >
> >> > For example, I'm getting this output for some buttons
> >> >
> >> > <button type="button" class="TextButton" style="margin: 0px; display:
> >> > block;">Some</button>
> >> >
> >> > <button type="button" class="TextButton" style="margin: 10px 0px 0px;
> >> > display: block;">Button</button>
> >> >
> >> > I think display: block; should be part of the basic.css
> >> >
> >> > In the case of margins, I think this come from the
> >> >
> >> > <js:VerticalLayoutWithPaddingAndGap gap="10"/>
> >> >
> >> > In this case, I think would be better to affect some CSS to left the
> >>HTML
> >> > as clean as possible
> >> >
> >> > For me the output should be:
> >> >
> >> > <button type="button" class="TextButton">Some Label</button>
> >> >
> >> >
> >> > 2.- When Alex did changes to basic css and remove "*" I check that
> >> > textfield was behaving correctly, but I think button is getting some
> >> styles
> >> > that shouldn't be in my app
> >> >
> >> >
> >> > Button {
> >> > border: 1px solid #808080;
> >> > padding: 4px;
> >> > background-color: #f8f8f8;
> >> > margin: 0px;
> >> > border-radius: 2px;
> >> > }
> >> >
> >> >
> >> > Button:hover {
> >> > border: 1px solid #808080;
> >> > padding: 4px;
> >> > background-color: #e8e8e8;
> >> > }
> >> >
> >> >
> >> > Button:active {
> >> > border: 1px solid #808080;
> >> > padding: 4px;
> >> > background-color: #d8d8d8;
> >> > }
> >> >
> >> > Why this styles are still there? can I remove them or put in other
> >>place?
> >> >
> >> >
> >> > --
> >> > Carlos Rovira
> >> >
> >>https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%
> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> 7Cb99dffe4d2c74fcf84ae08
> >>d5836efe0d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C63655943508703371
> >>1&sdata=Qzp6LaQZfoxHUzLZ9H4aiX3VvHBoqjQjhSSXq0Vaipg%3D&reserved=0
> >> >
> >> >
> >>
> >>
> >> --
> >> Carlos Rovira
> >>
> >>https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%
> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> 7Cb99dffe4d2c74fcf84ae08
> >>d5836efe0d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C63655943508703371
> >>1&sdata=Qzp6LaQZfoxHUzLZ9H4aiX3VvHBoqjQjhSSXq0Vaipg%3D&reserved=0
> >>
> >
> >
> >
> >--
> >
> >Piotr Zarzycki
> >
> >Patreon:
> >*https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fwww.patr
> >eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%
> 7Cb99dffe4d2c74f
> >cf84ae08d5836efe0d%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C6365594350
> >87033711&sdata=H1QgiT4UZ13qF6laT%2B0GRsLadJy0XhCCwr8E%2FscrC2w%
> 3D&reserved
> >=0
> ><https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fwww.patr
> >eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%
> 7Cb99dffe4d2c74f
> >cf84ae08d5836efe0d%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C6365594350
> >87033711&sdata=H1QgiT4UZ13qF6laT%2B0GRsLadJy0XhCCwr8E%2FscrC2w%
> 3D&reserved
> >=0>*
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: two things: Clean components final HTML Output - Button basic
styles still around
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Hi Piotr,
Your advice is no longer true (was true until recently). Carlos can move
the visual styling from the Button Type selectors in defaults.css to
basic.css.
I have seen some surprising defaults in the browsers, like border-width
defaulting to 4px. So a simple test is to not use Royale at all and
manually create some HTML that loads the SVG and see how thick the strokes
are. I primarily use Safari, and can debug the styles to see that the
browser defaults are dictating border-width, for example.
Regarding the "display" style when examining nodes, that is how some
layouts works. If you have a better idea of how to force every element to
be on its own line, let us know what that is. I couldn't think of any
other way. If you use HorizontalLayout, I think we use display:
inline-block".
Other layouts can be written to use FlexBox, or CSS Grid and set other
properties to dictate one column of children, but for a generic Div that
can contain Spans, setting display on each child was the only way I could
think of. Definitely open to other ideas.
Same for Gap. I couldn't think of any other way to control the spacing
without using absolute positioning. Open to other ideas here as well.
Now if you know that all of your children are already Divs and thus
blocks, then you can avoid using a layout at all. And you can set margins
on each child to get the spacing you need.
HTH,
-Alex
On 3/6/18, 6:31 AM, "Piotr Zarzycki" <pi...@gmail.com> wrote:
>If you are extending Basic components, you got styles from there. If you
>don't need those styles you will have to do one of the two things in my
>opinion:
>
>1) Exclude basic styles as we did it in MDL
>2) Override some of them using theme/your css file style
>
>
>
>2018-03-06 15:26 GMT+01:00 Carlos Rovira <ca...@apache.org>:
>
>> In fact, If I remove the styles in basic, I end with some visual
>>changes in
>> JewelExample, like SVG strokes more thick in the buttons. Don't know
>> exactly why this is happening, but it's clear that styles from basic
>> component should be exactly 0, and then if people wants basic styles
>>they
>> should use basic theme as a dependency.
>>
>> I should have a 0 styles start so Jewel styles don't be affected by any
>> other inherit rule
>>
>> 2018-03-06 15:16 GMT+01:00 Carlos Rovira <ca...@apache.org>:
>>
>> > Hi,
>> >
>> > I want to share some things that affect my work on Jewel UI set and
>>thing
>> > we should fix:
>> >
>> > 1.- Get rid of "style" configurations
>> >
>> > For example, I'm getting this output for some buttons
>> >
>> > <button type="button" class="TextButton" style="margin: 0px; display:
>> > block;">Some</button>
>> >
>> > <button type="button" class="TextButton" style="margin: 10px 0px 0px;
>> > display: block;">Button</button>
>> >
>> > I think display: block; should be part of the basic.css
>> >
>> > In the case of margins, I think this come from the
>> >
>> > <js:VerticalLayoutWithPaddingAndGap gap="10"/>
>> >
>> > In this case, I think would be better to affect some CSS to left the
>>HTML
>> > as clean as possible
>> >
>> > For me the output should be:
>> >
>> > <button type="button" class="TextButton">Some Label</button>
>> >
>> >
>> > 2.- When Alex did changes to basic css and remove "*" I check that
>> > textfield was behaving correctly, but I think button is getting some
>> styles
>> > that shouldn't be in my app
>> >
>> >
>> > Button {
>> > border: 1px solid #808080;
>> > padding: 4px;
>> > background-color: #f8f8f8;
>> > margin: 0px;
>> > border-radius: 2px;
>> > }
>> >
>> >
>> > Button:hover {
>> > border: 1px solid #808080;
>> > padding: 4px;
>> > background-color: #e8e8e8;
>> > }
>> >
>> >
>> > Button:active {
>> > border: 1px solid #808080;
>> > padding: 4px;
>> > background-color: #d8d8d8;
>> > }
>> >
>> > Why this styles are still there? can I remove them or put in other
>>place?
>> >
>> >
>> > --
>> > Carlos Rovira
>> >
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cb99dffe4d2c74fcf84ae08
>>d5836efe0d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63655943508703371
>>1&sdata=Qzp6LaQZfoxHUzLZ9H4aiX3VvHBoqjQjhSSXq0Vaipg%3D&reserved=0
>> >
>> >
>>
>>
>> --
>> Carlos Rovira
>>
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cb99dffe4d2c74fcf84ae08
>>d5836efe0d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63655943508703371
>>1&sdata=Qzp6LaQZfoxHUzLZ9H4aiX3VvHBoqjQjhSSXq0Vaipg%3D&reserved=0
>>
>
>
>
>--
>
>Piotr Zarzycki
>
>Patreon:
>*https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.patr
>eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%7Cb99dffe4d2c74f
>cf84ae08d5836efe0d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365594350
>87033711&sdata=H1QgiT4UZ13qF6laT%2B0GRsLadJy0XhCCwr8E%2FscrC2w%3D&reserved
>=0
><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.patr
>eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%7Cb99dffe4d2c74f
>cf84ae08d5836efe0d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365594350
>87033711&sdata=H1QgiT4UZ13qF6laT%2B0GRsLadJy0XhCCwr8E%2FscrC2w%3D&reserved
>=0>*
Re: two things: Clean components final HTML Output - Button basic
styles still around
Posted by Piotr Zarzycki <pi...@gmail.com>.
If you are extending Basic components, you got styles from there. If you
don't need those styles you will have to do one of the two things in my
opinion:
1) Exclude basic styles as we did it in MDL
2) Override some of them using theme/your css file style
2018-03-06 15:26 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> In fact, If I remove the styles in basic, I end with some visual changes in
> JewelExample, like SVG strokes more thick in the buttons. Don't know
> exactly why this is happening, but it's clear that styles from basic
> component should be exactly 0, and then if people wants basic styles they
> should use basic theme as a dependency.
>
> I should have a 0 styles start so Jewel styles don't be affected by any
> other inherit rule
>
> 2018-03-06 15:16 GMT+01:00 Carlos Rovira <ca...@apache.org>:
>
> > Hi,
> >
> > I want to share some things that affect my work on Jewel UI set and thing
> > we should fix:
> >
> > 1.- Get rid of "style" configurations
> >
> > For example, I'm getting this output for some buttons
> >
> > <button type="button" class="TextButton" style="margin: 0px; display:
> > block;">Some</button>
> >
> > <button type="button" class="TextButton" style="margin: 10px 0px 0px;
> > display: block;">Button</button>
> >
> > I think display: block; should be part of the basic.css
> >
> > In the case of margins, I think this come from the
> >
> > <js:VerticalLayoutWithPaddingAndGap gap="10"/>
> >
> > In this case, I think would be better to affect some CSS to left the HTML
> > as clean as possible
> >
> > For me the output should be:
> >
> > <button type="button" class="TextButton">Some Label</button>
> >
> >
> > 2.- When Alex did changes to basic css and remove "*" I check that
> > textfield was behaving correctly, but I think button is getting some
> styles
> > that shouldn't be in my app
> >
> >
> > Button {
> > border: 1px solid #808080;
> > padding: 4px;
> > background-color: #f8f8f8;
> > margin: 0px;
> > border-radius: 2px;
> > }
> >
> >
> > Button:hover {
> > border: 1px solid #808080;
> > padding: 4px;
> > background-color: #e8e8e8;
> > }
> >
> >
> > Button:active {
> > border: 1px solid #808080;
> > padding: 4px;
> > background-color: #d8d8d8;
> > }
> >
> > Why this styles are still there? can I remove them or put in other place?
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
> >
> >
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
Re: two things: Clean components final HTML Output - Button basic
styles still around
Posted by Carlos Rovira <ca...@apache.org>.
In fact, If I remove the styles in basic, I end with some visual changes in
JewelExample, like SVG strokes more thick in the buttons. Don't know
exactly why this is happening, but it's clear that styles from basic
component should be exactly 0, and then if people wants basic styles they
should use basic theme as a dependency.
I should have a 0 styles start so Jewel styles don't be affected by any
other inherit rule
2018-03-06 15:16 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> Hi,
>
> I want to share some things that affect my work on Jewel UI set and thing
> we should fix:
>
> 1.- Get rid of "style" configurations
>
> For example, I'm getting this output for some buttons
>
> <button type="button" class="TextButton" style="margin: 0px; display:
> block;">Some</button>
>
> <button type="button" class="TextButton" style="margin: 10px 0px 0px;
> display: block;">Button</button>
>
> I think display: block; should be part of the basic.css
>
> In the case of margins, I think this come from the
>
> <js:VerticalLayoutWithPaddingAndGap gap="10"/>
>
> In this case, I think would be better to affect some CSS to left the HTML
> as clean as possible
>
> For me the output should be:
>
> <button type="button" class="TextButton">Some Label</button>
>
>
> 2.- When Alex did changes to basic css and remove "*" I check that
> textfield was behaving correctly, but I think button is getting some styles
> that shouldn't be in my app
>
>
> Button {
> border: 1px solid #808080;
> padding: 4px;
> background-color: #f8f8f8;
> margin: 0px;
> border-radius: 2px;
> }
>
>
> Button:hover {
> border: 1px solid #808080;
> padding: 4px;
> background-color: #e8e8e8;
> }
>
>
> Button:active {
> border: 1px solid #808080;
> padding: 4px;
> background-color: #d8d8d8;
> }
>
> Why this styles are still there? can I remove them or put in other place?
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira