If you're using the default HTML elements I would have no expectation. I
would expect the developer or designer to add their own skin set like
FlatUI at a later time.
But if you want a default style I would think there might be a happy medium
with SVG skins. A while back Om made a SVG skin that looked identical to
the Spark Button skin. It wouldn't be as much work as a full skinning set
because the components aren't aware of them (they are backgrounds) but it's
easy to see what was going on and how to change them.
.myButton { /* normal */
background: url("button.svg") no-repeat top left;
background-size: contain;
}
.myButton:active { /* mouse down */
background: url("button_down.svg") no-repeat top left;
background-size: contain;
}
.myButton:hover { /* mouse over */
background: v("button_over.svg") no-repeat top left;
background-size: contain;
}
.myButton:disabled { /* disabled */
background: url("button_disabled.svg") no-repeat top left;
background-size: contain;
}
.myCheckBox:checked { /* checked */
background: url("checkbox_selected.svg") no-repeat top left;
background-size: contain;
}
SVG also has takes advantage of the shadow DOM.
You can also export the SVG for each state easily from Illustrator from the
Flex SDK design files.
Pseudo states
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Is the goal for the SWF and the HTML UI to look exactly the same?
On Tue, Jun 14, 2016 at 2:53 PM, OmPrakash Muppirala <bigosma...@gmail.com>
wrote:
> I think Material is probably a better option. Bootstrap is kind of a thing
> of the past these days, at least the default look and feel.
>
> Almost all frameworks (Angular 1/2, React, etc.) have some level support
> for Material Design.
>
> Thanks,
> Om
>
> On Tue, Jun 14, 2016 at 12:37 PM, Alex Harui <aha...@adobe.com> wrote:
>
> > Good ideas, however, our CSS implementation on the SWF side isn't yet
> > capable of the advanced CSS in Bootstrap, and the component
> > implementations for Bootstrap are more than a single HTMLElement. I
> think
> > we are looking for someone to help with improving the look of our simple
> > implementations. We can try to approximate BootStrap, FlatUI, Material
> if
> > folks think that would be good enough.
> >
> > -Alex
> >
> > On 6/14/16, 12:30 PM, "Harbs" <harbs.li...@gmail.com> wrote:
> >
> > >I think the styles should closely match Bootstrap (or maybe use
> > >Bootstrap).
> > >Material Design is another good target.
> > >
> > >On Jun 14, 2016, at 8:34 PM, Peter Ent <p...@adobe.com> wrote:
> > >
> > >> Hi,
> > >>
> > >> I'm working on making the FlexJS examples look better via CSS. I'll
> > >>most likely check in a separate branch, but I thought I'd ask you all
> > >>what your expectations would be.
> > >>
> > >> Keep in mind that the basic (HTML project) component set is meant to
> > >>provide ActionScript wrapping for HTML elements - for the most part.
> For
> > >>example, <js:TextButton> yields a <button> and <js:Label> yields <span>
> > >>elements. These HTML elements are easily styled with CSS, so the
> styling
> > >>objective here is CSS.
> > >>
> > >> Skinning, or more advanced styling, would be accomplished with a more
> > >>complex component set. Those skins might be SVG for instance. But the
> > >>version I'm working on is the basic set using simply CSS styling.
> > >>
> > >> Reply to this thread to get the discussion going. If we come with a
> > >>nice looking style sheet, we can make that the default for FlexJS.
> > >>
> > >> Regards,
> > >> Peter Ent
> > >> Adobe Systems/Apache Flex Project
> > >>
> > >>
> > >
> >
> >
>
