Hi, I'm trying to find a valid workflow to start working in two initial faces for Royale components.
I'm talking about to generate some kind of UI sheet with all controls and a basic wireframe style and another one that would be what more people will be using as default in Royale. From here, will be more easy to other guys to change styles. We could event create a Royale Theme editor in a near future. So, to start working on this I need a design tool, and in this case, I think that one is Sketch App. So I can create a design in Sketch with all controls (Button, TextInput, CheckBox, Panel,...) >From here, I can generate CSS and SVG code For example the code of this simple button (https://snag.gy/Am2fRX.jpg) that I did quickly is: CSS /* Background: */ background: #D8D8D8; border: 1px solid #979797; border-radius: 3px; /* TextField: */ font-family: HelveticaNeue; font-size: 12px; color: #646D7A; (CSS is almost all usable) And SVG <svg width="150px" height="40px" viewBox="0 0 150 40" version="1.1" xmlns=" http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs> <rect id="path-1" x="0" y="0" width="150" height="40" rx="3"></rect> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Royale" transform="translate(-58.000000, -49.000000)"> <g id="Button" transform="translate(58.000000, 49.000000)"> <g id="Background"> <use fill="#D8D8D8" fill-rule="evenodd" xlink:href="#path-1"></use> <rect stroke="#979797" stroke-width="1" x="0.5" y="0.5" width="149" height="39" rx="3"></rect> </g> <text id="TextField" font-family="HelveticaNeue, Helvetica Neue" font-size="12" font-weight="normal" fill="#646D7A"> <tspan x="57" y="25">Button</tspan> </text> </g> </g> </g> </svg> (SVG could be a base, but it needs to be removed absolute values and even some static parts to be usable) I'd like to create a Button "playground" app with a button and some controls that allow us to change how the button looks (colors, strokes, round corners, font face, font weight,....) In the end this would be the starting point of a playground app for all Royale controls Finaly this would be very useful if we can get the generated code for that particular styles and we could apply easily to any app, so change a "theme" will be quick and easy. Important: This will only work with our Royale components (Express mainly, and maybe Basic?, but not MDL, CreateJS, or others) I'm as well interested in how we could integrate that "view" in some component in order to easy replace visuals for a concrete component. For example, in the button above will be * we'll be making a skin part with SVG code, so we could pass values to the skin (for example colors, text button, width,...) * if not using skins, how can we pass data from the component to the svg part? (for example colors, text button, width,...) To progress with this effort, I think I could start doing only two controls, and then as we have all considerations in place progress through the rest. Thoughts? -- Carlos Rovira http://about.me/carlosrovira
