HI Alex,
2018-03-06 18:19 GMT+01:00 Alex Harui <aha...@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" <piotrzarzyck...@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 <carlosrov...@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 <carlosrov...@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
