Jump to content
theo

Preview: PageGrid or so...

Recommended Posts

Hi @theo,

WOW. Surely will give it a try. Nice job.

By the way, why not update the first post so that others can find the package easier??

Gideon

  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, Gideon So said:

WOW. Surely will give it a try. Nice job.

By the way, why not update the first post so that others can find the package easier??

 

OK, done.

Thank you.

  • Like 2

Share this post


Link to post
Share on other sites

Hello

I am still working hard 😉 and I'm trying to turn the prototype into something reliable and usable.

Many changes behind the scenes and some additional features.

I will show a screencast soon.

Thank you.

bs4grid.thumb.png.7e257125d535d463460f942c4e1c02f5.png

 

  • Like 5

Share this post


Link to post
Share on other sites

@jmartsch: Thank you. Not sure. It's a matter of taste. I like it this way because I can quickly change sizes and I don't have to use the keyboard.

  • Like 1

Share this post


Link to post
Share on other sites

Time for a little update. 😀

There are many changes again.

Most visible: More Ajax, more Drag&Drop, more Wysiwyg.

Real containers (Tree hierarchy) instead of "nested groups". Rows are also  containers now.

In this little video, I will show you how to layout a responsive page from scratch without writing a line of code.

http://theowp.bplaced.net/upload/reptile.html

This system is not for absolute noobs. You need to have an idea about how responsive web pages and Bootstrap work.

But then one can be really fast I think.

Still a long way to go, but I hope you like the idea.

Thank you.

 

 

  • Like 7

Share this post


Link to post
Share on other sites

Looks very nice. But the UI when you hover over an item could be a little more in the style of PW (UIkit)

It would be good if you could support plugins for the grid builder, so we can use another framework than Bootstrap.

Share this post


Link to post
Share on other sites
3 hours ago, jmartsch said:

Looks very nice. But the UI when you hover over an item could be a little more in the style of PW (UIkit)

Not sure what you mean. The Font Awesome icons?

Quote

It would be good if you could support plugins for the grid builder, so we can use another framework than Bootstrap.

Not sure if this is possible or sensible. Not on my priority list atm.

Thank you.

Share this post


Link to post
Share on other sites

Small update video below.

There are again many changes behind the scenes.

Multiple instances of "Gridbuilder" can now exist on the same page.

More "in-memory-actions" (JS) means less need to press the save button. But normal PW templates are still the base of everything.

Images can be dropped directly onto a grid_image template. See video.

http://theowp.bplaced.net/upload/pics.html

Thank you.

  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites

This looks very nice! 
I was working on a similar thing using the css grid specification with page table extended as a pagebuilder.
But your approach is way superior because it supports inline editing, resize and better drag and drop (thought, this could still be improved, as it sometimes don't work as expected). I think this could be a very nice addition to PW, and something a would use a lot. 

Anyway it would be super awesome if you could release this as a module at some point!
I would offer to adapt this for css grid, as I think that would be a nice option for some people and has more possibilities than bootstrap.
Iam a frontend developer and designer so this might be out of my abilities, but I would try 🙂

Share this post


Link to post
Share on other sites
2 hours ago, jploch said:

This looks very nice!

Thank you. 🙂

 

2 hours ago, jploch said:

(thought, this could still be improved, as it sometimes don't work as expected)

I've changed that completely.
Now, only a placeholder icon is moved around, not the bootstrap column (which had strange visual effects).
Like this, you can also move columns in or out of containers.
See new video here: http://theowp.bplaced.net/upload/novtest.html

 

2 hours ago, jploch said:

I would offer to adapt this for css grid, as I think that would be a nice option for some people and has more possibilities than bootstrap.
 

Not sure if possible without a complete rewrite. This is very bootstrap-centric.

I know that everyone wants a different CSS framework, but bootstrap is not just any product, it is "the most used open-source framework in the world."

https://www.keycdn.com/blog/front-end-frameworks

So I don't feel that bad, with my decision. 😉

  • Like 3

Share this post


Link to post
Share on other sites
2 minutes ago, theo said:

I know that everyone wants a different CSS framework, but bootstrap is not just any product, it is "the most used open-source framework in the world."

Iam generally not a huge fan of css frameworks, because they often feel bloated, so I usually code the complete css myself.
With CSS grid Iam not talking about a framework but the CSS grid specification.
Jen Simmons from Mozilla has some great videos explaining the benefits of using it for layouts.

Anyway I would also be very happy with the bootstrap version you made!
Do you have any plans for releasing this as a module? Or maybe even a release date? 🙂

Share this post


Link to post
Share on other sites
4 minutes ago, jploch said:

Iam generally not a huge fan of css frameworks, because they often feel bloated, so I usually code the complete css myself.
With CSS grid Iam not talking about a framework but the CSS grid specification.
Jen Simmons from Mozilla has some great videos explaining the benefits of using it for layouts.

Yes I know, but afaik, this has not much in common with the way bootstrap works, so I don't think my "Gridbuilder" is a good starting point for implementing this.

 

8 minutes ago, jploch said:

Anyway I would also be very happy with the bootstrap version you made!
Do you have any plans for releasing this as a module? Or maybe even a release date? 🙂

I don't know if it will ever be a single module.

I'd call it a "setup" because it consists of several modules, plus a basic bootstrap setup using webpack (for front and backend) plus several templates etc.

Release date? Not sure, I'm moving soon, so I have a lot to do.. 😉

  • Like 1

Share this post


Link to post
Share on other sites
36 minutes ago, theo said:

This looks very cool!!

12 minutes ago, theo said:

I'd call it a "setup" because it consists of several modules, plus a basic bootstrap setup using webpack (for front and backend) plus several templates etc.

If you find some time, it would be nice if you could share your new version (the one shown in the video).
I would also be happy with a duplicator/site profile to install.
 

17 minutes ago, theo said:

Release date? Not sure, I'm moving soon, so I have a lot to do.. 😉

No rush. in which city do you move? You are also german right?

Share this post


Link to post
Share on other sites
34 minutes ago, jploch said:

If you find some time, it would be nice if you could share your new version (the one shown in the video).
I would also be happy with a duplicator/site profile to install.

Don't hold your breath! 😉

It's always "work in progress". I have no idea when It will reach the next "stable" point.

 

36 minutes ago, jploch said:

No rush. in which city do you move? You are also german right?

I'm swiss and I move within the city of lucerne.

Share this post


Link to post
Share on other sites
22 minutes ago, theo said:

It's always "work in progress". I have no idea when It will reach the next "stable" point.

Take your time. Maybe release it as a commercial profile/module in the future.
I wouldn't mind to pay for it, at a reasonable price
 

22 minutes ago, theo said:

I'm swiss and I move within the city of lucerne.

Cool! Swiss graphic design kind of invented the idea of a grid system 🙂

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...