Comments (47)
@artf congrats on shipping grapesdrop! 😄
from grapesjs.
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
from grapesjs.
@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
from grapesjs.
@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.
from grapesjs.
@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.
from grapesjs.
https://github.com/voidlabs/mosaico
from grapesjs.
@WebCrew I have started a project turning grapesjs
into a standalone editor using electron: https://github.com/Immortalin/Merlot
from grapesjs.
@artf you might want to take a look at contentbuilder.js and this thread
from grapesjs.
@artf https://github.com/tandemcode/tandem
from grapesjs.
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
from grapesjs.
👍
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 :)
from grapesjs.
@artf wow, this escalated quickly :) Nice work!!
from grapesjs.
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!
from grapesjs.
thanks @Immortalin hope so :)
Anyway soon I'll release a version with some new feature, especially an improvement to reduce configurations.
from grapesjs.
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
from grapesjs.
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" [email protected]:
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
.
from grapesjs.
@artf https://github.com/abdullah/plekan
from grapesjs.
from grapesjs.
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.
from grapesjs.
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.
from grapesjs.
@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)
from grapesjs.
@artf I started to work on a new version of the stage component for Silex
https://github.com/lexoyo/stage
from grapesjs.
@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 ;)
from grapesjs.
Not perfect but seems to work http://grapesjs.com/demo.html
from grapesjs.
@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
from grapesjs.
@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/
from grapesjs.
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
from grapesjs.
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/
from grapesjs.
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!
from grapesjs.
Nice! 'pointer-events: none;' is better indeed! 👍
from grapesjs.
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.
from grapesjs.
I don't mind. I like to see all news about the project, although I do not understand so many technical terms.
from grapesjs.
@lexoyo absolutely not, I'd like to have more time to get in touch with other stuff
from grapesjs.
👍 great spirit :D
I have had new ideas to discuss, I will put them soon in the issues of stage
from grapesjs.
@Immortalin nice tool, thanks.
Anyway, I pushed some new updates to the main demo, hope to document it soon :)
from grapesjs.
@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.
from grapesjs.
Thanks again @WebCrew I'm very glad you like it :)
from grapesjs.
@Immortalin niiiiice :)
I also like the name 😂
from grapesjs.
And also the Odoo builder (AGPL)
from grapesjs.
thanks @Immortalin I had never heard about contentbuilder.js, seems clean and easy to use
from grapesjs.
Different targets but really impressive work, thanks @Immortalin
from grapesjs.
from grapesjs.
@artf https://github.com/givanz/VvvebJs
from grapesjs.
@artf Did you implemented absolute positioning in grapes??
from grapesjs.
Thanks @Immortalin I hope it will bring more improvements on GrapesJS itself :)
from grapesjs.
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
🥇 🥇 🥇 🥇
from grapesjs.
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.
from grapesjs.
Related Issues (20)
- BUG: = HOT 1
- BUG: Color picker offset relative to editor container
- BUG: Component tools misalign when the editor is resized HOT 5
- BUG: Ability to change all margin, padding etc properties together HOT 1
- BUG: broken link in the API docs
- BUG: Possible upgrade path issue where 'textnode' is now called 'wrapper' from 0.18 -> latest HOT 1
- BUG: Propagating component defaults can break layers when child comments are introduced HOT 1
- BUG: Whitespace handling in inline elements
- BUG: editing/replacing the text inside of a link HOT 8
- BUG: Wrong Type in ColorPickerOptions Interface
- BUG: Building on Windows 10+ HOT 6
- BUG: XSS vulnerability in iframe attribute src HOT 8
- BUG: ColorPicker Offset incorrect when Panels are outside of Editor Container HOT 4
- BUG: The link titles are not editable HOT 2
- BUG: Wrong Type for "content" property in BlockProperties
- BUG: component.get('traits').clone() is no longer available. HOT 1
- BUG: Outlines persist in preview mode HOT 2
- BUG: CSS properties default values HOT 2
- BUG: Editing button text no longer works on 0.21.9 HOT 1
- BUG: How to add a addtional custom block manager like tab or section like block manager and style manager ,and add some blocks it to it? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from grapesjs.