Skip to content

Commit 025b448

Browse files
alxpezalxpez
committed
initial commit
0 parents  commit 025b448

28 files changed

+257
-0
lines changed

‎.nojekyll

Whitespace-only changes.

‎README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# About vuegg
2+
3+
Scaffold vuejs projects by dragging-dropping components directly into the visual editor and moving-resizing them to your choice. Vuegg leverages the creation of the pages and routes of your app/website, eases the styling work and helps to achieve a rapid-prototyping workflow (... at least in theory).
4+
5+
The aim of this project is to merge designing and prototyping into one single process. Whenever you're happy with what you see on the screen, just get your code.
6+
7+
</br>
8+
9+
<img style="border: 1px solid #e0e0e0; border-radius: 5px" src="/static/editor.png">

‎_coverpage.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!-- _coverpage.md -->
2+
3+
<br/>
4+
5+
<p align="center">
6+
<a href="https://vuegg.now.sh" target="_blank">
7+
<img width="250" src="https://vuegg.now.sh/static/vuegg-fam.svg">
8+
</a>
9+
</p>
10+
11+
# vuegg
12+
13+
> vuejs GUI generator
14+
15+
* [ **Mockups** and **code** in one go! ]
16+
17+
18+
[Get Started](#about-vuegg)
19+
[Vuegg App ✏](https://vuegg.now.sh)
20+
21+
![color](#eeeeee)

‎_sidebar.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!-- docs/_sidebar.md -->
2+
3+
<p align="center">
4+
<a href="https://vuegg.now.sh" target="_blank">
5+
<img width="250" src="https://vuegg.now.sh/static/vuegg-fam.svg">
6+
</a>
7+
</p>
8+
9+
* [About vuegg](about.md)
10+
* [Features](features.md)
11+
* [Local setup](setup.md)
12+
* [Contribute](contribute.md)
13+
* [Donate](donate.md)
14+
15+
![logo](static/vuegg-fam.svg)

‎about.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# About vuegg
2+
3+
Scaffold vuejs projects by dragging-dropping components directly into the visual editor and moving-resizing them to your choice. Vuegg leverages the creation of the pages and routes of your app/website, eases the styling work and helps to achieve a rapid-prototyping workflow (... at least in theory).
4+
5+
The aim of this project is to merge designing and prototyping into one single process. Whenever you're happy with what you see on the screen, just get your code.
6+
7+
</br>
8+
9+
<img style="border: 1px solid #e0e0e0; border-radius: 5px" src="/static/editor.png">

‎contribute.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Contribute
2+
3+
Vuegg is a concept project (and work-in-progress too), feel free to fork it or contribute however possible. You've got a feature idea? Open an [issue](https://github.com/vuegg/vuegg/issues)! Are you up to the task of implementing it? Open a [PR](https://github.com/vuegg/vuegg/pulls)!
4+
5+
Help me make vuegg grow!
6+
7+
</br>
8+
9+
### Current state & history
10+
11+
The project was born as a sandbox for me to get started on the [vue](https://github.com/vuejs/vue) world, in fact its ~~un~~original name was vuexample (*very unique*, I thought at the time).
12+
13+
Not long after it became a personal challenge, I went on adding new features (mainly things I feel like learning) and gave it a proper name (and even a *face*). Eventually I considered it to be ready for the open-source community... and here is *vuegg*, my pet project.

‎donate.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Donate
2+
3+
Do you like vuegg? :hatching_chick:
4+
5+
As for today, this project is developed and maintained with :heart: by me ([@alxpez](https://github.com/alxpez)), on my spare time, after work hours and during homie weekends. There's still much work to do and ideas waiting to come afloat.
6+
7+
Contribution is the most desirable help for keeping up the project, but for those with no much time in hands that still want contribute...
8+
9+
<a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/alxpez">
10+
<img src="https://www.buymeacoffee.com/assets/img/BMC-btn-logo.svg" alt="Buy me a coffee">
11+
<span style="margin-left:5px">Wanna buy me a coffee ?</span>
12+
</a>
13+
14+
Your donation will help me to stay awake during those hours I should be sleeping.

‎features.md

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Features
2+
---
3+
4+
## Current Features
5+
6+
* Mockup / prototype by drag'n'drop components and move/resize them
7+
* Support for standard Mouse and Keyboard combinations
8+
* Responsive preview (phone, tablet, web)
9+
* Basic set of HTML5 elements
10+
* Material design components ([vue-mdc-adapter](https://github.com/stasson/vue-mdc-adapter))
11+
* [Vuejs](https://github.com/vuejs/vue) sources generation (download .zip)
12+
* Connect with GitHub (save/load vuegg projects)
13+
* Local persistence to save the work in progress
14+
* ... more to come with time
15+
16+
</br>
17+
18+
## Keyboard Shortcuts
19+
20+
### Selection
21+
* **Mouse down + Drag + Mouse up**: Draw a selection area
22+
* **Ctrl [or Meta] + Click**: Select outer-most item, or parent container
23+
* **Ctrl [or Meta] + Shift + Click**: Add [outer-most] item to selection
24+
* **Esc**: Clear selection
25+
26+
### Undo / Redo
27+
* **Ctrl [or Meta] + Z**: Undo last action
28+
* **Ctrl [or Meta] + Shift + Z**: Redo last action
29+
30+
### Copy / Cut / paste
31+
* **Ctrl [or Meta] + C**: Copy selection
32+
* **Ctrl [or Meta] + X**: Cut selection
33+
* **Ctrl [or Meta] + V**: paste selection
34+
35+
### Delete
36+
* **Delete [or Backspace]**: Deletes selection
37+
38+
</br>
39+
40+
## Roadmap
41+
42+
Off the top of my head, I foresee the following features to be developed for the next releases:
43+
44+
- [ ] Hold shift to maintain aspect ratio on manual resize
45+
- [ ] Ability to zoom-in / zoom-out in the editor
46+
- [ ] Allow the insertion of raw CSS rules (expert mode)
47+
- [ ] Identify possible risks
48+
- [ ] Add extra styles controls
49+
- [ ] BoxShadow
50+
- [ ] Overflow
51+
- [ ] TextOverflow
52+
- [ ] Manage creation/edition of custom components
53+
- [ ] Transition to custom component (group/ungroup)
54+
- [ ] Implement custom component editor view
55+
- [ ] Implement tree navigator to visualize page structure

‎index.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vuegg - vuejs GUI generator</title>
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7+
<meta name="description" content="vuejs GUI generator">
8+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
9+
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
10+
<link rel="stylesheet" href="/static/main.css">
11+
<link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet">
12+
13+
<!-- fav config -->
14+
<meta name="apple-mobile-web-app-title" content="vuegg">
15+
<meta name="application-name" content="vuegg">
16+
<meta name="theme-color" content="#ffffff">
17+
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
18+
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
19+
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
20+
<link rel="manifest" href="/static/manifest.json">
21+
<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#2b6a73">
22+
<link rel="shortcut icon" href="/static/favicon.ico">
23+
24+
</head>
25+
<body>
26+
<div id="app"></div>
27+
<script>
28+
window.$docsify = {
29+
name: 'vuegg',
30+
repo: 'vuegg/vuegg',
31+
coverpage: true,
32+
auto2top: true,
33+
subMaxLevel: 2,
34+
loadSidebar: true,
35+
themeColor: '#ea493f'
36+
}
37+
</script>
38+
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
39+
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
40+
</body>
41+
</html>

‎setup.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Run vuegg locally
2+
---
3+
4+
## Auto-run
5+
``` bash
6+
# install, build and serve
7+
npm run vuegg
8+
```
9+
Navigate to `localhost:5000` to serve (a production-ready) vuegg.
10+
11+
</br>
12+
13+
## Step-by-step setup
14+
15+
**1. Installation**
16+
17+
``` bash
18+
# install client & server dependencies
19+
npm run install:all
20+
21+
# OR install only client / server
22+
npm run install:client
23+
npm run install:server
24+
```
25+
26+
**2. Development**
27+
``` bash
28+
# serve vuegg-client with hot reload
29+
npm run client
30+
31+
# start vuegg-server (auto-restarts on changes)
32+
npm run server
33+
```
34+
Navigate to `localhost:8080` to serve *vuegg-client* with hot-reload (development server).
35+
36+
> For detailed explanation on how things work on the client side, checkout the **[vuejs-templates/webpack](http://vuejs-templates.github.io/webpack/)** guide and docs for **[vue-loader](http://vuejs.github.io/vue-loader)**.
37+
38+
> For development *vuegg-server* will only generate vuejs projects (it won't be serving *vuegg-client* resources). Auto-restart capabilities possible thanks to **[nodemon](https://github.com/remy/nodemon)**.
39+
40+
> The above commands should be run in separate terminal instances.
41+
42+
**3. Production**
43+
``` bash
44+
# build vuegg-client for production with minification
45+
npm run build
46+
47+
# start vuegg-server at localhost:5000
48+
npm run start
49+
```
50+
Navigate to `localhost:5000` to serve (a production-ready) vuegg.

‎static/.gitkeep

Whitespace-only changes.

‎static/android-chrome-192x192.png

4.4 KB
Loading

‎static/android-chrome-512x512.png

10.7 KB
Loading

‎static/apple-touch-icon.png

3.48 KB
Loading

‎static/browserconfig.xml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<browserconfig>
3+
<msapplication>
4+
<tile>
5+
<square150x150logo src="/mstile-150x150.png?v=QEMRoGOk0M"/>
6+
<TileColor>#2b6a73</TileColor>
7+
</tile>
8+
</msapplication>
9+
</browserconfig>

‎static/editor.png

225 KB
Loading

‎static/favicon-16x16.png

885 Bytes
Loading

‎static/favicon-32x32.png

1.49 KB
Loading

‎static/favicon.ico

14.7 KB
Binary file not shown.

‎static/main.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/manifest.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "vuegg",
3+
"icons": [
4+
{
5+
"src": "/android-chrome-192x192.png?v=QEMRoGOk0M",
6+
"sizes": "192x192",
7+
"type": "image/png"
8+
},
9+
{
10+
"src": "/android-chrome-512x512.png?v=QEMRoGOk0M",
11+
"sizes": "512x512",
12+
"type": "image/png"
13+
}
14+
],
15+
"theme_color": "#ffffff",
16+
"background_color": "#ffffff",
17+
"display": "standalone"
18+
}

‎static/mstile-144x144.png

2.97 KB
Loading

‎static/mstile-150x150.png

2.94 KB
Loading

‎static/mstile-310x150.png

3.11 KB
Loading

‎static/mstile-310x310.png

5.88 KB
Loading

‎static/mstile-70x70.png

2.28 KB
Loading

‎static/safari-pinned-tab.svg

+1
Loading

‎static/vuegg-fam.svg

+1
Loading

0 commit comments

Comments
 (0)