Share code with Silex

[lexoyo]

Hi @artf

Great project ! It is a different approach than Silex which is all about absolute positioning, but it has a common ground. As the main developer of Silex, I believe we could get organized and share some code! :)

I'm thinking Silex could use your great Style Manager if we make it an npm module. And if you want I could help you integrate Cloud Explorer to manage files like or you can use Responsize if you want your users to preview the page (if you are interested, then I should add the ability to give it the HTML instead of an URL)

Do not hesitate if you see something we can share :)

[budislav]

I think Grapesjs and Silex should be merged into one project. Both of projects have a common ground and same goals. I think there is no space on the world for two same open source projects. World need only one most powerful open source web designer tool, like Blender in 3d world.

For example you have five digital audio workstation (ardour, lmms, rosengarden, muse, qtractor). Every of them have something nice but none of them have all necessary things and never will. Don't make the same mistake. Krita and Gimp is also one of many examples. I am always for bonding of strength and this two projects are excellent chance for this.

@artf I proposed new mockup for silex based on this system. http://enjoycss.com/59e/1
I see Grapesjs looks so much as Webflow which I think is the best web designer tool today (the most complete and smartest). Visit a page from bellow to see what we want to accomplish. It is the same thing as Grapesjs and Webflow. So why not join forces to achieve the same goal.

silexlabs/Silex#387

[artf]

Hi @lexoyo and @budislav thanks for your advice. Silex is awesome, I've never heard about it, love how easily you can design stuff, unfortunately absolute approach doesn't fit very well with dynamic contents :(

Decouple modules, like Style Manager, from GrapesJS would be definitely a goal but not now as the project is pretty far from being complete. I do my best, at the expense of my spare time, to bring it forward and will take care about it, so we could merge best of our projects :)

Anyway if you already want to check my code and there is something not clear don't hesitate to ask me

[lexoyo]

👍

Indeed we have the absolute vs positioned approaches which are 2 important choices. At one point Silex will offer lists and containers with positioned content and a flow, and grapejs will probably have a way to have absolute positioning too

Meanwhile it is clear to me that free software needs both :)

[budislav]

@lexoyo @artf
This flexbox system is more than awesome. Someone really need to implement this.
https://flexbox.webflow.com/?utm_campaign=flexlaunch&utm_source=newsletter&utm_medium=email

[lexoyo]

@budislav this is a really nice feature
Do you think they will do something to support older browsers? (see the browser compatibility of flexbox on mozilla's docs)

[lexoyo]

@artf I started to work on a new version of the stage component for Silex
https://github.com/lexoyo/stage

[budislav]

@lexoyo I think they will not. Personally I don't care about those users who use older browsers. Everyone on the web should need to have up to date web browser. Also every browser today have automatic update so that problem is gone. The progress of mankind should not stop because of older browsers and these users if they exist.

[artf]

@budislav wow that's cool!!!
I would definitely try to add it to the demo, maybe not so sophisticated but something similar.
Anyway I'm totaly agree with you about older browsers.
@lexoyo will keep eye on it ;)

[artf]

Not perfect but seems to work http://grapesjs.com/demo.html

[budislav]

@artf wow, this escalated quickly :) Nice work!!

[lexoyo]

That is great!

Stage is made to support drag/drop/resize elements in the flow as well as positioned in absolute
https://github.com/lexoyo/stage

Also I will make a live demo of Silex in a few hours
https://www.silexlabs.org/event/silex-webinar-1-eng/

And here is the crowd funding campaign which will start in a few days
http://crowdfunding.silex.me/

That would be great to have you there and please let people know about it

Thx!

[artf]

@lexoyo 'in the flow as well as positioned in absolute' this is hot :)
Anyway why not pick one of already well-known crowdfunding platform? I think you'll get more visibility there

[lexoyo]

@lexoyo 'in the flow as well as positioned in absolute' this is hot :)

like sex and coffe, that's why it's good 😍
I'm working on it but a proof of concept is already running
If absolutely positioned it just moves the element, otherwise it make it absolute while dragging and put it back in the flow on drop

the only thing I'm realizing now is that I'll need to handle click on the body and not use event.target to know where it clicks because I'll probably want to display a bootstrap-style grid on top of the stage in some cases... What do you think?

Anyway why not pick one of already well-known crowdfunding platform? I think you'll get more visibility there

it was only a teasing website to get mail adresses, but now it is on ulule:
http://crowdfunding.silex.me/

[artf]

@lexoyo

If absolutely positioned it just moves the element, otherwise it make it absolute while dragging and put it back in the flow on drop

Yeah, I was already thinking about something similar :)

the only thing I'm realizing now is that I'll need to handle click on the body and not use event.target to know where it clicks because I'll probably want to display a bootstrap-style grid on top of the stage in some cases... What do you think?

What do you mean with 'display a bootstrap-style grid on top'? Something like a grid for snapping?
Anyway how could you catch clicked element without event.target? I use Event Delegation to speed up performances with many nested components inside and without e.target it seems impossible for me

[lexoyo]

the only thing I'm realizing now is that I'll need to handle click on the body and not use event.target to know where it clicks because I'll probably want to display a bootstrap-style grid on top of the stage in some cases... What do you think?

What do you mean with 'display a bootstrap-style grid on top'? Something like a grid for snapping?
Anyway how could you catch clicked element without event.target? I use Event Delegation to speed up performances with many nested components inside and without e.target it seems impossible for me

Maybe it is too early to think about it... But yes, at one point we will have to display things on top of the stage, like a bootstrap grid (like this @budislav ;) ?):

Then there will be no other way than computing the target with something like document.elementsFromPoint(x, y)
https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint

Anyway feel free to make issues on the stage project, with features you would like or constructive critics on the code, I will definitely appreciate it!
https://github.com/lexoyo/stage/

