Silex as a prototyping tool ? Your opinion wanted

[lexoyo]

Hello

We are thinking about the possibility to use Silex as a prototyping tool. Have you already used it this way?

What do you think it would take to make Silex effective at making prototypes?

cc @silexlabs/silex-labs-contributors @silexlabs/silex

[AndreaMonzini]

Hello, what do you mean with prototypes? Web App prototype? App prototypes?

Thank you.

[lexoyo]

I was thinking websites prototypes but web app / app maybe in a second time

[lexoyo]

The component we are talking about: the HTML input elements

[lexoyo]

for example, paste this CSS in the CSS editor

.html-element * {
    width: 99%;
    height: 99%;
}

And this HTML code in an HTML box (this code comes from here]

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

[lexoyo]

Suggestion made by @theedoms http://ionicframework.com/docs/components/

Other UI libraries we could use

• http://semantic-ui.com/
• http://jqueryui.com/
• http://jquerymobile.com/
• http://alloyui.com/
• http://ninjaui.com/

[singchan]

the best according to @zabojad http://www.material-ui.com/

but he says it may have performance issues when using it in cordova with other libs

also we should plug Silex with PhoneGap Build API in order to deliver apps directly from Silex

[zabojad]

:)

[lexoyo]

After some tests of material UI components and react, I think I will go with a pure CSS framework (no js) like these

• http://materializecss.com/ (CSS and components sections)
• http://topcoat.io/

My plan is this: use a template language on the client-side to render the components, and a CSS-only framework. Describe the properies of the component and replace it within the component's template

