https://github.com/ghost---shadow/speed-flexbox

Generate flexbox boilerplate quickly
https://github.com/ghost---shadow/speed-flexbox

Last synced: about 1 hour ago
JSON representation

Generate flexbox boilerplate quickly

• Host: GitHub
• URL: https://github.com/ghost---shadow/speed-flexbox
• Owner: Ghost---Shadow
• License: mit
• Created: 2020-08-02T04:08:36.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-09-22T01:43:41.000Z (about 3 years ago)
• Last Synced: 2024-10-12T23:13:34.198Z (about 1 month ago)
• Language: JavaScript
• Homepage: https://ghost---shadow.github.io/speed-flexbox/
• Size: 18.1 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Speed Flexbox (early access)

Generate flex-box boilerplate quickly

## Usage

1. Visit the site hosted here 

2. Drag and drop an image of the design of your choice onto the canvas

![after drop](./docs/after-drop.png)

3. Slice the image into sections. These will be converted into the DOM hierarchy

![after slicing](./docs/after-slicing.png)

4. Add placeholders (ghosts) for any input fields, or labels or buttons. These will be connected with React states or props

![after ghosts](./docs/after-ghosts.png)

5. Click the code generation tab and select the generation plugin of your choice

![code gen 1](./docs/code-gen1.png)

![code gen 2](./docs/code-gen2.png)

6. Click the `Copy to Clipboard` button and copy the generated code to your file.

7. Rename the variables to human readable names (VSCode: Ctrl + Shift + L)

## Planned features

* More plugins

* More ghosts