Flex is a visual and interactive approach to CSS styling. Flex allows the user to draw on a canvas, and then convert that into functional HTML/CSS code.

In Flex, users will be able to:

• Divide up a canvas into boxes, which are converted into real flexboxes
• Customize their boxes by rezising and adding text
• See the CSS generated from their canvas updated in real time
• Export a copy of the CSS code when they are finished

Day 1:

• Get webpack working
• Render a blank canvas assiciated with an html and CSS file
• Render the canvas CSS file on the screen

Day 2:

• Make canvas interactive
• • Clicking on canvas divides the box in half
• • • Adds the appropriate HTML/CSS
• • Smaller boxes can be clicked again
• • Implement a switch for horizonal and vertical divisions

Day 3:

• Allow boxes to be resized and changes CSS to match
• Allow text to be added and changes CSS to match

Day 4:

• Style the page to make it look professional

• Allow further customization
• • border
• • background color
• • font
• • etc