Example of a component with mustache: a dropdown list (see mozilla's doc about the select element)

<select 
  class="{{theme-css-class}}"
  {{#autofocus}}autofocus{{/autofocus}}
  {{#disabled}}disabled{{/disabled}}
  {{#multiple}}multiple{{/multiple}}
  {{#required}}required{{/required}}
  {{#form}}form="{{form}}"{{/form}}
  {{#name}}name="{{name}}"{{/name}}
  {{#size}}size="{{size}}"{{/size}}
  {{#onchange}}onchange="{{onchange}}"{{/onchange}}
  >
  {{#data}}
    <option
    {{#disabled}}disabled{{/disabled}}
    {{#selected}}selected{{/selected}}
    {{#label}}label={{label}} {{^value}}value={{label}}{{/value}}{{/label}}
    {{#value}}value={{value}}{{/value}}
    {{^label}}label={{.}} value={{.}}{{/label}}
    >
      {{label}}
    </option>
  {{/data}}
</select>

and here is how the component's definition would be, which would allow Silex to display a UI for the user to edit the component:

{
  "autofocus": "boolean",
  "disabled": "boolean",
  "multiple": "boolean",
  "required": "boolean",
  "form": "string",
  "name": "string",
  "size": "number",
  "onchange": "action",
  "data": "array"
}

the UI to edit data and arrays in general would be a multiline textarea, and the user would have to look at the docs to fill it correctly, e.g. in the previous case of a drop down list

item1
item2
item3

or to have more control over the items

{"label": "item test 1", "selected": true, "value": "item1"}
{"label": "item test 1", "value": "item1"}
{"label": "item test 1", "value": "item1"}

this data about the component would be stored in Silex config like this:

"components" : { [ 
  { "name": "dropdown", "template": "<select>...", "extends": "", "properties": {"disabled": "boolean", ...} 
  { "name": "button", "template": "<button>...", "extends": "text", "properties": {"disabled": "boolean", ...} 
  ...
} ]

finally, there should be a new setting to let the user choose components theme

[lexoyo]

Current status of this project: http://lexoyo.me/Prodotype/pub/ Please test and tell me what you understand

[lexoyo]

Nice resource which @budislav sent me: 10 Material Design Frameworks

I like bootswatch and its themes very much

I am working on this matter a lot these days (see the progress here, outside of Silex for now)

[budislav]

Bootswatch is very nice for prototyping! Some of these frameworks are very good for Silex UI!

I tried Prodotype editor and it looks promising but I would separate design (style) from component settings. http://enjoycss.com/ is what I mean about style. In component settings you should be able to change where it should be visible, form settings, name, action,... everything else about particular component that can be changed .

But on prototyping tool I don't think like pencil project http://pencil.evolus.vn/Next.html. In pencil you can add all of those elements but you can not create web page with them. So we don't need that kind of prototyping tool. We need something like https://webflow.com/, so we can design our website directly from editor with export html and css of finished product.

[lexoyo]

Hi

I have worked this issue for a quite long time now, and here is the first draft of Silex components (see the "+" menu)

The components are buggy and not very useful for now, but the editor and the way you add them is pretty much it, so feedback is welcome on the UI

[lexoyo]

Test it on http://preprod.silex.me/ plz

[lexoyo]

[budislav]

Nice! @lexoyo Please just do one more thing and this will be a new level :)

Make two tabs in right side panel on the top with their names: style and settings. Group those element (component) settings that show on the bottom when you activate it into settings tab and their style settings from above into style tab (SEO, Visible on and Link settings must be under settings tab).

[lexoyo]

nice! thank you @budislav

[lexoyo]

for your information, I am still working on this I will do what @budislav said with style/settings tabs

But I feel like the form components are not really useful nor easy to manipulate... so I started with these components

• hero section
• dynamic lists
• animated containers
• slideshow

Note that the dynamic lists make it possible to display content from these CMS which are back ends with no front ends... It will also display content from github

• https://buttercms.com/
• https://elemeno.io/
• https://prismic.io/

if someone has time to test this, let me know

[lexoyo]

@budislav did you see that this is live for a while now Waiting for developers to add more components, see editor.silex.me

[budislav]

@lexoyo I now this for a while now, but on editor.silex.me I see only five components but on image above form inputs ect. Is that some bug or you removed all of that? It would be very good to have all html elements like input and button so we can make our contact form with more freedom, so everything can be editable. Drag and drop would be very handy like in grapejs http://grapesjs.com/demo.html

[budislav]

I just found this open source project, maybe can be helpful. http://css3.mikeplate.com/ https://github.com/mikeplate/CSS3-Playground

and some others those aren't open but useful generators: http://html-css-js.com/css/generator/ https://webcode.tools/css-generator

[lexoyo]

Hey @budislav nice to have you around :)

@lexoyo I now this for a while now, but on editor.silex.me I see only five components but on image above form inputs ect. Is that some bug or you removed all of that? It would be very good to have all html elements like input and button so we can make our contact form with more freedom, so everything can be editable. Drag and drop would be very handy like in grapejs http://grapesjs.com/demo.html

Yes I removed it, because it was very hard to do everything by hand, it is too low level according to me :-/ Also it was hard to maintain that many components all by myself, I was hoping to find some help of people who know just a little programming to help with this, and they would decide which components to provide They are still in Silex code base though, waiting for more to happen https://github.com/silexlabs/Silex/tree/develop/src/components

I just found this open source project, maybe can be helpful. http://css3.mikeplate.com/ https://github.com/mikeplate/CSS3-Playground and some others those aren't open but useful generators: http://html-css-js.com/css/generator/ https://webcode.tools/css-generator

I especially like http://html-css-js.com/css/generator/font/ I am working on the "text style manager" so it is a really good tip thx!

[budislav]

@lexoyo I am still on this ship :) Trying to figuring out what is the problem why there is so many css generators but none of them is not open and everyone of them doing the same thing, they have the same purpose. The world needs only one good thing that can do everything.

Yes I removed it, because it was very hard to do everything by hand, it is too low level according to me :-/ Also it was hard to maintain that many components all by myself, I was hoping to find some help of people who know just a little programming to help with this, and they would decide which components to provide They are still in Silex code base though, waiting for more to happen https://github.com/silexlabs/Silex/tree/develop/src/components

Well I need to start programming obviously.

I think you did a good thing there! I would suggest to focus on one by one thing so it works and look on the right way so that every component be completely editable. But this is impossible if we don't have previous important things done. So I think that style manager should be in focus right now. Style manager should allow us to edit the look of everything on the canvas (web page).

I especially like http://html-css-js.com/css/generator/font/ I am working on the "text style manager" so it is a really good tip thx!

Nice, does that manager is going to be placed on the right side panel under style tab? This text style manager should be exactly what I am talking about.

Please open an issue for every component of style editor so you can post screenshots, explanation, work on progress, all information. Also we can report bugs or ideas for that component there so it would be easy for everyone. Just put [SE] in front of name of component in title. SE would stands for style editor. Issue titles: [SE] Text (text style manager you are working on) [SE] Background [SE] Size, position, offset [SE] Text shadow [SE] Box shadow [SE] Border and radius [SE] Transition [SE] Transform Open all issues at once never mind if you are working only on one at this time. We can post ideas there. Just reserve first post, that will be for you for updates you make on that component.

[lexoyo]

Nice, does that manager is going to be placed on the right side panel under style tab?

Yes exactly

Concerning the issues, here are the high level things I'm working on https://github.com/silexlabs/Silex/milestones

And the text style editor is in "better text" and "simple style editor" https://github.com/silexlabs/Silex/issues/52