[WIP] RockMockup - create mockups easily and fast

[bernhard]

Today I had an idea and wanted to try out if that could work... A little later I had a little module as a working prototype and I want to share it with you to start some discussion:

 

Idea:

The idea is to have a simple interface that provides some helpers for copying/modifying/deleting elements in any HTML page. For now it is bundled to processwire but generally it would be possible to use this tool combined with any HTML that you provide.

 

Why?

I think that mockups can really speed up development and - maybe even more important - can also serve as a tool for better communication between us and our clients. There are several tools for this usecase but all that I know (like https://pencil.evolus.vn/ ) have a totally different look and feel than the final software has. So I thought why not use the look and feel of ProcessWire when developing something for ProcessWire?

I've built some simple mockups sometimes with my browsers devtools and this works - but it is not really fast (and therefore not fun). Thats why I started this module today.

 

Usage:

After installation the module monitors your mouse and highlights all hovered elements inside the #main div. Then you have several keyboard shortcuts:

c --> copy element
r --> remove element

arrow left --> previous sibling
arrow up --> parent element
arrow right --> next sibling
arrow down --> first child

e --> edit content with ckeditor
ctrl + enter --> save edit

Quite selfexplaining, isn't it?

 

Roadmap/Vision:

• Save/Load
  For now the module does not save anything. You can modify content as you like and then do a screenshot, but of course it would be great to save your mockups somewhere. And continue work afterwards.
   
• Undo/Redo
   
• UI-Element Library
  It would be great to have a sidebar with common pw elements like inputfields and buttons to add via click to your mockup.
   
• Copy feature from other sites
  For example you could copy markup from any other website (like the UIKit docs) and paste that markup to your mockup.
  Or you could open another site in the pw backend that has UI elements that are similar to your needs and just copy them over.
   
• Use it with any HTML
  The module could be packed into a single JS file and then be used to modify any HTML content (like themes from themeforest or the like). This would be an awesome tool for creating quick mockups of any page, moving around elements, copying things, removing items, changing texts etc.

 

Download:

You can download the module here: https://gitlab.com/baumrock/RockMockup (have a look at the code, it's really really simple and everybody is welcome to contribute!)

 

Use ProcessWire Kickstart for a One-Click-Installation:

<?php
$password = $this->randomPassword();
return [
  'pw' =>'https://github.com/processwire/processwire/archive/dev.zip',
  'profile' => 'site-default',
  
  'settings' => [
    'timezone' => 368, // vienna
    
    'dbName' => 'yourdbname',
    'dbUser' => 'root',
    'dbPass' => $this->randomPassword(),
    
    'admin_name' => 'youradminurl',
    'username' => 'youradminusername',
    'userpass' => $password,
    'userpass_confirm' => $password,

    //'dbTablesAction' => 'remove', // overwrite existing tables?
  ],
  
  'recipes' => [
    function() {
      $this->msg('Installing RockMockup...');
      $this->installModule('RockMockup', 'https://gitlab.com/baumrock/RockMockup/repository/master/archive.zip');
      $this->succ('RockMockup installation completed');
    },
  ],
];

 

What do you think? Would you use such a tool? Do you maybe know any existing tools that do a similar thing?

[elabx]

On 1/27/2018 at 8:13 AM, bernhard said:

What do you think? Would you use such a tool? Do you maybe know any existing tools that do a similar thing?

I really like this!! I just thought of using this module in the following case: I have some big configuration screens (in page edit screen) that I want to reorganize, so I thought of doing it with this mockup tool prior to actually editing fieldset/fielsettabs setup, get user to approve it and write the migration script (this same template configuration migrates to around 20 or so other sites).

I also use PW's admin as dashboard for different types of applications (and try to use the API as much as I can) so mocking up all this stuff would be super useful for me, and the roadmap does seem too look like a perfect fit for the type of activity I do. (I was writing a big wishlist until i realised it was all on the roadmap :D)

 

[bernhard]

At the moment I have loads of other things to do that have priority, sorry. Maybe if you implemented the save/open feature it would already be usable? Should not be that hard..

[elabx]

3 hours ago, bernhard said:

At the moment I have loads of other things to do that have priority, sorry. Maybe if you implemented the save/open feature it would already be usable? Should not be that hard..

Yes pal don't even say sorry, I wasn't really asking for features, rather I was just trying to give my opinion about the usage and the overall project  I guess the word wishlist was misleading haha. 

[bernhard]

seems that google stole my idea: https://github.com/GoogleChromeLabs/ProjectVisBug thx for sharing @szabesz and  @Robin S