[budislav]

Maybe it is too early to think about it... But yes, at one point we will have to display things on top of the stage, like a bootstrap grid (like this @budislav ;) ?):

Nice! Absolutely!

[artf]

@lexoyo
Didn't know about elementsFromPoint method, pretty nice, although it's an experimental feature.

I would suggest you to simply use 'pointer-events: none;' to detach events so you should be able to interact with elements below that layer.

[lexoyo]

Nice! 'pointer-events: none;' is better indeed! 👍

[lexoyo]

I hope you don't feel like I spam you both with my "stage" component... Maybe I should stop here, but I would love someone to review my code as I just created this PR to add the "draw region" feature.

Also a "strategic" question here about wether the UI should live in the same DOM as the elements.

[budislav]

I don't mind. I like to see all news about the project, although I do not understand so many technical terms.

[artf]

@lexoyo absolutely not, I'd like to have more time to get in touch with other stuff

[lexoyo]

👍 great spirit :D
I have had new ideas to discuss, I will put them soon in the issues of stage

[Immortalin]

It's amazing how advanced both tools are. With a bit more polish, and perhaps bundling them into a desktop tool with electron, you guys could give Pinegrow and Macaw some serious competition! :D

[artf]

thanks @Immortalin hope so :)
Anyway soon I'll release a version with some new feature, especially an improvement to reduce configurations.

[Immortalin]

https://github.com/voidlabs/mosaico

[artf]

@Immortalin nice tool, thanks.
Anyway, I pushed some new updates to the main demo, hope to document it soon :)

[WebCrew]

@artf I`m lookinf forward to the new update. By the way, I like Your grapejs a lot. Keep up the good work and thank You for that nice piece of software.

[artf]

thanks @WebCrew It means a lot for me and I really appreciate it.
Unfortunately I have less time for GrapesJS in this period but hope to back to work soon

[WebCrew]

Time is always a issue with which we have to deal with. 😂 I wish you would
find some other githubers to help with the development. Your graphejs is in
many ways easier to handle as some of the other competitors out there. I also like your whole layout a lot more.
I try to get it working with HumHub CMS as a backend template editor module.
I wish you good luck and much success. 🙌😊

Am 03.10.2016 15:01 schrieb "Artur Arseniev" notifications@github.com:

thanks @WebCrew https://github.com/WebCrew It means a lot for me and I
really appreciate it.
Unfortunately I have less time for GrapesJS in this period but hope to
back to work soon

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#13 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AMYm0yoY9BMeZvG2kPKsBxEbAAo4CXUlks5qwPy4gaJpZM4Hz-uB
.

[artf]

Thanks again @WebCrew I'm very glad you like it :)

[Immortalin]

@WebCrew I have started a project turning grapesjs into a standalone editor using electron: https://github.com/Immortalin/Merlot

[artf]

@Immortalin niiiiice :)
I also like the name 😂

[Immortalin]

@artf you might want to take a look at contentbuilder.js and this thread

[Immortalin]

And also the Odoo builder (AGPL)

[artf]

thanks @Immortalin I had never heard about contentbuilder.js, seems clean and easy to use

[Immortalin]

@artf https://github.com/abdullah/plekan

[Immortalin]

@artf https://github.com/tandemcode/tandem

[artf]

Different targets but really impressive work, thanks @Immortalin

[Immortalin]

@artf https://huu.la/

[Immortalin]

@artf https://microweber.com

[Immortalin]

@artf https://github.com/givanz/VvvebJs

[sfkazmi]

@artf Did you implemented absolute positioning in grapes??

[Immortalin]

@artf congrats on shipping grapesdrop! 😄

[artf]

Thanks @Immortalin I hope it will bring more improvements on GrapesJS itself :)

[lexoyo]

hello all

really great resources in this list

i still find it a bit sad that no one is collaborating... all these projects are still not sharing components, and silex is the worst i know. I have made efforts to split it so that we can collaborate

also i though about using grapejs or Vvveb to make a completely new version of silex, keeping the page management, the publication to jekyll and the cloud services (dropbox/sftp/githun/nextcloud). it would be great but the fact that all these website builder frameworks are very "close to the css" is against Silex philosophy which lets you start like with simple drag/drop (absolute) and then go to a text editor progressively

the effort of splitting silex so that we could collaborate has begun with this thread in 2016, and here are the projects we have made from scratch and then integrated in silex (@JbIPS, @clemos and me mostly, with UX help from @budislav, @ceubri and @suddenheroes)

• Unifile, cloud storage services through a simple web API
• Cloud Explorer, online file browser
• Stage, a stage component to add a drag and drop to your project
• Resonsize, preview websites at different sizes
• Prodotype, framework to generate ReactJS UIs for your components
• There is also an alpha, still in Silex for now of a utility to publish static websites to several hosting such as (for now) github pages and https://indie.host/

open source contributors let's pull it together ! if you see any use for these components in your project, please ask for a tour and let's work together ;)

Comments & ideas always welcome
🥇 🥇 🥇 🥇

[artf]

Hi @lexoyo I'm glad to see you here again, honestly, I totally understand your point of view and even the disappointment in regard to our collaboration. IMHO we share some points of a common goal but we lead 2 different kinds of products. Silex is still an application to build websites, GrapesJS is a framework to build generic web builders (websites, newsletters, etc.).
I've created quite isolated helpers (eg. Dragger, Resizer) that I could easily publish in another repository and let them live their own life, but unfortunately, this will expose them in a totally different context/domain of use and sooner or later GrapesJS will bring a lot of not necessary functionality. So for me it's really important to keep the framework as lean as possible and if I need to bring external code it should be only functional, without any kind of UI.

BTW I'm gonna close this issue because there is no need to keep it open.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.